/* ============================================================
   PROOF PRESENTATION COMPONENTS — Floating Flow
   Shared stylesheet. Source of truth: proof-component-book.html
   (For Jekyll integration, scope the :root tokens under .pf-section.)
   ============================================================ */
:root{
  --pf-bg:#0B1727;
  --c-content:#111b2e;--c-card-top:#1b2842;--c-card-bot:#16213a;
  --c-border:rgba(108,148,220,.16);--c-border-soft:rgba(108,148,220,.10);
  --t-strong:#eaf0fa;--t-base:#e3e9f4;--t-dim:#94a6c8;--t-faint:#647394;
  --a-link:#5e9aff;--a-cyan:#74ffe2;--a-green:#2bc784;--a-red:#e6557a;--a-amber:#f5934e;--a-purple:#a98cf0;
  --g-cyan:linear-gradient(135deg,#9affe9,#3fe9c8);--g-green:linear-gradient(135deg,#4be0a3,#2bc784);
  --g-red:linear-gradient(135deg,#ff7a9c,#e6557a);--g-heading:linear-gradient(120deg,#eff4ff,#9fbaff 60%,#74ffe2);
  --g-focus:linear-gradient(120deg,#fdfcff,#9cd6ff 45%,#74ffe2 90%);
  --r-card:14px;--r-feature:16px;--r-inner:9px;--r-chip:999px;
  --sh-card:0 22px 46px -22px rgba(2,8,20,.85),inset 0 1px 0 rgba(255,255,255,.05);
  --sh-feature:0 28px 56px -24px rgba(2,30,20,.9),inset 0 1px 0 rgba(255,255,255,.06);
  --sh-pop:0 8px 20px -8px rgba(0,0,0,.6);
  --sp-1:6px;--sp-2:9px;--sp-3:12px;--sp-4:16px;--sp-5:22px;
  --ease-out:cubic-bezier(.22,.8,.2,1);--ease-back:cubic-bezier(.34,1.5,.6,1);
  --d-reveal:440ms;--d-pop:380ms;--stagger:90ms;
}

/* ===================== SECTION LAYOUT ===================== */
.pf-section{position:relative;padding:96px 0}
.pf-section__inner{max-width:1140px;margin:0 auto;padding:0 16px}
.pf-section__head{text-align:center;max-width:760px;margin:0 auto 72px}
.pf-section__head .eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--a-cyan);font-weight:700;margin-bottom:1.1rem}
.pf-section__head h2{display:block;font-family:'Poppins',sans-serif;font-size:2.7rem;font-weight:800;line-height:1.08;letter-spacing:-.015em;background:var(--g-heading);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-section__head h2 .focus{background:var(--g-focus);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-section__head p{color:var(--t-dim);font-size:1.1rem;line-height:1.6;margin-top:1rem}

.pf-cap{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(28,42,68,.55),rgba(16,26,45,.44));
  border:1px solid var(--c-border-soft);border-radius:22px;padding:40px 46px;
  box-shadow:0 28px 64px -42px rgba(2,8,20,.85),inset 0 1px 0 rgba(255,255,255,.03)}
.pf-cap::before{content:"";position:absolute;top:0;left:24px;right:24px;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(116,255,226,.7),rgba(94,154,255,.55),transparent)}
.pf-cap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 120% at 100% 0,rgba(116,255,226,.09),transparent 60%)}
.pf-cap > *{position:relative;z-index:1}
.pf-cap .pf::before{opacity:.4}
.pf-cap + .pf-cap{margin-top:26px}
@media(max-width:939px){.pf-cap{padding:30px 22px;gap:30px}}
.pf-cap__copy{order:1}
.pf-cap__proof{order:2;display:flex;justify-content:center;min-width:0}
@media(min-width:940px){
  .pf-cap{grid-template-columns:0.82fr 1.18fr;gap:76px}
  .pf-cap--flip{grid-template-columns:1.18fr 0.82fr}
  .pf-cap--flip .pf-cap__copy{order:2}
  .pf-cap--flip .pf-cap__proof{order:1}
}
.pf-cap__copy .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--a-cyan);font-weight:700;margin-bottom:1.05rem}
.pf-cap__copy .eyebrow svg{width:14px;height:14px}
.pf-cap__copy .eyebrow{display:flex;width:fit-content}
.pf-cap__copy h3{display:block;font-family:'Poppins',sans-serif;font-size:1.95rem;font-weight:700;line-height:1.12;letter-spacing:-.01em;color:var(--t-strong);margin-bottom:1rem}
.pf-cap__copy p{color:var(--t-dim);font-size:1.04rem;line-height:1.66;max-width:30rem}
/* ── Standard inline text-link (.bh-link) ───────────────────────────────
   Canonical "see how X works →" link. Wrap-safe wipe: the cyan underline
   wipes in on hover and, via box-decoration-break, repeats under every line
   when the label wraps; the arrow flows inline and slides on hover.
   The proof section's existing `.link` markup inherits the same style. ── */
