/* ============================================================
   StudyLab — design system
   Hand-authored, self-contained. No build framework required.
   Tokens mirror the original site; extend here freely.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/8d697b304b401681.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/ba015fad6dcf6784.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/4cf2300e9c8272f7.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/9610d9e46709d722.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/747892c23ea88013.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/93f479601ee12b01.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/47f136985ef5b5cb-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/28a2004cf8372660-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/47f136985ef5b5cb-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/28a2004cf8372660-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}

/* ---------- Theme tokens ---------- */
:root{
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme=dark]{
  --bg:#070707;--bg-elevated:#0f0f10;--bg-cell:#0c0c0d;--bg-cell-hover:#141416;
  --border:#1a1a1c;--border-strong:#2a2a2e;
  --text:#f5f5f5;--text-muted:#8f8f94;--text-faint:#4a4a50;
  --accent:#fff;--accent-warm:#e8c547;--focus:hsla(0,0%,100%,.4);
  --shadow:0 24px 80px -20px rgba(0,0,0,.7);
  /* champagne gold accent (base #C6A15B, tuned brighter for dark bg) */
  --gold:#cba75c;
  --gold-soft:color-mix(in srgb,var(--gold) 42%,transparent);
  --gold-faint:color-mix(in srgb,var(--gold) 18%,transparent);
}
[data-theme=light]{
  --bg:#f7f6f3;--bg-elevated:#fff;--bg-cell:#fff;--bg-cell-hover:#f0eeea;
  --border:#e3e0da;--border-strong:#c9c5bc;
  --text:#0a0a0a;--text-muted:#5a5a5a;--text-faint:#999;
  --accent:#0a0a0a;--accent-warm:#8a6d1f;--focus:rgba(0,0,0,.4);
  --shadow:0 24px 80px -24px rgba(40,36,28,.28);
  /* champagne gold accent (deeper for contrast on light bg) */
  --gold:#9a7b33;
  --gold-soft:color-mix(in srgb,var(--gold) 50%,transparent);
  --gold-faint:color-mix(in srgb,var(--gold) 22%,transparent);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:1.5px solid var(--focus);outline-offset:2px;border-radius:2px}
::selection{background:var(--text);color:var(--bg)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- Layout primitives ---------- */
.page{min-height:100dvh;display:flex;flex-direction:column}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:1.5rem}
@media (min-width:768px){.wrap{padding-inline:2.5rem}}
main{flex:1}

.meta-label{
  font-family:var(--font-mono);
  font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
}
.site-header__inner{
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  max-width:var(--maxw);margin-inline:auto;padding-inline:1.5rem;
}
@media (min-width:768px){.site-header__inner{height:76px;padding-inline:2.5rem}}
.wordmark{display:inline-flex;align-items:center;color:var(--text);opacity:.95;transition:opacity .2s}
.wordmark:hover{opacity:1}
.wordmark svg{width:128px;height:auto}
@media (min-width:768px){.wordmark svg{width:140px}}
.site-nav{display:none;align-items:center;gap:.25rem}
@media (min-width:768px){.site-nav{display:flex}}
.site-nav a{padding:.5rem 1rem;color:var(--text-muted);transition:color .2s}
.site-nav a:hover{color:var(--text)}
.nav-sep{width:1px;height:14px;background:var(--border-strong)}
.header-actions{display:flex;align-items:center;gap:1rem}

/* Theme toggle */
.theme-toggle{
  width:38px;height:38px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);color:var(--text-muted);
  transition:color .2s,border-color .2s,background .2s;
}
.theme-toggle:hover{color:var(--text);border-color:var(--text-faint)}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme=light] .theme-toggle .icon-sun{display:block}
[data-theme=light] .theme-toggle .icon-moon{display:none}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border-strong);margin-top:4rem;background:var(--bg)}
.site-footer__inner{
  max-width:var(--maxw);margin-inline:auto;padding:2.5rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;
}
@media (min-width:768px){.site-footer__inner{padding-inline:2.5rem}}
.site-footer a.meta-label:hover{color:var(--text)}
.footer-links{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5rem 1.5rem;min-height:calc(100dvh - 76px);
}
.hero__grid{
  position:absolute;pointer-events:none;bottom:-20%;left:50%;
  width:200%;height:80%;
  transform:translateX(-50%) perspective(800px) rotateX(65deg);
  background-image:linear-gradient(to right,var(--border-strong) 1px,transparent 1px),linear-gradient(to bottom,var(--border-strong) 1px,transparent 1px);
  background-size:80px 80px;opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse at center top,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse at center top,#000 0%,transparent 70%);
}
.hero__glow{
  position:absolute;pointer-events:none;top:45%;left:50%;transform:translate(-50%,-50%);
  width:120vw;height:80vh;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--text) 7%,transparent) 0%,transparent 55%);
}
.hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:1100px;width:100%}
/* Hero wordmark: fill the span (header .wordmark svg rule capped it before) */
.hero__logo{width:340px;max-width:88vw;color:var(--text);justify-content:center}
.hero__logo svg{width:100%;height:auto}
@media (min-width:768px){.hero__logo{width:600px}}
@media (min-width:1024px){.hero__logo{width:720px}}
.hero__tagline{
  margin-top:3rem;max-width:640px;
  font-size:clamp(17px,2.4vw,24px);line-height:1.5;color:var(--text-muted);
}
.hero__tagline strong{color:var(--text);font-weight:500}
.hero__cta{margin-top:3rem}
.scroll-hint{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--text-faint);z-index:1}
.scroll-hint .bar{width:1px;height:2rem;background:linear-gradient(to bottom,transparent,var(--text-faint));animation:scrollPulse 2.5s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.7);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ---------- Hero floating visuals — "Market drift" (concept A) ----------
   Thin outlined finance-nodding shapes drifting slowly above the floor grid.
   Two depth layers get gentle cursor parallax (set via JS on --px/--py). */
