/* ============================================================
   Foundry — shared brand layer
   Paying.co Brand Style Guide v1.0
   Loaded AFTER each page's inline <style>, so these tokens win.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ---- Brand core ---- */
  --brand-navy:#000D3C;
  --brand-mint:#5BF2B0;
  --brand-cyan:#00CCDB;

  /* Signature gradient — Mint -> Cyan, 90deg, never flattened */
  --grad:linear-gradient(90deg, var(--brand-mint) 0%, var(--brand-cyan) 100%);
  --grad-soft:linear-gradient(90deg, rgba(91,242,176,.16) 0%, rgba(0,204,219,.16) 100%);
  --grad-hair:linear-gradient(90deg, var(--brand-mint) 0%, var(--brand-cyan) 100%);

  /* Navy ramp */
  --navy-900:#000D3C;
  --navy-800:#04154E;
  --navy-700:#0A1F63;
  --navy-600:#122C7C;

  /* Cyan / mint ramps */
  --cyan-700:#007F8A;
  --cyan-600:#00A3AF;
  --cyan-500:#00CCDB;
  --cyan-100:#D6F7FA;
  --mint-600:#2FCE8B;
  --mint-500:#5BF2B0;
  --mint-100:#DEFCEE;

  /* System feedback only */
  --amber-500:#F2A93B;
  --amber-100:#FDF0DA;
  --red-500:#E5484D;
  --red-100:#FDE7E7;

  /* ---- Type ---- */
  --sans:'Poppins',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
}

/* ============================================================
   LIGHT THEME (default) — the flaw.co surface
   ============================================================ */
:root,
[data-theme="light"]{
  --bg:#F4F8FB;
  --bg-top:#F4F8FB;
  --bg-bot:#E8F1F7;
  --bg2:#E8F1F7;
  --void:#E8F1F7;

  --panel:#FFFFFF;
  --panel-solid:#FFFFFF;
  --panel-2:#F7FAFC;

  --line:rgba(0,13,60,.10);
  --line-bright:rgba(0,13,60,.16);

  --ink:#000D3C;
  --ink-dim:#41527A;
  --ink-faint:#7E8CAB;

  --navy:#000D3C;
  --teal:#00CCDB;
  --mint:#5BF2B0;
  --mint-soft:#DEFCEE;
  --green:#2FCE8B;

  --nav-bg:#000D3C;
  --nav-bg2:#04154E;
  --nav-line:rgba(255,255,255,.09);
  --cta-band:#EDF3F8;
  --connector-line:rgba(0,13,60,.16);
  --connector-glyph-bg:#E8EFF6;

  /* ---- Semantic diagram accents ----
     Rebuilt as one cohesive family. Core & provisioned sit on-brand
     (cyan / mint). The two off-brand layers are re-derived as a
     deliberate secondary set: indigo for hardware, plum for crypto.
     Every hue is chosen to read against a white card at AA. */
  --core:#0089A8;          /* reusable core — brand cyan, darkened for text */
  --core-deep:#D6F7FA;
  --flow:#0089A8;
  --flow-deep:#D6F7FA;
  --flow-2:#0F7CB8;
  --flow-2-deep:#DCEEF9;

  --prov:#12A374;          /* provisioned / verified — brand mint, darkened */
  --prov-deep:#DEFCEE;
  --ok:#12A374;
  --ok-deep:#DEFCEE;
  --cfg:#0F7CB8;           /* config feed — indigo-cyan */
  --cfg-deep:#DCEEF9;

  --adapter:#A65A63;       /* variable outside — muted clay-rose, low chroma */
  --adapter-deep:#F6E6E7;
  --proc:#A65A63;
  --proc-soft:#C98D93;
  --proc-deep:#F6E6E7;

  --device:#2F52C7;        /* hardware / SDK boundary — indigo */
  --device-deep:#E2E8FB;
  --kernel:#2F52C7;
  --kernel-deep:#E2E8FB;

  --crypto:#6A3FBF;        /* cryptography — violet, held from original */
  --crypto-deep:#EBE4FB;
  --key:#6A3FBF;
  --key-deep:#EBE4FB;
  --auth:#6A3FBF;
  --auth-deep:#EBE4FB;
  --lav:#A98CE0;
  --lav-soft:#EBE4FB;
  --violet:#C3ACEE;

  --txn:#0089A8;
  --txn-deep:#D6F7FA;
  --get:#2F52C7;
  --get-deep:#E2E8FB;
  --post:#12A374;
  --post-deep:#DEFCEE;

  --soon:#7E8CAB;          /* not yet wired */
  --soon-deep:#EEF1F6;
  --warn:#B87708;          /* system feedback only */
  --warn-deep:#FDF0DA;
  --amber:#F2A93B;
  --rose:#E5484D;
}

