/* =========================================================================
   peptides.css, the /peptides authority hub. "Bento on void" (spec §3, §5).
   Apple's structural language (modular tiles, scroll choreography, chevron CTA)
   executed in Cosmic Cool material (void bg, glow-as-elevation, hairline borders,
   one accent). Loads AFTER tokens/base/components/fda-tracker. Cool only.
   ========================================================================= */

/* ---------- page scaffold ---------- */
.pep{ position:relative; overflow:hidden; }
.pep-section{ position:relative; padding:var(--sp-16) 0; }
.pep-section--tight{ padding:var(--sp-12) 0; }
.pep-wrap{ max-width:1200px; margin:0 auto; padding:0 var(--sp-12); }
@media(max-width:720px){ .pep-wrap{ padding:0 var(--sp-6); } }

.pep-secthead{ max-width:62ch; margin:0 0 var(--sp-10); }
.pep-secthead__h{ font-family:var(--font-heading); font-weight:300; font-size:clamp(30px,3.4vw,46px);
  line-height:var(--lh-snug); letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:var(--sp-4) 0 0; text-wrap:balance; }
.pep-secthead__sub{ margin-top:var(--sp-5); }

/* =========================================================================
   BENTO GRID + TILE (spec §5)
   ========================================================================= */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--sp-6); }
.bento--wide{ gap:var(--sp-8); }
@media(max-width:980px){ .bento{ grid-template-columns:repeat(6,1fr); } }
@media(max-width:720px){ .bento{ grid-template-columns:1fr; gap:var(--sp-5); } }

.bento-tile{
  grid-column:span var(--bento-span,4);
  grid-row:span var(--bento-rows,1);
  position:relative; overflow:hidden;
  background:var(--bg-dark-card);
  border:1px solid var(--border-on-dark);
  border-radius:var(--r-lg);
  box-shadow:var(--glow-sm);
  transition:border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.bento-tile--marquee{ border-radius:var(--r-xl); }
@media(max-width:980px){ .bento-tile{ grid-column:span 6; } }
@media(max-width:720px){ .bento-tile{ grid-column:1 / -1; grid-row:auto; } }

.bento-tile__body{ position:relative; z-index:1; padding:var(--sp-8); height:100%; display:flex; flex-direction:column; }
.bento-tile--marquee .bento-tile__body{ padding:var(--sp-10); }
@media(max-width:720px){ .bento-tile__body, .bento-tile--marquee .bento-tile__body{ padding:var(--sp-7); } }

/* corner halo, glow-as-elevation, hero/marquee only (§5.4) */
.bento-tile__halo{ position:absolute; z-index:0; top:-30%; right:-20%; width:60%; height:80%;
  background:radial-gradient(closest-side, rgba(var(--glow-rgb),.16), transparent 70%);
  pointer-events:none; transition:opacity var(--dur-base) var(--ease-out); }

/* interactive lift */
.bento-tile.is-interactive{ cursor:pointer; }
.bento-tile.is-interactive:hover{
  border-color:rgba(var(--glow-rgb),.45);
  transform:translateY(-3px);
  box-shadow:var(--glow-md);
}
.bento-tile.is-interactive:hover .bento-tile__halo{ opacity:1.4; }

.bento-eyebrow{ margin-bottom:var(--sp-4); }

/* variant tints */
.bento-tile--editorial{ background:linear-gradient(165deg, var(--bg-dark-card), color-mix(in srgb, var(--bg-dark-card) 86%, var(--accent) 14%)); }

/* chevron CTA (Apple grammar, always learn/track/notify) */
.bento-cta{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:var(--sp-5);
  font-family:var(--font-heading); font-weight:600; font-size:11px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent-hover); transition:color var(--dur-fast); }
.bento-cta:hover{ color:var(--fg-on-dark-1); }
.bento-cta__chev{ font-size:16px; line-height:1; transform:translateX(0); transition:transform var(--dur-fast) var(--ease-out); }
.bento-cta:hover .bento-cta__chev{ transform:translateX(3px); }
.bento-cta--ghost{ color:var(--fg-on-dark-2); }

/* tile heading helpers */
.bento-h{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-24); line-height:var(--lh-snug);
  color:var(--fg-on-dark-1); margin:0; letter-spacing:-.01em; }
.bento-p{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:var(--sp-3) 0 0; }

/* =========================================================================
   BLOCK 1, HERO (bento split: copy tile + countdown tile)
   ========================================================================= */