.hero__fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fx-layer{position:absolute;inset:0;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.fx{position:absolute;color:var(--border-strong);opacity:.5;will-change:transform,opacity}
.fx--gold{color:var(--gold-soft);opacity:.85}
.fx svg{width:100%;height:auto;overflow:visible}
.fx :is(line,path,circle,rect,polyline){vector-effect:non-scaling-stroke}
/* placements (percentages keep them clear of the centered wordmark) */
.fx-chart  {top:21%;left:11%;width:150px;animation:fxDriftA 34s ease-in-out infinite}
.fx-ring1  {top:15%;right:20%;width:120px;animation:fxDriftC 30s ease-in-out infinite}
.fx-dots   {top:64%;left:26%;width:120px;animation:fxDriftB 38s ease-in-out infinite}
.fx-candles{top:30%;right:12%;width:92px;animation:fxDriftB 42s ease-in-out infinite reverse}
.fx-ring2  {bottom:20%;left:16%;width:78px;animation:fxDriftC 46s ease-in-out infinite reverse}
.fx-square {bottom:26%;right:15%;width:70px;animation:fxDriftA 40s ease-in-out infinite reverse}
@media (max-width:640px){
  .fx-dots,.fx-square{display:none} /* declutter on small screens */
  .fx-chart{width:110px}.fx-candles{width:70px}.fx-ring1{width:88px}
}
@keyframes fxDriftA{0%,100%{transform:translate(0,0) rotate(0);opacity:.42}50%{transform:translate(16px,-20px) rotate(3deg);opacity:.6}}
@keyframes fxDriftB{0%,100%{transform:translate(0,0) rotate(0);opacity:.4}50%{transform:translate(-18px,14px) rotate(-2deg);opacity:.58}}
@keyframes fxDriftC{0%,100%{transform:translate(0,0) rotate(0);opacity:.5}50%{transform:translate(12px,18px) rotate(-4deg);opacity:.72}}
@media (prefers-reduced-motion:reduce){
  .fx{animation:none!important}
  .fx-layer{transition:none;transform:none!important}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:4px;font-size:14px;font-weight:500;
  transition:transform .15s var(--ease),background .2s,color .2s,border-color .2s;
}
.btn--solid{background:var(--text);color:var(--bg)}
.btn--solid:hover{transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--border-strong);color:var(--text)}
.btn--ghost:hover{border-color:var(--text);transform:translateY(-1px)}
.btn svg{width:14px;height:14px}

/* ---------- Section heading ---------- */
.section{padding:6rem 1.5rem 5rem;max-width:var(--maxw);margin-inline:auto}
@media (min-width:768px){.section{padding-inline:2.5rem}}
.section__head{
  border-top:1px solid var(--border);padding-top:2rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;
  margin-bottom:4rem;
}
.section__head h2{
  font-weight:500;line-height:1.02;letter-spacing:-.035em;color:var(--text);max-width:14ch;
  font-size:clamp(2.25rem,5vw,4rem);
}
.section__head h2 .dot{color:var(--text-muted)}
.section__head p{align-self:flex-end;color:var(--text-muted);max-width:420px;padding-top:1.25rem;font-size:clamp(.95rem,1.2vw,1.1rem)}

