/* ============================================================================
   BOXBIRDS v2 — waitlist + search-first landing.

   One token set, two colourways. Everything the dark option needs is in the
   [data-theme="dark"] block; nothing else in this file knows which is active,
   so flipping the setting is a repaint, not a second stylesheet.

   Animation policy: transform and opacity only, so every move stays on the
   compositor and nothing triggers layout. All of it is off under
   prefers-reduced-motion, and the reveal states start visible — a visitor
   with JS disabled reads a finished page, not an empty one.
   ========================================================================= */

.v2 {
  /* Ambient fields. Three drift behind the page ground, two more inside the
     band. Stored as bare RGB triples so a gradient can fade to the SAME hue at
     zero alpha -- fading to `transparent` fades through transparent BLACK and
     leaves a grey bruise on the light ground.
     --aura-a is the intensity dial for the drifting fields; everything else is
     proportional to them. Past about .16 on the light ground this stops
     reading as light and starts reading as a stain. */
  --aura-1:    27,76,251;
  --aura-2:    124,153,255;
  --aura-3:    150,120,255;
  --aura-a:    .11;
  /* The hero wash. This is not a section background -- it is the top of the
     ONE page background, and it dissolves into --bg rather than stopping.
     On light it starts at full brand blue, so the hero still reads as a blue
     surface; it just has no bottom edge. */
  --hero:      27,76,251;
  --hero-a:    1;
  --hero-2:    150,185,255;
  --hero-2-a:  .50;
  --bg:        #F4F6FC;
  --panel:     #FFFFFF;
  --card:      #F9F9FF;
  --line:      #E1E8FF;
  --line-2:    #E1E8FF;
  --ink:       #17161B;
  --head:      #000D34;
  --muted:     #818895;
  --faint:     #969FA8;
  --fade:      .18s ease;   /* every button hover, one number */
  --brand:     #1B4CFB;
  --brand-ink: #FFFFFF;
  --link:      #1238AA;
  --money:     #047857;
  --money-bg:  #E6F6EF;
  --tint:      #EEF2FF;
  --avatar:    #B4C0E9;
  --avatar-ink:#000D34;
  --deep:      #00193E;
  --deep-ink:  #B4C0E9;
  --band-ink:  #FFFFFF;
  --band-ground:#1B4CFB;   /* what the band actually is, for hover inversion */
  --band-mute: rgba(255,255,255,.9);
  --band-soft: rgba(255,255,255,.14);
  --band-line: rgba(255,255,255,.45);
  --bar-ink:   #1B4CFB;
  /* The header is glass. At rest it sits on the page ground and reads as a
     plain bar; the effect only shows when content scrolls under it. --hdr-solid
     is the same colour opaque, for browsers without backdrop-filter. */
  --hdr:       rgba(255,255,255,.72);
  --hdr-solid: #FFFFFF;
  /* The dropdown is read, not looked past. At 96% the hero headline still
     ghosted through it. The bar is glass; the panel is solid. */
  --nav-glass: #FFFFFF;
  --hdr-line:  rgba(0,13,52,.10);
  --hdr-ink:   #000D34;
  --hdr-mute:  #4B5570;
  --no-ink:    #C2321F;
  --warn:      #A34E00;   /* 1.10.0: delivered, awaiting confirmation */
  --shadow:    0 8px 30px rgba(0,13,52,.07);
  --shadow-hi: 0 18px 44px rgba(0,13,52,.22);
  --lift:      0 14px 30px rgba(0,13,52,.12);
  --ok:        #6EE7B7;
  --no:        #FCA5A5;
}

.v2[data-theme="dark"] {
  /* Dark takes roughly triple the alpha: near-black swallows a wash that is
     obvious on white. */
  --aura-1:    27,76,251;
  --aura-2:    124,153,255;
  --aura-3:    96,52,214;
  --aura-a:    .21;
  /* On dark the wash is a lift, not a slab: #05060F stays the ground and the
     blue only warms the top of it. */
  --hero:      20,44,140;
  --hero-a:    .13;
  --hero-2:    27,76,251;
  --hero-2-a:  .30;
  --bg:        #05060F;
  --panel:     #0E1428;
  --card:      #141B33;
  --line:      #232B4D;
  --line-2:    #2A3358;
  --ink:       #F4F6FC;
  --head:      #FFFFFF;
  --muted:     #9199B8;
  --faint:     #5C6689;
  --link:      #7C99FF;
  --money:     #34D399;
  --money-bg:  rgba(52,211,153,.14);
  --tint:      rgba(27,76,251,.14);
  --avatar:    #3A4577;
  --avatar-ink:#FFFFFF;
  --no-ink:    #FCA5A5;
  --warn:      #F3B04A;
  --deep:      #0A1F3D;
  --deep-ink:  #9FB4D6;
  --band-mute: #9199B8;
  --band-soft: #141B33;
  --band-line: #2A3358;
  --band-ground:#05060F;
  --bar-ink:   #4C74FF;
  --hdr:       rgba(5,6,15,.62);
  --hdr-solid: #05060F;
  --nav-glass: #0A0C1A;
  --hdr-ink:   #FFFFFF;   /* the light block's #000D34 would be black on black */
  --hdr-line:  rgba(255,255,255,.10);
  --hdr-mute:  #9199B8;
  --shadow:    0 8px 30px rgba(0,0,0,.35);
  --shadow-hi: 0 18px 44px rgba(0,0,0,.55);
  --lift:      0 14px 30px rgba(0,0,0,.5);
  --ok:        #34D399;
}

/* ------------------------------------------------------------------ base */
/* style.css resets this; v2 pages do not load style.css, so the whole landing
   sat 8px in from every edge of the viewport at every width -- the header, the
   band and the footer were never full-bleed. (The page ground is put on the
   root element inline in <head>, so iOS rubber-band overscroll shows the page
   colour rather than white.) */
html, body { margin: 0; padding: 0; }
/* A short page — the board with nothing on it, a 404 — left the footer floating
   halfway up with page ground below it. */
body { min-height: 100vh; }
.v2 { display: flex; flex-direction: column; min-height: 100vh; }
.v2 > main { flex: 1 0 auto; }
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 {
  margin: 0;
  color: var(--ink);
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  /* isolation, so the aura's z-index:-1 lands ABOVE this element's own
     background and below every child. Without a stacking context here a
     negative z-index escapes behind --bg and is never seen. */
  position: relative;
  isolation: isolate;
  /* ONE background for the whole document. The hero is the top of it, not a
     panel with its own fill, so there is no edge anywhere to give the page
     away as a stack of sections. Sized in px rather than % because a
     percentage of a 12,000px legal page would put the fade in the wrong
     place; 1600 clears the tallest band (900px, Russian waitlist at 375) with
     the solid stop at 58% and leaves 640px to dissolve. */
  background:
    linear-gradient(180deg,
      rgba(var(--hero), var(--hero-a)) 0,
      rgba(var(--hero), var(--hero-a)) 58%,
      rgba(var(--hero), 0) 100%) no-repeat top center / 100% 1600px,
    radial-gradient(140vw 900px at 50% -240px,
      rgba(var(--hero-2), var(--hero-2-a)),
      rgba(var(--hero-2), 0) 72%) no-repeat top center / 100% 1600px,
    var(--bg);
}

