/* Inline newsletter capture - shared styles.
   Single source of truth for the .nl-inline article signup box (Variant A guide-cluster
   preview card + Variant B value-first) and the .nl-pointer mid-article pointer.
   Extracted from the per-article inline <style> blocks 2026-07-11 (Phase 2, Item 4a)
   to end the per-file CSS duplication (lesson-20260619-inline-block-css-bloat).
   Colour/font tokens (--forest, --sage-pale, --font-head, --transition, etc.) are
   defined in each article's own head <style>; this file only references them, byte-for-byte
   identical to the former inline block so computed styles do not change. */

.nl-inline { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; background:var(--sage-pale); border:1.5px solid var(--forest-light); border-radius:14px; padding:1.5rem 1.6rem; margin:2.6rem 0; }
.nl-inline-preview { flex:0 0 188px; max-width:188px; background:var(--white,#fff); border:1px solid var(--sage); border-radius:8px; padding:0.9rem 0.95rem 1rem; transform:rotate(-1.6deg); }
.nl-prev-title { font-family:var(--font-head); font-size:0.98rem; font-weight:600; color:var(--forest); line-height:1.12; }
.nl-prev-by { font-size:0.66rem; color:var(--muted); margin-bottom:0.5rem; }
.nl-prev-row { display:flex; align-items:center; gap:0.4rem; padding:0.3rem 0; border-top:1px solid var(--sage-pale); }
.nl-prev-hab { flex:1; font-size:0.72rem; color:var(--slate); }
.nl-prev-badge { font-size:0.52rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; padding:0.12rem 0.42rem; border-radius:20px; white-space:nowrap; }
.nl-pb-strong { background:var(--forest); color:#fff; }
.nl-pb-mod { background:var(--forest-mid); color:#fff; }
.nl-inline-body { flex:1 1 320px; min-width:258px; }
.nl-eyebrow { font-size:0.7rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--forest-mid); margin-bottom:0.5rem; }
.nl-inline-title { font-family:var(--font-head); font-size:1.65rem; font-weight:500; color:var(--forest); line-height:1.1; margin:0 0 0.5rem; }
.nl-inline-sub { font-size:0.92rem; font-weight:300; color:var(--slate); line-height:1.55; margin:0 0 1rem; }
.nl-inline-fields { display:flex; gap:0.5rem; flex-wrap:wrap; }
.nl-inline-fields input[type=email] { flex:1 1 168px; min-width:0; height:44px; border:1.5px solid var(--sage); background:var(--white,#fff); border-radius:6px; padding:0 0.8rem; font-family:var(--font-body); font-size:0.92rem; color:var(--slate); transition:border-color var(--transition); }
.nl-inline-fields input[type=email]:hover { border-color:var(--forest-light); }
.nl-inline-fields input[type=email]:focus-visible { outline:2px solid var(--forest-mid); outline-offset:2px; border-color:var(--forest-mid); }
.nl-inline-fields button { flex:0 0 auto; height:44px; background:var(--forest); color:var(--white,#fff); border:none; border-radius:6px; padding:0 1.2rem; font-family:var(--font-body); font-size:0.9rem; font-weight:500; cursor:pointer; transition:background var(--transition), transform var(--transition); }
.nl-inline-fields button:hover { background:var(--forest-mid); transform:translateY(-1px); }
.nl-inline-fields button:focus-visible { outline:2px solid var(--forest-mid); outline-offset:3px; }
.nl-inline-trust { font-size:0.74rem; color:var(--muted); margin:0.7rem 0 0; }
.nl-hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.nl-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.nl-pointer { font-size:0.9rem; color:var(--muted); margin:1.8rem 0; padding-left:0.9rem; border-left:2px solid var(--forest-light); line-height:1.55; }
.nl-pointer a { color:var(--forest-mid); font-weight:500; border-bottom:1px solid var(--forest-light); transition:color var(--transition), border-color var(--transition); }
.nl-pointer a:hover { color:var(--forest); border-color:var(--forest); }
@media (max-width:560px){ .nl-inline-preview{ display:none; } .nl-inline-fields button{ width:100%; } }