/* ---------- Cell grid (subjects & tools) ---------- */
.grid-frame{border:1px solid var(--gold-faint);border-radius:3px;overflow:hidden;background:var(--border)}
.grid-cells{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.cell{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:2.5rem;min-height:280px;
  background:var(--bg-cell);
  transition:background .2s,box-shadow .2s;
}
@media (min-width:768px){.cell{padding:3rem;min-height:320px}}
a.cell:hover{background:var(--bg-cell-hover);box-shadow:inset 0 0 0 1px var(--gold-soft)}
.cell--tool{min-height:260px}
.cell__eyebrow{color:var(--text-faint)}
.cell h3{
  font-weight:500;line-height:1.1;letter-spacing:-.025em;color:var(--text);max-width:16ch;
  font-size:clamp(1.5rem,2.4vw,1.85rem);
}
.cell--tool h3{margin-top:2rem}
.cell p{margin-top:1rem;font-size:15px;line-height:1.55;color:var(--text-muted);max-width:38ch}
.cell__foot{margin-top:auto;padding-top:2.5rem;display:flex;align-items:center;justify-content:space-between}
.cell__foot .label{color:var(--text-muted);transition:color .2s}
a.cell:hover .cell__foot .label{color:var(--text)}
.arrow{
  width:36px;height:36px;border-radius:999px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);color:var(--text-muted);
  transition:all .2s var(--ease);
}
a.cell:hover .arrow{background:var(--gold);color:#0a0a0a;border-color:var(--gold);transform:rotate(-45deg)}
.arrow svg{width:15px;height:15px}
.cell__badge{
  position:absolute;top:2.5rem;right:2.5rem;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);background:var(--accent-warm);padding:4px 9px;border-radius:999px;
}

/* ---------- Breadcrumb ---------- */
.crumbs{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.crumbs .trail{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.crumbs .trail a{color:var(--text-muted);transition:color .2s}
.crumbs .trail a:hover{color:var(--text)}
.crumbs .sep{color:var(--text-faint)}
.crumbs .here{color:var(--text)}
.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-muted);transition:color .2s}
.back-link:hover{color:var(--text)}
.back-link svg{width:12px;height:12px}

/* ---------- Category header ---------- */
.cat-hero{margin-top:5rem;display:grid;gap:3rem}
@media (min-width:1024px){.cat-hero{grid-template-columns:1.3fr 1fr;gap:5rem;margin-top:7rem}}
.cat-hero h1{font-weight:500;line-height:.98;letter-spacing:-.035em;color:var(--text);font-size:clamp(2.5rem,7vw,5rem)}
.cat-hero p{align-self:flex-end;color:var(--text-muted);max-width:46ch;font-size:clamp(16px,1.4vw,18px)}
.tools-head{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:3.5rem}

/* ---------- Coming soon (empty category) ---------- */
.coming-soon{
  border:1px solid var(--border-strong);border-radius:3px;background:var(--bg-cell);
  padding:4rem 2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem;
}
.coming-soon__mark{
  width:56px;height:56px;border-radius:999px;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:var(--text-faint);
}
.coming-soon h3{font-family:var(--font-display);font-weight:600;font-size:1.75rem;color:var(--text)}
.coming-soon p{color:var(--text-muted);max-width:40ch}

