/* Public Full Business Health Report tool only.
   Reuses the site's own --ink/--muted/--primary/--line/--paper/--surface/
   --danger/--warning/--shadow tokens from styles.css; the --bh-* variables
   below are just the extra soft tints this tool needs (ageing-table hints,
   locked states, hover backgrounds) that the base stylesheet doesn't
   already define. No separate font or colour palette is introduced. */
.business-health-page {
  /* Premium palette override, scoped to this page only — the shared site tokens (styles.css) stay untouched
     for every other tool. Every existing component already styled with var(--primary)/var(--accent)/var(--ink)
     etc. inherits this refined palette automatically, which is why this is an override block, not a parallel
     set of new component-specific colours. */
  --ink: #15202B;
  --muted: #667381;
  --paper: #FBFAF6;
  --primary: #005B49;
  --primary-dark: #004435;
  --accent: #C99A3D;
  --bh-flat: #f8faf9;
  --bh-faint: #8b98a1;
  --bh-line-soft: #e9ede9;
  --bh-accent-soft: #e2f0eb;
  --bh-amber-soft: #fff8e8;
  --bh-red-soft: #fff1ef;
  --bh-shadow-pop: 0 16px 45px rgba(19,39,32,.16);
  /* Premium intake-screen tokens — a champagne-gold and pale-sage pairing layered on top of the site's own
     --primary/--primary-dark/--accent/--paper tokens, not a replacement for them. */
  --bh-ivory: #FBFAF6;
  --bh-surface-2: #F8F7F2;
  --bh-sage-soft: #eff6f2;
  --bh-gold-deep: #C99A3D;
  --bh-gold-light: #D6A84F;
  --bh-gold-soft: #fbf3e2;
  --bh-gold-line: rgba(201,154,61,.35);
  --bh-forest: #005B49;
  --bh-forest-strong: #006B55;
  --bh-forest-deep: #004435;
  --bh-divider-soft: rgba(0,91,73,.08);
  --bh-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --bh-font-ui: 'Manrope', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* STRICT IMPLEMENTATION — REDESIGN ONLY "REPORT SECTIONS" + "YOUR HEALTH REPORT": a deep premium teal, used
     ONLY by .report-nav/.health-panel (the two dark side panels) and nothing else — the center workspace has
     no equivalent existing token to reuse, since nothing else in this app is dark-surfaced. Gold accents on
     these panels reuse the EXISTING --bh-gold-deep/--bh-gold-light tokens above rather than introducing a
     near-duplicate — those already are the "muted rich gold" this redesign calls for. */
  --bh-panel-bg: #1F4E52;
  --bh-panel-bg-deep: #163F43;
  --bh-panel-bg-soft: #24585C;
  --bh-panel-text: #F8F6EF;
  --bh-panel-muted: #C6D4D3;
  --bh-panel-border: rgba(214,168,79,.24);
}
body.business-health-page{
  font-family: var(--bh-font-ui);
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(239,246,242,.65), transparent 62%),
    linear-gradient(180deg, var(--bh-ivory) 0%, #f8f7f2 45%, var(--bh-ivory) 100%);
}

/* ---------- global workspace width ----------
   The shared site rule (styles.css) caps every tool's <main> at 1040px — fine for narrow marketing/legal
   pages, but cramped for financial tables and comparative data. .app-workspace overrides that width, scoped
   to this page only, so every screen (first-page intake, extraction review, manual entry, comparative
   tables) shares one consistent, wider desktop width instead of each screen picking its own max-width. */
/* STRICT UI CHANGE — the top site header (CASA FP&A brand, Step-1-of-2 pill, 15-Minute Business Check /
   Cash Health Analysis crosslinks) and the compact application header (green "F" mark, "Full Business Health
   Report" label, "<Section> · N of 8" text) were both removed entirely from business-health.html — redundant
   once the left sidebar (sectionAccordionHtml/sidebarHtml) already shows the active section and the main
   workspace already carries its own section title (sectionHeroHtml). Scoped to this page only — business-
   check.html and cash-health.html keep their own separate copies of that same header markup untouched. The
   small top margin below replaces the vertical space that header used to occupy, so the workspace starts a
   deliberate ~24px from the top instead of a large gap or being flush against the browser edge. */
.business-health-page main.app-workspace{ width:min(94vw,1550px); margin:24px auto 72px; }
@media (max-width:640px){
  .business-health-page main.app-workspace{ width:100%; margin:20px auto 48px; padding:0 16px; }
}

/* ---------- compact intro (the old .hero/.compact-hero rules are shared by every tool; this page just
   trims its own top/bottom padding so the dashboard appears right after the header) ---------- */