/* ------------------------------------------------------------------ aura */
/* The ground was one flat colour top to bottom. Three very soft fields now
   drift behind it on 41s/59s/73s -- no two share a factor, so the composition
   does not return to the same frame inside a visit.

   Transform and opacity only. The gradients rasterise once and the compositor
   moves the layers; nothing repaints per frame, which is the whole reason this
   is affordable on a phone. Animating background-position would have been
   three lines shorter and would have repainted the full viewport 60 times a
   second.

   Fixed rather than page-anchored on purpose: the fields belong to the room,
   not to the document, so they keep working on a short page and never turn
   into parallax on a long one. */
.v2-aura {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.v2-aura i {
  position: absolute; display: block;
  /* Deliberately NOT square. A circular field is rotationally symmetric, so
     rotating one changes nothing on screen -- the animation runs and the page
     looks frozen. An ellipse turning through 20 degrees is the single cheapest
     thing that reads as alive. */
  width: 104vmax; height: 62vmax;
  will-change: transform, opacity;
}
.v2-aura i:nth-child(1) {
  top: -30vmax; left: -24vmax;
  background: radial-gradient(closest-side,
    rgba(var(--aura-1), var(--aura-a)), rgba(var(--aura-1), 0));
  animation: v2float-a 27s ease-in-out infinite;
}
.v2-aura i:nth-child(2) {
  top: -16vmax; right: -28vmax;
  background: radial-gradient(closest-side,
    rgba(var(--aura-2), calc(var(--aura-a) * 1.35)), rgba(var(--aura-2), 0));
  animation: v2float-b 34s ease-in-out infinite;
}
.v2-aura i:nth-child(3) {
  bottom: -36vmax; left: 14vw;
  background: radial-gradient(closest-side,
    rgba(var(--aura-3), calc(var(--aura-a) * .9)), rgba(var(--aura-3), 0));
  animation: v2float-c 43s ease-in-out infinite;
}

/* :where() on purpose. These are element resets, and `.v2 button` scores
   (0,1,1) -- higher than the `.v2-btn` class that is supposed to style the
   button, so the reset's `background:none` silently won and the primary CTA
   rendered as bare text on the live site. Inside :where() they score (0,0,1)
   and any component class beats them. */
:where(.v2) h1, :where(.v2) h2, :where(.v2) h3, :where(.v2) p { margin: 0; }
:where(.v2) a { color: var(--link); text-decoration: none; }
:where(.v2) a:hover { color: var(--brand); }
:where(.v2) img { max-width: 100%; }
:where(.v2) svg { flex: none; }
:where(.v2) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.v2) input { font: inherit; }
.v2 [hidden] { display: none !important; }
.v2 :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.v2__skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  padding: 10px 16px; background: var(--brand); color: #fff; font-weight: 700;
}
.v2__skip:focus { left: 12px; top: 12px; }

.v2-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.v2-title { font-family: Unbounded, Montserrat, sans-serif; font-weight: 700; color: var(--head); }

/* ---------------------------------------------------------------- header */
.v2-hdr {
  position: sticky; top: 0; z-index: 12;
  background: var(--hdr); border-bottom: 1px solid var(--hdr-line);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
}
/* Without the filter the bar is just 62-72% opaque and whatever scrolls under
   it shows through as legible text. Fall back to solid rather than unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v2-hdr, .v2-nav { background: var(--hdr-solid); }
}
.v2-hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
/* The wordmark is a link home and had no hover state at all — the one thing in
   the header that did not answer. It shifts to brand on the same --fade the
   buttons use. Colour only: a wordmark that scales or lifts reads as a button,
   and this is not one. */
.v2-mark {
  font-family: Unbounded, Montserrat, sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: .02em; color: var(--hdr-ink);
  transition: color var(--fade);
}
/* --link, not --brand: brand blue on the dark header measures 3.3:1, which
   only just clears the large-text floor. --link is the theme's own blue-for-
   this-ground and lands at 7.6 on dark, 9.7 on light. */
.v2-mark:hover { color: var(--link); }
/* 1.11: the logo mark (traced from the founder's file) sits in front of the wordmark. */
.v2-mark { display: inline-flex; align-items: center; gap: 10px; }
.v2-mark__logo { display: block; width: 33px; height: 36px; flex: none; }
.v2-foot__mark { display: flex; align-items: center; gap: 10px; }
.v2-foot__logo { display: block; width: 27px; height: 30px; flex: none; }
/* main.js toggles .is-open on the autocomplete; without these the empty list box always showed. */
.v2 .bb-pop { display: none; }
.v2 .bb-pop.is-open { display: block; }
.v2-mark:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 4px; }
.v2-nav { display: flex; align-items: center; gap: 26px; }
.v2-nav a { font-size: 14px; font-weight: 600; color: var(--hdr-mute); transition: color var(--fade); }
.v2-nav a:hover { color: var(--hdr-ink); }
.v2-hdr__end { display: flex; align-items: center; gap: 18px; }
.v2-lang { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.v2-lang a { color: var(--hdr-mute); }
.v2-lang .is-on { color: var(--hdr-ink); }
.v2-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--hdr-ink); }

/* ---------------------------------------------------------------- button */
/* ---- buttons ------------------------------------------------------------
   One hover behaviour for every button on the site: the fill and the text
   swap places. A blue button goes white with blue text; an outlined button
   fills in. Each variant only redefines the six tokens below, so there is one
   duration and one idea rather than four hand-written hover rules that had
   drifted apart -- three of them did nothing but restate the resting colour.
   A border is on every variant, including the solid one, so the shape does
   not change size or disappear when the fill inverts on a coloured ground. */
