/* ═══════════════════════════════════════════════════════════════════════════
 * course/course.css - the course-page design system.
 * One token set for every generated course surface (2026-08-04).
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ga-bg:#f7f7f8;--ga-surface:#fff;--ga-sidebar:#fafafa;--ga-hover:#f0f0f2;
  --ga-chip:#f4f4f5;--ga-divider:#e8e8ea;--ga-border:#dedee2;--ga-border-strong:#c9c9cf;
  --ga-text:#272727;--ga-muted:#6e6e6e;--ga-subtle:#929292;
  --ga-accent:#2f7cf6;--ga-accent-h:#1d6de2;
  --ga-green:#0f9d58;--ga-green-bg:#f0fdf4;
  --ga-amber:#e8822a;--ga-amber-bg:#fffbeb;
  --ga-red:#dc2626;--ga-red-bg:#fef2f2;
  --ga-cat-blue:#2f7cf6;--ga-cat-green:#2ab673;--ga-cat-purple:#6e56cf;--ga-cat-orange:#e8822a;--ga-cat-yellow:#e9b949;--ga-cat-red:#e4402c;
  --ga-topbar-h:52px;--ga-sidebar-w:260px;
  --ga-reading:700px;--ga-content:1280px;
  --ga-radius:8px;--ga-radius-sm:6px;
  --ga-shadow-sm:0 1px 2px rgba(39,39,39,0.06);
  --ga-shadow-md:0 1px 1px rgba(39,39,39,0.04),0 5px 15px rgba(39,39,39,0.06);
  --ga-shadow-lg:0 1px 2px rgba(39,39,39,0.05),0 16px 30px rgba(39,39,39,0.1);
  --ga-font:'Overused Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ga-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ga-dur-fast:.15s;--ga-dur-base:.2s;--ga-dur-slow:.25s;
  --ga-ease-out:cubic-bezier(.2,.8,.2,1);
}
.dark {
  --ga-bg:#111315;--ga-surface:#1a1d20;--ga-sidebar:#151617;--ga-hover:#242527;
  --ga-chip:#202123;--ga-divider:#2a2b2e;--ga-border:#36373b;--ga-border-strong:#4c4e54;
  --ga-text:#f2f4f7;--ga-muted:#a9b0ba;--ga-subtle:#747d89;
  --ga-accent:#3b82f6;--ga-accent-h:#60a5fa;
  --ga-green-bg:#052e16;--ga-amber-bg:#3b2e00;--ga-red-bg:#2e0808;
  --ga-shadow-sm:0 1px 2px rgba(0,0,0,0.2);
  --ga-shadow-md:0 1px 1px rgba(0,0,0,0.1),0 5px 15px rgba(0,0,0,0.2);
  --ga-shadow-lg:0 1px 2px rgba(0,0,0,0.15),0 16px 30px rgba(0,0,0,0.3);
}

*,*::before,*::after{box-sizing:border-box}
.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}
.sr-only:focus{position:fixed;top:0;left:0;width:auto;height:auto;padding:.5rem 1rem;clip:auto;background:var(--ga-accent);color:#fff;z-index:1000}

body{margin:0;font-family:var(--ga-font);font-size:1rem;line-height:1.6;color:var(--ga-text);background:var(--ga-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ── header ──────────────────────────────────────────────────────────────── */
.fn-header{position:sticky;top:0;z-index:50;height:var(--ga-topbar-h);background:color-mix(in srgb,var(--ga-bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color var(--ga-dur-base)}
.fn-header.is-scrolled{border-color:var(--ga-border)}
.fn-header-inner{max-width:var(--ga-content);margin:0 auto;padding:0 1rem;display:flex;align-items:center;height:100%;gap:2rem}
/* Wordmark only. The square-K glyph that used to sit inside this anchor was
   stripped from every page on purpose - the type IS the logo. Sized a step
   above the nav links so it still reads as the brand rather than as one more
   item in the row, and the icon gap is gone with the icon. Do not re-add a mark. */
.fn-brand{display:flex;align-items:center;font-weight:600;font-size:1rem;letter-spacing:-.02em;color:var(--ga-text);text-decoration:none;white-space:nowrap;flex-shrink:0;transition:opacity var(--ga-dur-fast)}
.fn-brand:hover{opacity:.8}
.fn-nav{display:flex;align-items:center;gap:.125rem;flex:1}
.fn-nav a{font-size:.8125rem;color:var(--ga-muted);text-decoration:none;font-weight:500;padding:.375rem .625rem;border-radius:var(--ga-radius-sm);transition:color var(--ga-dur-fast),background var(--ga-dur-fast)}
.fn-nav a:hover{color:var(--ga-text);background:var(--ga-hover)}
.fn-nav .fn-nav-active{color:var(--ga-text)}
.fn-nav .fn-nav-dropdown{position:relative}
.fn-nav .fn-nav-dropdown > a{display:flex;align-items:center;gap:.25rem}
.fn-nav .fn-nav-dropdown > a::after{content:'';display:inline-block;width:10px;height:10px;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;background:currentColor;transition:transform var(--ga-dur-fast)}
.fn-nav .fn-nav-dropdown:hover > a::after{transform:rotate(180deg)}
.fn-nav .fn-dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:200px;background:var(--ga-surface);border:1px solid var(--ga-border);border-radius:var(--ga-radius);box-shadow:var(--ga-shadow-md);padding:.25rem;z-index:60;margin-top:.25rem}
.fn-nav .fn-nav-dropdown:hover .fn-dropdown-menu{display:block}
.fn-nav .fn-dropdown-menu a{display:block;padding:.5rem .75rem;font-size:.8125rem;color:var(--ga-text);text-decoration:none;border-radius:var(--ga-radius-sm);white-space:nowrap}
.fn-nav .fn-dropdown-menu a:hover{background:var(--ga-hover)}
.fn-nav .fn-dropdown-menu .fn-drop-meta{font-size:.625rem;color:var(--ga-subtle);font-family:var(--ga-mono);padding:.25rem .75rem .5rem}
.fn-header-right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.fn-theme-btn{background:none;border:none;cursor:pointer;color:var(--ga-muted);padding:.375rem;border-radius:var(--ga-radius-sm);display:flex;align-items:center;transition:color var(--ga-dur-fast),background var(--ga-dur-fast)}
.fn-theme-btn:hover{color:var(--ga-text);background:var(--ga-hover)}
.fn-theme-btn svg{width:18px;height:18px}
.fn-btn-sm{background:var(--ga-text);color:var(--ga-bg);padding:.375rem .875rem;border-radius:var(--ga-radius-sm);font-size:.8125rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:opacity var(--ga-dur-fast);line-height:normal}
.fn-btn-sm:hover{opacity:.85}

/* ── layout ──────────────────────────────────────────────────────────────── */
.fn-layout{max-width:var(--ga-content);margin:0 auto;display:flex;min-height:calc(100vh - var(--ga-topbar-h))}
.fn-sidebar{width:var(--ga-sidebar);flex-shrink:0;background:var(--ga-sidebar);border-right:1px solid var(--ga-divider);position:sticky;top:var(--ga-topbar-h);height:calc(100vh - var(--ga-topbar-h));overflow-y:auto;display:flex;flex-direction:column}
.fn-content{flex:1;min-width:0;padding:2rem 1.5rem 4rem;max-width:860px}

/* ── scroll progress ─────────────────────────────────────────────────────── */
.fn-progress{height:2px;background:var(--ga-divider);flex-shrink:0}
.fn-progress-fill{height:100%;background:var(--ga-accent);width:0;transition:width .1s linear;will-change:width}

/* ── sidebar ─────────────────────────────────────────────────────────────── */
.fn-sidebar-nav{flex:1;overflow-y:auto;padding:0 0 .5rem}
.fn-sidebar-foot{padding:.625rem 1rem;border-top:1px solid var(--ga-divider);font-size:.6875rem;color:var(--ga-subtle);font-family:var(--ga-mono)}
.fn-mod-group{border-bottom:1px solid var(--ga-divider)}
.fn-mod-toggle{width:100%;display:flex;align-items:center;gap:.375rem;padding:.4rem .75rem;background:none;border:none;cursor:pointer;font-family:var(--ga-font);font-size:.75rem;color:var(--ga-text);text-align:left;transition:background var(--ga-dur-fast);border-radius:0}
.fn-mod-toggle:hover{background:var(--ga-hover)}
.fn-mod-num{font-family:var(--ga-mono);font-size:.625rem;color:var(--ga-accent);font-weight:600;min-width:1.5rem}
.fn-mod-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn-mod-count{font-family:var(--ga-mono);font-size:.625rem;color:var(--ga-subtle)}
.fn-chevron{width:14px;height:14px;flex-shrink:0;transition:transform var(--ga-dur-fast) var(--ga-ease-out)}
.fn-chevron.open{transform:rotate(180deg)}
.fn-mod-lessons{list-style:none;padding:0;margin:0}
.fn-mod-lessons li{padding:.25rem .75rem .25rem 2.25rem;font-size:.75rem}
.fn-mod-lessons li a{color:var(--ga-muted);text-decoration:none;display:block;padding:.125rem 0}
.fn-mod-lessons li a:hover{color:var(--ga-text)}
.fn-mod-lessons .fn-mod-active{background:var(--ga-hover)}
.fn-mod-lessons .fn-mod-active a{color:var(--ga-text);font-weight:500}

/* ── breadcrumbs ─────────────────────────────────────────────────────────── */
.fn-breadcrumb{display:flex;align-items:center;gap:.125rem;font-size:.75rem;color:var(--ga-subtle);margin-bottom:1.5rem;flex-wrap:wrap}
.fn-breadcrumb a{color:var(--ga-subtle);text-decoration:none;transition:color var(--ga-dur-fast)}
.fn-breadcrumb a:hover{color:var(--ga-text)}
.fn-breadcrumb span{color:var(--ga-subtle);margin:0 .125rem}

/* ── content ─────────────────────────────────────────────────────────────── */
.fn-content h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .5rem;line-height:1.25}
.fn-outcome,.fn-lede{font-size:1rem;color:var(--ga-muted);margin:0 0 1.5rem;line-height:1.6}
.fn-outcome{margin-bottom:2rem}

