/* VOUCH v3 brands page. Same tokens as home.css (DESIGN.md), scoped to .b3
   so site.css's own --ink / --paper keep working for the FAQ and the modal. */
.b3{
  --c-canvas:#F4F5F0; --c-surface:#FFFFFF; --c-surface-2:#EEEFE9;
  --c-ink:#16170F; --c-ink-soft:#56574D; --c-accent:#FFFD38; --c-accent-ink:#121311;
  --c-paper:#F7F7F2; --c-paper-ink:#16170F; --c-paper-soft:#5B5C52;
  --c-line:rgb(22 23 15 / .12);
  --c-display:"Archivo","Bahnschrift Condensed","Arial Narrow",sans-serif;
  --c-text:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --c-e2:0 8px 24px rgb(22 23 15 / .10); --c-e3:0 24px 60px rgb(22 23 15 / .14);
  --c-edge:inset 0 1px 0 rgb(255 255 255 / .8);
  --c-ease:cubic-bezier(.23,1,.32,1);
  --c-gut:clamp(1rem,4vw,3rem);
  background:var(--c-canvas); color:var(--c-ink);
  font-family:var(--c-text); font-variant-numeric:tabular-nums;
}
.b3 h1, .b3 h2{
  font-family:var(--c-display); font-stretch:75%; font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; line-height:.98; text-wrap:balance; color:inherit; margin:0;
}
.b3 h1{ font-size:clamp(2.6rem,6vw,5rem); }
.b3 h2{ font-size:clamp(2rem,4vw,3.25rem); }
.b3 :focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; border-radius:6px; }
.b3-lede{ color:var(--c-ink-soft); font-size:1.125rem; line-height:1.6; max-width:52ch; margin:0; }
.b3-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin:0; }
.b3-k{ font:600 .75rem/1.2 var(--c-text); letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-soft); margin:0; }
.b3-pill{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 1.4rem;
  border-radius:999px; font:600 .95rem/1 var(--c-text); text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1.5px solid transparent; transition:transform .14s var(--c-ease), background-color .16s var(--c-ease), border-color .16s var(--c-ease);
}
.b3-pill:active{ transform:scale(.97); }
.b3-pill--accent{ background:var(--c-accent); color:var(--c-accent-ink); box-shadow:var(--c-e2); }
.b3-pill--line{ border-color:var(--c-line); color:var(--c-ink); }
@media (hover:hover) and (pointer:fine){
  .b3-pill--accent:hover{ background:#FFFE80; }
  .b3-pill--line:hover{ border-color:var(--c-ink); }
}
.b3-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--c-accent); box-shadow:0 0 0 3px rgb(255 253 56 / .18); margin-right:.45rem; }

/* ---- hero: copy, then the dashboard rising under it ---------------------- */
.b3-hero{ padding:clamp(3rem,6vw,5rem) var(--c-gut) clamp(3rem,6vw,5rem); }
.b3-hero__copy{ max-width:84rem; margin:0 auto; display:grid; gap:1.4rem; }
.b3-app{
  max-width:84rem; margin:clamp(2.5rem,5vw,4rem) auto 0; display:grid; grid-template-columns:13rem 1fr;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:16px; overflow:hidden;
  box-shadow:var(--c-e3), var(--c-edge);
}
.b3-app__side{ border-right:1px solid var(--c-line); padding:1.25rem 1rem; display:flex; flex-direction:column; gap:.25rem; font-size:.9rem; color:var(--c-ink-soft); }
.b3-app__side span{ padding:.5rem .7rem; border-radius:8px; }
.b3-app__side span.on{ background:var(--c-surface-2); color:var(--c-ink); }
.b3-app__brand{ font:800 1.25rem/1 var(--c-display); font-stretch:75%; text-transform:uppercase; color:var(--c-ink); margin:0 0 1rem .7rem; }
.b3-app__demo{ margin:auto 0 0 .7rem; font-size:.8rem; }
.b3-app__main{ padding:clamp(1rem,2vw,1.5rem); display:grid; gap:1.25rem; min-width:0; }
.b3-app__foot{ margin:0; font-size:.8rem; color:var(--c-ink-soft); }

.b3-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.b3-kpis > div{ background:var(--c-surface-2); border-radius:10px; padding:.9rem 1rem; }
.b3-v{ font:800 clamp(1.4rem,2.2vw,2rem)/1.1 var(--c-display); font-stretch:75%; margin:.4rem 0 0; }

