/* ==========================================================================
   Pillbox product branch — v9 override layer (guide pages only).
   Design-language alignment for the rendered articles:
   – breadcrumb kicker: "PillBox" and "Support" become real links back to the
     landing / support hub, WITHOUT underlines (hover shifts to the accent)
   – a leading fully-italic paragraph (the article's "in short" lede) renders
     as an accent panel in the HUMAN voice (Roboto Serif), purple accent —
     a note, not a warning — instead of italicised body text
   – every article ends in the LF lattice: the same light pixel field as the
     support page's tail, trickling in over the article's last stretch and
     full-size by the closing links (engine in pillbox-v9.js)
   ========================================================================== */

/* ---- breadcrumbs: links, not underlines ---- */
.kicker a{border-bottom:0;text-decoration:none;transition:color .2s ease}
.kicker a:hover{color:var(--action-dark)}
html[data-theme="light"] .kicker a:hover{color:var(--action)}

/* ---- the "in short" lede: human voice in a purple note panel ---- */
.lede-band{margin:0 0 36px;border-left-color:var(--c-purple)}
html[data-theme="dark"] .lede-band{border-left-color:var(--c-purple)}
.lede-band p{font-family:var(--f-serif);font-style:normal;font-size:1.08rem;line-height:1.62;color:var(--on-light);max-width:66ch}
html[data-theme="dark"] .lede-band p{color:var(--on-dark-11)}
.lede-band em{font-style:italic}

/* ---- article tail: the LF field behind the article's last stretch ---- */
.article-tail{position:relative;overflow:hidden;background:var(--paper)}
html[data-theme="dark"] .article-tail{background:var(--ink)}
.article-tail .lattice{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.article-tail .prose{position:relative;z-index:1;background:transparent}