.v2-btn {
  --btn-bg:    var(--brand);
  --btn-ink:   var(--brand-ink);
  --btn-edge:  var(--brand);
  --btn-bg-h:  var(--brand-ink);
  --btn-ink-h: var(--brand);
  --btn-edge-h:var(--brand);

  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 14px;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 1px solid var(--btn-edge);
  font-family: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background-color var(--fade), color var(--fade), border-color var(--fade),
              transform .16s ease, box-shadow .16s ease;
}
.v2-btn:hover {
  background: var(--btn-bg-h); color: var(--btn-ink-h); border-color: var(--btn-edge-h);
  transform: translateY(-1px); box-shadow: var(--lift);
}
.v2-btn:focus-visible { outline: 2px solid var(--btn-edge-h); outline-offset: 3px; }
.v2-btn:active { transform: translateY(0); }
.v2-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 12px; }
/* 40px reads right under a mouse, but it is below the 44px floor for a finger.
   Keyed on pointer type rather than width, since a touch laptop is still a
   finger. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .v2-btn--sm { height: 44px; }
}
.v2-btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
/* outlined on a page ground: fills in with the link colour */
.v2-btn--ghost {
  --btn-bg: transparent; --btn-ink: var(--link);   --btn-edge: var(--line-2);
  --btn-bg-h: var(--link); --btn-ink-h: var(--panel); --btn-edge-h: var(--link);
}
/* White pill on a band. It fills with brand rather than emptying out: on the
   dark band an emptying button reads as receding, and hover should feel like
   the thing is coming toward you. On the blue band the white border is what
   keeps the shape legible once the fill matches the ground. */
.v2-btn--onband {
  --btn-bg: var(--band-ink); --btn-ink: var(--band-ground); --btn-edge: var(--band-ink);
  --btn-bg-h: var(--brand);  --btn-ink-h: var(--band-ink);  --btn-edge-h: var(--band-ink);
}
/* outlined on the band: fills in with the band's own ink */
.v2-btn--wire {
  --btn-bg: transparent;    --btn-ink: var(--band-ink);    --btn-edge: var(--band-line);
  --btn-bg-h: var(--band-ink); --btn-ink-h: var(--band-ground); --btn-edge-h: var(--band-ink);
}

/* --wire is sized for the BAND, where --band-ink is the colour that reads on
   brand blue. In the header on the light colourway that resolves to white ink
   on a white glass bar, and the Join button survives only as a faint outline.
   In the header it takes header tokens instead. */
.v2-hdr .v2-btn--wire {
  --btn-ink: var(--hdr-ink);   --btn-edge: var(--hdr-ink);
  --btn-bg-h: var(--hdr-ink);  --btn-ink-h: var(--hdr-solid); --btn-edge-h: var(--hdr-ink);
}
.v2-btn--block { width: 100%; }

/* ------------------------------------------------------- inner pages --
   The seven block renderers in inc/blocks.php emit these. Everything above is
   shared with the front pages, so a page built from blocks reads as the same
   design without a second stylesheet. */
.v2-band--page { padding: 44px 0 84px; }
.v2-band--page .v2-band__in { align-items: flex-start; text-align: left; gap: 18px; }
.v2-band--page .v2-h1 { max-width: 780px; font-size: clamp(28px, 3vw, 42px); }
.v2-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--band-mute);
}

/* a card in a set, not a step in a sequence */
.v2-fcard {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
}
.v2-fcard__link {
  /* margin-top:auto so the link sits on the card's floor whatever the body
     length. min-height because this is a standalone action at the end of a
     card, not a link inside a sentence -- a thumb has to be able to hit it. */
  margin-top: auto; display: inline-flex; align-items: flex-end;
  min-height: 44px; padding-top: 8px;
  font-size: 14px; font-weight: 700; color: var(--link);
  transition: color var(--fade);
}
.v2-fcard__link:hover { color: var(--brand); }
.v2-fcard b { font-size: 17px; font-weight: 800; color: var(--ink); text-wrap: balance; }
.v2-fcard p { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.v2-panel--brand .v2-fcard { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.v2-panel--brand .v2-fcard b { color: #fff; }
.v2-panel--brand .v2-fcard p { color: rgba(255,255,255,.86); }
.v2-panel--brand .v2-title,
.v2-panel--brand .v2-panel__sub { color: #fff; }

/* a claim with its evidence beside it */
.v2-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.v2-split--flip .v2-split__text { order: 2; }
.v2-split__text p {
  margin-top: 14px; font-size: 15px; font-weight: 500; line-height: 1.7;
  color: var(--muted); text-wrap: pretty; max-width: 62ch;
}
.v2-facts { padding: 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.v2-facts h3 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.v2-facts dl { margin: 0; }
.v2-facts dl > div { padding: 10px 0; border-top: 1px solid var(--line); }
.v2-facts dl > div:first-child { border-top: 0; padding-top: 0; }
.v2-facts dt { font-size: 14px; font-weight: 700; color: var(--ink); }
.v2-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--muted); }

/* long-form: legal and policy */
/* 760px at 15px runs to 101 characters a line; 720 lands at about 96, inside
   the readable band. Long-form is the one place this matters. */
.v2-prose { max-width: 720px; margin-left: auto; margin-right: auto; }
.v2-prose__meta { font-size: 13px; font-weight: 600; color: var(--faint); margin-bottom: 20px; }
.v2-prose h2 {
  margin: 28px 0 10px; font-family: Unbounded, Montserrat, sans-serif;
  font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--head);
}
.v2-prose h2:first-of-type { margin-top: 0; }
.v2-prose p {
  margin: 0 0 12px; font-size: 15px; font-weight: 500; line-height: 1.75;
  color: var(--ink); text-wrap: pretty;
}
.v2-prose ol, .v2-prose ul { margin: 0 0 12px; padding-left: 22px; }
.v2-prose li { font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--ink); margin-bottom: 6px; }

/* ------------------------------------------------------------------ band */
/* No background. The hero is the top of the page background, not a band. */
.v2-band { padding: 56px 0 96px; }
.v2-band__in { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.v2-h1 {
  max-width: 860px; font-family: Unbounded, Montserrat, sans-serif; font-weight: 700;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.16; color: var(--band-ink); text-wrap: pretty;
}
.v2-lede { max-width: 640px; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--band-mute); text-wrap: pretty; }
.v2-note { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--band-mute); text-wrap: pretty; }

/* A pill that wraps to two lines is not a pill. The type steps down on narrow
   screens instead, and the padding with it -- clamp() rather than a media
   query so it degrades continuously. The floor is 12px, not smaller: the
   first cut of this used 10.5 and the mobile audit caught it at three widths.
   Legibility wins over a longer string; if the copy will not fit at 12px the
   copy is too long. */
.v2-badge {
  display: inline-flex; align-items: center; gap: clamp(6px, 1.8vw, 9px);
  padding: 7px clamp(11px, 3.4vw, 16px); border-radius: 999px;
  background: var(--band-soft); border: 1px solid transparent;
  font-size: clamp(12px, 2.9vw, 13px); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--band-ink);
  white-space: nowrap; max-width: 100%;
}
.v2[data-theme="dark"] .v2-badge { border-color: var(--line-2); }
.v2-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ok); }
.v2-dot--live { animation: v2pulse 2.4s ease-in-out infinite; }