.b3-lib{ display:grid; grid-template-columns:minmax(0,1fr) minmax(17rem,22rem); gap:1.25rem; align-items:start; }
.b3-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.b3-grid button{
  position:relative; display:block; width:100%; padding:0; border:0; border-radius:10px; overflow:hidden; cursor:pointer;
  background:var(--c-surface-2); outline:2px solid transparent; outline-offset:2px;
  transition:outline-color .15s var(--c-ease), transform .15s var(--c-ease);
}
.b3-grid button:active{ transform:scale(.98); }
.b3-grid button[aria-pressed="true"]{ outline-color:var(--c-ink); }
.b3-grid img{ display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }
.b3-grid__f{ position:absolute; left:.4rem; bottom:.4rem; font:600 .68rem/1 var(--c-text); letter-spacing:.06em; text-transform:uppercase; background:rgb(18 19 17 / .75); color:var(--c-ink); padding:.3rem .45rem; border-radius:6px; }
.b3-grid button::after{ content:"Example"; position:absolute; top:.4rem; right:.4rem; font:600 .6rem/1 var(--c-text); letter-spacing:.08em; text-transform:uppercase; background:var(--c-accent); color:var(--c-accent-ink); padding:.28rem .4rem; border-radius:999px; }
@media (hover:hover) and (pointer:fine){ .b3-grid button:hover{ outline-color:rgb(255 253 56 / .45); } }

