/* ==========================================================================
   Benewise design tokens — v12
   Source of truth: Benewise Journey Storyboard v0.2, step 0 (BRAND).
   Build note from the storyboard, honoured literally:
     "Ship these as design tokens (color.ink, color.action, color.surface,
      color.provenance, color.caution, color.emergency) so Liz's final picks
      are a one-line change, not a re-skin."
   Every legacy variable name in the codebase is aliased onto these roles at
   the bottom of this file, so older pages inherit the new brand for free.
   ========================================================================== */

/* Archivo, self-hosted. The typeface is chosen (F3 in the storyboard) and the
   site should not depend on a third-party font host to render its own brand —
   nor leak a request per visitor to one. Variable weight axis, three subsets. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('fonts/archivo-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
                 U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
                 U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  /* ---- THE SIX COLOR ROLES ------------------------------------------- */
  --color-ink:              #2e1f4d;   /* the anchor: logo, chat home, hero surfaces */
  --color-ink-deep:         #1d1433;   /* gradient partner for ink surfaces */
  --color-action:           #6b5ecb;   /* actions ONLY: buttons, links, tappable things */
  --color-action-deep:      #4a3d8f;   /* pressed / hover / text-on-lavender */
  --color-surface:          #f4f3fa;   /* surfaces */
  --color-surface-deep:     #e9e6f5;   /* page background */
  --color-provenance:       #2e6b2e;   /* provenance and good news */
  --color-provenance-soft:  #dff0df;
  --color-caution:          #8a6d1a;   /* caution, to-dos, "check first" */
  --color-caution-soft:     #faf0d0;
  --color-emergency:        #c0533e;   /* RESERVED. True urgency only, never marketing */
  --color-emergency-soft:   #fbeae6;

  /* ---- SUPPORTING NEUTRALS ------------------------------------------- */
  --color-type:             #1c1c1c;   /* headlines */
  --color-body:             #3a3a3a;   /* body copy */
  --color-muted:            #666666;   /* captions, secondary */
  --color-faint:            #8a82a8;   /* trademark marks, disabled */
  --color-line:             #e3e0f0;   /* hairlines, borders */
  --color-lavender:         #e3e0f0;   /* chip fill on light */
  --color-white:            #ffffff;
  --color-caution-page:     #fdf7e6;   /* build-note panels */
  --color-caution-ink:      #5a4a15;   /* text inside build-note panels */

  /* ---- TYPE ----------------------------------------------------------
     Storyboard: "heavy (800) headlines, regular body, monospace strictly
     for data fields — Archivo (F3) chosen."                              */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-data:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --weight-headline: 800;
  --weight-strong:   700;
  --weight-medium:   600;
  --weight-body:     400;

  /* ---- ELEVATION & SHAPE ---------------------------------------------- */
  --glow-action:  0 6px 18px rgba(107, 94, 203, 0.55);  /* the neon glow, Liz-approved */
  --shadow-card:  0 12px 40px rgba(0, 0, 0, 0.06);
  --shadow-ink:   0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-phone: 0 18px 50px rgba(0, 0, 0, 0.2);
  --radius-xl: 24px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --measure: 1500px;

  /* ==== LEGACY ALIASES =================================================
     Older pages declare their own :root blocks; these keep any stragglers
     and any third-party snippet on-brand rather than orphaning them.     */
  --ink:        var(--color-ink);
  --ink-2:      var(--color-body);
  --ink2:       var(--color-body);
  --muted:      var(--color-muted);
  --accent:     var(--color-action);
  --accent-2:   var(--color-action-deep);
  --accent-deep:var(--color-action-deep);
  --violet:     var(--color-action);
  --violet-soft:var(--color-lavender);
  --soft:       #b3a8e6;
  --lav:        #b3a8e6;
  --logo:       #cbc2f0;
  --lilac:      var(--color-surface);
  --lilac-2:    var(--color-line);
  --lilac2:     var(--color-line);
  --field:      var(--color-surface);
  --paper:      #f9f8fd;
  --white:      var(--color-white);
  --card:       var(--color-white);
  --dark:       var(--color-ink);
  --green:      var(--color-provenance);
  --green-deep: var(--color-provenance);
  --green-soft: var(--color-provenance-soft);
  --info:       var(--color-provenance);
  --info-soft:  var(--color-provenance-soft);
  --teal-soft:  var(--color-provenance-soft);
  --warn:       var(--color-caution);
  --warn-deep:  var(--color-caution);
  --warn-soft:  var(--color-caution-soft);
  --amber:      var(--color-caution);
  --amber-soft: var(--color-caution-soft);
  --red:        var(--color-emergency);
  --red-soft:   var(--color-emergency-soft);
  --hl:         #f0dfa0;
  --line:       var(--color-line);
  --shadow:     var(--shadow-card);
  --radius:     var(--radius-xl);
  --radius-sm-legacy: var(--radius-sm);
  --max:        1180px;
  --disp:       var(--font-display);
  --body:       var(--font-body);
}