.pep-hero{ position:relative; padding:var(--sp-12) 0 var(--sp-10); overflow:hidden; }
.pep-hero__halo{ position:absolute; z-index:0; top:-180px; left:50%; transform:translateX(-50%);
  width:900px; height:520px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(var(--glow-rgb),.20), transparent 68%); }
.pep-hero__inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 var(--sp-12); }
@media(max-width:720px){ .pep-hero__inner{ padding:0 var(--sp-6); } }

.pep-hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-8); align-items:stretch; }
@media(max-width:920px){ .pep-hero__grid{ grid-template-columns:1fr; gap:var(--sp-6); } }

.pep-hero__copytile{ display:flex; flex-direction:column; justify-content:center; padding:var(--sp-6) var(--sp-4) var(--sp-6) 0; }
.pep-hero__eyebrow{ margin-bottom:var(--sp-6); }
.pep-hero__h{ font-family:var(--font-heading); font-weight:200; font-size:clamp(40px,5.4vw,80px);
  line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:0; text-wrap:balance; }
.pep-hero__h .nam-pop{ font-weight:300; }
.pep-hero__sub{ margin-top:var(--sp-6); max-width:54ch; }
.pep-hero__cta-row{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-9); flex-wrap:wrap; }

.pep-hero__counttile{ align-self:center; }

/* hero entrance choreography (one-shot). Visible end-state is the BASE, content
   shows in print/export/reduced-motion/non-compositing. The rise only plays as an
   enhancement when JS lights the hero AND motion is allowed. */
@keyframes pep-rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  .pep-hero.is-lit .pep-anim{ animation:pep-rise var(--dur-cinema) var(--ease-out) both; }
  .pep-hero.is-lit .pep-anim--1{ animation-delay:60ms; }
  .pep-hero.is-lit .pep-anim--2{ animation-delay:150ms; }
  .pep-hero.is-lit .pep-anim--3{ animation-delay:240ms; }
  .pep-hero.is-lit .pep-anim--4{ animation-delay:360ms; }
}

/* =========================================================================
   BLOCK 2, TWO-SIGNAL LEGEND
   ========================================================================= */
.pep-legend{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
@media(max-width:720px){ .pep-legend{ grid-template-columns:1fr; } }
.pep-legend__title{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-16); color:var(--fg-on-dark-1); margin:0; }
.pep-legend__sub{ font-family:var(--font-edit); font-style:italic; font-size:var(--fs-16); color:var(--fg-on-dark-2); margin:var(--sp-2) 0 var(--sp-6); }
.pep-legend__rows{ display:flex; flex-direction:column; gap:var(--sp-3); }
.pep-legend__pills{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.pep-legend__line{ text-align:center; max-width:48ch; margin:var(--sp-8) auto 0;
  font-family:var(--font-edit); font-style:italic; font-size:var(--fs-18); color:var(--fg-on-dark-1); }

/* =========================================================================
   BLOCK 3, STATUS BOARD TEASER
   ========================================================================= */
.pep-board{ display:flex; flex-direction:column; }
.pep-board__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-2); }
.pep-board__rows{ display:flex; flex-direction:column; }
.pep-trow{ display:grid; grid-template-columns:1.5fr 1.1fr 1.4fr auto; align-items:center; gap:var(--sp-5);
  padding:var(--sp-5) 0; border-top:1px solid var(--border-on-dark); }
.pep-trow:first-child{ border-top:0; }
.pep-trow__mol{ display:flex; flex-direction:column; gap:3px; }
.pep-trow__name{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-16); color:var(--fg-on-dark-1); }
.pep-trow__desc{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); color:var(--fg-on-dark-3); }
.pep-trow__notify{ justify-self:end; font-family:var(--font-heading); font-weight:600; font-size:10px;
  letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--accent-hover);
  border:1px solid var(--border-on-dark-strong); border-radius:var(--r-pill); padding:8px 16px;
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); white-space:nowrap; }
.pep-trow__notify:hover{ background:var(--accent-soft); }
.pep-trow__notify.is-on{ background:var(--accent); color:#fff; border-color:transparent; }
.pep-board__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  flex-wrap:wrap; margin-top:var(--sp-7); padding-top:var(--sp-6); border-top:1px solid var(--border-on-dark); }
.pep-board__updated{ font-family:var(--font-mono); font-size:var(--fs-12); color:var(--fg-on-dark-3);
  display:inline-flex; align-items:center; gap:var(--sp-2); }
.pep-board__updated .nam-nav__live{ margin:0; }
@media(max-width:760px){
  .pep-trow{ grid-template-columns:1fr auto; grid-auto-rows:auto; gap:var(--sp-3) var(--sp-4); }
  .pep-trow__pillcell{ grid-column:1 / -1; }
  .pep-trow__notify{ grid-row:1; grid-column:2; }
}