/* ------------------------------------------------------------------ tabs */
.v2-tabs { display: inline-flex; gap: 8px; padding: 6px; border-radius: 999px; background: var(--band-soft); }
.v2-tabs--light { background: var(--tint); }
.v2-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px;
  border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--band-mute);
  transition: background-color var(--fade), color var(--fade);
}
.v2-tab:hover { color: var(--band-ink); }
.v2-tabs--light .v2-tab { color: var(--link); }
.v2-tabs--light .v2-tab:hover { color: var(--head); }
.v2-tab[aria-selected="true"]:hover { color: var(--brand-ink); }
.v2-tab[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); font-weight: 700; }

/* ---------------------------------------------------------------- search */
.v2-search {
  width: 100%; display: flex; align-items: stretch; padding: 8px; border-radius: 20px;
  background: var(--panel); box-shadow: var(--shadow-hi); text-align: left;
}
.v2[data-theme="dark"] .v2-search { border: 1px solid var(--line); }
.v2-field {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 12px 20px; border-right: 1px solid var(--line-2); min-width: 0;
}
.v2-field:last-of-type { border-right: 0; }
.v2-field--date { flex: 0 0 260px; }
.v2-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2-val { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v2-val b { font-size: 17px; font-weight: 700; color: var(--ink); }
.v2-iata { font-size: 12px; font-weight: 700; color: var(--faint); }
.v2-search .v2-btn { flex: 0 0 208px; margin-left: 8px; height: auto; }

.v2-input {
  width: 100%; height: 56px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 600; transition: border-color .18s ease, box-shadow .18s ease;
}
/* Under 16px, iOS Safari zooms the viewport the moment the field takes focus
   and leaves the visitor zoomed in. 15px reads better on a desktop and is not
   worth that on the one form this site has. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .v2-input, .v2-val, .v2-val b, .v2 input, .v2 select, .v2 textarea { font-size: 16px; }
}
.v2-input::placeholder { color: var(--faint); font-weight: 500; }
.v2-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27,76,251,.16); }
.v2-lbl-stack { display: flex; flex-direction: column; gap: 6px; text-align: left; }

/* ---------------------------------------------------------------- panels */
.v2-sec { padding: 24px 0 0; }
.v2-sec--first { padding-top: 0; }
.v2-panel {
  padding: 32px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow);
}
.v2[data-theme="dark"] .v2-panel { border: 1px solid var(--line); }
.v2-panel--over { margin-top: -56px; }
.v2-panel--deep { background: var(--deep); box-shadow: none; }
.v2[data-theme="dark"] .v2-panel--deep { border-color: #16345C; }
.v2-panel--brand { background: var(--brand); box-shadow: none; text-align: center; }
.v2-panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.v2-panel__head h2 { font-size: clamp(20px, 2vw, 26px); }
.v2-panel__sub { margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--muted); text-wrap: pretty; }
.v2-more { font-size: 14px; font-weight: 700; color: var(--link); white-space: nowrap; }

.v2-grid { display: grid; gap: 16px; }
.v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.v2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }

/* ----------------------------------------------------------------- cards */
.v2-card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border-radius: 16px; border: 1px solid var(--line-2); background: var(--card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.v2-card--hover:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: var(--brand); }
.v2-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-who { display: flex; align-items: center; gap: 10px; }
.v2-av {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 999px; background: var(--avatar); color: var(--avatar-ink); font-size: 14px; font-weight: 800;
}
.v2-ago { font-size: 13px; font-weight: 600; color: var(--muted); }
.v2-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: var(--money-bg); font-size: 12px; font-weight: 700; color: var(--money);
}
.v2-pill i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; font-style: normal; }
.v2-route { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-route b { font-size: 18px; font-weight: 800; color: var(--ink); }
.v2-route svg { color: var(--link); }
.v2-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--line-2);
}
.v2-meta { display: flex; flex-direction: column; gap: 2px; }
.v2-meta--end { align-items: flex-end; }
.v2-meta span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.v2-meta b { font-size: 14px; font-weight: 700; color: var(--ink); }
.v2-money { font-size: 18px; font-weight: 800; color: var(--money); }

.v2-card--add {
  justify-content: center; align-items: center; gap: 12px; text-align: center;
  border-style: dashed; border-color: var(--brand); background: var(--tint);
}
.v2-card--add b { font-size: 15px; font-weight: 700; color: var(--head); text-wrap: pretty; }
.v2-card--add p { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--link); text-wrap: pretty; }

