/* ============================================================
   BYC 2026 - About page (about-2026.php).
   Loads after byc.css (landing design system: hero, pills,
   h-display, frame/brackets, benefits, quote cards, buttons,
   reveal) and byc-chrome.css. Only page-specific additions live
   here. Mirrors design-prototypes/about-v4.html.
   ============================================================ */

/* ---- cover hero: circuit image as background of a bracketed banner ---- */
.cover-sec{padding-top:var(--space-10)}
.cover-clip{position:relative;overflow:hidden;min-height:540px;display:flex;
  align-items:center;background:var(--inset)}
.cover-bg{position:absolute;inset:0;z-index:0;
  background-image:url("/wp-content/uploads/2024/04/serious_tools_for_serious_traders-1-1.jpg");
  background-size:cover;background-position:center 60%}
.cover-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(110% 95% at 50% 45%,transparent 0%,rgba(10,10,11,.5) 100%),
    linear-gradient(180deg,rgba(10,10,11,.42),rgba(10,10,11,.66))}
.cover-inner{position:relative;z-index:2;width:100%;text-align:center;padding:64px var(--space-6)}
.cover-inner .eyebrow{justify-content:center;display:inline-flex;margin-bottom:var(--space-5)}
.cover-inner .h-display{font-size:var(--display-2xl);text-shadow:0 2px 34px rgba(0,0,0,.55)}
.cover-inner .lead{margin:var(--space-6) auto 0;color:#e9e9ec;max-width:56ch;
  text-shadow:0 1px 18px rgba(0,0,0,.5)}
.cover-inner .hero-cta{justify-content:center;margin-top:var(--space-8)}
@media(max-width:720px){.cover-clip{min-height:440px}.cover-inner{padding:48px var(--space-5)}}

/* ---- editorial story split (landing .benefits atoms) ---- */
.about26 .bintro{position:sticky;top:96px}
.about26 .bintro .eyebrow{margin-bottom:18px}
@media(max-width:880px){.about26 .bintro{position:static}}
/* benefits list: red dots instead of 01/02/03 numbers (matches product-page .bullets) */
.benefits .bidx{display:flex;align-items:center;align-self:start;height:1.5em;font-size:var(--fs-lg)}
.benefits .bidx::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
/* subtle experience line under the "Built by traders" heading */
.xp{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6);
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint)}
.xp b{color:var(--text-muted);font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em}
.xp-sep{width:1px;height:13px;background:var(--line-strong)}

/* ---- assurance chips (in the Get started section, above the payment marks) ---- */
.assure{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-3);
  margin-top:var(--space-10)}
.assure .ac{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);border:1px solid var(--line);border-radius:6px;
  padding:var(--space-2) var(--space-4);display:inline-flex;align-items:center;gap:var(--space-2);transition:.16s}
.assure .ac:hover{border-color:var(--line-strong);color:var(--text)}
.assure .ac svg{width:13px;height:13px;fill:none;stroke:var(--accent-dim);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- testimonials: reuse byc.css .quote-grid / .quote atoms ---- */
/* stretch cards to equal height so the .tag footers bottom-align (byc.css sets align-items:start) */
.quote-grid{align-items:stretch}
.quote .who .av{text-transform:uppercase}
.quote .stars{margin-top:calc(var(--space-1) * -1)}
.quote p{flex:1}

/* ---- payment marks (in the Get started section, below the badges) ---- */
.pay-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-8)}
.pay-marks .pm{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--text-muted);
  border:1px solid var(--line);border-radius:4px;padding:6px 10px;background:var(--surface);line-height:1}

/* pulse keyframes (standing rule: every 2026 stylesheet ships them) */
@keyframes bycPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-glow)}
  50%{box-shadow:0 0 0 8px rgba(242,32,46,.07)}}