.business-health-page .bh-hero{ padding:26px 0 22px; max-width:800px; text-align:center; margin:0 auto; }
.business-health-page .bh-hero h1{
  font-family: var(--bh-font-display); font-weight:700; font-style:normal;
  font-size: clamp(2.3rem, 4vw, 3.8rem); line-height:1.12; letter-spacing:.01em; margin-bottom:14px;
  background: linear-gradient(100deg, var(--bh-gold-deep) 0%, #d9b673 45%, var(--bh-gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--bh-gold-deep);
}
.business-health-page .bh-trust-row{ justify-content:center; gap:24px; margin-top:6px; }
.business-health-page .bh-trust-row span{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color: var(--bh-forest); font-weight:600; }
.business-health-page .bh-trust-row .bh-icon{ color: var(--bh-gold-deep); }
@media (max-width:640px){
  .business-health-page .bh-hero{ padding:22px 0 18px; }
  .business-health-page .bh-hero h1{ letter-spacing:0; }
  .business-health-page .bh-trust-row{ gap:12px 16px; }
}

/* ---------- ambient depth behind the dashboard — extremely subtle, purely atmospheric ----------
   STRICT CORRECTION note: `overflow-x:clip` here is scoped to this one decorative wrapper, containing its
   own ::before glow (which intentionally bleeds -24px past its own edges for a soft atmospheric effect) —
   not a blanket overflow-x:hidden on body/html to paper over an unrelated layout bug. `clip` (not `hidden`)
   deliberately avoids the classic "set one axis, the other silently becomes auto" behaviour, so this can't
   accidentally start clipping/scrolling anything vertically (dropdown lists, tooltips) that relies on
   escaping this wrapper's own box. Found and fixed while checking the horizontal-overflow acceptance
   criterion at mobile widths, where this glow was the actual, confirmed cause (via
   getComputedStyle(el,'::before'), not assumed) of a ~8px scrollWidth overflow. */
.business-health-page .bh-shell-wrap{ position:relative; margin:0 0 26px; overflow-x:clip; }
.business-health-page .bh-shell-wrap::before{
  content:""; position:absolute; left:-24px; right:-24px; top:-36px; height:320px;
  background: radial-gradient(640px 260px at 50% 0%, rgba(16,101,82,.07), transparent 72%);
  pointer-events:none; z-index:0;
}

/* ---------- compact, subtle footer (this page only — .cash-calculator-footer has no shared base rule;
   cash-health.html defines its own separately, scoped the same way) ---------- */
.business-health-page .cash-calculator-footer{
  padding:14px 20px 18px; text-align:center; font-size:.68rem; color: #9aa79f; border-top:1px solid var(--bh-line-soft); margin-top:6px;
}
.business-health-page .cash-calculator-footer__primary,
.business-health-page .cash-calculator-footer__secondary{
  display:flex; flex-wrap:wrap; justify-content:center; gap:7px; align-items:center;
}
.business-health-page .cash-calculator-footer__secondary{ margin-top:5px; }
.business-health-page .cash-calculator-footer a{ color: #9aa79f; text-decoration:none; }
.business-health-page .cash-calculator-footer a:hover{ color: var(--primary); text-decoration:underline; }
.business-health-page .cash-calculator-footer__separator{ opacity:.5; }
.business-health-page .cash-calculator-footer__love{ font-size:.85em; }

/* Full Business Health Report tool — layout only. Colours and type
   are inherited from the site's own styles.css; the extra --bh-*
   variables below are soft tints this tool needs that the base
   stylesheet doesn't already define. */

html,body{ height:100%; }
::selection{ background: var(--bh-accent-soft); }

a{ color: var(--primary); }

.mono{ font-family: var(--bh-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- layout shells ---------- */
/* No border/shadow/overflow-hidden of its own any more — the two side panels are now independently rounded,
   bordered and shadowed "floating" cards (see .report-nav/.health-panel below), with a visible gap between
   them and the (unchanged, still plain) center workspace, matching the reference image's three-separate-
   panels look rather than one continuous bordered frame. */
.app-shell{ min-height:70vh; display:flex; flex-direction:column; }

.center-shell{
  min-height:60vh; display:flex; align-items:center; justify-content:center;
  padding: 32px 20px; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
}
.center-card{
  width:100%; max-width:620px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--bh-radius-lg);
  box-shadow: var(--shadow);
  padding: 40px 40px 36px;
}
@media (max-width:640px){
  .center-card{ padding: 28px 20px 24px; }
}

/* Wide variant for review/comparative screens (e.g. the PDF extraction summary) that need real horizontal
   room for N-period tables — the card itself uses most of .app-workspace, while .review-intro keeps the
   introductory copy at a comfortably readable line length inside it. */
.center-card.center-card-wide{ max-width:1500px; }
.review-intro{ max-width:1040px; }

h1,h2,h3{ color: var(--ink); margin:0 0 8px; font-weight:800; letter-spacing:-.02em; }
h1{ font-size:30px; line-height:1.18; }
h2{ font-size:22px; line-height:1.25; }
h3{ font-size:17px; line-height:1.3; }
p.lede{ color: var(--muted); font-size:15px; line-height:1.55; margin:0 0 22px; }

.ledger-rule{
  height:1px; background: var(--line); position:relative; margin: 6px 0 18px; overflow:hidden;
}
.ledger-rule > span{
  position:absolute; left:0; top:0; bottom:0;
  background: var(--primary); transition: width .5s ease;
}

/* ---------- buttons ---------- */
.btn{
  appearance:none; border:1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size:14px; font-weight:800; padding:12px 18px; border-radius: 10px;
  cursor:pointer; transition: transform .12s ease, opacity .12s ease, background .15s;
  display:inline-flex; align-items:center; gap:8px; letter-spacing:.01em;
}
.btn:hover{ opacity:.88; }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-primary{ background: var(--primary); border-color: var(--primary); color:#fff; }
.btn-primary:hover{ background: var(--primary-dark); border-color: var(--primary-dark); opacity:1; }
.btn-ghost{ background:transparent; color: var(--primary-dark); border:1px solid var(--line); }
.btn-ghost:hover{ background: var(--bh-flat); opacity:1; }
.btn-danger{ background:#fff; color: var(--danger); border:1px solid var(--danger); }
.btn-danger:hover{ background: var(--bh-red-soft); opacity:1; }
.btn-sm{ padding:7px 13px; font-size:12.5px; }
.btn-block{ width:100%; justify-content:center; }
.link-btn{
  background:none; border:none; color: var(--muted); text-decoration:underline;
  cursor:pointer; font-size:13px; padding:4px 0;
}
.link-btn:hover{ color: var(--ink); }

/* ---------- big selectable cards (nature of business, mode select) ---------- */
.card-grid{ display:grid; gap:12px; }
.pick-card{
  text-align:left; border:1px solid var(--line); background: var(--surface);
  border-radius: var(--bh-radius-md); padding:16px 18px; cursor:pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.pick-card:hover{ border-color: var(--primary); box-shadow: var(--shadow); }
.pick-card.selected{ border-color: var(--primary); background: var(--bh-accent-soft); }
.pick-card .pt{ font-weight:600; font-size:15px; margin-bottom:3px; }
.pick-card .ps{ font-size:12.5px; color: var(--muted); line-height:1.4; }

/* ---------- segmented buttons ---------- */
.seg{ display:flex; flex-wrap:wrap; gap:8px; }
.seg-btn{
  border:1px solid var(--line); background:#fff; color: var(--ink);
  padding:9px 15px; border-radius: 999px; font-size:13.5px; cursor:pointer;
  transition: all .12s;
}
.seg-btn:hover{ border-color: var(--primary); }
.seg-btn.on{ background: var(--primary); border-color: var(--primary); color:#fff; }

/* ---------- fields ---------- */
.field{ margin-bottom:18px; }
.field-label-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.field-label{ font-size:13.5px; font-weight:600; color: var(--ink); }
.field-priority{
  font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  padding:2px 6px; border-radius:3px;
}
.pr-essential{ background: var(--bh-accent-soft); color: var(--primary-dark); }
.pr-recommended{ background: var(--bh-amber-soft); color: var(--warning); }
.pr-optional,.pr-advanced{ background: var(--bh-line-soft); color: var(--bh-faint); }

.info-dot{
  width:15px; height:15px; border-radius:50%; border:1px solid var(--bh-faint);
  color: var(--bh-faint); font-size:10px; display:inline-flex; align-items:center;
  justify-content:center; cursor:help; flex:none; position:relative;
}
.info-dot:hover .tip, .info-dot:focus .tip{ display:block; }
.tip{
  display:none; position:absolute; z-index:40; bottom:22px; left:50%; transform:translateX(-50%);
  width:240px; background: var(--ink); color:#fff; font-size:12px; line-height:1.5;
  padding:9px 11px; border-radius: var(--bh-radius-sm); font-weight:400;
  box-shadow: var(--bh-shadow-pop);
}

input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius: var(--bh-radius-sm);
  font-size:14px; color: var(--ink); background:#fff; transition: border-color .12s;
}
input[type=number]{ font-family: var(--bh-font-mono); text-align:right; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--bh-accent-soft); border-color: var(--primary); }
.currency-input-wrap{ position:relative; }
/* Reserve room for the widest real unit label ("₹ thousand") so the right-aligned number in the input never
   sits under the absolutely-positioned unit tag — the real, reported overlap bug. Number and unit must never
   share the same pixels regardless of value length or which unit is selected. */
.currency-input-wrap input[type=number]{ padding-right:64px; }
.currency-unit-tag{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:11px; color: var(--bh-faint); font-family: var(--bh-font-mono); pointer-events:none;
  max-width:50px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.status-row{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.status-chip{
  font-size:11px; padding:4px 9px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color: var(--muted); cursor:pointer;
}
.status-chip.on{ background: var(--primary); border-color: var(--primary); color:#fff; }
.status-chip.skip.on{ background: var(--bh-faint); border-color: var(--bh-faint); }

.warn-box{
  border:1px solid var(--warning); background: var(--bh-amber-soft); border-radius: var(--bh-radius-sm);
  padding:12px 14px; font-size:13px; color:#5C4111; margin:8px 0 18px;
}
.warn-box .wt{ font-weight:700; margin-bottom:4px; }
.warn-actions{ display:flex; gap:8px; margin-top:9px; }

/* ---------- year table ---------- */
.year-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--bh-radius-md); background:#fff; }
table.year-table{ border-collapse:collapse; width:100%; min-width:520px; }
table.year-table th, table.year-table td{ padding:10px 12px; border-bottom:1px solid var(--bh-line-soft); }
table.year-table th{ text-align:right; font-size:11.5px; color: var(--muted); font-family: var(--bh-font-mono); font-weight:600; background: var(--bh-flat); }
table.year-table th:first-child, table.year-table td:first-child{ text-align:left; min-width:220px; }
table.year-table td:first-child{ font-size:13px; }
table.year-table tr:last-child td{ border-bottom:none; }
table.year-table input[type=number]{ border:none; border-radius:0; padding:4px; text-align:right; background:transparent; }
table.year-table input[type=number]:focus{ outline:none; background: var(--bh-accent-soft); }

/* ---------- ageing table ---------- */
.ageing-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-bottom:8px; }
.ageing-cell label{ display:block; font-size:11px; color: var(--muted); margin-bottom:4px; }

/* ---------- repeatable group ---------- */
.rep-item{ border:1px solid var(--line); border-radius: var(--bh-radius-md); padding:16px; margin-bottom:12px; background:#fff; position:relative; }
.rep-item-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.rep-item-title{ font-weight:600; font-size:13.5px; }
.rep-remove{ background:none; border:none; color: var(--bh-faint); cursor:pointer; font-size:12px; }
.rep-remove:hover{ color: var(--danger); }
.rep-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:14px; }

/* ---------- month chips ---------- */
.month-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.month-chip{ border:1px solid var(--line); background:#fff; padding:6px 11px; border-radius:5px; font-size:12.5px; cursor:pointer; }
.month-chip.on{ background: var(--primary); border-color: var(--primary); color:#fff; }

/* ---------- searchable dropdown ---------- */
.sdd{ position:relative; }
.sdd-control{ display:flex; }
.sdd-control input{ min-width:0; border-radius:var(--bh-radius-sm) 0 0 var(--bh-radius-sm); }
.sdd-toggle{ width:46px; flex:0 0 46px; border:1px solid var(--line); border-left:0; border-radius:0 var(--bh-radius-sm) var(--bh-radius-sm) 0; background:#fff; color:var(--primary-dark); font-size:16px; cursor:pointer; }
.sdd-toggle:hover{ background:var(--bh-accent-soft); }
.sdd-list{
  position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; max-height:230px; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius: var(--bh-radius-sm); box-shadow: var(--bh-shadow-pop);
}
.sdd-opt{ padding:9px 12px; font-size:13.5px; cursor:pointer; }
.sdd-opt:hover, .sdd-opt.active{ background: var(--bh-accent-soft); }

/* Small fixed WhatsApp shortcut - self-contained so it cannot inherit the
   much larger calculator icon styles used by other pages. */
.bh-whatsapp-float{
  position:fixed; right:16px; bottom:16px; z-index:30;
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; background:#128c7e; color:#fff;
  box-shadow:0 5px 14px rgba(0,0,0,.18); text-decoration:none;
  transition:transform .18s ease, background .18s ease;
}
.bh-whatsapp-float svg{ width:19px; height:19px; display:block; }
.bh-whatsapp-float:hover,.bh-whatsapp-float:focus-visible{ background:#0d7469; color:#fff; transform:translateY(-2px); }
@media (max-width:640px){ .bh-whatsapp-float{ right:12px; bottom:12px; width:36px; height:36px; } }
@media print{ .bh-whatsapp-float{ display:none !important; } }

/* ---------- multiselect chips ---------- */
.ms-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.ms-chip{ border:1px solid var(--line); background:#fff; padding:8px 13px; border-radius:6px; font-size:13px; cursor:pointer; }
.ms-chip.on{ background: var(--bh-accent-soft); border-color: var(--primary); color: var(--primary-dark); font-weight:600; }

/* ---------- accordion (subsections) ---------- */
.accordion{ border:1px solid var(--line); border-radius: var(--bh-radius-md); background:#fff; margin-bottom:14px; overflow:hidden; }
.accordion-head{
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer;
  background: var(--bh-flat);
}
.accordion-head:hover{ background: var(--bh-line-soft); }
.accordion-title{ font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:9px; }
.accordion-meta{ font-family: var(--bh-font-mono); font-size:11.5px; color: var(--muted); }
.accordion-body{ padding:18px 18px 6px; }
.chev{ transition: transform .15s; color: var(--bh-faint); }
.chev.open{ transform: rotate(90deg); }

/* ---------- app frame: three-column premium workspace ---------- */
.depth-pill{ font-family: var(--bh-font-mono); font-size:11px; padding:5px 10px; border-radius:999px; background: var(--bh-accent-soft); color: var(--primary-dark); font-weight:700; }

.body-shell{ display:flex; flex:1; min-height:0; gap:20px; padding:18px; }

/* ---------- shared premium-panel heading (Report Sections / Your Health Report) ----------
   One shared piece of markup (panelHeadingHtml in business-health.js) so both dark side panels get the exact
   same gold-uppercase-title + line/diamond/line divider treatment — "matching typography hierarchy" (Part C)
   without duplicating four lines of HTML twice. */
.panel-heading{ padding:0 6px 18px; text-align:center; }
.panel-heading-title{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--bh-gold-light);
}
.panel-divider{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.panel-divider-line{ flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--bh-panel-border), transparent); }
.panel-divider-dot{ font-size:7px; line-height:1; color: var(--bh-gold-light); }

/* ---------- left: report-section navigation ----------
   A deep-teal, independently rounded/bordered/shadowed panel (Part A) — no longer flush against the shell's
   own edge (border-right removed, replaced by this panel's own full border + the .body-shell gap above). */
.report-nav{
  width:24%; min-width:230px; max-width:300px; flex:none;
  border-radius:22px; border:1px solid var(--bh-panel-border);
  background: linear-gradient(180deg, var(--bh-panel-bg) 0%, var(--bh-panel-bg-deep) 100%);
  box-shadow: 0 16px 38px rgba(17,48,48,.16);
  padding:24px 16px; overflow-y:auto; display:flex; flex-direction:column; color: var(--bh-panel-text);
}
.sidebar-group{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:10px 12px;
  border-radius:14px; background:none; border:1px solid transparent; border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer; margin-bottom:4px; color: var(--bh-panel-muted); position:relative;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.sidebar-group:hover{ background: rgba(255,255,255,.05); }
.sidebar-group.active{ background: rgba(255,255,255,.07); border-color: var(--bh-panel-border); }
/* Rounded left highlight accent (Part A §6) — an inset pseudo-element rather than a hard border-left, so it
   reads as a soft accent bar rather than a flat 3px stripe. */
.sidebar-group.active::before{
  content:""; position:absolute; left:2px; top:9px; bottom:9px; width:3px; border-radius:3px;
  background: var(--bh-gold-light);
}
.sg-icon-wrap{
  width:40px; height:40px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--bh-panel-border); background: rgba(255,255,255,.04);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.sidebar-group:hover .sg-icon-wrap{ background: rgba(255,255,255,.08); }
.sidebar-group.active .sg-icon-wrap{ border-color: var(--bh-gold-light); background: rgba(214,168,79,.14); }
.sg-icon{ font-size:16px; color: var(--bh-panel-text); opacity:.85; }
.sidebar-group.active .sg-icon{ color: var(--bh-gold-light); opacity:1; }
.sg-label{ font-size:13.5px; flex:1; color: var(--bh-panel-text); }
.sidebar-group.active .sg-label{ color:#fff; font-weight:700; }
.sg-count{ font-family: var(--bh-font-mono); font-size:11px; color: var(--bh-panel-muted); text-align:right; }
.sg-count.sg-optional{ font-style:italic; font-size:10.5px; color: var(--bh-gold-light); opacity:.9; }
.sidebar-group.active .sg-count{ color: var(--bh-gold-light); font-weight:700; }
.sidebar-group.complete .sg-check{ color: var(--bh-gold-light); margin-left:4px; }

.sidebar-help{ margin-top:16px; padding:16px; border-radius:16px; background: rgba(255,255,255,.05); border:1px solid var(--bh-panel-border); }
.sidebar-help-title{ font-size:13.5px; font-weight:700; color: var(--bh-panel-text); margin-bottom:6px; }
.sidebar-help-body{ font-size:12px; color: var(--bh-panel-muted); line-height:1.5; margin-bottom:12px; }
.sidebar-help-cta{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color: var(--bh-gold-light);
  padding:8px 14px; border-radius:10px; border:1px solid var(--bh-panel-border);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.sidebar-help:hover .sidebar-help-cta{ border-color: var(--bh-gold-light); background: rgba(214,168,79,.08); }

/* ---------- center: workspace (UNCHANGED — still light/ivory, per this task's own explicit scope) ---------- */
.workspace-main{ flex:1; min-width:0; overflow-y:auto; padding: 28px 34px 40px; }
.main-inner{ max-width:960px; margin:0 auto; }

.section-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; flex-wrap:wrap; }
.section-hero-title-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.section-hero h1{ font-family: var(--bh-font-display); font-size:32px; font-weight:700; margin:0; color: var(--ink); letter-spacing:-.01em; }
.step-pill{
  display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  padding:6px 14px; border-radius:999px; border:1px solid var(--bh-gold-line); background: var(--bh-gold-soft);
  color: var(--bh-gold-deep); white-space:nowrap;
}
.section-hero-desc{ font-size:13.5px; color: var(--muted); margin-top:8px; max-width:60ch; line-height:1.55; }
.why-matters-card{
  flex:0 0 auto; width:260px; max-width:100%; padding:14px 16px; border-radius:14px;
  background: var(--bh-gold-soft); border:1px solid var(--bh-gold-line);
}
.why-matters-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color: var(--ink); margin-bottom:6px; }
.why-matters-body{ font-size:12px; color: var(--muted); line-height:1.5; }

/* ---------- completion + diagnostic depth ---------- */
.diagnostic-progress{ margin-bottom:24px; }
.diagnostic-progress-top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
.diagnostic-progress-count{ font-size:14px; color: var(--ink); }
.diagnostic-progress-count strong{ font-weight:800; }
.diagnostic-progress-depth{ display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--muted); }
.diagnostic-progress-track{ position:relative; height:6px; border-radius:6px; background: var(--bh-line-soft); overflow:hidden; }
.diagnostic-progress-track span{ display:block; height:100%; background: linear-gradient(90deg, var(--primary), var(--bh-forest-strong)); border-radius:6px; }
.diagnostic-progress-milestones{ display:flex; justify-content:space-between; margin-top:8px; font-size:10.5px; color: var(--bh-faint); }
.diagnostic-progress-milestones span{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.diagnostic-progress-milestones b{ font-size:10.5px; color: var(--muted); font-weight:600; }

/* ---------- premium input-section card (built on the existing accordion) ---------- */
.accordion{ border:1px solid var(--bh-gold-line); border-radius:16px; background:#fff; margin-bottom:16px; overflow:hidden; box-shadow: 0 2px 10px rgba(20,60,50,.04); }
.accordion-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; cursor:pointer; background: var(--bh-surface-2); transition: background-color .18s ease; }
.accordion-head:hover{ background: var(--bh-sage-soft); }
.accordion-title{ font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:9px; color: var(--ink); }
.accordion-meta{ font-family: var(--bh-font-mono); font-size:11.5px; color: var(--muted); }
.accordion-body{ padding:20px 20px 8px; }
.chev{ transition: transform .18s ease; color: var(--bh-gold-deep); }
.chev.open{ transform: rotate(90deg); }

/* ---------- data-source badges ---------- */
.ds-badge{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:999px; margin-left:6px; }
.ds-pdf{ background: var(--bh-accent-soft); color: var(--primary-dark); }
.ds-calculated{ background:#eaf1fb; color:#3a5a86; }
.ds-adjusted{ background:#eef7ec; color:#2f6b3a; }
.ds-needs{ background:#fdf1e4; color:#9a5a13; }

/* Two-column grouping for plain single-value inputs (currency/number/percent/dropdown/text) — ageing tables,
   repeatable groups, and year/month tables are built separately (see fieldListHtml) and stay full-width, so
   this only ever wraps fields that genuinely fit a shorter column without losing readability. auto-fit means
   a field that needs more room still gets a full row rather than being forced narrow. */
.field-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); column-gap:28px; }
@media (max-width:640px){
  .field-grid{ grid-template-columns:1fr; }
}

/* ---------- right: health report panel ---------- */
/* ---------- right: "Your Health Report" panel — the matching dark-teal pillar (Part B). Slightly lighter
   than .report-nav (bg-soft → bg, vs bg → bg-deep on the left) per the brief's own "can be slightly lighter,
   but must clearly match" — same radius/border/shadow family either way. */
.health-panel{
  width:24%; min-width:250px; max-width:320px; flex:none;
  border-radius:22px; border:1px solid var(--bh-panel-border);
  background: linear-gradient(180deg, var(--bh-panel-bg-soft) 0%, var(--bh-panel-bg) 100%);
  box-shadow: 0 16px 38px rgba(17,48,48,.16);
  padding:24px 18px; overflow-y:auto; color: var(--bh-panel-text);
}
.health-item{ display:flex; align-items:center; gap:11px; padding:11px 2px; border-bottom:1px solid rgba(255,255,255,.07); font-size:13px; }
.health-item:last-child{ border-bottom:none; }
.health-item.unlocked{ color: var(--bh-panel-text); font-weight:600; }
.health-item.locked{ color: var(--bh-panel-muted); }
.hi-icon{
  flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; border:1px solid var(--bh-panel-border);
}
.health-item.unlocked .hi-icon{ color:#8FD9B8; border-color: rgba(143,217,184,.4); background: rgba(143,217,184,.08); }
.health-item.locked .hi-icon{ color: var(--bh-gold-light); background: rgba(214,168,79,.07); }

.unlock-progress-card{
  margin-top:18px; padding:20px 16px; border-radius:18px; text-align:center;
  background: rgba(255,255,255,.05); border:1px solid var(--bh-panel-border);
}
.unlock-progress-icon{
  width:50px; height:50px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:19px; color: var(--bh-gold-light); background: rgba(214,168,79,.12); border:1px solid var(--bh-panel-border);
}
.unlock-progress-title{ font-size:13.5px; font-weight:700; color: var(--bh-panel-text); margin-bottom:10px; }
.unlock-progress-bar{ height:6px; border-radius:4px; background: rgba(255,255,255,.14); overflow:hidden; margin-bottom:10px; }
.unlock-progress-bar span{ display:block; height:100%; background: var(--bh-gold-light); border-radius:4px; }
.unlock-progress-note{ font-size:11.5px; color: var(--bh-panel-muted); line-height:1.4; }

/* Download Report button — scoped override, not a change to the shared .btn-primary/.btn-ghost rules
   (those still render exactly as before everywhere else, including the light workspace and the gold action
   footer). The CA-review lead form instead sits on its own light "lightbox" card (see healthPanelHtml's own
   comment) rather than getting per-element overrides here. */
.health-panel-block{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }
.health-panel .btn-primary{ background: var(--bh-gold-light); border-color: var(--bh-gold-light); color:#17352F; }
.health-panel .btn-primary:hover{ background:#e0c174; border-color:#e0c174; opacity:1; }
.health-panel .btn-ghost{ background: rgba(255,255,255,.06); color: var(--bh-panel-muted); border-color: var(--bh-panel-border); }
.health-panel .btn-ghost:hover{ background: rgba(255,255,255,.1); opacity:1; }
.health-panel-lightbox{
  margin-top:20px; padding:18px; border-radius:16px;
  background: var(--bh-panel-text); border:1px solid var(--bh-panel-border);
}

/* ---------- premium end-of-page action footer ----------
   Deliberately plain, normal-flow document content — no position:fixed/sticky, no viewport pinning. It is a
   sibling AFTER .body-shell (see render() in business-health.js), so it renders once, at the natural end of
   whichever section's fields the visitor is currently working through, and is reached only by scrolling —
   exactly like the site's own legal footer further down the page, which this always sits above (that footer
   lives outside #bh-app entirely, in business-health.html, so DOM order alone guarantees the ordering).
   Every control keeps its original data-nav/data-input-field attribute — same delegated handlers, nothing
   rewired; only placement and presentation changed. */
.workspace-actionbar{
  display:grid;
  grid-template-columns: auto 1fr auto auto auto auto auto;
  grid-template-areas: "back copy warn unit save clear cta";
  align-items:center; column-gap:16px; row-gap:14px;
  margin:40px 24px 24px; padding:26px 32px;
  border-radius:22px; border:1px solid #D6B66A;
  background: linear-gradient(135deg, #F8EDCF 0%, #ECD7A0 55%, #F5E8C6 100%);
  box-shadow: 0 16px 40px rgba(85,65,20,.10);
}
.wa-btn-back{ grid-area:back; }
.wa-copy{ grid-area:copy; min-width:180px; }
.wa-btn-warn{ grid-area:warn; }
.wa-unit-select{ grid-area:unit; }
.wa-btn-save{ grid-area:save; }
.wa-btn-clear{ grid-area:clear; }
.wa-btn-primary{ grid-area:cta; }

.wa-heading{ font-family: var(--bh-font-display); font-size:18.5px; font-weight:700; color: var(--primary-dark); margin-bottom:3px; line-height:1.25; }
.wa-subcopy{ font-size:12.5px; color:#4b4023; line-height:1.5; margin:0; max-width:48ch; }

.wa-btn-back{
  background: rgba(255,255,255,.6); color: var(--primary-dark); border:1px solid rgba(23,53,47,.2);
  box-shadow: 0 1px 3px rgba(23,53,47,.06); transition: background 180ms ease, border-color 180ms ease, transform .12s ease;
}
.wa-btn-back:hover{ background:#fff; opacity:1; }

.wa-unit-select{
  appearance:none; width:auto; border:1px solid rgba(23,53,47,.25); background:rgba(255,255,255,.65); color: var(--primary-dark);
  font-size:12.5px; font-weight:700; padding:10px 12px; border-radius:10px; cursor:pointer; font-family:inherit;
  transition: border-color 180ms ease, background 180ms ease;
}
.wa-unit-select:hover{ background:#fff; }
.wa-unit-select:focus-visible{ outline:2px solid var(--primary-dark); outline-offset:1px; }

.wa-btn-warn{
  background: rgba(255,255,255,.55); color:#8a5a13; border:1px solid rgba(201,154,61,.55);
  transition: background 180ms ease, border-color 180ms ease;
}
.wa-btn-warn:hover{ background:#fff; opacity:1; }

.wa-btn-save{
  background:transparent; color: var(--primary-dark); border:1px solid rgba(23,53,47,.3);
  transition: background 180ms ease, border-color 180ms ease;
}
.wa-btn-save:hover{ background:rgba(255,255,255,.5); opacity:1; }

.wa-btn-clear{
  background:transparent; color:#8a4a34; border:1px solid transparent;
  transition: background 180ms ease;
}
.wa-btn-clear:hover{ background:rgba(138,74,52,.1); opacity:1; }

.wa-btn-primary{
  background: var(--primary); color:#fff; border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 20px rgba(0,91,73,.16); padding:14px 24px; font-size:14.5px; border-radius:13px;
  transition: background 180ms ease, box-shadow 180ms ease, transform .12s ease;
}
.wa-btn-primary:hover:not(:disabled){ background:#00543f; opacity:1; box-shadow:0 10px 24px rgba(0,91,73,.22); transform:translateY(-1px); }
.wa-btn-primary:active:not(:disabled){ transform:translateY(0); }
.wa-btn-primary:disabled{ background:#5c8a7d; border-color:transparent; box-shadow:none; opacity:.55; }

@media (max-width: 980px){
  .health-panel{ display:none; }
  .workspace-actionbar{ display:flex; flex-wrap:wrap; }
  .wa-copy{ flex:1 1 220px; }
}
@media (max-width: 640px){
  .workspace-actionbar{
    display:grid; grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "copy copy"
      "warn warn"
      "cta cta"
      "save save"
      "unit unit"
      "back clear";
    margin:28px 14px 20px; padding:22px 18px;
  }
  .wa-btn-primary, .wa-btn-save, .wa-unit-select, .wa-btn-warn{ width:100%; justify-content:center; }
  .wa-btn-back, .wa-btn-clear{ justify-content:center; }
}
@media (max-width: 760px){
  .report-nav{ display:none; }
  .workspace-main{ padding:18px 16px; }
  .section-hero{ flex-direction:column; }
  .why-matters-card{ width:100%; }
}

.progress-strip{ display:flex; align-items:center; gap:10px; font-size:12px; color: var(--muted); margin-bottom:4px; }
.progress-strip .mono{ color: var(--ink); }

.section-nav-bottom{
  position:sticky; bottom:0; background: var(--bh-flat); border-top:1px solid var(--line);
  padding:14px 22px; display:flex; justify-content:space-between; gap:10px; z-index:10;
}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background: var(--ink); color:#fff;
  padding:10px 18px; border-radius: 999px; font-size:12.5px; box-shadow: var(--bh-shadow-pop); z-index:80;
  display:flex; align-items:center; gap:8px;
}

/* ---------- modal ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(22,32,29,0.45); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-card{ width:100%; max-width:440px; background:#fff; border-radius: var(--bh-radius-lg); padding:26px; box-shadow: var(--bh-shadow-pop); }

.small-note{ font-size:12px; color: var(--bh-faint); margin-top:4px; }

.hint-text{ font-size:12px; color: var(--bh-faint); margin-top:6px; font-style:italic; }

.diagnostic-depth-bar{ display:flex; gap:4px; margin-top:6px; }
.dd-seg{ height:5px; flex:1; border-radius:3px; background: var(--bh-line-soft); }
.dd-seg.filled{ background: var(--primary); }

.field-toggle-more{ background:none; border:none; color: var(--primary); font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 0; margin-top:2px; }

/* ============================================================
   Combined Business Overview + Financial Information intake screen
   (business_basics stage). Premium private-banking / CA-advisory
   styling — ivory surface, forest-green type, muted-gold accents only.
   Structure/behaviour unchanged from the approved two-column layout;
   this pass only deepens materials, depth, hierarchy and interaction
   feedback. Spacing throughout uses an 8px rhythm (8/16/24/32/48).
   ============================================================ */
.bh-icon{ display:inline-flex; flex:none; }
.bh-icon svg{ width:1em; height:1em; display:block; }

.bh-intake-card{
  position:relative; z-index:1;
  background: #FFFEFB; border:1px solid rgba(198,154,61,.26); border-radius:26px;
  box-shadow: 0 20px 60px rgba(15,45,38,.08), 0 4px 14px rgba(15,45,38,.05);
  overflow:hidden;
}
.bh-intake-cols{ display:grid; grid-template-columns:1fr 1px 1fr; }
.bh-intake-col{ padding:44px 44px 32px; min-width:0; }
.bh-intake-divider{ background: var(--bh-divider-soft); }

.bh-intake-colhead{ display:flex; align-items:center; gap:16px; margin-bottom:34px; }
/* Premium step marker (Part 4) — dark forest-green centre, a gold ring, a soft second halo ring, and a small
   gold dot hanging below, matching the reference exactly. Still just the two literal characters "01"/"02" —
   no numbering logic changed, purely decorative chrome around existing text. */
.bh-intake-num{
  position:relative;
  display:flex; align-items:center; justify-content:center; flex:none;
  width:52px; height:52px; border-radius:50%;
  background: radial-gradient(circle at 32% 26%, #0d7860, var(--bh-forest-deep) 72%);
  border:2px solid var(--bh-gold-light);
  box-shadow: 0 6px 16px rgba(6,70,60,.28), 0 0 0 4px rgba(201,154,61,.14);
  font-family: var(--bh-font-mono), 'Courier New', monospace; font-size:15px; font-weight:700;
  color: var(--bh-ivory); letter-spacing:.02em;
}
.bh-intake-num::after{
  content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background: var(--bh-gold-light);
  box-shadow: 0 0 0 2px #FFFEFB;
}
.bh-intake-title{ font-family: var(--bh-font-display); color: var(--bh-forest); font-size:24px; font-weight:700; margin:0 0 4px; letter-spacing:0; }
.bh-intake-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--bh-gold-deep); }
.bh-intake-qlabel{ font-size:14px; font-weight:700; color: var(--ink); margin-bottom:16px; }

/* Small restrained divider (Part 19) between the business-type cards and the industry question — the same
   line/diamond/line ornament used for the dark side-panel headings elsewhere in this app, reused here for a
   consistent decorative language rather than inventing a second one. */
.bh-intake-divider-mini{ display:flex; align-items:center; gap:8px; margin:22px 0; }
.bh-intake-divider-mini-line{ flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--bh-gold-line), transparent); }
.bh-intake-divider-mini-dot{ font-size:7px; line-height:1; color: var(--bh-gold-deep); }

/* ---------- shared selectable-card interaction language ----------
   Selected state uses GOLD (border/glow/check badge), not green — matching the reference's own selected
   "Trading" card exactly. Hover stays a neutral lift so the gold reads unambiguously as "selected", not just
   "hovered". */
.bh-type-card,.bh-choice-card{
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.bh-type-card:hover,.bh-choice-card:hover{
  border-color: rgba(201,154,61,.45); box-shadow: 0 10px 24px rgba(15,45,38,.09); transform: translateY(-2px);
}
.bh-type-card.selected,.bh-choice-card.selected{
  border-color: var(--bh-gold-deep); border-width:1.5px; background: var(--bh-gold-soft);
  box-shadow: 0 8px 22px rgba(176,128,35,.16);
}

/* business type cards — STRICT UI REDESIGN — BUSINESS TYPE CARDS ONLY: large per-type gradient icon circles,
   a gold ring, a small line/diamond/line divider under the icon, and card-specific hover/selected values
   (kept SEPARATE from the shared .bh-type-card,.bh-choice-card rule above — see that rule's own comment —
   so the financial-information cards are never touched by this task). */
.bh-type-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; width:100%; }
.bh-type-card{
  position:relative; text-align:center; padding:20px 12px 20px; min-height:205px; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid rgba(201,154,61,.45); border-radius:22px; background:#FFFDF8; cursor:pointer;
  box-shadow: 0 12px 28px rgba(67,55,34,.08);
}
.bh-type-card:hover{ border-color: rgba(201,154,61,.65); box-shadow: 0 14px 30px rgba(67,55,34,.11); transform: translateY(-2px); }
.bh-type-card.selected{
  border-color: #C99A3D; border-width:1.5px;
  box-shadow: 0 12px 30px rgba(163,119,30,.14);
}
/* Keyboard-focus parity with the visible "selected" cue (Part 15) — a distinct, always-on outline, not
   colour alone, and not removed the way a bare `outline:none` reset would. */
.bh-type-card:focus-visible{ outline:2px solid rgba(201,154,61,.55); outline-offset:3px; }
/* STRICT CORRECTION — the missing piece behind the reported overlap: a CSS grid item's default min-width is
   `auto`, not 0 — without min-width:0 above, this fixed 118px-circle-plus-padding card refused to shrink
   below its own content size, so at any viewport too narrow for 4 full-size cards the grid overflowed
   rightward, out of its column and into the Financial Information column next to it. No position:absolute,
   negative margin or transform was ever moving anything — the grid track itself was just wider than its
   share. Reducing the icon by ~13% (118px -> 102px, still notably large) plus the size clamp/aspect-ratio
   below reduces how often the new 1300px fallback grid (further down) is even needed. */
.bh-type-icon{
  position:relative;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
  width:102px; height:102px; max-width:78%; aspect-ratio:1; border-radius:50%; color: var(--bh-forest);
  border:1px solid rgba(201,154,61,.35);
}
.bh-type-icon svg{ width:38px; height:38px; max-width:38%; max-height:38%; }
/* Four distinct premium tints (Part 3-6) — Manufacturing/Trading/Services/Mixed each get their own gradient
   so the row doesn't read as four identical grey circles. */
.bh-type-icon--sage{ background: linear-gradient(145deg, #EEF4D9, #DDE8BE); }
.bh-type-icon--mint{ background: linear-gradient(145deg, #E8F5EC, #D3E9D7); }
.bh-type-icon--teal{ background: linear-gradient(145deg, #DDF1F0, #BEDFDD); color:#0E5B54; }
.bh-type-icon--gold{ background: linear-gradient(145deg, #FFF1C9, #F1D799); }
.bh-type-card.selected .bh-type-icon{ box-shadow:0 0 0 2px rgba(201,154,61,.35); filter:brightness(1.04); }
.bh-type-divider-mini{ display:flex; align-items:center; gap:6px; width:64px; margin:0 auto 12px; }
.bh-type-divider-mini-line{ flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--bh-gold-line), transparent); }
.bh-type-divider-mini-dot{ font-size:8px; line-height:1; color: var(--bh-gold-deep); }
/* No white-space:nowrap here on purpose — text refusing to wrap is exactly the same "content forces a
   minimum width" failure mode that caused the reported overlap in the first place (see .bh-type-card's own
   comment); a wrapped label on a very narrow card is far safer than reintroducing that bug for one line of
   cosmetic preference. clamp() keeps it comfortably sized without ever being the thing forcing the card wider. */
.bh-type-label{ font-family: var(--bh-font-display); font-size:clamp(13.5px,1.1vw,16px); font-weight:700; color: var(--bh-forest); }
.bh-type-check{
  position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%;
  background: var(--bh-gold-deep); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(176,128,35,.4);
}

/* upload / manual choice cards */
.bh-choice-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; width:100%; }
.bh-choice-card{
  position:relative; text-align:left; padding:22px 44px 22px 24px; min-height:100px; min-width:0;
  display:flex; align-items:center; width:100%; box-sizing:border-box;
  border:1px solid #E9DDC5; border-radius:20px; background:#fff; cursor:pointer;
}
/* The Recommended (Upload) card gets a little more visual weight even before selection — a subtle green
   border/shadow lift, distinct from the gold "selected" state — matching "slightly more premium emphasis,
   subtle green border" (Part 11) without looking like an advertisement. */
.bh-choice-card.recommended{ border-color: rgba(6,95,70,.28); box-shadow: 0 6px 18px rgba(6,95,70,.07); }
.bh-choice-card.recommended:hover{ border-color: rgba(6,95,70,.4); }
.bh-choice-row{ display:flex; align-items:flex-start; gap:18px; width:100%; }
.bh-choice-icon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:56px; height:56px; border-radius:50%; background: var(--bh-sage-soft); color: var(--bh-forest);
}
.bh-choice-icon svg{ width:26px; height:26px; }
.bh-choice-card.selected .bh-choice-icon{ background:#fff; box-shadow:0 0 0 1px rgba(201,154,61,.3) inset; }
.bh-choice-body{ min-width:0; flex:1; padding-top:2px; }
.bh-choice-titlerow{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:5px; }
.bh-choice-title{ font-family: var(--bh-font-display); font-size:17px; font-weight:700; color: var(--bh-forest); }
.bh-choice-badge{
  display:inline-flex; align-items:center; font-size:10px; font-weight:700; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px; background: var(--bh-sage-soft); color: var(--bh-forest);
}
.bh-choice-desc{ font-size:12.5px; color: var(--muted); line-height:1.5; max-width:38ch; }
.bh-choice-check{
  position:absolute; top:14px; right:14px; width:19px; height:19px; border-radius:50%;
  background: var(--bh-gold-deep); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(176,128,35,.4);
}
/* Right-facing arrow (Part 13) — muted gold, nudges right on hover. Purely decorative (aria-hidden in the
   markup), same restrained transition as everything else on this screen. */
.bh-choice-arrow{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  color: var(--bh-gold-deep); font-size:18px; transition: transform 180ms ease;
}
.bh-choice-card:hover .bh-choice-arrow{ transform:translateY(-50%) translateX(3px); }

/* ---------- inline upload panel — expands under the Financial Information choice cards when
   "Upload Financial Statements" is selected, replacing the old standalone upload page entirely ---------- */
@keyframes bh-panel-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.bh-upload-panel{
  margin-top:16px; padding-top:18px; border-top:1px solid var(--bh-divider-soft);
  animation: bh-panel-in .22s ease;
}
.bh-upload-heading{ font-size:14px; font-weight:700; color: var(--ink); margin-bottom:2px; }
.bh-upload-sub{ font-size:12px; color: var(--muted); margin-bottom:14px; }
.bh-dropzone{
  position:relative; text-align:center; padding:30px 20px; border-radius:16px;
  border:1.5px dashed var(--bh-line-soft); background: var(--bh-surface-2);
  transition: border-color .2s ease, background-color .2s ease;
}
.bh-dropzone:hover,.bh-dropzone.drag-over{ border-color: var(--bh-forest-strong); background: var(--bh-sage-soft); }
.bh-dropzone-icon{ display:flex; justify-content:center; margin-bottom:10px; color: var(--bh-forest); }
.bh-dropzone-icon svg{ width:30px; height:30px; }
.bh-dropzone-text{ font-size:13.5px; font-weight:600; color: var(--ink); margin-bottom:4px; }
.bh-dropzone-or{ font-size:11.5px; color: var(--bh-faint); margin-bottom:12px; }
.bh-dropzone-btn{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  padding:9px 20px; border-radius:10px; background: var(--bh-forest-strong); color:#fff;
  font-size:13px; font-weight:700; transition: background-color .18s ease;
}
.bh-dropzone-btn:hover{ background: var(--bh-forest-deep); }
.bh-upload-filelist{ margin-top:14px; display:grid; gap:8px; }
.bh-upload-file{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  background: var(--bh-sage-soft); border:1px solid rgba(6,95,70,.12);
}
.bh-upload-file-check{ flex:none; color: var(--bh-forest-strong); font-weight:700; }
.bh-upload-file-name{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bh-upload-file-size{ flex:none; font-size:11px; color: var(--bh-faint); font-family: var(--bh-font-mono), 'Courier New', monospace; }
.bh-upload-file-remove{
  flex:none; width:22px; height:22px; border-radius:50%; border:none; background:transparent;
  color: var(--bh-faint); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center;
  transition: background-color .15s ease, color .15s ease;
}
.bh-upload-file-remove:hover{ background:rgba(183,66,54,.12); color: var(--danger); }
.bh-upload-status{ margin-top:12px; padding:10px 14px; border-radius:10px; font-size:12px; line-height:1.5; }
.bh-upload-status-busy{ background: var(--bh-amber-soft); color:#6b4a0c; }
.bh-upload-status-error{ background: var(--bh-red-soft); color:#8e332b; }
.bh-upload-status-done{ background: var(--bh-sage-soft); color: var(--bh-forest); font-weight:600; }
.bh-upload-note{ margin-top:10px; font-size:11.5px; color: var(--bh-faint); line-height:1.5; }
.bh-upload-privacy{ margin:14px 0 0; font-size:11px; color: var(--bh-faint); line-height:1.5; }

/* ---------- industry search field — premium treatment, scoped to this screen only
   (the shared .sdd component is reused elsewhere in the app and must not change there) ---------- */
.bh-intake-col .sdd-control{
  border-radius:16px; box-shadow:0 2px 8px rgba(15,45,38,.05); background:#FFFEFB;
  border:1px solid #DFD6C4; overflow:hidden; transition: border-color 180ms ease, box-shadow 180ms ease;
}
.bh-intake-col .sdd-control:focus-within{ border-color: var(--bh-gold-deep); box-shadow:0 0 0 3px rgba(201,154,61,.1); }
.bh-intake-col .sdd-control input{
  height:60px; padding:0 14px 0 42px; border:none; background:transparent; border-radius:0; font-size:14px;
}
.bh-intake-col .sdd-control input:focus{ outline:none; }
.bh-intake-col .sdd-control{ position:relative; }
.bh-intake-col .sdd-control::before{
  content:""; position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%);
  pointer-events:none; opacity:.55;
  background-color: var(--bh-forest);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bh-intake-col .sdd-toggle{ height:60px; width:48px; flex:0 0 48px; background:transparent; border:none; border-left:1px solid var(--bh-line-soft); color: var(--bh-forest); }
.bh-intake-col .sdd-toggle:hover{ background: var(--bh-sage-soft); }
.bh-intake-col .sdd-list{ border-radius:14px; margin-top:6px; box-shadow:0 16px 40px rgba(15,45,38,.14); border-color: var(--bh-line-soft); }

.bh-intake-footer{
  padding:32px 40px 40px; border-top:1px solid var(--bh-gold-line); background: var(--bh-surface-2);
  display:flex; justify-content:center;
}
.bh-intake-continue{
  font-family: var(--bh-font-ui); min-width:320px; height:64px; justify-content:center; gap:10px; padding:0 32px; font-size:15px; font-weight:700;
  border-radius:16px; background: linear-gradient(180deg,#126A58,#075443); border:1px solid var(--bh-gold-deep);
  box-shadow: 0 8px 20px rgba(6,95,70,.22); letter-spacing:.01em;
}
.bh-intake-continue:hover{ background: linear-gradient(180deg,#0e5c4c,#06463c); border-color: var(--bh-gold-deep); opacity:1; transform:translateY(-1px); }
.bh-intake-continue .bh-arrow{ display:inline-block; transition: transform 180ms ease; }
.bh-intake-continue:hover .bh-arrow{ transform: translateX(3px); }
.bh-intake-continue:disabled{
  background:#e6ece8; border-color:#e6ece8; color:#93a49b; box-shadow:none; opacity:1; cursor:not-allowed; transform:none;
}

.bh-privacy-strip{
  display:flex; align-items:stretch; gap:20px;
  margin-top:24px; padding:20px 28px; border:1px solid var(--bh-line-soft); border-radius:16px;
  background: var(--bh-surface-2); box-shadow:0 10px 28px rgba(15,45,38,.05);
}
.bh-privacy-item{ display:flex; align-items:flex-start; gap:11px; flex:1; min-width:0; }
.bh-privacy-icon{
  flex:none; width:32px; height:32px; border-radius:50%; background: var(--bh-sage-soft); color: var(--bh-gold-deep);
  display:flex; align-items:center; justify-content:center; font-size:15px; margin-top:1px;
}
.bh-privacy-title{ font-size:12.5px; font-weight:700; color: var(--bh-forest); margin-bottom:2px; }
.bh-privacy-desc{ font-size:11.5px; color: var(--muted); line-height:1.45; }
.bh-privacy-sep{ width:1px; flex:none; align-self:stretch; background: var(--bh-divider-soft); }

/* STRICT CORRECTION — the real gap the reported overlap fell into: the two main columns (.bh-intake-cols)
   only ever had ONE breakpoint (900px, full stack), so at any "medium desktop" width ABOVE 900px but too
   narrow for four full-size cards in half the page — a genuinely common laptop window width — there was no
   fallback at all. This adds exactly that missing middle step: the two columns stay side-by-side, only the
   business-type grid drops to 2x2. min-width:0 above (on .bh-type-card) already reduces how often this is
   even needed; this is the deliberate, explicit fallback for whatever's left. */
@media (max-width:1300px) and (min-width:901px){
  .bh-type-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .bh-intake-cols{ grid-template-columns:1fr; }
  .bh-intake-divider{ height:1px; }
  .bh-intake-col{ padding:32px 28px 24px; }
  .bh-type-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bh-privacy-strip{ flex-direction:column; gap:16px; }
  .bh-privacy-sep{ display:none; }
}
@media (max-width:520px){
  .bh-intake-col{ padding:24px 18px 20px; }
  .bh-intake-footer{ padding:22px 18px 26px; }
  .bh-intake-continue{ width:100%; min-width:0; }
  .bh-type-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .bh-type-card{ min-height:190px; padding:20px 10px 18px; }
  .bh-type-icon{ width:88px; height:88px; }
  .bh-type-icon svg{ width:34px; height:34px; }
  .bh-choice-card{ padding:22px 40px 22px 18px; }
}