/* BooBridge - Milk-Glass Modern
   Visual authority: assets/website/DESIGN.md. Reuse these tokens; do not invent values. */

:root{
  color-scheme: light;

  --bb-milk:#ffffff;
  --bb-paper:#fffdf7;
  --bb-mist:#f2f7ff;
  --bb-powder:#dcebff;
  --bb-blue:#135bd8;
  --bb-blue-hover:#0d46ae;
  --bb-blue-deep:#0a3789;
  --bb-ink:#102a56;
  --bb-muted:#50627c;
  --bb-line:#cbd9ea;
  --bb-berry:#59408f;
  --bb-coral:#d84335;
  --bb-yellow:#f2c94c;

  --bb-font-display:"Fredoka","Arial Rounded MT Bold",system-ui,sans-serif;
  --bb-font-ui:"Figtree","Inter",system-ui,sans-serif;
  --bb-font-mono:"IBM Plex Mono","Consolas",monospace;

  --bb-radius-input:14px;
  --bb-radius-card:20px;
  --bb-radius-frame:28px;
  --bb-radius-pill:999px;

  --bb-shadow-card:0 12px 32px rgb(16 42 86 / 8%);
  --bb-shadow-frame:0 24px 70px rgb(16 42 86 / 13%);
  --bb-content:1200px;
  --bb-reading:680px;
  --bb-ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
body{margin:0;color:var(--bb-ink);background:var(--bb-milk);font-family:var(--bb-font-ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--bb-content);margin:0 auto;padding:0 24px}
@media(min-width:640px){.wrap{padding:0 40px}}
@media(min-width:1024px){.wrap{padding:0 64px}}
/* Fredoka is a rounded face: its letters already sit close, so the tight tracking that
   suits a 4rem hero closes the gaps shut at 1.5rem. Weight and tracking therefore scale
   with size - heavy and tight only where the letters are big enough to carry it. */
h1,h2{margin:0;font-family:var(--bb-font-display);font-weight:700;letter-spacing:-.02em;line-height:1.05}
h3{margin:0;font-family:var(--bb-font-display);font-weight:500;letter-spacing:.005em;line-height:1.25}

/* small display type: lighter and opened up */
.qa h2,.stepblock h2,.card h3,.flow-step h3,.mem-card h3,.howto-steps h3,.case h3,.howto-panel h3{
  font-weight:500;
  letter-spacing:.005em;
  line-height:1.3;
}
/* mid display type */
section h2,header.page h1{letter-spacing:-.012em}
/* the big hero can stay tight; at this size the counters stay open */
header.hero h1,.band h2{font-weight:700;letter-spacing:-.025em}
p{margin:0}
a{color:var(--bb-blue)}
img{max-width:100%}
.mono{font:600 11px/1 var(--bb-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bb-muted)}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--bb-line)}
nav .wrap{min-height:68px;display:flex;align-items:center;gap:28px}
/* The wordmark is one word on one line with the arch spanning it. It used to be an
   inline-flex column, which let the flex container size itself to the narrow svg and
   wrapped "Boo" above "Bridge". inline-block plus nowrap sizes to the text instead, and
   the arch takes width:100% so it always matches the word. */
.brand{font-family:var(--bb-font-display);font-weight:600;font-size:23px;color:var(--bb-ink);text-decoration:none;letter-spacing:-.025em;display:inline-block;white-space:nowrap;line-height:1}
.brand b{color:var(--bb-blue);font-weight:600}
.brand .arch{display:block;width:100%;height:7px;margin-top:4px;overflow:visible}
.nav-links{margin-left:auto;display:flex;gap:22px;align-items:center;list-style:none;padding:0;margin-block:0}
/* :not(.btn) matters. Without it these beat .btn-nav on specificity and repaint the
   button's text in ink on deep blue, which is 1.7:1 and unreadable. */
