/* STAMNR /learn styles, on top of /assets/site.css (nav, footer, tokens, type). No em dashes. */

/* ---------- Hub ---------- */
.hub-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 clamp(28px, 4vw, 48px); }
.hub-hero .glow { left: 30%; top: 10%; width: min(900px, 140vw); height: min(900px, 140vw); transform: translate(-50%, -50%); }
.hub-hero .wrap { position: relative; }
.hub-hero h1 { font-weight: 300; font-size: clamp(36px, 5.8vw, 62px); line-height: 1.06; letter-spacing: -0.03em; color: var(--text-strong); margin: 20px 0 16px; text-wrap: balance; }
.hub-hero h1 b { font-weight: 600; color: #fff; }
.hub-hero .lede { max-width: 660px; }
.section { padding: clamp(40px, 6vw, 72px) 0; }
.section h2 { font-weight: 300; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; color: var(--text-strong); letter-spacing: -0.025em; margin: 14px 0 28px; }
.section h2 b { font-weight: 600; color: #fff; }

.insight-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px) {
  .insight-list { grid-template-columns: 1fr 1fr; }
  .insight-list .insight:last-child { grid-column: 1 / -1; }
}
.insight { display: block; cursor: pointer; }
.insight .more { margin-top: 14px; color: var(--jade-bright); font-size: 14.5px; font-weight: 400; display: inline-flex; align-items: center; gap: 8px; }
.insight .more::after { content: "\2192"; transition: transform 0.2s var(--ease-out); }
.insight:hover .more::after { transform: translateX(3px); }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; }
.faq details { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 0 22px; margin-bottom: 10px; transition: background-color 0.2s ease, border-color 0.2s ease; }
.faq details[open] { background: var(--surface-alt); border-color: var(--hairline-strong); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 500; font-size: 17px; color: var(--text); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--jade-bright); font-weight: 300; font-size: 26px; line-height: 1; flex: 0 0 auto; transition: transform 0.25s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 20px; }
.faq .a p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin-bottom: 12px; }
.faq .a p:last-child { margin-bottom: 0; }
.faq .a a { color: var(--jade-bright); }
.faq .a a:hover { text-decoration: underline; }

/* ---------- Article ---------- */
.article { max-width: 740px; margin: 0 auto; padding: clamp(48px, 7vw, 80px) var(--gutter) 40px; }
.article h1 { font-weight: 300; font-size: clamp(32px, 5vw, 50px); line-height: 1.1; letter-spacing: -0.03em; color: var(--text-strong); margin: 16px 0 26px; text-wrap: balance; }
.article h1 b { font-weight: 600; color: #fff; }
.article p { color: var(--muted); font-size: 17.5px; line-height: 1.7; margin-bottom: 22px; }
.article p strong { color: var(--text-strong); font-weight: 500; }
.article p a { color: var(--jade-bright); }
.article p a:hover { text-decoration: underline; }
sup { font-size: 11px; color: var(--faint); }

.backlink { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: 14.5px; min-height: 32px; }
.backlink:hover { color: var(--text); }

.answer { background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--jade); border-radius: 16px; padding: 22px 26px; margin-bottom: 34px; }
.answer .k { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--jade); margin-bottom: 10px; }
.answer p { color: var(--text-strong); font-weight: 400; font-size: 18px; margin: 0; }

.care { background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--hairline-strong); border-radius: 16px; padding: 20px 24px; margin: 6px 0 34px; }
.care .k { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.care p { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.care p:last-child { margin-bottom: 0; }

.refs { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.refs .k { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.refs ol { margin-left: 20px; }
.refs li { color: var(--faint); font-size: 13.5px; margin-bottom: 8px; line-height: 1.5; }

.article-cta { margin-top: 44px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 22px; padding: 34px 30px; text-align: center; position: relative; overflow: hidden; }
.article-cta .glow { left: 50%; top: 0; width: 520px; height: 520px; transform: translate(-50%, -60%); }
.article-cta > * { position: relative; }
.article-cta .glow { position: absolute; }
.article-cta p { color: var(--muted); font-size: 16px; margin-bottom: 18px; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; background: var(--jade); color: var(--on-accent); font-weight: 600; font-size: 16px; padding: 0 26px; border-radius: 14px; transition: background-color 0.18s ease; }
.cta:hover { background: var(--jade-mid); }

.disclaimer { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; line-height: 1.7; }