/* ============================================================
   DARK THEME — the Velo surface
   ============================================================ */
[data-theme="dark"]{
  --bg:#000D3C;
  --bg-top:#04154E;
  --bg-bot:#000D3C;
  --bg2:#04154E;
  --void:#000D3C;

  --panel:#0A1F63;
  --panel-solid:#0A1F63;
  --panel-2:#122C7C;

  --line:rgba(255,255,255,.12);
  --line-bright:rgba(255,255,255,.22);

  --ink:#EAF3FF;
  --ink-dim:#A9BEDC;
  --ink-faint:#6F86AE;

  --navy:#FFFFFF;
  --teal:#00CCDB;
  --mint:#5BF2B0;
  --mint-soft:rgba(91,242,176,.16);
  --green:#5BF2B0;

  --nav-bg:#000A2E;
  --nav-bg2:#04154E;
  --nav-line:rgba(255,255,255,.08);
  --cta-band:#000A2E;
  --connector-line:rgba(255,255,255,.14);
  --connector-glyph-bg:#0A1F63;

  /* Same semantic family, lifted for a dark card */
  --core:#5FE9F5;
  --core-deep: rgba(255,255,255,.07);
  --flow:#5FE9F5;
  --flow-deep: rgba(255,255,255,.07);
  --flow-2:#5AA9E8;
  --flow-2-deep: rgba(255,255,255,.07);

  --prov:#5BF2B0;
  --prov-deep: rgba(255,255,255,.07);
  --ok:#5BF2B0;
  --ok-deep: rgba(255,255,255,.07);
  --cfg:#5AA9E8;
  --cfg-deep: rgba(255,255,255,.07);

  --adapter:#E09AA1;
  --adapter-deep: rgba(255,255,255,.07);
  --proc:#E09AA1;
  --proc-soft:#C98D93;
  --proc-deep: rgba(255,255,255,.07);

  --device:#8FA8F5;
  --device-deep: rgba(255,255,255,.07);
  --kernel:#8FA8F5;
  --kernel-deep: rgba(255,255,255,.07);

  --crypto:#B79BF0;
  --crypto-deep: rgba(255,255,255,.07);
  --key:#B79BF0;
  --key-deep: rgba(255,255,255,.07);
  --auth:#B79BF0;
  --auth-deep: rgba(255,255,255,.07);
  --lav:#B79BF0;
  --lav-soft:rgba(106,63,191,.26);
  --violet:#C3ACEE;

  --txn:#5FE9F5;
  --txn-deep: rgba(255,255,255,.07);
  --get:#8FA8F5;
  --get-deep: rgba(255,255,255,.07);
  --post:#5BF2B0;
  --post-deep: rgba(255,255,255,.07);

  --soon:#6F86AE;
  --soon-deep: rgba(255,255,255,.07);
  --warn:#F2A93B;
  --warn-deep: rgba(255,255,255,.07);
  --amber:#F2A93B;
  --rose:#E5484D;
}

/* ============================================================
   Typography — Poppins everywhere
   ============================================================ */
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.brand .name,.tcard .ti,.toc-card .tinfo .tt{
  font-family:var(--sans);
  letter-spacing:-.015em;
}

