/* Bridgr site. Hand written, mobile first. No framework, no CDN, no build step. */

:root {
  --brand-deep: #1A1FBD;  --brand-mid: #4030EE;   --brand-lift: #8C73FA;
  --indigo-600: #4F46E5;  --indigo-500: #6366F1;  --indigo-400: #818CF8;
  --indigo-50:  #EEF2FF;
  --slate-900:  #0F172A;  --slate-700: #334155;   --slate-500: #64748B;
  --slate-200:  #E2E8F0;  --slate-100: #F1F5F9;   --slate-50:  #F8FAFC;
  --red-600:    #DC2626;  --red-300:   #FCA5A5;
  --emerald-500:#10B981;
  --maxw: 1200px;
  --gutter: 16px;
  --header-h: 56px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}
@media (min-width: 480px)  { :root { --gutter: 20px; } }
@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --header-h: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
/* An author display value beats the UA rule for [hidden], which would leave the
   FAQ empty state and the inactive tab panels on screen. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
  color: var(--slate-700); background: #fff;
  overflow-x: hidden; /* belt and braces: the page never scrolls sideways */
}
h1, h2, h3 { color: var(--slate-900); line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
img, svg { max-width: 100%; }
a { color: var(--indigo-600); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: #fff; padding: 12px 16px;
  z-index: 20;
}
.skip:focus { left: 8px; top: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------------ header */
.hdr {
  position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--slate-200);
}
.hdr-in {
  height: var(--header-h); display: flex; align-items: center; gap: 10px;
}
.logo { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
a.logo:hover .logo-word { color: var(--brand-mid); }
.logo-mark { width: 40px; height: 18px; flex: none; }
.logo-word {
  font-size: 17px; font-weight: 700; color: var(--slate-900); letter-spacing: -.02em;
}
.tabs { display: flex; gap: 2px; margin-left: auto; }
.tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 8px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--slate-700);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
/* At 320 px the logo plus three full labels overflow the header, so the middle
   tab shortens to "How". The accessible name stays complete via aria-label. */
.tab-more { display: none; }
@media (min-width: 480px) {
  .tab-more { display: inline; }
  .tab { padding: 0 10px; }
  .logo { gap: 8px; }
  .logo-mark { width: 49px; height: 22px; }
  .logo-word { font-size: 19px; }
}
.tab:hover { background: var(--slate-100); }
.tab[aria-current="page"] { color: var(--brand-mid); font-weight: 650; cursor: default; }
.tab[aria-current="page"]:hover { background: none; }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 9px;
  background: linear-gradient(100deg, var(--brand-deep), var(--brand-mid));
  color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
}
.cta:hover { filter: brightness(1.08); }
.cta-sm { padding: 0 14px; font-size: 14px; }
.cta-ghost {
  background: #fff; color: var(--slate-900); border-color: var(--slate-200);
}
.cta-ghost:hover { background: var(--slate-50); filter: none; }
.hdr .cta-sm { display: none; }
@media (min-width: 768px) { .hdr .cta-sm { display: inline-flex; } }

/* -------------------------------------------------------------------- hero */
.panel { padding-bottom: 8px; }
.hero { padding: 28px var(--gutter) 8px; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand-mid); margin: 0 0 10px;
}
.hero h1 { font-size: 32px; letter-spacing: -.025em; }
.lede { font-size: 17px; color: var(--slate-700); max-width: 62ch; }
.lede-narrow { max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 4px; }

.hero-art { margin-top: 22px; }
.anim {
  position: relative; width: 100%; aspect-ratio: 640 / 420;
  /* Cap WIDTH, never height. max-height would letterbox the SVG inside the box
     while the HTML overlay keeps positioning by percent of the box, so callout,
     pills and labels would drift off the drawing. */
  max-width: 335px;
  margin: 0 auto; background: #fff;
  overflow: hidden; /* a pill must never widen the page, see R3 */
}
.anim-svg, .anim-ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.anim-ov { pointer-events: none; }

