/* Blog index + article styles — copied from app/blog in the Next.js build. */
.phead { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
        .phead__crumb {
          display: flex; align-items: center; gap: .5rem;
          margin-bottom: 1.5rem; font-size: .84rem; color: var(--text-mute);
        }
        .phead__crumb a { transition: color var(--dur); }
        .phead__crumb a:hover { color: var(--accent); }
        .phead__here { color: var(--text-dim); }
        .phead h1 { margin-top: 1rem; font-size: var(--text-h1); max-width: 18ch; }
        .phead__sub { margin: 1.3rem 0 0; font-size: var(--text-lead); max-width: 56ch; }
.post { display: flex; flex-direction: column; }
        .post__meta {
          display: flex; align-items: center; gap: .5rem;
          font-size: .82rem; color: var(--text-mute);
        }
        .post__title { margin: .8rem 0 .7rem; font-size: var(--text-h3); }
        .post__title a { transition: color var(--dur); }
        .post__title a:hover { color: var(--accent); }
        .post__excerpt { font-size: .94rem; margin: 0 0 1.1rem; }
        .post__tags { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem; }
        .post__link {
          display: inline-flex; align-items: center; gap: .4rem;
          margin-top: auto; color: var(--accent); font-weight: 600; font-size: .92rem;
        }
        .post__link svg { transition: transform var(--dur) var(--ease); }
        .post:hover .post__link svg { transform: translateX(4px); }
.faq { display: flex; flex-direction: column; gap: .7rem; max-width: 52rem; }
        .faq__row {
          padding: 0 1.3rem;
          border: 1px solid var(--line); border-radius: var(--r);
          background: var(--surface);
          transition: border-color var(--dur) var(--ease);
        }
        .faq__row[open] { border-color: var(--accent-line); }
        .faq__row summary {
          display: flex; align-items: center; justify-content: space-between; gap: 1rem;
          padding: 1.1rem 0; cursor: pointer; list-style: none;
        }
        .faq__row summary::-webkit-details-marker { display: none; }
        .faq__q {
          font-family: var(--font-display); font-size: 1.03rem; font-weight: 600;
          letter-spacing: -.015em; color: var(--text);
        }
        .faq__row summary svg { flex-shrink: 0; color: var(--accent); transition: transform var(--dur) var(--ease); }
        .faq__row[open] summary svg { transform: rotate(90deg); }
        .faq__a { margin: 0 0 1.2rem; font-size: .96rem; }
.article { max-width: 46rem; margin-inline: auto; }
        .article__meta {
          display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
          padding-bottom: 1.4rem; margin-bottom: 2rem;
          border-bottom: 1px solid var(--line);
          font-size: .84rem; color: var(--text-mute);
        }
        .takeaways {
          margin: 2rem 0; padding: 1.3rem 1.5rem;
          border: 1px solid var(--accent-line); border-left-width: 3px;
          border-radius: var(--r);
          background: rgba(255,125,0,.07);
        }
        .takeaways p { margin: 0 0 .6rem; color: var(--text); }
        .takeaways ul { margin: 0; }
        .takeaways li { color: var(--text-dim); }

        .flowfig { margin: 2.2rem 0; }
        .flowfig__svg { width: 100%; height: auto; }
        .flowfig figcaption {
          margin-top: .7rem; text-align: center;
          font-size: .84rem; color: var(--text-mute);
        }
        .prose code {
          padding: .1rem .4rem; border-radius: 4px;
          background: rgba(255,255,255,.08); font-size: .9em;
        }
        .article__end { margin-top: 2.5rem; }
        .cta-box {
          margin-top: 2.5rem; text-align: center;
          padding: clamp(1.8rem,1.4rem+2vw,2.6rem);
          border: 1px solid var(--accent-line); border-radius: var(--r-lg);
          background: radial-gradient(500px 240px at 50% 0%, rgba(255,125,0,.14), transparent 70%), var(--surface);
        }
        .cta-box h2 { font-size: 1.5rem; }
        .cta-box p { max-width: 44ch; margin: .9rem auto 1.6rem; font-size: .96rem; }
        .article__more {
          display: flex; flex-wrap: wrap; gap: .5rem;
          margin-top: 2.5rem; padding-top: 1.6rem;
          border-top: 1px solid var(--line);
        }
        .article__more .tag { transition: border-color var(--dur), color var(--dur); }
        .article__more .tag:hover { border-color: var(--accent); color: var(--accent); }