/* Cards & panels pick up the theme */
.tcard,.toc-card,.panel,.card{
  background:var(--panel);
  transition:background .25s ease, box-shadow .25s ease;
}
[data-theme="dark"] .tcard,
[data-theme="dark"] .toc-card{
  border:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.34);
}
[data-theme="dark"] .tcard .ti,
[data-theme="dark"] .toc-card .tinfo .tt{ color:#FFFFFF; }
[data-theme="dark"] .tcard p,
[data-theme="dark"] .toc-card .tinfo .tds{ color:var(--ink-dim); }
[data-theme="dark"] .tcard code{
  color:var(--brand-mint);
  background:rgba(91,242,176,.12);
}

/* ============================================================
   Gradient system — the flaw.co / Velo signature
   ============================================================ */

/* Gradient hairline under the sidebar brand block */
.brand{ position:relative; }
.brand::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--grad-hair);
  opacity:.9;
}

/* Active nav item gets the gradient rail, not a flat mint bar */
.navitem.active::before{
  background:var(--grad-hair) !important;
  width:3px !important;
  border-radius:0 3px 3px 0 !important;
}
.navitem.active{
  background:var(--grad-soft) !important;
}
.navitem.active .num{ color:var(--brand-mint) !important; }

/* Gradient numerals on the TOC cards */
.toc-card .tn{
  background:var(--grad) !important;
  color:var(--brand-navy) !important;
  font-weight:700;
}
.toc-card{
  position:relative;
  overflow:hidden;
  border-radius:14px;
}
/* Gradient top-edge reveal on hover */
.toc-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:3px;
  background:var(--grad);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.toc-card:hover::before{ transform:scaleX(1); }
.toc-card:hover .tarrow{ color:var(--brand-cyan); }

/* Gradient-topped section panels */
.tcard{
  position:relative;
  overflow:hidden;
  border-radius:14px;
}
.tcard::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:3px;
  background:var(--grad);
}

/* Gradient text — display headlines only, never body copy */
.intro h1 .hl,
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Kicker / eyebrow */
.intro-kick,
.intro-section h2{
  color:var(--brand-cyan) !important;
  font-family:var(--mono);
}

/* ---- Status pills — mint / cyan ---- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  padding:5px 12px; border-radius:999px;
  letter-spacing:.04em;
}
.pill-ship{ background:var(--mint-100); color:#0B7A52; border:1px solid rgba(91,242,176,.5); }
.pill-live{ background:var(--cyan-100); color:#00707A; border:1px solid rgba(0,204,219,.5); }
.pill-soon{ background:var(--soon-deep); color:var(--soon); border:1px solid var(--line); }
[data-theme="dark"] .pill-ship{ background:rgba(91,242,176,.14); color:var(--brand-mint); border-color:rgba(91,242,176,.34); }
[data-theme="dark"] .pill-live{ background:rgba(0,204,219,.14); color:#3EE0F0; border-color:rgba(0,204,219,.34); }
[data-theme="dark"] .pill-soon{ background:rgba(255,255,255,.06); color:var(--ink-faint); border-color:var(--line); }

/* ---- Fully-rounded CTA ---- */
.cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 26px;
  border-radius:999px;
  background:var(--grad);
  color:var(--brand-navy);
  font-weight:600; font-size:14px;
  border:none; cursor:pointer;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(0,204,219,.24);
  transition:transform .16s ease, box-shadow .16s ease;
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,204,219,.34); }
.cta-ghost{
  background:transparent;
  border:1px solid var(--line-bright);
  color:var(--ink);
  box-shadow:none;
}
.cta-ghost:hover{ border-color:var(--brand-cyan); color:var(--brand-cyan); transform:translateY(-1px); box-shadow:none; }

/* ---- Rounded meta cards, cyan key labels ---- */
.meta-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
}
.meta-card .k{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-cyan);
  margin-bottom:6px;
}
.meta-card .v{ font-size:14px; color:var(--ink); font-weight:500; }

