/* GENERATED by scripts/site-build/site-css.mjs from astro/src/data/articles.css.
 * Do not edit this copy — edit the source and run `npm run site:css`.
 * `npm run site:css:check` (gate 6 in scripts/site-build/verify.mjs) fails
 * the build if these two ever disagree. */
/* ===========================================================================
 * articles.css — the style rules ALL EIGHT article pages carry identically.
 * ===========================================================================
 *
 * GENERATED by scripts/site-build/lift-articles.mjs. Extracted verbatim from
 * the eight inline <style> blocks that used to be copy-pasted into every
 * article page — 60 rules that were byte-identical in all of them.
 *
 * ORDER IS PRESERVED. The rules appear here in the order they appeared in the
 * pages, and the codemod refuses to run if that order is not the same on all
 * eight, so no page's cascade moved. Each page's own rules are still an inline
 * <style> AFTER this file, exactly where they were relative to these.
 *
 * The values here are the SHIPPED values, not the tokens. Where the two differ
 * — the .display line-height (1.04 here, .98 in site.css) and .btn.gold's
 * shadow (#b8912f here, #C9A93A in the palette) — astro/src/data/tokens.css
 * records which one wins for NEW work and why the old one was not changed:
 * repainting eight indexed pages is a visual change and is not on the Phase-5
 * approved-delta list.
 *
 * Loaded after /css/site.css and /css/tokens.css. Edit the source at
 * astro/src/data/articles.css and run `npm run site:css`.
 */

  :root{--snow:rgb(250,250,250);--onyx:rgb(26,26,26);--onyx-soft:rgb(74,74,74);--gold:rgb(255,217,101);--blue:rgb(30,60,136);--accent:hsl(267,52%,59%);--emerald:rgb(5,150,105)}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--snow);color:var(--onyx);font-family:"TikTok Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55}
  .wrap{max-width:960px;margin:0 auto;padding:0 20px}
  .display{font-family:"TikTok Sans Condensed","TikTok Sans",system-ui,sans-serif;font-weight:900;letter-spacing:-0.02em;line-height:1.04}
  h1.display{font-size:clamp(2.3rem,5.5vw,3.7rem);margin:0 0 18px}
  h2.display{font-size:clamp(1.6rem,3.6vw,2.3rem);margin:0 0 12px}
  section{padding:52px 0;border-top:1px solid rgba(26,26,26,.08)}
  section:first-of-type{border-top:0}
  p.lead{font-size:1.15rem;color:var(--onyx-soft);max-width:660px}
  .eyebrow{display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:2px solid var(--onyx);background:var(--onyx);color:#fff;font-weight:700;font-size:15px;border-radius:9999px;padding:13px 26px;box-shadow:0 4px 0 #000;transition:all .12s ease;text-decoration:none}
  .btn:hover{filter:brightness(1.1)}
  .btn:active{transform:translateY(4px);box-shadow:none}
  .btn.gold{background:var(--gold);color:var(--onyx);box-shadow:0 4px 0 #b8912f}
  .btn.ghost{background:transparent;color:var(--onyx);box-shadow:none}
  .btn.ghost:active{transform:none}
  .faq{margin-top:22px;border-top:1px solid rgba(26,26,26,.1)}
  .faq details{border-bottom:1px solid rgba(26,26,26,.1)}
  .faq summary{cursor:pointer;list-style:none;padding:16px 4px;font-weight:800;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:1.5rem;color:var(--accent)}
  .faq details[open] summary::after{content:"\2013"}
  .faq p{margin:0 4px 16px;color:var(--onyx-soft)}
  .related{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
  .related a{font-weight:700;color:var(--blue);text-decoration:none;border-bottom:2px solid rgba(30,60,136,.25)}
  .related a:hover{border-color:var(--blue)}
  .center{text-align:center}
  .hero-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
  .trust div{padding:20px 14px;text-align:center;border-right:1px solid rgba(26,26,26,.1)}
  .trust div:last-child{border-right:0}
  .trust .big{font-family:"TikTok Sans Condensed","TikTok Sans",system-ui,sans-serif;font-weight:900;font-size:clamp(1.35rem,3vw,1.9rem);line-height:1}
  .trust .lbl{font-size:.8rem;font-weight:700;color:var(--onyx-soft);margin-top:6px;letter-spacing:.02em}
  .creator{display:grid;grid-template-columns:170px 1fr;gap:26px;align-items:start;background:#fff;border:2px solid rgba(26,26,26,.1);border-radius:22px;padding:26px;margin-top:24px}
  .creator img{width:170px;height:170px;border-radius:18px;object-fit:cover;display:block}
  .creator blockquote{margin:0 0 14px;font-size:1.08rem;line-height:1.5}
  .creator .who{font-weight:800}
  .creator .role{font-size:.92rem;color:var(--onyx-soft);margin-top:2px}
  .badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
  .badges a{display:block;line-height:0}
  .badges img{height:44px;width:auto;transition:opacity .15s ease}
  .badges a:hover img{opacity:.8}
  .orget{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:rgba(74,74,74,.75);margin-top:26px}
  @media (max-width:860px) {
    .trust{grid-template-columns:repeat(2,1fr)}
    .trust div:nth-child(2){border-right:0}
    .trust div:nth-child(1),.trust div:nth-child(2){border-bottom:1px solid rgba(26,26,26,.1)}
    .creator{grid-template-columns:1fr}
    .creator img{width:120px;height:120px}
  }
  @media (max-width:600px) {
    section{padding:36px 0}
    .wrap{padding:0 18px}
    h1.display{font-size:clamp(1.95rem,8.2vw,2.5rem);margin-bottom:14px}
    h2.display{font-size:clamp(1.45rem,5.6vw,1.8rem)}
    p.lead{font-size:.99rem;line-height:1.47}
    #top{padding-top:8px}
    .eyebrow{margin-bottom:7px;font-size:.75rem}
    .trust div{padding:16px 10px}
    .trust .lbl{font-size:.74rem}
    .faq summary{font-size:1rem;padding:15px 2px}
    .creator{padding:20px}
  }