/* ----------------------------------------------------------------- steps */
.v2-step { display: flex; flex-direction: column; gap: 10px; }
.v2-step__n {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 12px; background: var(--tint); color: var(--link); font-size: 16px; font-weight: 800;
}
.v2-step b { font-size: 17px; font-weight: 800; color: var(--ink); }
.v2-step p { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ------------------------------------------------------------------ deep */
.v2-panel--deep h2 { color: #FFFFFF; text-wrap: pretty; }
.v2-panel--deep p { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--deep-ink); text-wrap: pretty; }
.v2-panel--deep .v2-more { color: #FFFFFF; }
.v2-rules { display: flex; flex-direction: column; gap: 10px; }
.v2-rule {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px;
  background: rgba(255,255,255,.07); font-size: 15px; font-weight: 700; color: #FFFFFF;
}
.v2-rule--no { color: #E7EAFA; }

/* --------------------------------------------------------------- waiting */
.v2-bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.v2-bar i { display: block; height: 6px; border-radius: 999px; background: var(--bar-ink); width: 0; }
.v2-bar--near i { background: var(--money); }
.v2-avstack { display: flex; }
/* --band is a gradient on dark, and `border: 2px solid <gradient>` is not a
   thing -- the whole declaration was being dropped there. --band-ground is the
   flat colour the band sits on, which is what this always meant. */
.v2-avstack .v2-av { width: 30px; height: 30px; border: 2px solid var(--band-ground); font-size: 12px; }
.v2[data-theme="dark"] .v2-avstack .v2-av { border-color: var(--bg); }
.v2-avstack .v2-av + .v2-av { margin-left: -9px; }
.v2-count { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--band-mute); }

/* ------------------------------------------------------------------- faq */
.v2-faq { display: flex; flex-direction: column; }
.v2-faq__item { border-bottom: 1px solid var(--line-2); }
.v2-faq__item:last-child { border-bottom: 0; }
.v2-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; text-align: left; font-size: 16px; font-weight: 700; color: var(--ink);
}
.v2-faq__q svg { color: var(--muted); transition: transform .24s ease; }
.v2-faq__item.is-open .v2-faq__q svg { transform: rotate(180deg); }
.v2-faq__a { padding: 0 4px 20px; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ---------------------------------------------------------------- footer */
.v2-foot { margin-top: 24px; padding: 44px 0 36px; border-radius: 64px 64px 0 0; background: #01010F; }
.v2-foot__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.v2-foot h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #969FA8; margin-bottom: 10px; }
.v2-foot a { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 500; color: #E7EAFA; }
.v2-foot a:hover { color: #FFFFFF; }
.v2-foot__mark { font-family: Unbounded, Montserrat, sans-serif; font-weight: 700; font-size: 20px; color: #FFFFFF; margin-bottom: 12px; }
.v2-foot__blurb { max-width: 260px; font-size: 13px; font-weight: 500; line-height: 1.6; color: #818895; text-wrap: pretty; }
.v2-foot__mail {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 700; color: #E8ECFF;
  transition: color var(--fade);
}
.v2-foot__mail:hover { color: #7C99FF; }
.v2-foot__end { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; font-weight: 500; color: #818895; }

/* ------------------------------------------------------------- animation */
@keyframes v2rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v2pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

/* Ambient drift. Four stops rather than two so the path is a loop rather than
   a shuttle -- a two-stop ease-in-out reverses along its own line and the eye
   reads the retrace. Percentages, not pixels: the same keyframe has to work at
   375 and at 2560. */
@keyframes v2float-a {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);          opacity: 1; }
  28%  { transform: translate3d(14%, 18%, 0) rotate(9deg) scale(1.22);   opacity: .78; }
  55%  { transform: translate3d(28%, -8%, 0) rotate(-7deg) scale(.88);   opacity: 1; }
  79%  { transform: translate3d(8%, -18%, 0) rotate(5deg) scale(1.14);   opacity: .86; }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);          opacity: 1; }
}
@keyframes v2float-b {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);          opacity: 1; }
  31%  { transform: translate3d(-19%, 14%, 0) rotate(-11deg) scale(.85); opacity: .8; }
  62%  { transform: translate3d(-6%, 28%, 0) rotate(8deg) scale(1.28);   opacity: 1; }
  84%  { transform: translate3d(13%, 10%, 0) rotate(-4deg) scale(1.05);  opacity: .88; }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);          opacity: 1; }
}
@keyframes v2float-c {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);           opacity: 1; }
  26%  { transform: translate3d(-23%, -13%, 0) rotate(12deg) scale(1.20); opacity: .85; }
  58%  { transform: translate3d(10%, -25%, 0) rotate(-9deg) scale(.83);   opacity: 1; }
  81%  { transform: translate3d(23%, 7%, 0) rotate(6deg) scale(1.12);     opacity: .8; }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);           opacity: 1; }
}


/* The band animates on load. No JS involved, so it cannot leave content
   stranded invisible if a script fails. */
.v2-band__in > * { animation: v2rise .55s cubic-bezier(.2,.7,.3,1) both; }
.v2-band__in > :nth-child(1) { animation-delay: .02s; }
.v2-band__in > :nth-child(2) { animation-delay: .09s; }
.v2-band__in > :nth-child(3) { animation-delay: .16s; }
.v2-band__in > :nth-child(4) { animation-delay: .23s; }
.v2-band__in > :nth-child(5) { animation-delay: .30s; }
.v2-band__in > :nth-child(6) { animation-delay: .37s; }

/* Scroll reveal is opt-in from JS: the class is added by the script, so with
   JS off nothing is ever hidden. */
.v2-js .v2-reveal { opacity: 0; transform: translateY(18px); }
.v2-js .v2-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.v2-js .v2-reveal-stagger.is-in > * { animation: v2rise .5s cubic-bezier(.2,.7,.3,1) both; }
.v2-js .v2-reveal-stagger.is-in > :nth-child(1) { animation-delay: .04s; }
.v2-js .v2-reveal-stagger.is-in > :nth-child(2) { animation-delay: .11s; }
.v2-js .v2-reveal-stagger.is-in > :nth-child(3) { animation-delay: .18s; }
.v2-js .v2-reveal-stagger.is-in > :nth-child(4) { animation-delay: .25s; }
.v2-bar i { transition: width .9s cubic-bezier(.2,.7,.3,1) .15s; }

@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .v2-js .v2-reveal { opacity: 1; transform: none; }
  /* The rule above freezes the fields at their 0% frame, which is the resting
     composition -- the gradient stays richer, it just stops moving. Drop the
     layer hints too: holding five compositor layers for something that will
     never move is pure memory. */
  .v2-aura i { will-change: auto; animation: none; }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .v2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .v2-wrap { padding: 0 20px; }
  /* The burger toggled `hidden` while this rule said display:none no matter
     what, so the menu could never open -- five nav links unreachable on every
     phone. The button now toggles .is-nav-open on the header and this is the
     closed state. */
  .v2-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px 14px;
    background: var(--nav-glass); border-bottom: 1px solid var(--hdr-line);
    box-shadow: var(--shadow);
  }
  .v2-hdr.is-nav-open .v2-nav { display: flex; }
  .v2-nav a { padding: 13px 0; font-size: 15px; border-top: 1px solid var(--hdr-line); }
  .v2-nav a:first-child { border-top: 0; }
  .v2-burger { display: flex; }
  /* The header CTA duplicates a nav item and, with the burger and the language
     toggle beside it, pushed the header 36px past a 375px viewport (66px in
     Russian). It belongs behind the burger at this width. */
  .v2-hdr__end > .v2-btn { display: none; }
  .v2-band { padding: 28px 0 60px; }
  .v2-grid--3, .v2-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .v2-grid--2 { gap: 24px; }
  .v2-panel { padding: 20px; }
  .v2-panel--over { margin-top: -40px; }
  .v2-band--page { padding: 28px 0 64px; }
  .v2-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .v2-split--flip .v2-split__text { order: 0; }
  .v2-prose h2 { font-size: 17px; margin-top: 22px; }
  .v2-panel__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .v2-search { flex-direction: column; gap: 8px; }
  .v2-field { border-right: 0; border-radius: 12px; background: var(--card); padding: 12px 16px; min-height: 60px; }
  .v2-field--date { flex: 1 1 auto; }
  .v2-search .v2-btn { flex: 1 1 auto; margin-left: 0; height: 52px; }
  .v2-hdr__in { height: 56px; }
  .v2-mark { font-size: 17px; gap: 8px; }
  .v2-mark__logo { width: 27px; height: 30px; }
  /* A finger, not a cursor: the wordmark was a 22px-tall target and the two
     language links were 20px tall and 8px apart, which is a mis-tap waiting
     to happen. Padding only -- nothing moves. */
  .v2-mark { display: inline-flex; align-items: center; min-height: 44px; }
  /* "How it works in full ->" and "Read the carrying rules ->" are standalone
     calls to action on their own line, not links inside a sentence. */
  .v2-more { display: inline-flex; align-items: center; min-height: 44px; }
  /* The date field's own control was 20px tall inside a 60px box. */
  .v2-field input, .v2-val, .v2-val input { min-height: 34px; }
  /* 11px uppercase is a desktop label. On a phone it is a squint. */
  .v2-lbl { font-size: 12px; }
  .v2-foot__end { font-size: 13px; }
  .v2-lang { gap: 4px; }
  .v2-lang a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .v2-foot { border-radius: 32px 32px 0 0; padding: 32px 0 28px; }
  .v2-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .v2-foot__blurb { max-width: none; }
}
@media (max-width: 560px) {
  .v2-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .v2-tabs { display: flex; width: 100%; }
  .v2-tab { flex: 1 1 0; justify-content: center; padding: 0 12px; }
  /* Five full-bleed compositor layers is a desktop budget. A phone shows far
     less bare ground anyway -- the sections cover it -- so two fields carry
     the same impression for two fifths of the memory. */
  .v2-aura i:nth-child(3) { display: none; }
}