/* ── lesson nav ──────────────────────────────────────────────────────────── */
.fn-lesson-nav{display:flex;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--ga-border)}
.fn-lesson-nav a{flex:1;text-decoration:none;color:var(--ga-text);font-size:.875rem;padding:.875rem 1rem;border:1px solid var(--ga-border);border-radius:var(--ga-radius);transition:border-color var(--ga-dur-fast),box-shadow var(--ga-dur-fast);display:flex;align-items:center}
.fn-lesson-nav a:hover{border-color:var(--ga-accent);box-shadow:var(--ga-shadow-sm)}
.fn-lesson-prev{justify-content:flex-start;gap:.5rem}
.fn-lesson-next{justify-content:flex-end;gap:.5rem;text-align:right}

/* ── module page ─────────────────────────────────────────────────────────── */
.fn-module-meta{font-size:.8125rem;color:var(--ga-subtle);margin-bottom:1.5rem}
.fn-lesson-list{display:flex;flex-direction:column}
.fn-lesson-row{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;text-decoration:none;border-bottom:1px solid var(--ga-divider);transition:background var(--ga-dur-fast);border-radius:4px;color:var(--ga-text)}
.fn-lesson-row:hover{background:var(--ga-hover)}
.fn-lesson-num{font-family:var(--ga-mono);font-size:.6875rem;color:var(--ga-subtle);min-width:2.75rem;flex-shrink:0}
.fn-lesson-title{flex:1;font-size:.8125rem;font-weight:500}
.fn-lesson-badges{display:flex;gap:.375rem;flex-shrink:0;align-items:center}
.fn-lesson-badge{font-size:.625rem;color:var(--ga-subtle)}
.fn-lock-icon{display:inline-flex;align-items:center;flex-shrink:0}
.fn-lock-icon svg{display:block}
.fn-lock-free{color:var(--ga-green)}