/* ---------- Tool wrapper (iframe host) ---------- */
.tool-shell{display:flex;flex-direction:column;height:calc(100dvh - 72px)}
.tool-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:48px;flex-shrink:0;padding-inline:1rem;
  border-bottom:1px solid var(--border);background:var(--bg);
}
@media (min-width:768px){.tool-bar{padding-inline:1.5rem}}
.tool-bar__left{display:flex;align-items:center;gap:.75rem;min-width:0}
.tool-bar .sep{color:var(--text-faint);flex-shrink:0}
.tool-bar .here{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-bar a{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-muted);transition:color .2s;flex-shrink:0}
.tool-bar a:hover{color:var(--text)}
.tool-bar svg{width:12px;height:12px}
.tool-frame{flex:1;width:100%;border:0;background:#fff}
@media (max-width:640px){.hide-sm{display:none}}
.show-sm{display:none}
@media (max-width:640px){.show-sm{display:inline}}

/* ---------- Welcome notice (first-visit) ---------- */
.notice-backdrop{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:color-mix(in srgb,var(--bg) 55%,rgba(0,0,0,.6));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.notice-backdrop.open{opacity:1;visibility:visible}
.notice{
  position:relative;max-width:520px;width:100%;
  background:var(--bg-elevated);border:1px solid var(--gold-soft);border-radius:3px;
  box-shadow:0 24px 64px -44px rgba(0,0,0,.55);padding:2.5rem 2.75rem;
  transform:translateY(12px) scale(.98);transition:transform .3s var(--ease);
}
.notice-backdrop.open .notice{transform:none}
.notice__close{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:color .2s,background .2s}
.notice__close:hover{color:var(--text);background:var(--bg-cell-hover)}
.notice h2{font-family:var(--font-display);font-weight:700;font-size:1.9rem;line-height:1.1;letter-spacing:-.02em;color:var(--text);margin-bottom:1rem}
.notice p{color:var(--text-muted);margin-bottom:.75rem}
.notice ul{list-style:none;margin:1.25rem 0;display:flex;flex-direction:column;gap:.6rem}
.notice li{display:flex;gap:.75rem;align-items:flex-start;color:var(--text-muted)}
.notice li svg{width:16px;height:16px;margin-top:4px;color:var(--gold);flex-shrink:0}
.notice__actions{margin-top:1.75rem;display:flex;gap:.75rem;flex-wrap:wrap}

/* ---------- Feedback form ---------- */
.form-wrap{max-width:640px;margin-inline:auto}
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}
.field label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.field input,.field select,.field textarea{
  font-family:var(--font-sans);font-size:15px;color:var(--text);
  background:var(--bg-cell);border:1px solid var(--border-strong);border-radius:4px;
  padding:.8rem 1rem;transition:border-color .2s,background .2s;
}
.field textarea{resize:vertical;min-height:140px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--text-faint);outline:none;background:var(--bg-elevated)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8f94' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.form-status{margin-top:1rem;font-size:14px;padding:.9rem 1rem;border-radius:4px;display:none}
.form-status.show{display:block}
.form-status.ok{background:color-mix(in srgb,var(--accent-warm) 14%,transparent);color:var(--text);border:1px solid color-mix(in srgb,var(--accent-warm) 40%,transparent)}
.form-status.err{background:color-mix(in srgb,#e5484d 12%,transparent);color:var(--text);border:1px solid color-mix(in srgb,#e5484d 40%,transparent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Generic prose page (feedback intro etc.) ---------- */
.lede{margin-top:5rem;display:grid;gap:2rem}
@media (min-width:1024px){.lede{grid-template-columns:1.3fr 1fr;gap:5rem;margin-top:6rem}}
.lede h1{font-weight:500;line-height:.98;letter-spacing:-.035em;color:var(--text);font-size:clamp(2.5rem,6vw,4.5rem)}
.lede p{align-self:flex-end;color:var(--text-muted);max-width:46ch;font-size:clamp(16px,1.4vw,18px)}
.divider{border:0;border-top:1px solid var(--border);margin:4rem 0}

/* ---------- Ad banner — Pyörähuolto Neliö ---------- */
/* Colours here are deliberately literal, not theme tokens: the ad keeps
   the Neliö off-white/forest look in both dark and light StudyLab themes.
   Fonts still come from the design system so it sits in the same family. */
/* Sits first on the homepage, directly under the sticky header. Only needs
   clearance above — the hero's own 5rem top padding covers the gap below. */
.ad-slot{width:100%;padding-inline:1.5rem;margin-block:2rem 0}
.ad-banner{
  display:flex;align-items:center;gap:1.5rem;
  width:100%;max-width:970px;margin-inline:auto;min-height:120px;
  padding:1rem 1.5rem;
  border:3px solid #c0392b;border-radius:12px;
  /* off-white base + a soft top-left sheen, kept faint on purpose.
     Two layers: the sheen sits on top of the vertical off-white ramp. */
  background-color:#faf9f5;
  background-image:linear-gradient(157deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 42%),
                   linear-gradient(180deg,#fdfcfa 0%,#faf9f5 55%,#f3f1ea 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  color:#1c2a23;overflow:hidden;
  transition:border-color .2s var(--ease);
}
.ad-banner:hover{border-color:#a93226}
.ad-banner:focus-visible{outline:2px solid #c0392b;outline-offset:3px;border-radius:12px}
.ad-banner__logo{flex:0 0 auto;width:112px;height:80px;object-fit:contain}
.ad-banner__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;overflow-wrap:break-word}
.ad-banner__headline{font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:#1c2a23}
.ad-banner__sub{font-size:.9375rem;line-height:1.4;color:#4b5a51}
.ad-banner__highlight{
  margin-top:.35rem;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#2f5741;background:rgba(47,87,65,.1);
  border:1px solid rgba(47,87,65,.28);border-radius:999px;padding:.3rem .65rem;
}
.ad-banner__cta{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:#2f5741;color:#fff;font-size:14px;font-weight:500;
  padding:.8rem 1.6rem;border-radius:8px;
  transition:transform .15s var(--ease),background .2s var(--ease);
}
.ad-banner:hover .ad-banner__cta,
.ad-banner:focus-visible .ad-banner__cta{background:#264636;transform:translateY(-1px)}
@media (max-width:640px){
  .ad-banner{flex-direction:column;gap:1rem;min-height:0;padding:1.5rem 1.25rem;text-align:center}
  .ad-banner__logo{width:132px;height:88px}
  .ad-banner__text{align-items:center}
  .ad-banner__cta{width:100%}
}