/* ==========================================================================
   The two app pages — join and board — in v2 clothes.

   Their templates emit .bb-* markup, and so does app.js when it renders a
   request card. Rewriting all three would mean rewriting the one piece of
   JavaScript that can only be tested against a live Firestore, so instead the
   classes are mapped onto the v2 token set. Same markup, one design.

   These rules only load where v2.css loads, which is everywhere except the
   stashed legacy landing — that page still gets style.css and is untouched.
   ========================================================================== */
.v2 .bb-sec { padding: 0; }
.v2 .bb-sec__in { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* buttons and tabs */
/* the join and board buttons run on the same six tokens as .v2-btn, so the
   hover is identical across the site whichever markup produced the button */
.v2 .bb-btn {
  --btn-bg: var(--brand);      --btn-ink: var(--brand-ink); --btn-edge: var(--brand);
  --btn-bg-h: var(--brand-ink);--btn-ink-h: var(--brand);   --btn-edge-h: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 14px;
  background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-edge);
  font-family: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background-color var(--fade), color var(--fade), border-color var(--fade),
              transform .16s ease, box-shadow .16s ease;
}
.v2 .bb-btn:hover {
  background: var(--btn-bg-h); color: var(--btn-ink-h); border-color: var(--btn-edge-h);
  transform: translateY(-1px); box-shadow: var(--lift);
}
.v2 .bb-btn:focus-visible { outline: 2px solid var(--btn-edge-h); outline-offset: 3px; }
.v2 .bb-btn:active { transform: translateY(0); }
.v2 .bb-btn--quiet, .v2 .bb-btn--ghost {
  --btn-bg: transparent;   --btn-ink: var(--link);   --btn-edge: var(--line-2);
  --btn-bg-h: var(--link); --btn-ink-h: var(--panel);--btn-edge-h: var(--link);
}
.v2 .bb-tabs, .v2 .bb-auth__tabs, .v2 .bb-board__tabs {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card);
}
.v2 .bb-tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer;
  transition: background-color var(--fade), color var(--fade);
}
.v2 .bb-tab:hover { color: var(--ink); background: var(--panel); }
.v2 .bb-tab[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); }
.v2 .bb-tab[aria-selected="true"]:hover { background: var(--brand); color: var(--brand-ink); }

/* fields */
.v2 .bb-label { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.v2 .bb-label > span {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.v2 .bb-input {
  width: 100%; height: 56px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 16px; font-weight: 600;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.v2 .bb-input::placeholder { color: var(--faint); font-weight: 500; }
.v2 .bb-input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27,76,251,.16);
}
.v2 .bb-label--pass { position: relative; }
.v2 .bb-label--pass .bb-input { padding-right: 56px; }
.v2 .bb-eye {
  position: absolute; right: 4px; bottom: 4px; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 10px; color: var(--muted); cursor: pointer;
}
.v2 .bb-eye:hover { color: var(--ink); background: var(--panel); }
/* Without this the icon paints with the default black fill and the reveal
   control renders as a solid blob. The rule lived only in style.css. */
.v2 .bb-eye svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.v2 .bb-eye .bb-eye__slash { opacity: 1; transition: opacity .18s ease; }
.v2 .bb-eye[aria-pressed="true"] .bb-eye__slash { opacity: 0; }
.v2 .bb-field, .v2 .bb-field--boxed {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 10px 16px; min-height: 60px; justify-content: center;
  border-radius: 12px; border: 1px solid var(--line-2); background: var(--card);
  text-align: left; cursor: text;
}
.v2 .bb-field__k {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.v2 .bb-field__in, .v2 .bb-field__v {
  border: 0; padding: 0; background: none; width: 100%;
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
}
.v2 .bb-field__in:focus { outline: none; }
.v2 .bb-msg { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--muted); }
.v2 .bb-msg.bad { color: var(--no-ink); }
.v2 .bb-msg.ok  { color: var(--money); }

/* join */
.v2 .bb-auth { padding: 0; }
/* Which of the two panels is showing is decided here, from data-mode on the
   card — set server-side from ?mode and flipped by app.js. This mechanism was
   in style.css only, so without it both forms rendered stacked on top of each
   other and the tab switch did nothing. */
.v2 .bb-auth__panel {
  max-height: 900px; opacity: 1; overflow: hidden;
  transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.v2 .bb-auth__card[data-mode="signin"] .bb-auth__panel--register,
.v2 .bb-auth__card[data-mode="register"] .bb-auth__panel--signin {
  max-height: 0; opacity: 0; pointer-events: none;
}
.v2 .bb-auth__card {
  max-width: 560px; margin: 0 auto; padding: 32px;
  border-radius: 20px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.v2 .bb-auth__head h1 {
  margin: 18px 0 8px; font-family: Unbounded, Montserrat, sans-serif;
  font-weight: 700; font-size: 26px; color: var(--head);
}
.v2 .bb-auth__head p { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--muted); }
.v2 .bb-auth__roles { display: grid; gap: 10px; margin: 22px 0; }
.v2 .bb-auth__role {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 16px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--card);
  font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ink);
  transition: border-color .18s ease, background-color .18s ease;
}
.v2 .bb-auth__role[aria-pressed="true"], .v2 .bb-auth__role.is-on {
  border-color: var(--brand); background: var(--card);
  box-shadow: 0 0 0 3px rgba(27,76,251,.14);
}
.v2 .bb-auth__role span { font-size: 13px; font-weight: 500; color: var(--muted); }
.v2 .bb-auth__form { display: flex; flex-direction: column; gap: 16px; }
.v2 .bb-auth__form .bb-btn { width: 100%; height: 56px; }
.v2 .bb-auth__note, .v2 .bb-auth__alt {
  font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--muted); text-align: center;
}
.v2 .bb-auth__alt { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.v2 .bb-auth__alt button, .v2 .bb-auth__forgot button, .v2 [data-auth-reset] {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--link);
}
/* "Forgot password?" is a standalone action on its own line, not a link inside
   a sentence, so it gets a finger-sized target. */