.nav-links a:not(.btn){color:var(--bb-ink);text-decoration:none;font-size:15px;font-weight:500}
.nav-links a:not(.btn):hover{color:var(--bb-blue)}
.nav-links a:not(.btn)[aria-current="page"]{color:var(--bb-blue);font-weight:600}
@media(max-width:940px){
  nav .wrap{flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:14px}
  .nav-links{margin-left:0;width:100%;flex-wrap:wrap;gap:16px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--bb-radius-pill);font:600 15px/1 var(--bb-font-ui);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color 160ms var(--bb-ease),transform 160ms var(--bb-ease),border-color 160ms var(--bb-ease)}
.btn-primary{background:var(--bb-blue);color:#fff}
.btn-primary:hover{background:var(--bb-blue-hover);transform:translateY(-1px)}
.btn-secondary{background:var(--bb-milk);color:var(--bb-ink);border-color:var(--bb-line)}
.btn-secondary:hover{background:var(--bb-mist);border-color:var(--bb-blue)}
/* the nav button sits on white at 14px, so it uses the deep blue: 8.4:1 rather than 6:1 */
.nav-links a.btn-nav,.btn-nav{min-height:40px;padding:0 18px;font-size:14px;background:var(--bb-blue-hover);color:#fff;font-weight:600}
.nav-links a.btn-nav:hover,.btn-nav:hover{background:var(--bb-blue-deep);color:#fff;transform:translateY(-1px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- hero ---------- */
header.hero{padding:72px 0 0;background:radial-gradient(680px 380px at 78% 12%,rgba(220,235,255,.55),transparent 70%)}
@media(max-width:640px){header.hero{padding:48px 0 0}}
.hero-grid{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:5fr 7fr;gap:56px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--bb-paper);border:1px solid var(--bb-line);border-radius:var(--bb-radius-pill);padding:7px 14px;font:600 12px/1 var(--bb-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bb-ink)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--bb-coral)}
header.hero h1{font-size:clamp(2.5rem,5vw,4.1rem);margin:22px 0 0;max-width:13ch}
.lead{font-size:1.25rem;line-height:1.55;color:var(--bb-muted);margin:20px 0 0;max-width:var(--bb-reading)}

/* page header, for the inner pages */
header.page{padding:64px 0 8px;border-bottom:1px solid var(--bb-line);background:var(--bb-mist)}
header.page h1{font-size:clamp(2.2rem,4.4vw,3.4rem);max-width:18ch}
header.page .lead{margin-bottom:56px}

/* ---------- sprite ---------- */
.sprite-wrap{display:grid;place-items:center;padding:8px 0}
.sprite{display:block;width:min(320px,80%);animation:bb-drift 6s var(--bb-ease) infinite}
@keyframes bb-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:1023px){.sprite{width:200px}}
@media(prefers-reduced-motion:reduce){.sprite{animation:none}}

/* ---------- sections ---------- */
section{padding:96px 0}
@media(max-width:640px){section{padding:64px 0}}
.mist{background:var(--bb-mist);border-top:1px solid var(--bb-line);border-bottom:1px solid var(--bb-line)}
section h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.sec-lead{font-size:1.125rem;color:var(--bb-muted);margin-top:16px;max-width:var(--bb-reading)}
.prose p{margin-top:18px;max-width:var(--bb-reading);font-size:1.0625rem}
.prose h2 + p{margin-top:22px}
.prose ul{max-width:var(--bb-reading);padding-left:22px;color:var(--bb-muted)}
.prose li{margin-top:10px}
.split{display:grid;gap:36px;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}}

/* ---------- cards ---------- */
.cards{display:grid;gap:20px;margin-top:40px}
@media(min-width:768px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--bb-milk);border:1px solid var(--bb-line);border-radius:var(--bb-radius-card);padding:28px;box-shadow:var(--bb-shadow-card);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--bb-powder)}
.card.feature::before{background:var(--bb-blue)}
.icon{width:40px;height:40px;border-radius:50%;background:var(--bb-powder);display:grid;place-items:center;margin-bottom:16px}
.card h3{font-size:1.375rem}
.card p{margin-top:10px;color:var(--bb-muted)}