/* Intro chips inherit the meta-card language */
.intro-meta .chip{
  border-radius:999px !important;
  border:1px solid var(--line-bright) !important;
  background:var(--panel-2) !important;
  color:var(--ink-dim) !important;
  padding:6px 14px !important;
}
.intro-meta .chip b{ color:var(--brand-cyan) !important; }
[data-theme="dark"] .intro-meta .chip{
  background:rgba(255,255,255,.05) !important;
  color:#DBF0EC !important;
}

/* ============================================================
   Intro surface — unified with the subpages
   ============================================================ */
#intro{
  background:
    radial-gradient(110% 80% at 84% 6%, rgba(91,242,176,.14) 0%, rgba(0,204,219,.07) 36%, transparent 64%),
    linear-gradient(170deg, var(--bg-top) 0%, var(--bg-bot) 100%) !important;
}
.intro h1{ color:var(--ink); }
.intro-lede{ color:var(--ink-dim); }
.intro-lede b{ color:var(--ink); font-weight:600; }
.intro-foot{
  color:var(--ink-dim);
  border-top:1px solid var(--line);
}
.intro-foot b{ color:var(--ink); }

/* Sidebar stays navy in both themes — the constant spine */
.nav{
  background:linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg2) 100%) !important;
  border-right:1px solid var(--nav-line);
}
.brand .name{ color:#FFFFFF; }
.brand .name b{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand .tag{ color:#7E8CAB; }
.navitem .lbl{ color:#A9BEDC; }
.navitem.active .lbl{ color:#FFFFFF; }
.navitem:hover{ background:rgba(255,255,255,.05); }

/* ============================================================
   Theme toggle
   ============================================================ */

/* Iframed subpages sit under the sidebar; keep the toggle clear of them */
.frame + .theme-toggle,
.content .theme-toggle{ right:18px; }

/* ============================================================
   Quality floor
   ============================================================ */
a:focus-visible,
button:focus-visible,
.navitem:focus-visible,
.toc-card:focus-visible{
  outline:2px solid var(--brand-cyan);
  outline-offset:2px;
  border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .toc-card:hover{ transform:none; }
  .cta:hover{ transform:none; }
}

@media(max-width:880px){
  .theme-toggle{ top:14px; right:14px; height:36px; padding:0 12px; }
  .theme-toggle .lb{ display:none; }
}

/* ============================================================
   Doc footer — persistent CTA band (all nine pages)
   The one outbound path off the docs. Same element everywhere
   so it reads as furniture, not as a repeated interruption.
   ============================================================ */
.doc-cta{
  position:relative;
  border-top:1px solid var(--line);
  background:var(--cta-band);
  padding:44px 40px 48px;
  margin-top:56px;
}
/* gradient hairline across the top — ties the band to the brand system */
.doc-cta::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px;
  height:2px;
  background:var(--grad);
  opacity:.85;
}
.doc-cta-inner{
  max-width:920px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.doc-cta .lede{ max-width:520px; }
.doc-cta .k{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand-cyan); margin-bottom:8px;
}
.doc-cta h3{
  font-size:20px; font-weight:600;
  color:var(--ink); letter-spacing:-.015em;
  margin-bottom:6px;
}
.doc-cta p{
  font-size:14px; line-height:1.55; color:var(--ink-dim);
}
.doc-cta .acts{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* Sits inside the sidebar footer too — quiet, persistent */
.nav-cta{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; height:36px; margin-bottom:10px;
  border-radius:999px;
  background:var(--grad);
  color:#000D3C;
  font-size:12px; font-weight:600;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,204,219,.30); }
.nav-cta:focus-visible{ outline:2px solid var(--brand-cyan); outline-offset:2px; }

@media(max-width:880px){
  .doc-cta{ padding:34px 22px 38px; }
  .doc-cta-inner{ flex-direction:column; align-items:flex-start; }
  .doc-cta .acts{ width:100%; }
  .doc-cta .acts .cta,
  .doc-cta .acts .cta-ghost{ flex:1; justify-content:center; }
}

/* ============================================================
   Legacy dark-page hardcodes — theme-corrected
   The original diagrams were authored on a dark navy page, so
   connectors, glyphs, breadcrumbs and dividers were hardcoded
   rgba(255,255,255,...). Those don't survive a light theme (and
   are too hot on the new dark one). Re-derive them from tokens.
   ============================================================ */

/* The vertical connector rule between diagram tiers */
.connector::before{
  background:var(--connector-line) !important;
}
/* The label that rides on the connector — was a hardcoded teal blob */
.connector .glyph{
  color:var(--ink-dim) !important;
  background:var(--connector-glyph-bg) !important;
  border-radius:999px;
}

/* Breadcrumb pills */
.breadcrumb .bc-step{
  border:1px solid var(--line) !important;
  color:var(--ink-dim) !important;
  background:var(--panel-2) !important;
}
.breadcrumb .bc-step.active,
.breadcrumb .bc-step[class*="cur"]{
  border-color:transparent !important;
  background:var(--grad) !important;
  color:var(--brand-navy) !important;
}

/* Section dividers */
section + section{
  border-top:1px solid var(--line) !important;
}

/* Hairline rules inside diagram panels */
.rail::before,
.spine::before,
.axis::before{
  background:var(--connector-line) !important;
}


/* ============================================================
   Accent-on-accent fix
   The *-deep tokens are now neutral dark panels in dark mode, so
   accent text reads against them. Ensure any element that pairs
   an accent bg with accent text keeps enough separation.
   ============================================================ */
[data-theme="dark"] .tag,
[data-theme="dark"] .tier-tag,
[data-theme="dark"] .badge,
[data-theme="dark"] .pstatus,
[data-theme="dark"] .ptag,
[data-theme="dark"] .m,
[data-theme="dark"] .api,
[data-theme="dark"] .chip,
[data-theme="dark"] .gtag,
[data-theme="dark"] .req{
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
}
/* dim helper text needs to clear 4.5:1 on the panel */
[data-theme="dark"]{ --ink-faint:#8FA3C4; }
[data-theme="light"]{ --ink-faint:#5E6E8C; }

/* ============================================================
   Remaining light surfaces — the header/band/cell fills
   These are opaque near-white blocks (.tier-head, .iface-head,
   .sig, .th, .group-head, .seam-band, .layer, .code, .ep, .res)
   painted by page CSS. On dark they glare and their near-black
   text still sits on them. Recede them to a panel tone.
   ============================================================ */
[data-theme="dark"] .tier-head,
[data-theme="dark"] .iface-head,
[data-theme="dark"] .group-head,
[data-theme="dark"] .seam-band,
[data-theme="dark"] .sig,
[data-theme="dark"] th,
[data-theme="dark"] .res,
[data-theme="dark"] .layer,
[data-theme="dark"] .l,
[data-theme="dark"] code,
[data-theme="dark"] .ep,
[data-theme="dark"] .ptag{
  background:#122C7C !important;
  border-color:var(--line) !important;
  color:var(--ink) !important;
}
/* their child text follows */
[data-theme="dark"] .tier-head *,
[data-theme="dark"] .iface-head *,
[data-theme="dark"] .group-head *,
[data-theme="dark"] .seam-band *,
[data-theme="dark"] .sig *,
[data-theme="dark"] th *,
[data-theme="dark"] .res *,
[data-theme="dark"] .layer *,
[data-theme="dark"] code *,
[data-theme="dark"] .ep *{
  color:var(--ink) !important;
}
/* code blocks keep mint for the actual identifiers */
[data-theme="dark"] code,
[data-theme="dark"] code *{
  background:rgba(91,242,176,.10) !important;
  color:var(--brand-mint) !important;
}
/* Accent dots/pills stay bright — they are meant to pop */
[data-theme="dark"] .dot,
[data-theme="dark"] .dotc,
[data-theme="dark"] .sw,
[data-theme="dark"] .edge,
[data-theme="dark"] .pill{
  /* leave as-is */
}

/* ============================================================
   Theme toggle — floating, reachable on every page & viewport
   Previously lived in the sidebar footer, which is off-canvas
   below 880px (and absent entirely on deep-linked subpages).
   ============================================================ */
.theme-toggle{
  position:fixed;
  top:16px; right:18px;
  z-index:80;
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 15px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink-dim);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 3px 16px rgba(0,13,60,.14);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.theme-toggle:hover{
  border-color:var(--brand-cyan);
  color:var(--brand-cyan);
  transform:translateY(-1px);
}
.theme-toggle:focus-visible{
  outline:2px solid var(--brand-cyan);
  outline-offset:2px;
}
.theme-toggle .ic{ font-size:13px; line-height:1; }
[data-theme="dark"] .theme-toggle{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:var(--ink-dim);
  box-shadow:none;
}

@media(max-width:880px){
  /* clear the hamburger, which sits top-left */
  .theme-toggle{ top:14px; right:14px; height:36px; padding:0 12px; }
  .theme-toggle .lb{ display:none; }   /* icon-only on small screens */
  .theme-toggle .ic{ font-size:15px; }
}

/* ============================================================
   Footer logo — lower-left of the CTA band, swaps per theme
   ============================================================ */
.doc-cta-inner{
  position:relative;
  padding-bottom:8px;
}
.cta-logo{
  display:inline-block;     /* hug the image, not the full row */
  width:fit-content;
  align-self:flex-start;
  order:99;                 /* pushed to its own row, lower-left */
  margin-top:22px;
  margin-right:auto;
  opacity:.85;
  transition:opacity .18s ease;
}
.cta-logo:hover{ opacity:1; }
.cta-logo:focus-visible{
  outline:2px solid var(--brand-cyan);
  outline-offset:3px;
  border-radius:4px;
}
.cta-logo img{
  display:block;
  height:26px;
  width:auto;
}
/* show the right variant for the active theme */
.cta-logo .lg-dark{ display:none; }
.cta-logo .lg-light{ display:block; }
[data-theme="dark"] .cta-logo .lg-dark{ display:block; }
[data-theme="dark"] .cta-logo .lg-light{ display:none; }

/* the band is a 2-row flex: content + actions, then the logo beneath */
.doc-cta-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
.doc-cta .lede{ flex:1 1 380px; order:1; }
.doc-cta .acts{ order:2; }
.cta-logo{
  flex:0 0 auto;
  width:fit-content;
}
/* force the row break without widening the logo itself */
.doc-cta-inner::before{
  content:"";
  flex-basis:100%;
  height:0;
  order:98;
}

@media(max-width:880px){
  .cta-logo img{ height:22px; }
  .cta-logo{ margin-top:18px; }
}

/* ============================================================
   Sidebar brand — the real Foundry lockup
   Replaces the broken foundry-icon.png + "Foundry" text node.
   The lockup already carries the wordmark AND the EMV L3
   Framework tagline, so no separate .name/.tag is needed.
   ============================================================ */
.brand{
  padding:22px 22px 20px;
  position:relative;
}
.brand .logo{
  display:block;
  text-decoration:none;
  line-height:0;
}
.brand .lockup{
  display:block;
  height:38px;
  width:auto;
  max-width:100%;
}
/* swap per theme */
.brand .lk-dark{ display:none; }
.brand .lk-light{ display:block; }
[data-theme="dark"] .brand .lk-dark{ display:block; }
[data-theme="dark"] .brand .lk-light{ display:none; }

.brand .logo:focus-visible{
  outline:2px solid var(--brand-cyan);
  outline-offset:4px;
  border-radius:4px;
}

/* The sidebar is navy in BOTH themes, so it always needs the
   white-wordmark lockup — override the light-theme default. */
.nav .brand .lk-light{ display:none; }
.nav .brand .lk-dark{ display:block; }

/* ============================================================
   Connector geometry — the runaway vertical line
   Original CSS sets height only via `.tier + .connector{height:30px}`.
   Connectors that DON'T directly follow a .tier (e.g. the one after
   <p class="flow-label">) get no height, so `top:0;bottom:0` on the
   ::before stretches them to the full page. Give .connector its own
   height so every instance is bounded.
   ============================================================ */
.connector{
  height:30px !important;
  position:relative !important;
  overflow:hidden;           /* belt & braces: never escape the box */
}
.connector::before{
  top:0 !important;
  bottom:0 !important;
  height:auto !important;
}

/* ============================================================
   Light surface — flat, matching flaw.co (--paper:#fbfcfe)
   Replaces the radial+linear gradient wash on the intro and the
   bg-top/bg-bot ramp on the interior pages.
   ============================================================ */

[data-theme="light"]{
  --bg:#FBFCFE;
  --bg-top:#FBFCFE;
  --bg-bot:#FBFCFE;
  --bg2:#FBFCFE;
  --void:#FBFCFE;
  --panel:#FFFFFF;      /* flaw.co --card */
  --panel-2:#F6F8FB;
  --line:#ECEEF3;       /* flaw.co --line */
  --line-bright:#E2E6EE;
  --cta-band:#F6F8FB;
}
[data-theme="light"] body,
[data-theme="light"] #intro,
[data-theme="light"] .content,
[data-theme="light"] section{
  background:var(--bg) !important;
  background-image:none !important;
}
[data-theme="dark"] body,
[data-theme="dark"] #intro,
[data-theme="dark"] .content,
[data-theme="dark"] section{
  background:var(--bg) !important;
  background-image:none !important;
}

/* gradient hairline under the sidebar brand (re-anchored after the
   lockup swap replaced the old .brand text block) */
.nav .brand::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--grad);
  opacity:.9;
}

/* ============================================================
   Site footer — PROPOSED
   Replaces .doc-cta. Foundry lockup left, one CTA right, then a
   base row with the small Paying.co mark and text links.
   Both logos swap with the theme.
   ============================================================ */
.site-foot{
  position:relative;
  margin-top:56px;
  padding:44px 40px 26px;
  background:var(--cta-band);
  border-top:1px solid var(--line);
  font-family:var(--sans);
}
.site-foot::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px;
  height:2px;
  background:var(--grad);
  opacity:.9;
}

.site-foot-main{
  max-width:1000px; margin:0 auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:36px; flex-wrap:wrap;
}

/* --- Foundry lockup, small --- */
.foot-brand{ flex:1 1 380px; }
.foot-lockup{
  display:block;
  height:22px;                /* small, keeps it in context */
  width:auto;
  margin-bottom:12px;
}
.foot-lockup.lk-dark{ display:none; }
[data-theme="dark"] .foot-lockup.lk-dark{ display:block; }
[data-theme="dark"] .foot-lockup.lk-light{ display:none; }

.foot-desc{
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-dim);
  max-width:440px;
  margin:0;
}

.foot-acts{ flex:0 0 auto; padding-top:2px; }

/* --- base row --- */
.site-foot-base{
  max-width:1000px; margin:26px auto 0;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.foot-paying{
  display:inline-block;
  line-height:0;
  opacity:.8;
  transition:opacity .18s ease;
}
.foot-paying:hover{ opacity:1; }
.foot-paying img{
  display:block;
  height:16px;                /* small — keeps the attribution quiet */
  width:auto;
}
.foot-paying .lg-dark{ display:none; }
[data-theme="dark"] .foot-paying .lg-dark{ display:block; }
[data-theme="dark"] .foot-paying .lg-light{ display:none; }

.foot-links{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px;
  color:var(--ink-faint);
}
.foot-links a{
  color:var(--ink-dim);
  text-decoration:none;
  transition:color .16s ease;
}
.foot-links a:hover{ color:var(--brand-cyan); }

.foot-legal{
  margin-left:auto;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
}

.foot-paying:focus-visible,
.foot-links a:focus-visible{
  outline:2px solid var(--brand-cyan);
  outline-offset:3px;
  border-radius:4px;
}

@media(max-width:880px){
  .site-foot{ padding:34px 22px 22px; }
  .site-foot-main{ flex-direction:column; gap:22px; }
  .foot-acts{ width:100%; }
  .foot-acts .cta{ width:100%; justify-content:center; }
  .site-foot-base{ gap:14px; }
  .foot-legal{ margin-left:0; flex-basis:100%; }
}