.v2 [data-auth-reset] { display: inline-flex; align-items: center; min-height: 44px; }

/* board */
/* Every other page opens with a band; this one opens with a heading, and with
   no padding it collided with the header. */
.v2 .bb-board { padding: 40px 0 0; }
.v2 .bb-board__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 22px; flex-wrap: wrap;
}
.v2 .bb-board__head h1 {
  font-family: Unbounded, Montserrat, sans-serif; font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); color: var(--head);
}
.v2 .bb-board__head p { margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--muted); }
.v2 .bb-board__form {
  padding: 24px; margin-bottom: 22px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.v2 .bb-board__form h2 { margin-bottom: 16px; font-size: 19px; font-weight: 800; color: var(--head); }
.v2 .bb-board__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.v2 .bb-board__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.v2 .bb-board__list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.v2 .bb-board__state {
  padding: 48px 24px; text-align: center; border-radius: 16px;
  background: var(--card); border: 1px dashed var(--line-2);
  font-size: 15px; font-weight: 500; color: var(--muted);
}
.v2 .bb-board__chip {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; align-self: flex-start;
  margin: 0; padding: 10px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-2);
  font-size: 14px; font-weight: 600; color: var(--head);
}
.v2 .bb-board__chip a { font-weight: 500; color: var(--link); }

/* a request row, rendered by app.js */
.v2 .bb-req {
  padding: 18px 20px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.v2 .bb-req--mine { border-color: var(--brand); }
.v2 .bb-req__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2 .bb-req__av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 800; color: var(--muted);
}
.v2 .bb-req__route {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  font-size: 18px; font-weight: 800; color: var(--head);
}
.v2 .bb-req__route svg {
  width: 20px; height: 20px; flex: none; fill: none;
  stroke: var(--faint); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.v2 .bb-req__status--open   { color: var(--money); border-color: color-mix(in srgb, var(--money) 40%, transparent); }
.v2 .bb-req__note {
  margin-top: 12px; font-size: 14px; font-weight: 500; line-height: 1.6;
  color: var(--muted); text-wrap: pretty;
}
.v2 .bb-req__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; }
.v2 .bb-req__meta span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; color: var(--ink); }
.v2 .bb-req__meta i {
  font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.v2 .bb-req__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.v2 .bb-req__acts .bb-btn { height: 44px; padding: 0 18px; font-size: 14px; }
.v2 .bb-pill, .v2 .bb-req__status {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-2);
  font-size: 12px; font-weight: 700; color: var(--muted);
}

/* city autocomplete from main.js */
.v2 .bb-ac {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 260px; overflow: auto; padding: 6px;
  border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-hi);
}
.v2 .bb-ac__i {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 12px;
  border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.v2 .bb-ac__i:hover, .v2 .bb-ac__i.is-on { background: var(--card); }
.v2 .bb-ac__i i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--faint); }

@media (max-width: 900px) {
  .v2 .bb-sec__in { padding: 0 20px; }
  .v2 .bb-auth__card { padding: 20px; }
  .v2 .bb-board__grid { grid-template-columns: minmax(0, 1fr); }
  .v2 .bb-tab { height: 44px; }
  .v2 .bb-btn { height: 48px; }
}

/* ============================================================================
   1.10.0 — TZ v1.0 functionality: request fields, offers, deal actions, routes,
   profile, finance, onboarding, consent, providers, the session chip.
   Same tokens as everything above; nothing here knows which colourway is on.
   ========================================================================= */

/* header session chip */
.v2 .v2-session { display: flex; align-items: center; gap: 14px; position: relative; }
.v2 .v2-session > a { font-size: 14px; font-weight: 600; color: var(--muted); }
.v2 .v2-session > a:hover { color: var(--ink); }
.v2 .v2-session__who {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--brand); color: var(--brand-ink); font: 700 15px/1 inherit; font-family: inherit; cursor: pointer;
}
.v2 .v2-session__pop {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; padding: 10px;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px; z-index: 40;
}
.v2 .v2-session__email { padding: 8px 10px 10px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; word-break: break-all; }
.v2 .v2-session__pop a, .v2 .v2-session__pop button {
  display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 0;
  background: none; color: var(--ink); font: 600 14.5px/1 inherit; font-family: inherit; text-align: left; cursor: pointer;
}
.v2 .v2-session__pop a:hover, .v2 .v2-session__pop button:hover { background: var(--card); }
@media (max-width: 720px) { .v2 .v2-session > a { display: none; } }