/* =========================================================================
   BLOCK 4, CAVEATS SUB-GRID
   ========================================================================= */
.pep-caveats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); margin-top:var(--sp-8); }
@media(max-width:560px){ .pep-caveats{ grid-template-columns:1fr; } }
.pep-caveat{ background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark); border-radius:var(--r-md); padding:var(--sp-6); }
.pep-caveat__k{ font-family:var(--font-edit); font-style:italic; font-weight:400; font-size:var(--fs-18);
  color:var(--fg-on-dark-1); line-height:var(--lh-snug); }
.pep-caveat__v{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:var(--sp-3) 0 0; }
.pep-edu__lead{ display:flex; gap:var(--sp-8); align-items:flex-start; flex-wrap:wrap; }
.pep-edu__h{ font-family:var(--font-heading); font-weight:300; font-size:clamp(26px,3vw,40px); line-height:var(--lh-snug);
  color:var(--fg-on-dark-1); margin:0; flex:1 1 320px; letter-spacing:var(--tracking-tight); }
.pep-edu__p{ flex:1 1 360px; margin:0; }

/* =========================================================================
   BLOCK 5, BROWSE BY GOAL
   ========================================================================= */
.pep-goal{ display:flex; flex-direction:column; height:100%; text-decoration:none; }
.pep-goal__icon{ width:42px; height:42px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  color:var(--accent-hover); background:var(--accent-soft); border:1px solid var(--border-on-dark-strong); margin-bottom:var(--sp-5); }
.pep-goal__label{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-24); color:var(--fg-on-dark-1); margin:0; }
.pep-goal--marquee .pep-goal__label{ font-size:var(--fs-32); }
.pep-goal__blurb{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:var(--sp-3) 0 var(--sp-5); max-width:42ch; }
.pep-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.pep-chip{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--fg-on-dark-2);
  background:rgba(255,255,255,.04); border:1px solid var(--border-on-dark); border-radius:var(--r-sm); padding:4px 9px; }

/* =========================================================================
   BLOCK 6, MOLECULE INDEX + HONESTY BAND
   ========================================================================= */
.pep-mols{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
@media(max-width:980px){ .pep-mols{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .pep-mols{ grid-template-columns:1fr; } }
.pep-mol{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-6);
  background:var(--bg-dark-card); border:1px solid var(--border-on-dark); border-radius:var(--r-lg);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.pep-mol:hover{ border-color:rgba(var(--glow-rgb),.45); transform:translateY(-3px); box-shadow:var(--glow-md); }
.pep-mol__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
.pep-mol__name{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-18); color:var(--fg-on-dark-1); }
.pep-grade{ font-family:var(--font-mono); font-weight:600; font-size:11px; letter-spacing:.06em;
  width:24px; height:24px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); border:1px solid var(--border-on-dark-strong); color:var(--accent-hover);
  background:var(--accent-soft); }
.pep-mol__summary{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:0; flex:1; }
.pep-mol__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--border-on-dark); }
.pep-mol__open{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent-hover); display:inline-flex; align-items:center; gap:5px; }
.pep-mol__open .bento-cta__chev{ font-size:14px; }
.pep-honesty{ margin-top:var(--sp-9); padding:var(--sp-8); border-radius:var(--r-lg);
  background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark); }
.pep-honesty__label{ margin-bottom:var(--sp-3); }
.pep-honesty__p{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-18); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-1); margin:0; max-width:74ch; }

/* =========================================================================
   GEO QUESTION HEADERS
   ========================================================================= */
.pep-qa{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
@media(max-width:880px){ .pep-qa{ grid-template-columns:1fr; } }
.pep-qa__item{ padding:var(--sp-6); border:1px solid var(--border-on-dark); border-radius:var(--r-lg); background:var(--bg-dark-card); }
.pep-qa__q{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-16); color:var(--fg-on-dark-1); margin:0 0 var(--sp-3); }
.pep-qa__a{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; }

/* =========================================================================
   BLOCK 7, SOFT CTA + ALERT CAPTURE
   ========================================================================= */