/* ==========================================================================
   BASE
   ========================================================================== */
/* Deliberately narrow global scope: this file re-faces the whole site in
   Archivo and re-points every legacy colour variable, but it never sets a
   bare colour or background on body/a/h1-h6. Pages that paint their own dark
   hero surfaces keep their own text colours instead of being overridden. */
html { -webkit-text-size-adjust: 100%; }

body { font-family: var(--font-body); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-headline);
  letter-spacing: -0.01em;
}

code, kbd, samp, pre, .bw-data { font-family: var(--font-data); }

:focus-visible {
  outline: 3px solid var(--color-action);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--color-lavender); color: var(--color-ink); }

.bw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: var(--weight-headline);
  font-size: 13px;
  z-index: 200;
}
.bw-skip:focus { left: 0; color: var(--color-white); }

/* ==========================================================================
   SITE RAIL — the one strip that appears above every desktop surface, so the
   member, trustee and internal views finally read as one product.
   Sits ABOVE each page's own header rather than replacing it, so no existing
   page chrome, script hook or guardrail assertion is disturbed.
   ========================================================================== */
.bw-rail {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-display);
  font-size: 12.5px;
  line-height: 1.4;
}
.bw-rail-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 9px 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  /* v14: a flex row will not shrink below its content by default, which is
     how an 8px sideways drag gets into a page nobody edited. Belt and braces
     on the one strip that appears above every desktop surface. */
  min-width: 0;
  max-width: min(var(--measure), 100%);
  box-sizing: border-box;
}
.bw-rail a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.bw-rail .bw-rail-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-headline);
  color: var(--color-white);
  font-size: 14px;
  letter-spacing: -0.02em;
  margin-right: 10px;
}
.bw-rail .bw-rail-brand .m {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--color-action);
  color: var(--color-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--weight-strong);
}
.bw-rail .bw-rail-brand .dot { color: #b3a8e6; }
.bw-rail-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.bw-rail-links a {
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.bw-rail-links a:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-white); }
.bw-rail-links a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
  font-weight: var(--weight-headline);
}
.bw-rail-tag {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: var(--weight-headline);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-action);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .bw-rail-inner { padding: 8px 14px; gap: 4px; }
  .bw-rail-tag { margin-left: 0; }
}
@media print { .bw-rail { display: none; } }

/* ==========================================================================
   BRAND MARKS — L1 mark, L3 wordmark (both CHOSEN in the storyboard)
   ========================================================================== */