/* ---------- flow ---------- */
.flow{display:grid;gap:16px;margin-top:44px;position:relative}
@media(min-width:900px){
  .flow{grid-template-columns:repeat(3,1fr);gap:24px}
  .flow::before{content:"";position:absolute;top:38px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--bb-powder) 12%,var(--bb-powder) 88%,transparent)}
}
.flow-step{position:relative;background:var(--bb-milk);border:1px solid var(--bb-line);border-radius:var(--bb-radius-card);padding:26px}
.flow-num{width:34px;height:34px;border-radius:50%;background:var(--bb-blue);color:#fff;display:grid;place-items:center;font:700 15px/1 var(--bb-font-ui)}
.flow-tag{display:block;margin-top:14px;font:600 11px/1 var(--bb-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bb-muted)}
.flow-step h3{margin-top:8px;font-size:1.375rem}
.flow-step p{margin-top:10px;color:var(--bb-muted);font-size:.9375rem}
.flow-intro{color:var(--bb-muted);margin-top:16px;max-width:var(--bb-reading);font-size:1.125rem}

/* ---------- steps with beats (install) ---------- */
.beat{display:block;margin-top:20px;max-width:760px}
.beat-label{display:block;font:600 11px/1 var(--bb-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bb-muted);margin-bottom:6px}
.stepblock{background:var(--bb-milk);border:1px solid var(--bb-line);border-radius:var(--bb-radius-card);padding:30px;margin-top:24px;box-shadow:var(--bb-shadow-card)}
.stepblock h2{font-size:1.6rem}
/* the prerequisites card: same shape as a step, but reads as a note rather than an
   action, so it takes the paper ground and a powder rail instead of a step number */
.stepblock-note{background:var(--bb-paper);border-left:4px solid var(--bb-powder)}
.need{list-style:none;margin:18px 0 0;padding:0;max-width:760px}
.need li{position:relative;padding:10px 0 10px 30px;color:var(--bb-muted)}
.need li + li{border-top:1px solid var(--bb-line)}
.need li::before{content:"";position:absolute;left:6px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--bb-blue)}
button.ui{background:var(--bb-powder);border:1px solid var(--bb-line);border-radius:8px;padding:2px 8px;font:600 15px/1.4 var(--bb-font-ui);color:var(--bb-ink);cursor:pointer}
button.ui:hover{background:var(--bb-mist);border-color:var(--bb-blue)}
.setting-shot{margin:26px 0 0;max-width:600px}
.setting-shot-wide{max-width:640px}
.setting-shot svg{width:100%;height:auto;display:block}
.setting-shot figcaption{margin-top:10px;font-size:.875rem;color:var(--bb-muted)}

/* ---------- memory grid (how it works) ---------- */
.mem-grid{display:grid;gap:20px;margin-top:40px}
@media(min-width:768px){.mem-grid{grid-template-columns:repeat(2,1fr)}}
.mem-card{background:var(--bb-milk);border:1px solid var(--bb-line);border-radius:var(--bb-radius-card);padding:26px;box-shadow:var(--bb-shadow-card)}
.mem-card h3{font-size:1.25rem}
.mem-card p{margin-top:10px;color:var(--bb-muted)}
.mem-benefit{margin-top:14px !important;padding-top:14px;border-top:1px solid var(--bb-line);color:var(--bb-ink) !important;font-weight:600;font-size:.9375rem}

/* ---------- q and a (faq) ---------- */
.qa{border-top:1px solid var(--bb-line);padding:32px 0}
.qa:last-of-type{border-bottom:1px solid var(--bb-line)}
.qa h2{font-size:1.5rem;max-width:36ch}
.qa p{margin-top:14px;color:var(--bb-muted);max-width:var(--bb-reading)}