/* ── curriculum expandable cards ─────────────────────────────────────────── */
.fn-cur-module{margin-bottom:2.5rem}
.fn-cur-mod-head{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.375rem}
.fn-cur-mod-head h2{font-size:1.125rem;font-weight:700;margin:0}
.fn-cur-mod-head h2 a{color:var(--ga-text);text-decoration:none;transition:color var(--ga-dur-fast)}
.fn-cur-mod-head h2 a:hover{color:var(--ga-accent)}
.fn-cur-mod-count{font-size:.6875rem;color:var(--ga-subtle);font-family:var(--ga-mono);white-space:nowrap}
.fn-cur-mod-goal{font-size:.8125rem;color:var(--ga-muted);margin:0 0 .75rem}

.fn-expandable{border:1px solid var(--ga-border);border-radius:var(--ga-radius-sm);overflow:hidden;transition:border-color var(--ga-dur-fast),box-shadow var(--ga-dur-fast)}
.fn-expandable:has(.fn-expand-row[aria-expanded="true"]){border-color:var(--ga-border-strong);box-shadow:var(--ga-shadow-sm)}
.fn-expand-row{width:100%;display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;background:var(--ga-surface);border:none;cursor:pointer;font-family:var(--ga-font);font-size:.8125rem;color:var(--ga-text);text-align:left;transition:background var(--ga-dur-fast);border-radius:0}
.fn-expand-row:hover{background:var(--ga-hover)}
.fn-expand-link{text-decoration:none}
.fn-expand-link:hover{background:var(--ga-hover)}
.fn-expand-num{font-family:var(--ga-mono);font-size:.6875rem;color:var(--ga-subtle);min-width:2.5rem;flex-shrink:0}
.fn-expand-title{font-weight:600;flex-shrink:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn-expand-outcome{flex:1;color:var(--ga-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem}
.fn-expand-badges{display:flex;gap:.25rem;flex-shrink:0}
.fn-expand-body{padding:.5rem .75rem .75rem;background:var(--ga-bg);border-top:1px solid var(--ga-divider)}

/* ── video ───────────────────────────────────────────────────────────────── */
.kv-video{border:1px solid var(--ga-border);border-radius:var(--ga-radius);overflow:hidden;margin-bottom:.75rem}
.kv-embed{position:relative;width:100%;padding-top:56.25%;background:#000}
.kv-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.kv-meta{padding:.375rem .625rem 0}
.kv-title{font-size:.8125rem;font-weight:600;color:var(--ga-text);display:block;line-height:1.4}
.kv-channel{font-size:.6875rem;color:var(--ga-muted);margin-top:.1rem;display:block}
.kv-yt-link{display:block;padding:.1rem .625rem .5rem;font-size:.625rem;color:var(--ga-subtle);text-decoration:none;transition:color var(--ga-dur-fast)}
.kv-yt-link:hover{color:var(--ga-accent)}

/* ── notes ───────────────────────────────────────────────────────────────── */
.kv-notes{margin-top:1rem}
.kv-notes h2{font-size:1rem;font-weight:700;margin:1rem 0 .5rem}
.kv-notes p{font-size:.875rem;line-height:1.7;color:var(--ga-text);margin:0 0 .5rem}

/* ── badges ──────────────────────────────────────────────────────────────── */
.kv-badge{display:inline-block;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:.125rem .375rem;border-radius:4px;margin-left:.375rem;vertical-align:middle}
.kv-badge-free{background:var(--ga-green-bg);color:var(--ga-green)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.fn-footer{border-top:1px solid var(--ga-border);padding:1.25rem 1.5rem}
.fn-footer-inner{max-width:var(--ga-content);margin:0 auto;display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:var(--ga-muted)}
.fn-footer nav{display:flex;gap:1rem}
.fn-footer a{color:var(--ga-muted);text-decoration:none;transition:color var(--ga-dur-fast)}
.fn-footer a:hover{color:var(--ga-text)}

/* ── back to top ─────────────────────────────────────────────────────────── */
.fn-back-top{position:fixed;bottom:3rem;right:1rem;z-index:30;width:34px;height:34px;border-radius:50%;background:var(--ga-surface);border:1px solid var(--ga-border);box-shadow:var(--ga-shadow-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--ga-dur-base),box-shadow var(--ga-dur-fast)}
.fn-back-top:hover{box-shadow:var(--ga-shadow-md)}
.fn-back-top svg{width:14px;height:14px;color:var(--ga-muted)}

/* ── homepage ────────────────────────────────────────────────────────────── */
.fn-home{max-width:var(--ga-content);margin:0 auto;padding:0 1rem}
.fn-hero{padding:5rem 0 3rem;text-align:center}
.fn-hero h1{font-size:3.25rem;font-weight:800;letter-spacing:-.03em;margin:0 0 1rem;line-height:1.15}
.fn-hero .fn-lede{font-size:1.0625rem;color:var(--ga-muted);max-width:560px;margin:0 auto 2rem;line-height:1.65}
.fn-hero-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.fn-btn-primary{background:var(--ga-text);color:var(--ga-bg);padding:.5rem 1.25rem;border-radius:var(--ga-radius-sm);text-decoration:none;font-weight:600;font-size:.875rem;display:inline-flex;align-items:center;gap:.5rem;transition:opacity var(--ga-dur-fast);line-height:normal}
.fn-cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:1rem;padding:2.5rem 0}
.fn-card{background:var(--ga-surface);border:1px solid var(--ga-border);border-radius:12px;padding:1.5rem;text-decoration:none;transition:box-shadow var(--ga-dur-base),border-color var(--ga-dur-base);display:flex;flex-direction:column}
.fn-card:hover{box-shadow:var(--ga-shadow-lg);border-color:var(--ga-border-strong)}
.fn-card .fn-card-acc{width:28px;height:3px;border-radius:2px;margin-bottom:1rem}
.fn-card h3{font-size:1.0625rem;font-weight:700;color:var(--ga-text);margin:0 0 .375rem}
.fn-card p{font-size:.75rem;color:var(--ga-muted);line-height:1.55;margin:0 0 1rem;flex:1}
.fn-card .fn-card-stat{font-size:.6875rem;color:var(--ga-subtle);display:flex;gap:.75rem;font-family:var(--ga-mono)}
.fn-blog{padding:3rem 0}
.fn-blog h2{font-size:1.375rem;font-weight:700;margin:0 0 1rem}
.fn-blog-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:1rem}
.fn-blog-card{border:1px solid var(--ga-border);border-radius:var(--ga-radius);padding:1rem 1.25rem;text-decoration:none;display:block;transition:box-shadow var(--ga-dur-base),border-color var(--ga-dur-base)}
.fn-blog-card:hover{box-shadow:var(--ga-shadow-md);border-color:var(--ga-border-strong)}
.fn-blog-card h4{font-size:.9375rem;font-weight:600;color:var(--ga-text);margin:0 0 .25rem}
.fn-blog-card .fn-blog-meta{font-size:.6875rem;color:var(--ga-subtle);font-family:var(--ga-mono)}
.fn-cta{padding:4rem 0;text-align:center}
.fn-cta h2{font-size:1.75rem;font-weight:700;margin:0 0 .5rem}
.fn-cta p{color:var(--ga-muted);margin-bottom:1.5rem}

/* ── pricing ─────────────────────────────────────────────────────────────── */
.fn-pricing-page{max-width:var(--ga-content);margin:0 auto;padding:4rem 1.5rem 5rem}
.fn-pricing-head{text-align:center;margin-bottom:3rem}
.fn-pricing-head h1{font-size:2.5rem;font-weight:700;margin:0 0 .75rem;letter-spacing:-.03em}
.fn-pricing-head p{color:var(--ga-fg2);font-size:1.0625rem;max-width:52ch;margin:0 auto;line-height:1.6}
.fn-plans{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:var(--ga-space-5);margin-bottom:2.5rem;max-width:800px;margin-inline:auto}
.fn-plan{position:relative;background:var(--ga-surface);border:1px solid var(--ga-border);border-radius:var(--ga-radius-xl);padding:var(--ga-space-8);display:flex;flex-direction:column;box-shadow:var(--ga-shadow-sm);transition:box-shadow var(--ga-dur-base)}
.fn-plan.is-hero{border-color:var(--ga-accent);box-shadow:var(--ga-shadow-lg);outline:2px solid var(--ga-accent);outline-offset:-2px}
.fn-plan-eyebrow{font-family:var(--ga-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--ga-fg3);margin-bottom:.375rem}
.fn-plan-badge{position:absolute;top:0;right:var(--ga-space-6);transform:translateY(-50%);background:var(--ga-accent);color:#fff;font-family:var(--ga-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:var(--ga-radius-full)}
.fn-plan h3{font-size:1.125rem;font-weight:700;margin:0 0 .25rem}
.fn-plan .fn-price{font-size:2.5rem;font-weight:700;margin:.25rem 0 0;letter-spacing:-.03em}
.fn-plan .fn-price-sub{font-size:.8125rem;color:var(--ga-muted);margin-bottom:var(--ga-space-5)}
.fn-plan ul{list-style:none;padding:0;margin:0 0 var(--ga-space-5);flex:1;display:flex;flex-direction:column;gap:var(--ga-space-2)}
.fn-plan li{padding:0;font-size:.875rem;color:var(--ga-fg2);display:flex;gap:var(--ga-space-2);align-items:flex-start;line-height:1.4}
.fn-plan li svg{flex:none;color:var(--ga-green);margin-top:3px}
.fn-plan .fn-btn,.fn-plan .fn-btn-primary,.fn-plan .fn-btn-secondary{display:flex;align-items:center;justify-content:center;text-align:center}
.fn-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem 1.25rem;border-radius:8px;font-size:.875rem;font-weight:600;text-decoration:none;transition:all var(--ga-dur-fast);width:100%;box-sizing:border-box}
.fn-btn-primary{background:var(--ga-text);color:var(--ga-bg)}
.fn-btn-primary:hover{opacity:.85}
.fn-btn-outline{border:1.5px solid var(--ga-border);color:var(--ga-text);background:transparent}
.fn-btn-outline:hover{background:var(--ga-hover);border-color:var(--ga-border-strong)}
.fn-coupon-row{display:flex;gap:.375rem;margin-top:.75rem}
.fn-coupon-row input{flex:1;padding:.375rem .5rem;border:1px solid var(--ga-border);border-radius:var(--ga-radius-sm);font-size:.8125rem;font-family:var(--ga-font);background:var(--ga-bg);color:var(--ga-text)}
.fn-coupon-row input:focus{outline:none;border-color:var(--ga-accent)}
.fn-coupon-row button{padding:.375rem .75rem;background:var(--ga-chip);border:none;border-radius:var(--ga-radius-sm);cursor:pointer;font-size:.75rem;font-weight:600;color:var(--ga-text);font-family:var(--ga-font);white-space:nowrap;transition:background var(--ga-dur-fast)}
.fn-coupon-row button:hover{background:var(--ga-divider)}
.fn-social-proof{text-align:center;padding:1.5rem 0}
.fn-social-proof .fn-logos{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;font-size:.75rem;color:var(--ga-subtle);font-weight:500;margin-top:1rem;font-family:var(--ga-mono)}
.fn-faq{max-width:640px;margin:4rem auto 0}
.fn-faq h2{font-size:1.25rem;font-weight:700;margin-bottom:1.25rem}
.fn-faq dt{font-weight:600;font-size:.9375rem;color:var(--ga-text);margin-top:1.25rem}
.fn-faq dd{font-size:.875rem;color:var(--ga-fg2);line-height:1.65;margin:.25rem 0 0}

/* ── blog page ───────────────────────────────────────────────────────────── */
.fn-blog-page{max-width:700px;margin:0 auto;padding:2.5rem 1rem 4rem}
.fn-blog-page h1{font-size:2rem;font-weight:700;margin:0 0 .25rem}
.fn-blog-page .fn-lede{font-size:.9375rem;color:var(--ga-muted);margin-bottom:2rem}
.fn-blog-list{display:flex;flex-direction:column;gap:1.5rem}
.fn-blog-item{padding-bottom:1.5rem;border-bottom:1px solid var(--ga-divider)}
.fn-blog-item h2{font-size:1.125rem;font-weight:600;margin:0 0 .125rem}
.fn-blog-item h2 a{text-decoration:none;color:var(--ga-text);transition:color var(--ga-dur-fast)}
.fn-blog-item h2 a:hover{color:var(--ga-accent)}
.fn-blog-item .fn-blog-meta{font-size:.6875rem;color:var(--ga-subtle);margin-bottom:.375rem;font-family:var(--ga-mono)}
.fn-blog-item p{font-size:.875rem;color:var(--ga-muted);line-height:1.6;margin:0}
.fn-blog-item .fn-blog-tag{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ga-accent);background:color-mix(in srgb,var(--ga-accent) 10%,transparent);padding:.1rem .375rem;border-radius:3px;margin-right:.375rem}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .fn-sidebar{display:none}
  .fn-content{max-width:100%;padding:1.5rem 1rem 3rem}
}
@media(max-width:768px){
  .fn-header-inner{padding:0 .75rem;gap:1rem}
  .fn-content h1{font-size:1.5rem}
  .fn-hero h1{font-size:2rem}
  .fn-expand-title{max-width:100px}
  .fn-expand-outcome{display:none}
  .fn-lesson-nav{flex-direction:column}
  .fn-plans{grid-template-columns:1fr}
}