.callout {
  position: absolute; transform: translate(-50%, -100%) scale(.94); opacity: 0;
  background: #fff; border: 1px solid #E7E7EF; border-radius: 8px;
  padding: 7px 13px; font-size: 12px; font-weight: 600; color: #1E2235;
  box-shadow: 0 1px 3px rgba(30,34,53,.08); white-space: nowrap;
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.callout.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.callout.alert { border-color: #F0A8A8; color: var(--red-600); font-weight: 500; }
.callout-sub {
  display: none; font-size: 11px; font-weight: 400; color: var(--slate-500);
  margin-top: 3px;
}
.callout.has-sub .callout-sub { display: block; }
.chip {
  position: absolute; left: 3%; bottom: 4%; font-family: var(--font-mono);
  font-size: 10.5px; color: var(--slate-500); opacity: 0;
  transition: opacity .3s ease-out;
}
.chip.on { opacity: 1; }
.pill {
  position: absolute; transform: translateY(-50%); opacity: 0;
  background: #fff; border: 1px solid #E7E7EF; border-radius: 6px;
  padding: 4px 9px; font-size: 11.5px; color: #5A6072; white-space: nowrap;
  transition: opacity .3s ease-out, border-color .3s, color .3s;
}
.pill.on { opacity: 1; }
.pill.active { border-color: #4B5BD6; color: #1E2235; font-weight: 600; }
.elbl {
  position: absolute; transform: translate(-50%, -50%); opacity: 0;
  font-size: 10.5px; color: #5A6072; background: #fff; padding: 0 3px;
  transition: opacity .3s ease-out;
}
.elbl.on { opacity: 1; }

#an-agent { transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s; }
#an-agent.bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.an-node { transition: fill .3s ease-out, r .35s ease-out; }
.an-edge { transition: stroke .3s ease-out, stroke-width .4s ease-out; }

/* ------------------------------------------------------------------- cards */
.sec-h { font-size: 24px; letter-spacing: -.02em; margin: 34px 0 16px; }
.sec-h1 { font-size: 30px; letter-spacing: -.025em; margin: 28px 0 10px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.card {
  border: 1px solid var(--slate-200); border-radius: 12px; padding: 18px;
  background: var(--slate-50);
}
.card h3 { font-size: 17px; }
.card p { margin: 0 0 8px; font-size: 16px; }
.proof {
  margin: 0; font-size: 14px; color: var(--slate-500);
  border-top: 1px solid var(--slate-200); padding-top: 8px;
}

.band { background: var(--slate-900); color: #CBD5E1; margin: 34px 0 0; padding: 30px 0; }
.band .sec-h { color: #fff; margin-top: 0; }
.band p { font-size: 16px; }
.receipt-grid { display: grid; gap: 18px; }
.receipt-scroll { overflow-x: auto; }
.receipt {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.9; color: #A5B4FC;
  background: #0B1120; border: 1px solid #1E293B; border-radius: 10px;
  padding: 14px 16px; margin: 0; white-space: pre;
}

.surfaces { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.surfaces li {
  border-left: 3px solid var(--indigo-400); padding: 2px 0 2px 12px;
}
.surfaces b { display: block; color: var(--slate-900); font-size: 15px; }
.surfaces span { font-size: 15px; color: var(--slate-500); }
.teaser { font-size: 16px; }

/* ------------------------------------------------------------------- steps */
.steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(140deg, var(--brand-deep), var(--brand-mid));
  color: #fff; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.steps h3 { font-size: 17px; margin-bottom: 4px; }
.steps p { font-size: 16px; margin: 0; }
.note {
  margin: 26px 0 8px; padding: 16px 18px; border-radius: 12px;
  background: var(--indigo-50); border: 1px solid #DDE3FF;
}
.note h3 { font-size: 16px; }
.note p { margin: 0; font-size: 16px; }

/* --------------------------------------------------------------------- faq */
.filter { margin: 18px 0 10px; }
#q-search {
  width: 100%; min-height: 44px; padding: 10px 14px; font-size: 16px;
  font-family: inherit; color: var(--slate-900);
  border: 1px solid var(--slate-200); border-radius: 10px; background: #fff;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.qchip {
  min-height: 44px; padding: 0 14px; border-radius: 22px; cursor: pointer;
  border: 1px solid var(--slate-200); background: #fff; color: var(--slate-700);
  font: inherit; font-size: 14px;
}
.qchip:hover { background: var(--slate-50); }
.qchip.on { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }
.count { font-size: 13px; color: var(--slate-500); margin: 10px 0 0; }

.qlist { display: grid; gap: 8px; }
.qlist details {
  border: 1px solid var(--slate-200); border-radius: 10px; background: #fff;
}
.qlist summary {
  cursor: pointer; padding: 13px 16px; font-weight: 600; color: var(--slate-900);
  font-size: 16px; list-style: none; min-height: 44px; display: flex;
  align-items: center; gap: 10px;
}
.qlist summary::-webkit-details-marker { display: none; }
/* A rotating plus, not a minus glyph. U+2212 is on the banned character list. */
.qlist summary::after {
  content: "+"; margin-left: auto; color: var(--slate-500); font-weight: 400;
  font-size: 18px; line-height: 1; transition: transform .15s ease-out;
}
.qlist details[open] summary::after { transform: rotate(45deg); }
.qlist details[open] summary { border-bottom: 1px solid var(--slate-100); }
.qlist p, .qlist ul { font-size: 16px; margin: 12px 16px; }
.qlist ul { padding-left: 20px; }
.qlist li { margin-bottom: 6px; }
.empty { font-size: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ footer */
.ftr {
  margin-top: 40px; border-top: 1px solid var(--slate-200);
  background: var(--slate-50);
  padding: 26px 0 calc(18px + env(safe-area-inset-bottom));
}
.ftr-in { display: grid; gap: 18px; }
.logo-ftr .logo-mark { width: 44px; height: 20px; }
.logo-ftr .logo-word { font-size: 17px; }
.ftr-line { font-size: 14px; color: var(--slate-500); margin: 8px 0 0; max-width: 46ch; }
.ftr-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ftr-a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; color: var(--slate-700); text-decoration: none;
}
.ftr-a:hover { color: var(--brand-mid); text-decoration: underline; }
.copy {
  text-align: center; font-size: 12px; color: var(--slate-500);
  margin: 20px 0 0; padding: 0 var(--gutter);
}

/* -------------------------------------------------------------- breakpoints */
@media (min-width: 480px) {
  .hero h1 { font-size: 36px; }
  .anim { max-width: 366px; }   /* 240 tall at 640/420 */
}
@media (min-width: 768px) {
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 42px; }
  .lede { font-size: 18px; }
  .anim { max-width: 427px; }   /* 280 tall */
  .cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .surfaces { grid-template-columns: repeat(2, 1fr); gap: 12px 22px; }
  .sec-h { font-size: 27px; }
  .sec-h1 { font-size: 34px; }
  .ftr-in { grid-template-columns: 1fr auto; align-items: center; }
  .steps { gap: 22px; }
}
@media (min-width: 1024px) {
  .logo-mark { width: 58px; height: 26px; }
  .hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    align-items: center; padding-top: 48px; padding-bottom: 16px;
  }
  .hero h1 { font-size: 48px; }
  .hero-art { margin-top: 0; }
  .anim { max-width: none; }    /* fills the hero column */
  .cards { grid-template-columns: repeat(3, 1fr); }
  .surfaces { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .receipt-grid { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
  .band { padding: 40px 0; }
  .steps li { gap: 18px; }
}

/* Small phones: the animation sheds detail rather than letting it collide.
   Each breakpoint is stated once and hides the SVG part with its HTML part, so
   nothing is ever left as an unlabeled dot or a line to nowhere. */
@media (max-width: 767px) {
  .pill { font-size: 10.5px; padding: 3px 7px; }
  .callout { font-size: 11.5px; padding: 6px 10px; }
}
@media (max-width: 479px) {
  .elbl { display: none; }          /* collided with the act 2 callout */
}
@media (max-width: 400px) {
  .pill, #an-fan { display: none; } /* pills and their dots leave together */
}

.tab:focus-visible, .cta:focus-visible, .qchip:focus-visible,
.logo:focus-visible, .ftr-a:focus-visible, .skip:focus-visible,
.qlist summary:focus-visible, #q-search:focus-visible {
  outline: 2px solid var(--brand-mid);
  outline-offset: 2px;
  border-radius: 8px;
}
#q-search:focus { outline: 2px solid var(--brand-mid); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}