.bw-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  font-size: 19px;
  flex-shrink: 0;
  line-height: 1;
}
.bw-mark.sm { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
.bw-mark.lg { width: 64px; height: 64px; font-size: 32px; border-radius: 16px; }
.bw-mark.glow { box-shadow: var(--glow-action); }

.bw-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-headline);
  color: var(--color-ink);
  letter-spacing: -0.02em;
  font-size: 20px;
  white-space: nowrap;
}
.bw-wordmark .dot { color: var(--color-action); }
.bw-wordmark .tm { font-size: 0.45em; color: var(--color-faint); font-weight: var(--weight-strong); vertical-align: super; }
.bw-wordmark.on-ink { color: var(--color-white); }
.bw-wordmark.on-ink .dot { color: #b3a8e6; }

/* ==========================================================================
   BADGES & CHIPS — the storyboard's provenance vocabulary
   ========================================================================== */
.bw-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--weight-headline);
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.bw-badge.ink        { background: var(--color-ink);              color: var(--color-white); }
.bw-badge.action     { background: var(--color-action);           color: var(--color-white); }
.bw-badge.soft       { background: var(--color-lavender);         color: var(--color-action-deep); }
.bw-badge.provenance { background: var(--color-provenance-soft);  color: var(--color-provenance); }
.bw-badge.caution    { background: var(--color-caution-soft);     color: var(--color-caution); }
.bw-badge.emergency  { background: var(--color-emergency-soft);   color: #8a3324; }
.bw-badge.outline    { background: var(--color-white); color: var(--color-caution); border: 1px solid #d9c07a; }

.bw-eyebrow {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--weight-headline);
  letter-spacing: 0.08em;
  color: var(--color-action);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.bw-eyebrow.caution { color: var(--color-caution); }
.bw-eyebrow.provenance { color: var(--color-provenance); }
.bw-eyebrow.on-ink { color: #b3a8e6; }

/* Provenance line — "every claim says where it came from" */
.bw-source {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-provenance);
  background: var(--color-provenance-soft);
  border-radius: 8px;
  padding: 6px 10px;
  display: inline-block;
  letter-spacing: 0.03em;
}
.bw-source.caution { color: var(--color-caution); background: var(--color-caution-soft); }
.bw-source.demo    { color: var(--color-action-deep); background: var(--color-lavender); }

/* ==========================================================================
   BUTTONS — purple is actions only
   ========================================================================== */
.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: var(--weight-headline);
  font-size: 14px;
  padding: 13px 22px;
  min-height: 46px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: var(--color-action);
  color: var(--color-white);
  box-shadow: var(--glow-action);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-align: center;
}
.bw-btn:hover { background: var(--color-action-deep); color: var(--color-white); transform: translateY(-1px); }
.bw-btn:active { transform: translateY(0); }
.bw-btn.secondary {
  background: var(--color-white);
  color: var(--color-action-deep);
  border: 1.5px solid var(--color-line);
  box-shadow: none;
}
.bw-btn.secondary:hover { background: var(--color-surface); color: var(--color-action-deep); }
.bw-btn.ghost {
  background: transparent;
  color: var(--color-action-deep);
  box-shadow: none;
  padding: 10px 14px;
  min-height: 40px;
}
.bw-btn.ghost:hover { background: var(--color-surface); color: var(--color-action-deep); }
.bw-btn.on-ink { background: var(--color-action); color: var(--color-white); }
.bw-btn.block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .bw-btn { transition: none; }
  .bw-btn:hover { transform: none; }
}

/* ==========================================================================
   GLOBAL HEADER / FOOTER — one chrome across every surface
   ========================================================================== */
.bw-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.bw-header-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bw-header .bw-brand { display: flex; align-items: center; gap: 10px; }
.bw-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}
.bw-nav a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-body);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.bw-nav a:hover { background: var(--color-surface); color: var(--color-action-deep); }
.bw-nav a[aria-current="page"] {
  background: var(--color-ink);
  color: var(--color-white);
  font-weight: var(--weight-headline);
}
.bw-nav a.cta {
  background: var(--color-action);
  color: var(--color-white);
  font-weight: var(--weight-headline);
  box-shadow: var(--glow-action);
}
.bw-nav a.cta:hover { background: var(--color-action-deep); color: var(--color-white); }