/* ── the header, on a phone ────────────────────────────────────────────────
   The only mobile rule this bar ever had was "make the type smaller", so the
   six-item link row simply kept going past the right edge: measured 442px of
   scrollWidth on a 390px viewport, with the "Get started" button cut off
   mid-word on every one of the 61 /ai-course pages.

   These are static pages with no framework, so there is no drawer to open.
   The row becomes a horizontal scroller instead - every destination stays
   reachable, nothing is hidden, and it costs no markup change (which matters:
   the markup is regenerated by scripts/build-course-seo.mjs, this stylesheet
   is not).

   The hover dropdown goes: it opens on :hover, and a touch device has no
   hover, so on a phone it was an inert link to "#". The courses it listed are
   in the footer of the same page. */
@media(max-width:860px){
  html,body{overflow-x:hidden}
  /* The bar becomes two rows rather than one squeezed one: brand + controls on
     top, the link row underneath. Squeezing put "Pricing" half under the
     "Get started" button, which reads as a broken page rather than as a
     scroller the reader is meant to swipe. `height:auto` is required - the
     base rule pins the bar to --ga-topbar-h. */
  .fn-header{height:auto}
  .fn-header-inner{flex-wrap:wrap;gap:.5rem .75rem;padding-block:.5rem}
  .fn-nav{
    order:3;
    flex:1 0 100%;
    min-width:0;
    gap:.125rem;
    /* Still a scroller, for the narrowest phones where four links plus their
       targets do not fit 343px. */
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .fn-nav::-webkit-scrollbar{display:none}
  .fn-nav a{
    flex:none;
    font-size:.8125rem;
    padding:.5rem .5rem;
    white-space:nowrap;
    /* WCAG 2.2 target size. These were ~19px tall. */
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .fn-nav .fn-nav-dropdown{display:none}
  .fn-header-right{flex:none;gap:.25rem}
  .fn-theme-btn{min-width:44px;min-height:44px}
  .fn-brand,.fn-btn-sm,.fn-btn,.fn-footer a,.fn-lesson-nav a{
    min-height:44px;min-width:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }
}

/* Every link on an /ai-course page is a NAVIGATION link in a list, not a link
   inside a sentence, so the WCAG 2.5.8 inline exception does not apply to any
   of them - and they were all about 21px tall. inline-flex keeps them
   inline-level (a lesson row is "link - one-line outcome"), while min-height
   gives the row the target. */
@media (pointer: coarse) {
  .ac-crumb a,
  .ac-videos li > a,
  .ac ol > li > a,
  .ac ul > li > a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}

/* ── /ai-course/**: the 61 generated pages ─────────────────────────────────
   `.ac`, `.ac-crumb`, `.ac-videos`, `.ac-why`, `.ac-gate`, `.ac-outcome`,
   `.ac-unbuilt`, `.ac-soon` and `.lede` had NO rules anywhere. The pages
   therefore rendered as raw browser defaults: a 2em h1, #0000EE links, disc
   bullets and full-viewport-width paragraphs, at every screen size. They are
   indexed, they are the free tier of a ₹5,000 product, and they are what a
   search visitor sees first.

   One reading column, sized in ch so the measure is right at any width,
   rather than a second layout system. */
.ac{
  max-width:var(--ga-reading);
  margin:0 auto;
  padding:2rem 1.5rem 4rem;
}
.ac h1{
  /* Was a browser-default 2em with no mobile branch: 32px over a 358px column
     is fine, the 48px it became on a tablet was not. */
  font-size:clamp(1.75rem,4.5vw,2.5rem);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .75rem;
}
.ac h2{
  font-size:clamp(1.125rem,2.6vw,1.375rem);
  line-height:1.3;
  margin:2.5rem 0 .5rem;
}
.ac h2 a{color:inherit;text-decoration:none}
.ac h2 a:hover{color:var(--ga-accent)}
.ac p{margin:0 0 1rem;color:var(--ga-muted)}
.ac a{color:var(--ga-accent);text-decoration:none}
.ac a:hover{text-decoration:underline;text-underline-offset:2px}
.ac .lede{font-size:1.0625rem;color:var(--ga-text)}

/* NOT flex. The generator writes the "›" separators as bare text nodes between
   the links, and in a flex container each of those becomes its own anonymous
   flex item - so on a phone the chevron wrapped onto a line of its own, ahead
   of the crumb it belongs to. Plain inline flow wraps it with the text. */
.ac-crumb{
  margin-bottom:1.25rem;
  font-size:.8125rem;
  line-height:1.9;
  color:var(--ga-subtle);
}
.ac-crumb a{color:var(--ga-muted)}

.ac-prereq{font-size:.875rem}

.ac ul,.ac ol{margin:0 0 1rem;padding-left:1.25rem}
.ac li{margin-bottom:.75rem;color:var(--ga-muted);line-height:1.55}
.ac li a{font-weight:500}
.ac-videos{list-style:none;padding-left:0}
.ac-videos li{
  padding:.875rem 1rem;
  border:1px solid var(--ga-border);
  border-radius:var(--ga-radius);
  background:var(--ga-surface);
}
.ac-why,.ac-outcome{display:block;margin-top:.25rem;font-size:.875rem;color:var(--ga-subtle)}

.ac-unbuilt{color:var(--ga-subtle)}
.ac-soon{
  display:inline-block;
  margin-left:.25rem;
  padding:.05rem .375rem;
  border-radius:3px;
  background:var(--ga-hover);
  font-family:var(--ga-mono);
  font-size:.625rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ga-subtle);
  white-space:nowrap;
}

/* The paywall line is the page's call to action, so it is a button rather than
   a sentence that happens to be blue. Full width on a phone. */
.ac-gate{margin-top:2rem}
.ac-gate a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.75rem 1.25rem;
  border-radius:var(--ga-radius);
  background:var(--ga-accent);
  color:#fff;
  font-weight:600;
  font-size:.9375rem;
  text-align:center;
  text-decoration:none;
}
.ac-gate a:hover{opacity:.9;text-decoration:none}