.pep-convert{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
@media(max-width:880px){ .pep-convert{ grid-template-columns:1fr; } }
.pep-convert__tile{ display:flex; flex-direction:column; justify-content:center; padding:var(--sp-10);
  border-radius:var(--r-xl); border:1px solid var(--border-on-dark); position:relative; overflow:hidden;
  background:var(--bg-dark-card); box-shadow:var(--glow-sm); }
.pep-convert__tile--alert{ background:linear-gradient(160deg, var(--bg-dark-card), color-mix(in srgb, var(--bg-dark-card) 80%, var(--accent) 20%)); }
.pep-convert__h{ font-family:var(--font-heading); font-weight:300; font-size:clamp(26px,2.6vw,34px); line-height:var(--lh-snug);
  letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:var(--sp-4) 0 0; }
.pep-convert__p{ margin:var(--sp-4) 0 var(--sp-7); max-width:42ch; }

/* =========================================================================
   STICKY CTA DOCK (after hero scrolls past)
   ========================================================================= */
.pep-dock{ position:fixed; left:0; right:0; bottom:0; z-index:70; transform:translateY(120%);
  transition:transform var(--dur-base) var(--ease-out); }
.pep-dock.is-docked{ transform:translateY(0); }
.pep-dock__inner{ max-width:1200px; margin:0 auto; padding:var(--sp-3) var(--sp-6);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  background:rgba(5,14,37,.86); backdrop-filter:blur(12px); border-top:1px solid var(--border-on-dark);
  border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--shadow-3); }
.pep-dock__label{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-13); color:var(--fg-on-dark-2);
  display:inline-flex; align-items:center; gap:var(--sp-3); }
.pep-dock__label .nam-nav__live{ margin:0; }
.pep-dock__actions{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.pep-dock .nam-btn{ padding:13px 22px; }
@media(max-width:620px){ .pep-dock__label{ display:none; } .pep-dock__inner{ justify-content:center; } }

/* chevron buttons reuse nam-btn but with › grammar */
.nam-btn .pep-chev{ font-size:15px; margin-left:2px; transition:transform var(--dur-fast) var(--ease-out); }
.nam-btn:hover .pep-chev{ transform:translateX(3px); }

/* =========================================================================
   BLOCK 2, THE TWO-AXIS CHOOSER (a genuine fork, equal weight, both Cool)
   ========================================================================= */
.pep-secthead--center{ max-width:64ch; margin-left:auto; margin-right:auto; text-align:center; }

/* the fork shell: doors + the legend that nests under it as one connected unit */
.pep-fork{ max-width:1000px; margin:0 auto; }

/* the two doors as an equal-weight fork, divided by an "or" pivot */
.pep-fork__doors{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0; }
@media(max-width:720px){ .pep-fork__doors{ grid-template-columns:1fr; } }

.pep-fork__or{ display:flex; align-items:center; justify-content:center; position:relative; padding:0 var(--sp-2); }
.pep-fork__or::before{ content:""; position:absolute; top:14%; bottom:14%; left:50%; width:1px; background:var(--border-on-dark); }
.pep-fork__or span{ position:relative; z-index:1; font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--fg-on-dark-3); background:var(--bg-dark); border:1px solid var(--border-on-dark);
  border-radius:var(--r-pill); width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
@media(max-width:720px){
  .pep-fork__or{ padding:var(--sp-2) 0; }
  .pep-fork__or::before{ top:50%; bottom:auto; left:14%; right:14%; width:auto; height:1px; }
}

/* both doors: identical structure + identical Cool accent (differentiate by icon + label, never temperature) */
.pep-door{ display:flex; flex-direction:column; height:100%; text-decoration:none;
  padding:var(--sp-10); border-radius:var(--r-xl); background:var(--bg-dark-card);
  border:1px solid var(--border-on-dark); box-shadow:var(--glow-sm);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.pep-door:hover{ border-color:rgba(var(--glow-rgb),.45); transform:translateY(-3px); box-shadow:var(--glow-md); }
@media(max-width:720px){ .pep-door{ padding:var(--sp-7); } }
.pep-door__icon{ width:48px; height:48px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  color:var(--accent-hover); background:var(--accent-soft); border:1px solid var(--border-on-dark-strong); margin-bottom:var(--sp-6); }
.pep-door__eyebrow{ margin-bottom:var(--sp-3); }
.pep-door__h{ font-family:var(--font-heading); font-weight:300; font-size:clamp(24px,2.6vw,34px);
  line-height:var(--lh-snug); letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:0; text-wrap:balance; }
.pep-door__body{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-15); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:var(--sp-4) 0 var(--sp-6); }
.pep-door__cta{ font-size:12px; margin-top:auto; }

/* the two-signal legend, visually NESTS under the fork as its shared explanation.
   A connector tab bridges the doors to a recessed panel (not a separate section). */
.pep-legendwrap{ position:relative; margin-top:var(--sp-8); padding:var(--sp-10) var(--sp-9) var(--sp-9);
  border:1px solid var(--border-on-dark); border-radius:var(--r-lg);
  background:rgba(0,0,0,.22); }
/* the stem: a hairline dropping from the fork into the recessed panel */
.pep-legendwrap::before{ content:""; position:absolute; top:calc(-1 * var(--sp-8)); left:50%; width:1px; height:var(--sp-8); background:var(--border-on-dark); }
.pep-legendwrap__connector{ text-align:center; max-width:60ch; margin:0 auto var(--sp-8); }
.pep-legendwrap__tab{ display:inline-block; font-family:var(--font-heading); font-weight:600; font-size:11px;
  letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--accent-hover);
  padding:6px 14px; border-radius:var(--r-pill); background:rgba(var(--glow-rgb),.10); border:1px solid rgba(var(--glow-rgb),.28); }