.bw-footer {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.72);
  padding: 40px 24px 34px;
  margin-top: 56px;
  font-size: 13px;
  line-height: 1.65;
}
.bw-footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.bw-footer a { color: #cbc2f0; }
.bw-footer a:hover { color: var(--color-white); }
.bw-footer h2 {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b3a8e6;
  margin: 0 0 10px;
}
.bw-footer ul { list-style: none; margin: 0; padding: 0; }
.bw-footer li { margin-bottom: 5px; }
.bw-footer .bw-footer-note {
  max-width: var(--measure);
  margin: 26px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.bw-page { max-width: var(--measure); margin: 0 auto; padding: 40px 24px 20px; }
.bw-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.bw-card.ink {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-ink);
}
.bw-card.ink h1, .bw-card.ink h2, .bw-card.ink h3 { color: var(--color-white); }
.bw-card.outlined { border: 2px solid var(--color-ink); }

.bw-note {
  background: var(--color-caution-page);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-caution-ink);
}
.bw-note .bw-eyebrow { color: var(--color-caution); margin-bottom: 4px; }

.bw-grid { display: grid; gap: 20px; }
.bw-grid.two   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.bw-grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ==========================================================================
   THE PHONE FRAME — every storyboard mock renders in this one component
   ========================================================================== */
.bw-phone {
  width: 272px;
  height: 560px;
  box-sizing: border-box;
  border: 2.5px solid #d5cfeb;
  border-radius: 36px;
  background: var(--color-white);
  box-shadow: var(--shadow-phone);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.bw-phone.ink { background: linear-gradient(170deg, var(--color-ink) 0%, var(--color-ink-deep) 100%); }
.bw-phone.surface { background: var(--color-surface); }
.bw-phone.tall { height: 620px; }

.bw-phone-watermark {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: var(--weight-headline);
  font-size: 340px;
  color: rgba(255, 255, 255, 0.045);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.bw-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 18px 0;
  flex-shrink: 0;
  position: relative;
}
.bw-statusbar .t { font-size: 11px; font-weight: var(--weight-strong); width: 56px; }
.bw-statusbar .notch { width: 76px; height: 18px; border-radius: 10px; background: rgba(0, 0, 0, 0.08); }
.bw-statusbar .icons { display: flex; gap: 4px; align-items: center; width: 56px; justify-content: flex-end; }
.bw-phone.ink .bw-statusbar { color: var(--color-white); }
.bw-phone.ink .bw-statusbar .notch { background: rgba(255, 255, 255, 0.14); }
.bw-phone:not(.ink) .bw-statusbar { color: var(--color-type); }

.bw-phone-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 18px;
  position: relative;
  scrollbar-width: thin;
}
.bw-phone-body::-webkit-scrollbar { width: 4px; }
.bw-phone-body::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 4px; }

.bw-phone-caption {
  width: 272px;
  margin-top: 10px;
  text-align: center;
}

/* small in-phone building blocks */
.bw-p-title { font-family: var(--font-display); font-weight: var(--weight-headline); font-size: 17px; color: var(--color-type); }
.bw-p-sub   { font-size: 11.5px; color: var(--color-muted); line-height: 1.5; }
.bw-p-card  { background: var(--color-white); border-radius: 14px; padding: 13px; box-shadow: 0 3px 12px rgba(46, 31, 77, 0.07); }
.bw-p-back  { font-size: 11.5px; font-weight: var(--weight-strong); color: var(--color-action); display: inline-flex; align-items: center; gap: 4px; }
.bw-p-row   { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; padding: 6px 0; }
.bw-p-row + .bw-p-row { border-top: 1px solid var(--color-line); }
.bw-p-row .k { color: var(--color-body); }
.bw-p-row .v { font-family: var(--font-data); font-weight: var(--weight-medium); color: var(--color-type); white-space: nowrap; }
.bw-p-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--color-action);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--weight-headline);
  font-size: 13px;
  padding: 12px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  box-shadow: var(--glow-action);
}
.bw-p-btn:hover { background: var(--color-action-deep); color: var(--color-white); }
.bw-p-btn.quiet { background: var(--color-white); color: var(--color-action-deep); border: 1.5px solid var(--color-line); box-shadow: none; }
.bw-p-btn.quiet:hover { background: var(--color-surface); }