@media(max-width:600px){
  .ac{padding:1.5rem 1rem 3.5rem}
  .ac h2{margin-top:2rem}
  .ac ul,.ac ol{padding-left:1.125rem}
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE PHYSICAL KEY - a PORT of site/src/styles/keys.css for this cascade.

   These 61 generated /ai-course/** pages and /book do not load the Vite app's
   stylesheet. They link this file, which declares its OWN :root with the same
   --ga-* names and different values - so keys.css cannot simply be imported:
   it reads --ga-fg1, --ga-key-*, --ga-space-*, --ga-r-*, --ga-target-min and
   --ga-success, none of which exist here (this file says --ga-text,
   --ga-radius-sm, --ga-font, --ga-green).

   IT IS THEREFORE A SECOND COPY, and that is a real cost, stated rather than
   hidden. The alternative was a shared file linked from course/_template.html,
   which means regenerating all 61 pages on every recipe change. This cascade
   is scheduled for deletion at the SSG cutover; when it goes, delete this
   block with it. Until then: CHANGE BOTH, and the numbers below are the ones
   that have to agree - edge 78%, face 96/92, hover 86/80, lip 68%.

   @font-face is here because course.css has always declared
   `--ga-font: 'Overused Grotesk'` and NOTHING EVER LOADED IT. The template
   links Inter from Google Fonts, so every one of these pages has been
   rendering in the -apple-system fallback while claiming otherwise. The woff2
   files are already served at /fonts/ for the app.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Overused Grotesk';src:url('/fonts/OverusedGrotesk-Book.woff2') format('woff2');font-weight:350;font-display:swap}
@font-face{font-family:'Overused Grotesk';src:url('/fonts/OverusedGrotesk-Roman.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Overused Grotesk';src:url('/fonts/OverusedGrotesk-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Overused Grotesk';src:url('/fonts/OverusedGrotesk-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

/* The tone ramps, in this cascade's vocabulary. --ga-text is the app's
   --ga-fg1 and flips #272727 -> #f2f4f7, so the ink tone self-flips here for
   the same reason it does there. --ga-key-emph is the one mix target that
   points at the PAGE rather than at a light source; see keys.css. */
:root{
  --ga-key-emph:#000;
  --fn-key-ink-edge:var(--ga-text);
  --fn-key-ink-from:var(--ga-text);
  --fn-key-ink-to:color-mix(in srgb,var(--ga-text) 90%,#000);
  --fn-key-ink-hover-from:color-mix(in srgb,var(--ga-text) 88%,var(--ga-key-emph));
  --fn-key-ink-hover-to:color-mix(in srgb,var(--ga-text) 78%,var(--ga-key-emph));
  --fn-key-ink-lip:color-mix(in srgb,var(--ga-text) 30%,#000);
  --fn-key-neutral-edge:color-mix(in srgb,var(--ga-muted) 84%,var(--ga-surface));
  --fn-key-neutral-lip:#cfcfcf;
  --fn-key-gloss:color-mix(in srgb,#fff 34%,transparent);
}
.dark{
  --ga-key-emph:#fff;
  --fn-key-ink-lip:color-mix(in srgb,var(--ga-text) 64%,#000);
  --fn-key-neutral-lip:#000;
  --fn-key-gloss:transparent;
}

/* The recipe. Four layers: a hairline edge, a shallow gradient face, a 1px
   inset gloss along the top and a 3px inset lip along the bottom that
   collapses to 1px while the cap drops 1px on press. */
.fn-btn,.fn-btn-sm,.fn-btn-primary,.fn-btn-outline,.fn-theme-btn,.fn-back-top{
  --fn-lip-h:3px;
  font-family:var(--ga-font);
  border:.5px solid var(--fn-key-neutral-edge);
  background:linear-gradient(var(--ga-surface),color-mix(in srgb,var(--ga-surface) 96%,#000));
  color:var(--ga-text);
  box-shadow:var(--ga-shadow-sm),inset 0 calc(-1 * var(--fn-lip-h)) var(--fn-key-neutral-lip);
  transition:background .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s cubic-bezier(.2,.8,.2,1),border-color .15s cubic-bezier(.2,.8,.2,1);
}
.fn-btn:hover,.fn-btn-outline:hover,.fn-theme-btn:hover,.fn-back-top:hover{
  background:var(--ga-hover);
}
.fn-btn:active,.fn-btn-sm:active,.fn-btn-primary:active,.fn-btn-outline:active,.fn-theme-btn:active,.fn-back-top:active{
  --fn-lip-h:1px;transform:translateY(1px);
}
/* The ink cap: the two that commit to something. Its hover is ELEVATION, not
   colour - a near-black or near-white face has nowhere to move. The old rule
   here was `opacity:.85`, which fades the label toward the page and reads as
   the button becoming LESS available. */
.fn-btn-sm,.fn-btn-primary{
  border-color:var(--fn-key-ink-edge);
  background:linear-gradient(var(--fn-key-ink-from),var(--fn-key-ink-to));
  color:var(--ga-bg);
  box-shadow:var(--ga-shadow-md),inset 0 1px 1px var(--fn-key-gloss),inset 0 calc(-1 * var(--fn-lip-h)) var(--fn-key-ink-lip);
}
.fn-btn-sm:hover,.fn-btn-primary:hover{
  opacity:1;
  background:linear-gradient(var(--fn-key-ink-hover-from),var(--fn-key-ink-hover-to));
  box-shadow:var(--ga-shadow-lg),inset 0 1px 1px var(--fn-key-gloss),inset 0 calc(-1 * var(--fn-lip-h)) var(--fn-key-ink-lip);
}
.dark .fn-btn-sm,.dark .fn-btn-primary{--fn-key-gloss:transparent}
/* The round FAB keeps its shape; the theme square keeps its. */
.fn-back-top{border-radius:50%}
.fn-theme-btn{border-radius:var(--ga-radius-sm)}