.bh-link,.pf-cap__copy .link{display:inline;font-size:.95rem;font-weight:600;color:#dceaff;text-decoration:none}
.bh-link .t,.pf-cap__copy .link .t{background-image:linear-gradient(90deg,var(--a-cyan),var(--a-cyan));background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:2px;transition:background-size .32s var(--ease-out)}
.bh-link:hover .t,.pf-cap__copy .link:hover .t{background-size:100% 1.5px}
.bh-link svg,.pf-cap__copy .link svg{width:15px;height:15px;vertical-align:-2px;margin-left:.35rem;transition:transform .25s}
.bh-link:hover,.pf-cap__copy .link:hover{color:#fff;text-decoration:none}
.bh-link:hover svg,.pf-cap__copy .link:hover svg{transform:translateX(4px)}
.pf-cap__copy .link,.pf-cap__copy .bh-link{margin-top:1.5rem}

/* ===================== PROOF PRIMITIVES (pf-*) ===================== */
.pf{font-size:13px;color:var(--t-base);width:100%;max-width:520px;position:relative}
.pf::before{content:"";position:absolute;inset:-9% -6% -13% -6%;z-index:0;background:radial-gradient(60% 60% at 55% 42%,rgba(116,255,226,.07),transparent 70%);filter:blur(8px);pointer-events:none}
.pf > *{position:relative;z-index:1}

.pf-crumb{display:flex;align-items:center;gap:9px;margin-bottom:var(--sp-4);font-size:12px;color:var(--t-dim)}
.pf-crumb__b{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--t-base)}
.pf-crumb__b svg{width:14px;height:14px;color:var(--a-link)}
.pf-crumb__sep{color:var(--t-faint)}
.pf-aipill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--r-chip);font-size:11px;font-weight:700;color:#06201b;background:var(--g-cyan);box-shadow:0 6px 16px rgba(63,233,200,.28)}
.pf-aipill svg{width:12px;height:12px}

.pf-card{background:linear-gradient(180deg,var(--c-card-top),var(--c-card-bot));border:1px solid var(--c-border);border-radius:var(--r-card);padding:13px 15px;box-shadow:var(--sh-card)}