.pep-legendwrap__intro{ font-family:var(--font-edit); font-style:italic; font-size:var(--fs-18); line-height:var(--lh-snug);
  color:var(--fg-on-dark-1); margin:var(--sp-4) 0 0; }

.pep-legend{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
@media(max-width:720px){ .pep-legend{ grid-template-columns:1fr; } }
.pep-legend__col{ padding:var(--sp-6); border-radius:var(--r-md); background:var(--bg-dark-card); border:1px solid var(--border-on-dark); }
.pep-legend__title{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-16); color:var(--fg-on-dark-1); margin:0; }
.pep-legend__sub{ font-family:var(--font-edit); font-style:italic; font-size:var(--fs-15); color:var(--fg-on-dark-2); margin:var(--sp-2) 0 var(--sp-5); }
.pep-legend__rows{ display:flex; flex-direction:column; gap:var(--sp-3); }
.pep-legend__pills{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.pep-legend__line{ text-align:center; max-width:52ch; margin:var(--sp-7) auto 0;
  font-family:var(--font-edit); font-style:italic; font-size:var(--fs-16); color:var(--fg-on-dark-2); }

/* compliance footer line (§2.2) */
.pep-compliance{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-3); text-align:center; max-width:78ch; margin:0 auto; }

/* =========================================================================
   EXPORT CONFIG, floating affordance + read-out modal
   ========================================================================= */
.pep-export{ position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:80;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--fg-on-dark-2);
  background:rgba(5,14,37,.86); backdrop-filter:blur(12px);
  border:1px solid var(--border-on-dark-strong); border-radius:var(--r-pill); padding:9px 16px;
  box-shadow:var(--glow-sm); cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast); }
.pep-export:hover{ color:var(--fg-on-dark-1); border-color:rgba(var(--glow-rgb),.55); }
.pep-export.is-raised{ transform:translateY(-64px); }
.pep-export__dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:var(--gold-glow-sm); }

.pep-cfg{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:var(--sp-6); }
.pep-cfg__veil{ position:absolute; inset:0; background:rgba(1,9,29,.74); backdrop-filter:blur(4px); }
.pep-cfg__panel{ position:relative; width:min(760px,100%); max-height:86vh; display:flex; flex-direction:column;
  background:var(--bg-dark-card); border:1px solid var(--border-on-dark-strong); border-radius:var(--r-xl);
  box-shadow:var(--glow-md),var(--shadow-4); padding:var(--sp-8); }
.pep-cfg__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); }
.pep-cfg__h{ font-family:var(--font-heading); font-weight:300; font-size:var(--fs-24); color:var(--fg-on-dark-1);
  margin:var(--sp-2) 0 0; letter-spacing:var(--tracking-tight); }
.pep-cfg__close{ flex-shrink:0; color:var(--fg-on-dark-3); padding:6px; border-radius:var(--r-sm);
  transition:color var(--dur-fast), background var(--dur-fast); }
.pep-cfg__close:hover{ color:var(--fg-on-dark-1); background:rgba(255,255,255,.05); }
.pep-cfg__note{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:var(--sp-4) 0 var(--sp-5); max-width:64ch; }
.pep-cfg__note code{ font-family:var(--font-mono); font-size:11px; color:var(--accent-hover); }
.pep-cfg__ta{ flex:1; min-height:280px; resize:vertical; width:100%;
  font-family:var(--font-mono); font-size:12px; line-height:1.55; color:var(--fg-on-dark-1);
  background:var(--bg-dark); border:1px solid var(--border-on-dark); border-radius:var(--r-md);
  padding:var(--sp-5); white-space:pre; overflow:auto; }
.pep-cfg__actions{ display:flex; gap:var(--sp-3); margin-top:var(--sp-5); }
@media(max-width:560px){ .pep-cfg__panel{ padding:var(--sp-6); } }