.b3-rec{ background:var(--c-paper); color:var(--c-paper-ink); border-radius:12px; padding:1rem; display:grid; gap:.8rem; }
.b3-rec .b3-k{ color:var(--c-paper-soft); }
.b3-rec__head{ display:flex; gap:.8rem; align-items:center; }
.b3-rec__head img{ width:58px; height:84px; object-fit:cover; border-radius:8px; flex:none; }
.b3-rec__head p{ margin:0; }
.b3-rec__h{ font-weight:600; }
.b3-rec__m{ font-size:.85rem; color:var(--c-paper-soft); }
.b3-rec__paid{ font-size:.85rem; margin-top:.3rem !important; }
.b3-rec__paid span{ font:800 1.25rem/1 var(--c-display); font-stretch:75%; }
.b3-checks{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.b3-checks li{ display:grid; grid-template-columns:18px 1fr; column-gap:.6rem; font-size:.82rem; line-height:1.35; }
.b3-checks li::before{
  content:""; grid-row:span 2; width:18px; height:18px; border-radius:50%;
  background:var(--c-paper-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23FFFD38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.b3-checks b{ font-weight:600; }
.b3-checks span{ color:var(--c-paper-soft); }
.b3-rec.is-swapping{ opacity:.35; transition:opacity .12s linear; }
.b3-rec{ transition:opacity .2s var(--c-ease); }

@media (max-width:1100px){
  .b3-app{ grid-template-columns:1fr; }
  .b3-app__side{ display:none; }
  .b3-lib{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .b3-kpis{ grid-template-columns:repeat(2,1fr); }
  .b3-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---- the deck's four words, compact ------------------------------------- */
.b3-steps{ padding:0 var(--c-gut) clamp(4rem,8vw,6rem); }
.b3-steps ol{ max-width:84rem; margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.b3-steps li{ border-top:1px solid var(--c-line); padding-top:1rem; display:grid; gap:.4rem; }
.b3-steps b{ font:800 1.5rem/1 var(--c-display); font-stretch:75%; text-transform:uppercase; }
.b3-steps span{ color:var(--c-ink-soft); font-size:.95rem; }
@media (max-width:860px){ .b3-steps ol{ grid-template-columns:1fr 1fr; } }

/* ---- every receipt is an invitation: the traffic model as a map --------- */
.b3-loop{ background:var(--c-paper); color:var(--c-paper-ink); padding:clamp(5rem,10vw,8rem) var(--c-gut); }
.b3-loop > h2, .b3-loop > .b3-lede{ max-width:84rem; margin-inline:auto; }
.b3-loop > .b3-lede{ color:var(--c-paper-soft); margin-top:1.25rem; }
.b3-loop .b3-k{ color:var(--c-paper-soft); margin-bottom:.9rem; }
.b3-loop__map{ max-width:84rem; margin:clamp(2.5rem,5vw,4rem) auto 0; display:grid; grid-template-columns:1fr 6rem minmax(14rem,18rem) 6rem 1fr; align-items:center; }
.b3-loop__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.b3-loop__col li{ background:#fff; border:1px solid rgb(22 23 15 / .1); border-radius:999px; padding:.65rem 1rem; font-size:.95rem; box-shadow:0 2px 6px rgb(22 23 15 / .06); }
.b3-loop__wire{ width:100%; height:15rem; overflow:visible; }
.b3-loop__wire path{ fill:none; stroke:var(--c-paper-ink); stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:.35; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--c-ease); }
.b3-loop.is-in .b3-loop__wire path{ stroke-dashoffset:0; }
.b3-loop__core{ display:grid; justify-items:center; gap:.4rem; }
.b3-loop__node{ margin:0; width:100%; text-align:center; background:var(--c-paper-ink); color:var(--c-paper); border-radius:14px; padding:1rem; font-weight:600; line-height:1.3; }
.b3-loop__node--accent{ background:var(--c-accent); color:var(--c-accent-ink); }
.b3-loop__arrow{ margin:0; width:2px; height:1.2rem; background:var(--c-paper-ink); opacity:.4; }
@media (max-width:1000px){
  .b3-loop__map{ grid-template-columns:1fr; gap:1.5rem; }
  .b3-loop__wire{ display:none; }
  .b3-loop__core{ order:-1; }
}
@media (prefers-reduced-motion:reduce){ .b3-loop__wire path{ transition:none; stroke-dashoffset:0; } }

/* ---- what a wallet buys -------------------------------------------------- */
.b3-wallet{ padding:clamp(5rem,10vw,8rem) var(--c-gut); }
.b3-wallet__top{ max-width:84rem; margin:0 auto; display:grid; grid-template-columns:1fr minmax(20rem,28rem); gap:clamp(2rem,5vw,5rem); align-items:center; }
.b3-wallet__top > div:first-child{ display:grid; gap:1.25rem; }
.b3-slider{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:16px; padding:1.5rem; box-shadow:var(--c-e3), var(--c-edge); display:grid; gap:.6rem; }
.b3-slider__v{ font:800 clamp(3rem,6vw,4.6rem)/1 var(--c-display); font-stretch:75%; margin:0; }
.b3-slider input{ width:100%; accent-color:var(--c-ink); height:28px; cursor:pointer; }
.b3-slider__out{ margin:0; color:var(--c-ink-soft); }
.b3-slider__out b{ color:var(--c-ink); font:800 1.5rem/1 var(--c-display); font-stretch:75%; }
.b3-wallet__table{ max-width:84rem; margin:clamp(2.5rem,5vw,4rem) auto 0; background:var(--c-paper); color:var(--c-paper-ink); border-radius:16px; padding:clamp(1.25rem,3vw,2rem); display:grid; gap:1rem; }
.b3-wallet__table .b3-k{ color:var(--c-paper-soft); }
.b3-fine{ margin:0; font-size:.9rem; color:var(--c-paper-soft); max-width:80ch; }
.b3-fine a{ color:var(--c-paper-ink); font-weight:600; }
@media (max-width:860px){ .b3-wallet__top{ grid-template-columns:1fr; } }

.b3-law{ margin:0; padding:0 var(--c-gut) clamp(4rem,8vw,6rem); font-size:.85rem; color:var(--c-ink-soft); }
.b3.b3-law{ padding-inline:max(var(--c-gut), calc((100% - 84rem) / 2)); }
html:not(.js) .b3-loop__wire path{ stroke-dashoffset:0; }
.b3-app__side .b3-dot{ padding:0; border-radius:50%; }

/* ---- light mode, 28 Sep ------------------------------------------------- */
.b3-rec{ background:var(--c-surface-2); }
.b3-loop{ background:var(--c-surface); border-block:1px solid var(--c-line); }
.b3-wallet__table{ background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--c-e2); }
.b3-dot{ box-shadow:0 0 0 3px rgb(22 23 15 / .12); }
@media (hover:hover) and (pointer:fine){ .b3-grid button:hover{ outline-color:rgb(22 23 15 / .35); } }
.b3-grid__f{ color:#F3F2EA; }

/* No default store name, 19 Oct 2026: hidden until ?store= fills it. */
.b3-app__brand:empty { display:none; }