/* ---------- use case card ---------- */
.case{display:block;background:var(--bb-milk);border:1px solid var(--bb-line);border-radius:var(--bb-radius-card);padding:32px;box-shadow:var(--bb-shadow-card);text-decoration:none;color:inherit;max-width:640px;transition:transform 160ms var(--bb-ease),box-shadow 160ms var(--bb-ease)}
.case:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgb(16 42 86 / 11%)}
.case h3{font-size:1.5rem;margin-top:12px}
.case p{margin-top:12px;color:var(--bb-muted)}
.case .go{display:inline-block;margin-top:18px;color:var(--bb-blue);font-weight:600}

/* numbered how-to list */
.howto-steps{list-style:none;counter-reset:s;margin:40px 0 0;padding:0}
.howto-steps li{counter-increment:s;position:relative;padding:24px 0 24px 58px;border-top:1px solid var(--bb-line);max-width:760px}
.howto-steps li:last-child{border-bottom:1px solid var(--bb-line)}
.howto-steps li::before{content:counter(s);position:absolute;left:0;top:24px;width:34px;height:34px;border-radius:50%;background:var(--bb-powder);color:var(--bb-ink);display:grid;place-items:center;font:700 15px/1 var(--bb-font-ui)}
.howto-steps h3{font-size:1.25rem}
.howto-steps p{margin-top:8px;color:var(--bb-muted)}

/* ---------- download panel ---------- */
.dl{background:var(--bb-milk);border:1px solid var(--bb-line);border-radius:var(--bb-radius-card);padding:32px;box-shadow:var(--bb-shadow-card);max-width:640px;margin-top:8px}
.dl .meta{margin-top:18px;font:500 13px/1.6 var(--bb-font-mono);color:var(--bb-muted)}
.dl .hash{margin-top:8px;font:500 12px/1.6 var(--bb-font-mono);color:var(--bb-muted);word-break:break-all}

/* ---------- cta band ---------- */
.band{background:var(--bb-ink);color:#fff;padding:80px 0;text-align:center}
.band h2{color:#fff}
.band p{color:#cfe0f7;margin:16px auto 0;max-width:56ch}
.band .btn-primary{background:#fff;color:var(--bb-ink);margin-top:28px}
.band .btn-primary:hover{background:var(--bb-powder)}

/* ---------- footer ---------- */
footer{background:var(--bb-milk);border-top:1px solid var(--bb-line);padding:56px 0 40px}
.fgrid{display:grid;gap:28px}
@media(min-width:768px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}}
.fgrid h4{margin:0 0 14px;font:600 11px/1 var(--bb-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bb-muted)}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:9px}
.fgrid a{color:var(--bb-ink);text-decoration:none;font-size:15px}
.fgrid a:hover{color:var(--bb-blue);text-decoration:underline}
.fgrid p{color:var(--bb-muted);margin-top:12px;max-width:34ch}
.fine{margin-top:40px;padding-top:24px;border-top:1px solid var(--bb-line);color:var(--bb-muted);font-size:14px}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:60;background:rgb(16 42 86 / 62%);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox-close,.howto-close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer}
.lightbox-figure{margin:0;max-width:1000px}
.lightbox-figure img{display:block;border-radius:var(--bb-radius-frame);border:1px solid var(--bb-line);background:#fff}
.lightbox-figure figcaption{color:#fff;margin-top:12px;font-size:.9375rem;text-align:center}
.howto-panel{background:var(--bb-milk);border-radius:var(--bb-radius-card);padding:32px;max-width:560px}
.howto-panel h3{font-size:1.375rem}
.howto-panel ol{margin:16px 0 0;padding-left:20px;color:var(--bb-muted)}
.howto-panel li{margin-top:10px}
.howto-source[hidden]{display:none}
.howto-link{font-weight:600}

:focus-visible{outline:3px solid #8cc4ff;outline-offset:2px}