/* progress track — Drafted, You review, Sent, Answered.
   Named .bw-track, NOT .bw-rail: the site rail owns that name. */
.bw-track { display: flex; gap: 4px; margin: 10px 0 6px; }
.bw-track span {
  flex: 1;
  font-size: 8.5px;
  font-weight: var(--weight-headline);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 2px;
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-faint);
}
.bw-track span.on { background: var(--color-action); color: var(--color-white); }
.bw-track span.done { background: var(--color-lavender); color: var(--color-action-deep); }

/* ==========================================================================
   STORYBOARD SCREEN CARD — left column notes, right column mock
   ========================================================================== */
.bw-screen {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 30px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
  scroll-margin-top: 80px;
}
.bw-screen.ink { background: var(--color-ink); box-shadow: var(--shadow-ink); }
.bw-screen.keystone { border: 2px solid var(--color-ink); }
.bw-screen-notes { flex: 1; min-width: 330px; }
.bw-screen-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bw-step-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--weight-headline);
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bw-screen h2 { font-size: 22px; margin: 0; }
.bw-screen h3 { font-size: 16px; margin: 0; }

.bw-def { margin: 14px 0 0; }
.bw-def dt {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--weight-headline);
  letter-spacing: 0.08em;
  color: var(--color-action);
  text-transform: uppercase;
  margin-top: 14px;
}
.bw-def dd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--color-body); }

.bw-datatable { width: 100%; border-collapse: collapse; font-size: 12px; }
.bw-datatable th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 8px 10px;
  border-bottom: 2px solid var(--color-line);
  vertical-align: bottom;
}
.bw-datatable td {
  padding: 10px;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  line-height: 1.5;
  color: var(--color-body);
}
.bw-datatable td:first-child { font-family: var(--font-data); font-weight: var(--weight-medium); color: var(--color-ink); white-space: nowrap; }
.bw-datatable tbody tr:hover { background: var(--color-surface); }
.bw-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   ID CARD — one component, data-driven (storyboard R1)
   ========================================================================== */
.bw-idcard {
  background: linear-gradient(160deg, #ffffff 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 14px 15px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--color-body);
  box-shadow: 0 6px 18px rgba(46, 31, 77, 0.08);
  position: relative;
}
.bw-idcard .cardhead {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: var(--weight-headline);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.bw-idcard .f { font-family: var(--font-data); }
.bw-idcard .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-action);
  color: var(--color-white);
  font-size: 8px;
  font-weight: var(--weight-headline);
  margin-left: 4px;
  vertical-align: middle;
}
.bw-idcard.ink { background: linear-gradient(160deg, var(--color-ink), var(--color-ink-deep)); color: rgba(255,255,255,.8); border-color: transparent; }
.bw-idcard.ink .cardhead { color: var(--color-white); border-color: rgba(255,255,255,.2); }
.bw-idcard.placeholder { border-style: dashed; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .bw-screen { padding: 22px; gap: 22px; }
  .bw-page { padding: 28px 16px 16px; }
  .bw-header-inner { padding: 10px 16px; }
}
@media (max-width: 640px) {
  .bw-phone, .bw-phone-caption { width: 100%; max-width: 300px; }
  .bw-nav { width: 100%; margin-left: 0; }
  .bw-footer-inner { gap: 26px; }
}

@media print {
  .bw-header, .bw-footer, .bw-btn { display: none !important; }
  .bw-screen { break-inside: avoid; box-shadow: none; border: 1px solid var(--color-line); }
}