.pf-report{display:flex;align-items:center;gap:var(--sp-3)}
.pf-report__num{width:22px;height:22px;flex:0 0 22px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--t-dim);background:rgba(108,148,220,.12);border:1px solid var(--c-border-soft)}
.pf-report__body{flex:1;min-width:0}
.pf-report__top{display:flex;align-items:baseline;gap:8px}
.pf-report__id{font-size:11px;color:var(--t-faint)}
.pf-report__title{font-weight:600;font-size:13px;color:var(--t-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-report__meta{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:11.5px;color:var(--t-dim)}

.pf-av{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;font-weight:700;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);flex:0 0 18px}
.pf-av--player{background:linear-gradient(135deg,#b98cff,#8a5cf0)}
.pf-av--player2{background:linear-gradient(135deg,#6aa6ff,#4d7ee6)}
.pf-av--bot{background:linear-gradient(135deg,#4be0c4,#27b89b)}
.pf-heat{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-chip);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--a-amber);background:rgba(245,147,78,.13);border:1px solid rgba(245,147,78,.2);margin-left:auto}
.pf-heat svg{width:11px;height:11px}
.pf-heat--hot{color:#ff7a9c;background:rgba(230,85,122,.14);border-color:rgba(230,85,122,.24)}
.pf-hbar{height:5px;border-radius:var(--r-chip);background:rgba(108,148,220,.16);overflow:hidden;flex:1}
.pf-hbar i{display:block;height:100%;border-radius:var(--r-chip)}
.pf-hbar i.crit{background:var(--g-red)}.pf-hbar i.warm{background:linear-gradient(90deg,#ffb070,#f5934e)}.pf-hbar i.cool{background:linear-gradient(90deg,#6aa6ff,#4d7ee6)}

.pf-connector{display:flex;flex-direction:column;align-items:center}
.pf-connector__line{width:2px;height:15px;background:linear-gradient(180deg,var(--c-border),rgba(43,199,132,.55))}
.pf-connector__chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-chip);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#bff3df;background:rgba(13,30,24,.92);border:1px solid rgba(43,199,132,.4);box-shadow:var(--sh-pop)}
.pf-connector__chip svg{width:12px;height:12px;color:var(--a-green)}

.pf-result{display:flex;align-items:center;gap:13px;border-radius:var(--r-feature);padding:15px 16px;background:linear-gradient(135deg,rgba(43,199,132,.2),rgba(43,199,132,.06));border:1px solid rgba(43,199,132,.4);box-shadow:var(--sh-feature)}
.pf-result__ic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;color:#06231a;background:var(--g-green);box-shadow:0 6px 16px rgba(43,199,132,.4)}
.pf-result__ic svg{width:18px;height:18px}
.pf-result__body{flex:1;min-width:0}
.pf-result__title{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:#eafff6}
.pf-result__sub{font-size:11.5px;color:rgba(190,228,210,.8);margin-top:2px}
.pf-result__chip{font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--r-chip);white-space:nowrap;color:#0a2c1f;background:linear-gradient(135deg,#7fe9c2,#2bc784)}

.pf-hero{display:flex;align-items:center;gap:13px;border-radius:var(--r-feature);padding:15px 16px;background:linear-gradient(135deg,rgba(230,85,122,.18),rgba(230,85,122,.05));border:1px solid rgba(230,85,122,.4);box-shadow:0 26px 52px -24px rgba(40,6,18,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.pf-hero__flag{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--g-red);box-shadow:0 6px 16px rgba(230,85,122,.4)}
.pf-hero__flag svg{width:17px;height:17px}
.pf-hero__body{flex:1;min-width:0}
.pf-hero__k{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffb3c5;margin-bottom:2px}
.pf-hero__title{font-family:'Poppins',sans-serif;font-weight:700;font-size:14.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-hero__score{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.pf-hero__num{font-size:17px;font-weight:800;color:#ff7a9c;font-variant-numeric:tabular-nums}
.pf-hero__unit{font-size:9px;color:#ffb3c5;font-weight:700;margin-top:2px}

.pf-stackrow{display:flex;align-items:center;gap:11px;background:rgba(22,33,58,.7);border:1px solid var(--c-border-soft);border-radius:11px;padding:9px 12px}
.pf-stackrow__n{font-size:11px;font-weight:700;color:var(--t-faint);width:14px}
.pf-stackrow__title{font-weight:600;font-size:12px;color:var(--t-dim);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-stackrow__score{font-size:11px;font-weight:700;color:var(--a-amber);font-variant-numeric:tabular-nums}

.pf-chat{display:flex;flex-direction:column;gap:13px}
.pf-msg{display:flex;gap:10px;align-items:flex-end;max-width:88%}
.pf-msg--user{align-self:flex-end;flex-direction:row-reverse}
.pf-bubble{padding:11px 14px;border-radius:15px;font-size:13px;line-height:1.45;box-shadow:0 16px 32px -18px rgba(2,8,20,.9)}
.pf-msg--bot .pf-bubble{background:linear-gradient(135deg,rgba(116,255,226,.16),rgba(116,255,226,.07));border:1px solid rgba(116,255,226,.28);color:#dffff8;border-bottom-left-radius:5px}
.pf-msg--user .pf-bubble{background:linear-gradient(135deg,#1f2d4a,#1a2742);border:1px solid var(--c-border);color:#e7efff;border-bottom-right-radius:5px}
.pf-attach{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:6px 10px;border-radius:8px;background:rgba(8,16,28,.6);border:1px solid var(--c-border-soft);font-size:11.5px;color:#cdd9ec}
.pf-attach svg{width:13px;height:13px;color:var(--a-link)}
.pf-more{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-chip);font-size:11px;font-weight:600;color:var(--t-dim);background:rgba(108,148,220,.07);border:1px dashed var(--c-border)}
.pf-more b{color:var(--t-base);font-variant-numeric:tabular-nums}
.pf-review{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-chip);font-size:11px;font-weight:600;color:#bff3df;background:transparent;border:1px solid rgba(43,199,132,.34);cursor:pointer;white-space:nowrap;transition:.2s}
.pf-review:hover{background:rgba(43,199,132,.1);border-color:rgba(43,199,132,.5)}
.pf-review svg{width:12px;height:12px}
.pf-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:7px;font-size:11px;font-weight:600;white-space:nowrap}
.pf-tag .k{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.62}
.pf-tag .edit{width:11px;height:11px;opacity:.5;margin-left:1px}
.pf-tag--area{color:#bcd0f3;background:rgba(94,154,255,.14);border:1px solid rgba(94,154,255,.3)}
.pf-tag--type{color:#bff8ee;background:rgba(116,255,226,.12);border:1px solid rgba(116,255,226,.3)}
.pf-tag--plat{color:#e0cdfb;background:rgba(169,140,240,.16);border:1px solid rgba(169,140,240,.32)}
.pf-tok{border-radius:4px;padding:0 4px;font-weight:600}
.pf-tok--area{color:#cfe0ff;background:rgba(94,154,255,.18)}
.pf-tok--type{color:#d6fff6;background:rgba(116,255,226,.16)}
.pf-tok--plat{color:#ecdfff;background:rgba(169,140,240,.2)}
.pf-source{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--t-faint);margin-bottom:8px}
.pf-source svg{width:13px;height:13px;color:var(--t-dim);opacity:.85}
.pf-source b{color:var(--t-dim);font-weight:600}
.pf-msg--named{align-items:flex-start}
.pf-msg--named > div{min-width:0}
.pf-sender{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--t-base);margin-bottom:5px;padding:0 2px}
.pf-msg--user .pf-sender{flex-direction:row-reverse}
.pf-bottag{font-size:8.5px;font-weight:800;letter-spacing:.04em;color:#06201b;background:var(--g-cyan);padding:1px 5px;border-radius:4px;text-transform:uppercase}
.pf-time{font-size:10.5px;color:var(--t-faint);font-weight:400}
.pf-cite{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:5px 10px;border-radius:8px;font-size:11px;font-weight:600;color:#9fd0ff;background:rgba(94,154,255,.1);border:1px solid rgba(94,154,255,.26);cursor:pointer}
.pf-cite svg{width:12px;height:12px}
.pf-cite .src{color:var(--t-faint);font-weight:500}
.pf-channel{display:flex;align-items:center;gap:8px;margin-bottom:var(--sp-4);font-size:12.5px;color:var(--t-dim);font-weight:600}
.pf-channel > svg{width:14px;height:14px;color:var(--t-faint)}
.pf-channel__name{color:var(--t-base)}
.pf-channel__status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--t-faint)}
.pf-channel__status svg{width:12px;height:12px;color:var(--t-faint)}
.pf-rule{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;background:rgba(94,154,255,.07);border:1px dashed rgba(94,154,255,.28);font-size:11.5px;color:var(--t-dim);margin-bottom:var(--sp-3)}
.pf-rule > svg{width:14px;height:14px;color:var(--a-link);flex:0 0 14px}
.pf-rule b{color:var(--t-base);font-weight:600}
.pf-rule .trig{color:#9fd0ff}
.pf-rule__on{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--a-green)}
.pf-rule__on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a-green);box-shadow:0 0 6px var(--a-green)}
.pf-checklist{display:flex;gap:14px;flex-wrap:wrap;margin-top:3px}
.pf-checklist span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:rgba(190,228,210,.85);font-weight:600}
.pf-checklist svg{width:12px;height:12px;color:var(--a-green)}
.pf-stack{display:flex;flex-direction:column;gap:var(--sp-2)}
.pf-mt-stack{margin-top:11px;display:flex;flex-direction:column;gap:var(--sp-2);padding-left:14px}

/* ===================== MOTION ===================== */
.pf-anim .pf-rise{opacity:0;transform:translateY(14px);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
.pf-anim.is-in .pf-rise{opacity:1;transform:none}
.pf-anim .pf-rise:nth-child(1){transition-delay:0ms}
.pf-anim .pf-rise:nth-child(2){transition-delay:var(--stagger)}
.pf-anim .pf-rise:nth-child(3){transition-delay:calc(var(--stagger)*2)}
.pf-anim .pf-rise:nth-child(4){transition-delay:calc(var(--stagger)*3)}
.pf-anim .pf-rise:nth-child(5){transition-delay:calc(var(--stagger)*4)}
.pf-anim .pf-pop{opacity:0;transform:scale(.86);transition:opacity var(--d-pop) var(--ease-out),transform var(--d-pop) var(--ease-back);transition-delay:calc(var(--stagger)*3)}
.pf-anim.is-in .pf-pop{opacity:1;transform:none}
.pf-anim .pf-win{opacity:0;transform:translateY(10px) scale(.98);transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-back);transition-delay:calc(var(--stagger)*4)}
.pf-anim.is-in .pf-win{opacity:1;transform:none}
.pf-anim.is-in .pf-win.glow{animation:pfGlow 1.6s var(--ease-out) calc(var(--stagger)*5) 1}
@keyframes pfGlow{0%{box-shadow:var(--sh-feature)}40%{box-shadow:var(--sh-feature),0 0 0 1px rgba(116,255,226,.4),0 0 30px rgba(43,199,132,.35)}100%{box-shadow:var(--sh-feature)}}
@media(prefers-reduced-motion:reduce){
  .pf-anim .pf-rise,.pf-anim .pf-pop,.pf-anim .pf-win{opacity:1!important;transform:none!important;transition:none!important}
  .pf-anim.is-in .pf-win.glow{animation:none!important}
}