/* buttons */
.v2 .bb-btn--sm { height: 44px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.v2 .bb-btn--wire {
  --btn-bg: transparent; --btn-ink: var(--ink); --btn-edge: var(--line-2);
  --btn-bg-h: var(--card); --btn-ink-h: var(--ink); --btn-edge-h: var(--line-2);
}
.v2 .bb-btn--danger { --btn-bg: transparent; --btn-ink: var(--no-ink); --btn-edge: color-mix(in srgb, var(--no-ink) 40%, transparent);
  --btn-bg-h: var(--no-ink); --btn-ink-h: #fff; --btn-edge-h: var(--no-ink); }
.v2 .bb-btn--link { --btn-bg: transparent; --btn-ink: var(--link); --btn-edge: transparent;
  --btn-bg-h: transparent; --btn-ink-h: var(--ink); --btn-edge-h: transparent; padding: 0 8px; }
.v2 .bb-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* form pieces */
.v2 .bb-board__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.v2 .bb-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-bottom: 14px; }
.v2 .bb-seg__opt { position: relative; }
.v2 .bb-seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.v2 .bb-seg__opt span { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 9px; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.v2 .bb-seg__opt input:checked + span { background: var(--brand); color: var(--brand-ink); }
.v2 .bb-seg__opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.v2 .bb-fs { margin: 0; padding: 10px 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); display: flex; flex-direction: column; gap: 0; }
.v2 .bb-fs legend { padding: 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2 .bb-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.v2 .bb-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.v2 .bb-input--area { height: auto; min-height: 72px; padding: 12px 16px; line-height: 1.45; resize: vertical; }
.v2 .bb-input--sm { height: 44px; font-size: 14px; margin-top: 4px; }
.v2 .bb-board__form .bb-label { margin-top: 12px; }
.v2 .bb-board__form .bb-board__grid + .bb-board__grid { margin-top: 12px; }
.v2 .bb-hint { margin: 10px 0 0; font-size: 13.5px; font-weight: 500; color: var(--muted); line-height: 1.5; }
.v2 .bb-scenario {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.5;
  background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.v2 .bb-scenario--foreign, .v2 .bb-scenario--unknown { background: color-mix(in srgb, var(--no-ink) 10%, transparent); border-color: color-mix(in srgb, var(--no-ink) 35%, transparent); }
.v2 .bb-scenario--ru { background: color-mix(in srgb, var(--money) 10%, transparent); border-color: color-mix(in srgb, var(--money) 35%, transparent); }

/* request card additions */
.v2 .bb-req__type { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.v2 .bb-req__type svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.v2 .bb-req__hand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.v2 .bb-req__hand i { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2 .bb-req__panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.v2 .bb-req__h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--head); }
.v2 .bb-req__status--matched, .v2 .bb-req__status--in_transit { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.v2 .bb-req__status--delivered_claimed { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.v2 .bb-req__status--completed { color: var(--money); background: color-mix(in srgb, var(--money) 12%, transparent); border-color: transparent; }
.v2 .bb-req__status--cancelled, .v2 .bb-req__status--expired { color: var(--muted); }
.v2 .bb-req__status--disputed { color: var(--no-ink); border-color: color-mix(in srgb, var(--no-ink) 40%, transparent); }
.v2 .bb-req--completed, .v2 .bb-req--cancelled, .v2 .bb-req--expired { opacity: .78; }
.v2 .bb-req--route .bb-req__route svg { stroke: var(--brand); }
.v2 .bb-offer { display: flex; flex-direction: column; gap: 10px; }
.v2 .bb-offer-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.v2 .bb-offer-row:last-child { border-bottom: 0; }
.v2 .bb-offer-row__body { flex: 1; min-width: 0; }
.v2 .bb-offer-row__body p { margin: 0 0 4px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.v2 .bb-offer-row__body small { font-size: 12.5px; color: var(--muted); }
.v2 .bb-offer-row--declined, .v2 .bb-offer-row--withdrawn { opacity: .6; }
.v2 .bb-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v2 .bb-log li { display: grid; grid-template-columns: 120px auto 1fr; gap: 10px; font-size: 13px; color: var(--muted); }
.v2 .bb-log time { font-variant-numeric: tabular-nums; }
.v2 .bb-log b { color: var(--ink); }
.v2 .bb-msg.bad, .v2 .bb-msg--bad { color: var(--no-ink); }
.v2 .bb-msg.ok,  .v2 .bb-msg--ok  { color: var(--money); }

/* report dialog */
.v2 .bb-dialog { border: 0; padding: 0; border-radius: 18px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); max-width: min(520px, calc(100vw - 32px)); }
.v2 .bb-dialog::backdrop { background: rgba(5, 6, 15, .55); }
.v2 .bb-dialog__in { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.v2 .bb-dialog__in h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--head); }
.v2 .bb-dialog select.bb-input { appearance: auto; }

/* profile / finance */
.v2 .bb-narrow { max-width: 760px; }
.v2 .bb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.v2 .bb-stat { padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.v2 .bb-stat b { font-size: 28px; font-weight: 800; color: var(--head); line-height: 1.1; }
.v2 .bb-stat span { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.v2 .bb-stat i { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.v2 .bb-h2 { margin: 28px 0 0; font-size: 20px; font-weight: 800; color: var(--head); }
.v2 .bb-copy { display: flex; gap: 8px; }
.v2 .bb-copy .bb-input { flex: 1; min-width: 0; font-size: 14px; }
.v2 .bb-copy .bb-btn { height: 56px; }
.v2 .bb-danger { margin-top: 24px; padding: 14px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--no-ink) 30%, transparent); }
.v2 .bb-danger summary { cursor: pointer; font-weight: 700; color: var(--no-ink); min-height: 28px; }
.v2 .bb-danger form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.v2 .bb-profile .bb-board__form, .v2 .bb-finance .bb-board__form { margin-top: 0; }

/* join: onboarding, consent, providers */
.v2 .bb-onb { padding: 8px 0 18px; }
.v2 .bb-onb__slide { min-height: 160px; }
.v2 .bb-onb__n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-weight: 800; }
.v2 .bb-onb__slide h2 { margin: 14px 0 6px; font-size: 22px; font-weight: 800; color: var(--head); }
.v2 .bb-onb__slide p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.55; }
.v2 .bb-onb__dots { display: flex; gap: 6px; margin: 14px 0 4px; }
.v2 .bb-onb__dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); }
.v2 .bb-onb__dots i.is-on { background: var(--brand); }
.v2 .bb-auth__card.is-onb .bb-auth__panel--register, .v2 .bb-auth__card.is-onb .bb-auth__tabs { display: none; }
.v2 .bb-consent { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 4px 0 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); line-height: 1.5; cursor: pointer; }
.v2 .bb-consent input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--brand); }
/* inline links keep the line box but get a thumb-sized hit area */
.v2 .bb-consent a { color: var(--link); font-weight: 600; display: inline-block; padding: 15px 0; margin: -15px 0; }
.v2 .bb-auth__prov { display: grid; gap: 8px; margin: 0 0 16px; }
.v2 .bb-auth__prov .bb-btn { width: 100%; }
.v2 .bb-auth__prov svg { flex: none; }
.v2 .bb-auth__or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.v2 .bb-auth__or::before, .v2 .bb-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 720px) {
  .v2 .bb-req__hand { grid-template-columns: minmax(0, 1fr); }
  .v2 .bb-offer-row { flex-wrap: wrap; }
  .v2 .bb-offer-row__body { flex-basis: calc(100% - 52px); }
  .v2 .bb-offer-row__act { width: 100%; }
  .v2 .bb-offer-row__act .bb-btn { width: 100%; }
  .v2 .bb-stats { grid-template-columns: minmax(0, 1fr); }
  .v2 .bb-log li { grid-template-columns: 1fr; gap: 2px; }
  .v2 .bb-copy { flex-direction: column; }
}

/* the mode switch under each auth panel was 21px tall — a real miss on a phone */
.v2 .bb-auth__alt button { min-height: 44px; padding: 0 6px; }