/* Grayscale-only wireframe styles. Structure validation only, aside from the real
   Zurich logo/typeface which were explicitly requested. */

@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zurich Sans";
  src: url("../fonts/ZurichSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --g-0: #ffffff;
  --g-50: #f7f7f7;
  --g-100: #eeeeee;
  --g-200: #e0e0e0;
  --g-300: #cccccc;
  --g-400: #b3b3b3;
  --g-500: #999999;
  --g-600: #767676;
  --g-700: #555555;
  --g-800: #333333;
  --g-900: #1a1a1a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Zurich Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #23366F;
  background: #FAFBFC;
}

/* ---- compare nav: lets you click between the four variants in one tab ---- */
.compare-nav {
  background: var(--g-900);
  color: var(--g-0);
  padding: 10px 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.compare-nav .label {
  color: var(--g-500);
  margin-right: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 16px;
}
.compare-nav a {
  color: var(--g-300);
  text-decoration: none;
  margin-right: 16px;
  padding: 2px 0;
}
.compare-nav a:hover { color: var(--g-0); }
.compare-nav a.active {
  color: var(--g-0);
  font-weight: 600;
  text-decoration: underline;
}

.rationale {
  font-size: 16px;
  color: var(--g-700);
  background: var(--g-100);
  border-bottom: 1px solid var(--g-200);
  padding: 10px 32px;
  max-width: 1100px;
}
.rationale strong { color: var(--g-900); }

/* ---- real site header: single nav row (logo, links, account icon) per reference/3-wip-current ---- */
.site-header {
  background: transparent;
  border-bottom: 1px solid var(--g-200);
  padding: 14px 24px;
  display: flex;
  align-items: center;
}
/* H/I/J/O only: when a search band sits directly under the nav row, drop the header's
   own bottom border so nav and search read as one continuous area, not two boxes */
.site-header:has(+ .site-search-bar) {
  border-bottom: none;
}
/* fixed-width slot (260px rail width - 24px header padding = 236px) so the nav links
   that follow always start at 260 + 32 = 292px from the left edge — the same x-position
   as .main-col's own content (rail width + main-col's 32px padding) — regardless of the
   logo's own rendered width */
.site-header .site-logo-slot {
  display: inline-flex;
  align-items: center;
  width: 236px;
  flex-shrink: 0;
}
.site-header .site-logo {
  display: block;
  height: 35px;
  width: auto;
}
.site-header .site-nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0 0 0 20px;
  padding: 0;
}
.site-header .site-nav-links li {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.site-header .site-nav-links a,
.site-header .site-nav-links a:link,
.site-header .site-nav-links a:visited,
.site-header .site-nav-links a:focus,
.site-header .site-nav-links a:focus-visible,
.site-header .site-nav-links a:active,
.site-header .site-nav-links a:hover,
.site-header .site-nav-links a.current {
  position: relative;
  color: #23366F;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
/* hover and current both get the pill background. No bottom line/border/pseudo-element
   of any kind — a prior version used a ::after bar here as a "current" indicator, which
   kept reading as an underline no matter how it was implemented (it wasn't text-
   decoration, but a thin colored line sitting right under nav text looks like an
   underline regardless of the CSS mechanism drawing it). Current vs. hover are now
   distinguished only by the icon swap (current keeps showing the "m-" icon permanently;
   hover shows it only while the pointer is over the item) — no line under either state. */
.site-header .site-nav-links a:hover,
.site-header .site-nav-links a.current {
  background: #E4E9EC;
}

/* nav icons: default + "m-" hover/selected variant stacked and cross-faded, so the
   icon swap itself is the only hover/current-page indicator (no underline anymore) */
.nav-icon {
  position: relative;
  display: inline-block;
  width: 19px;
  height: 16px;
  margin-right: 6px;
  flex-shrink: 0;
}
.nav-icon img {
  position: absolute;
  top: 50%;
  left: 0;
  height: 16px;
  width: auto;
  transform: translateY(-50%);
}
.nav-icon-hover { opacity: 0; }
.site-header .site-nav-links a:hover .nav-icon-default,
.site-header .site-nav-links a.current .nav-icon-default {
  opacity: 0;
}
.site-header .site-nav-links a:hover .nav-icon-hover,
.site-header .site-nav-links a.current .nav-icon-hover {
  opacity: 1;
}
/* simple person/account silhouette, clipped inside the circular badge */
.site-account-icon {
  position: relative;
  overflow: hidden;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #23366F;
  border: none;
  flex-shrink: 0;
}
.site-account-icon::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
}
.site-account-icon::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 16px;
  border-radius: 50% 50% 0 0;
  background: #ffffff;
}

/* right-hand group in the nav row (search + account icon), used when search moves
   into the header itself instead of a full-width band (variants K, L, N, O). Fixed
   margin instead of margin-left: auto — auto-margin's gap grows with viewport width,
   which read as an arbitrary/too-large gap; 48px is deliberate, double the 24px gap
   between nav items, so it still reads as "nav" and "search" being distinct groups. */
.site-header-right {
  margin-left: 48px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header .account-menu { margin-left: auto; }
.site-header-right .account-menu { margin-left: 0; }

/* clickable avatar + chevron, opening a small "logged in as / log off" dropdown */
.account-menu { position: relative; flex-shrink: 0; }
.account-trigger,
.account-trigger:hover,
.account-trigger:focus,
.account-trigger:active {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none !important;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.account-chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #23366F;
  border-bottom: 1.5px solid #23366F;
  transform: rotate(45deg);
  margin-top: -3px;
}
.account-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--g-0);
  border: none;
  border-radius: 6px;
  box-shadow: none;
  min-width: 210px;
  overflow: hidden;
  z-index: 56;
}
.account-menu-panel.open { display: block; }
/* background color split instead of a divider line — the identity block gets a
   light fill, the actions block stays white, no line drawn between them */
.account-menu-header {
  background: #E4E9EC;
  padding: 14px;
}
.account-menu-footer {
  padding: 14px;
}
.account-menu-name {
  font-size: 16px;
  font-weight: 700;
  color: #23366F;
}
.account-logoff-link {
  display: inline-block;
  color: #23366F;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.account-logoff-link:hover { text-decoration: underline; }

.search-input-inline {
  border: 1px solid var(--g-300);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 16px;
  font-family: inherit;
  color: var(--g-900);
}
.search-input-inline::placeholder { color: var(--g-500); }
.search-findby-inline {
  border: 1px solid var(--g-300);
  border-radius: 4px;
  padding: 7px 8px;
  font-size: 16px;
  font-family: inherit;
  color: var(--g-700);
  min-width: 130px;
}

/* variant K: icon that expands into search fields, collapses when not in use */
.nav-search-expand {
  display: flex;
  align-items: center;
}
.nav-search-icon-btn,
.nav-search-icon-btn:hover,
.nav-search-icon-btn:focus,
.nav-search-icon-btn:active {
  border: none;
  background: none !important;
  cursor: pointer;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.nav-search-icon-btn .search-icon {
  width: 16px;
  height: 16px;
  border: 2px solid #23366F;
  border-radius: 50%;
  position: relative;
  display: block;
  /* the handle (::after) extends past this box's bottom-right corner, so centering
     just this circle within the button leaves the combined glyph looking off-center;
     nudge the circle up-left so the circle+handle shape centers as a whole */
  transform: translate(-2px, -2px);
}
.nav-search-icon-btn .search-icon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 2px;
  background: #23366F;
  bottom: -6px;
  right: -7px;
  transform: rotate(45deg);
}
.nav-search-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .2s ease, opacity .15s ease, margin-left .2s ease;
}
.nav-search-expand.open .nav-search-fields {
  max-width: 380px;
  opacity: 1;
  margin-left: 6px;
}
.nav-search-fields .search-input-inline { width: 150px; }

/* variant L: small persistent search field, always visible, not full-width */
.nav-search-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
}
.nav-search-inline .search-input-inline { width: 180px; }

/* variant O: chat entry pinned to the bottom of the rail's own viewport, staying
   visible even if the step list is long enough to need its own internal scroll —
   the rail becomes a bounded box (sticky, capped to viewport height below the nav
   row) with an independently-scrolling region above the pinned chat entry, so the
   chat entry never depends on scrolling the rail (or the page) to reach it. */
/* variant O only: nav row becomes sticky too, so it and the rail scroll together as
   one pinned unit — without this, the rail sticks at a fixed offset while the (non-
   sticky) nav scrolls away above it, leaving a blank gap where the nav used to be */
.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 55;
}
/* the sticky/bounded/overflow-hidden behavior lives on this inner wrapper, not on
   .step-nav-col itself — .step-nav-col keeps stretching to the full app-shell height
   (its white background + border-right) so the column never falls short of the main
   column's height; .rail-sticky-wrap is what stays pinned and capped to the viewport
   inside it. */
.rail-sticky-wrap {
  position: sticky;
  top: 60px;
  max-height: calc(100vh - 60px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rail-sticky-wrap .rail-scroll-region {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.rail-sticky-wrap .chat-rail {
  margin-top: 0;
  flex-shrink: 0;
}
/* variant P only: inverted surfaces — swaps which areas are white vs. light grey.
   Nav bar and rail go from white to #ECEEEF; main content goes from #ECEEEF (the page
   background showing through) to white. The nav pill has to flip too: white now reads
   against the grey nav bar behind it, where the old #E4E9EC pill would have vanished.
   Each override is compounded with its base class (e.g. .step-nav-col.step-nav-col--
   inverted) rather than relying on source order — .step-nav-col's own background rule
   is defined later in this file and, at equal specificity, was winning over the plain
   .step-nav-col--inverted selector and silently keeping the rail white. */
.site-header.site-header--inverted {
  background: #ECEEEF;
}
.step-nav-col.step-nav-col--inverted {
  background: #ECEEEF;
}
.main-col.main-col--inverted {
  background: var(--g-0);
}
.site-header.site-header--inverted .site-nav-links a:hover,
.site-header.site-header--inverted .site-nav-links a.current {
  background: var(--g-0);
}
/* same inversion for the search band so it reads as one continuous #ECEEEF surface
   with the nav bar above it, not two separately-colored rows. .search-bar-inner (the
   capsule wrapping both pills) is already white and stays that way unchanged — only
   the band itself and the two inner pills (previously #ECEEEF, now indistinguishable
   from a white band) need to flip. */
.site-search-bar.site-search-bar--inverted {
  background: #ECEEEF;
}
.site-search-bar.site-search-bar--inverted .search-pill {
  background: var(--g-0);
}
/* ---- client search bar: sits below the nav row, per reference/3-wip-current.png ---- */
.site-search-bar {
  background: transparent;
  padding: 20px 24px;
}
/* variant O only: the search band is revealed by clicking the nav search icon rather
   than always shown — scoped by id so H/I/J's always-visible band is unaffected.
   padding-left: 292px lines its content up with "Home" in the nav and "Quick decision"
   in the main column (260px rail width + 32px main-col padding). */
#search-band {
  display: none;
  /* 288px, not 292px: .search-bar-inner (the visible rounded pill capsule) has its own
     4px padding before it starts, so 288 + 4 = 292 lands the capsule's actual left edge
     — not #search-band's own content edge — at the same x as "Home" and "Quick decision" */
  padding-left: 288px;
  /* 102px reserved on the right = header's own right padding (24) + avatar/chevron
     group (54) + the gap between the search icon and that group (24) — this lands the
     bar's right edge exactly at the search icon button's right edge, not the avatar's
     or the viewport's. Recompute this if site-header-right's gap or contents change. */
  padding-right: 102px;
}
#search-band.open {
  display: block;
}
#search-band .search-bar-inner {
  max-width: none;
  width: 100%;
}
/* outer bordered container holding two separate pill fields (search input + Find by),
   which now provide the visual separation between them instead of a divider line */
.search-bar-inner {
  max-width: 900px;
  background: #FAFBFC;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
}
.search-pill {
  display: flex;
  align-items: center;
  background: #ECEEEF;
  border-radius: 999px;
  padding: 12px 16px;
}
.search-pill--input {
  flex: 1;
  padding: 12px 16px;
}
.search-pill--select {
  flex-shrink: 0;
}

/* custom "Find by" dropdown, replacing a native <select> — native select popups are
   rendered by the OS/browser and can't be restyled (no border-radius, background, or
   shadow control), so this is a hand-built trigger + list matching the pill's own
   rounding/fill instead. */
.findby-dropdown {
  position: relative;
}
.findby-trigger {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  padding: 2px 20px 2px 4px;
  background: transparent;
  color: var(--g-700);
  cursor: pointer;
  white-space: nowrap;
  min-width: 130px;
  text-align: left;
  position: relative;
  box-shadow: none;
}
.findby-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--g-600);
  border-bottom: 1.5px solid var(--g-600);
  transform: translateY(-65%) rotate(45deg);
}
.findby-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  /* -16px cancels the pill's own left padding (.search-pill { padding: 12px 16px })
     so the menu's left edge lines up with the pill's outer edge, not its inner
     content box where .findby-dropdown actually sits */
  left: -16px;
  min-width: 190px;
  background: var(--g-0);
  border: none;
  border-radius: 16px;
  box-shadow: none;
  padding: 8px 0;
  overflow: hidden;
  z-index: 56;
}
.findby-menu.open { display: block; }
.findby-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  padding: 10px 16px;
  border-radius: 0;
  font-size: 16px;
  font-family: inherit;
  color: var(--g-800);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
}
.findby-option:hover { background: #ECEEEF; }
.findby-check {
  display: inline-block;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid #23366F;
  border-bottom: 1.5px solid #23366F;
  transform: rotate(-45deg);
  flex-shrink: 0;
  visibility: hidden;
}
.findby-option--selected .findby-check { visibility: visible; }
.search-bar-inner .search-icon {
  width: 12px;
  height: 12px;
  border: 2px solid #23366F;
  border-radius: 50%;
  position: relative;
  margin-right: 12px;
  flex-shrink: 0;
}
.search-bar-inner .search-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 2px;
  background: #23366F;
  bottom: -4px;
  right: -5px;
  transform: rotate(45deg);
}
.search-bar-inner .search-input {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  padding: 2px 0;
  flex: 1;
  color: var(--g-900);
  background: transparent;
}
.search-bar-inner .search-input::placeholder { color: var(--g-500); }

/* ---- page header (no logo, text only) ---- */
.page-header {
  padding: 18px 32px;
  border-bottom: 1px solid var(--g-200);
  background: var(--g-0);
}
.page-header h1 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}
.page-header .meta {
  font-size: 16px;
  color: var(--g-600);
}
.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.page-header-action {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---- app shell: left step-nav column + main column ---- */
.app-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 110px);
}

.step-nav-col {
  width: 260px;
  flex-shrink: 0;
  background: var(--g-0);
  border-right: 1px solid var(--g-200);
  display: flex;
  flex-direction: column;
}

.step-nav {
  list-style: none;
  margin: 0;
  padding: 16px 0;
}
.step-nav li {
  padding: 13px 24px;
  font-size: 16px;
  font-weight: 400;
  border-left: 3px solid transparent;
  color: #2167AE;
  display: flex;
  gap: 10px;
}
.step-nav li .step-num {
  display: inline-block;
  width: 16px;
  color: #2167AE;
}
.step-nav li.completed { color: #2167AE; }
.step-nav li.completed .step-num { color: #2167AE; }
.step-nav li.current {
  color: #23366F;
  font-weight: 400;
  border-left-color: #23366F;
  background: #E4E9EC;
}
.step-nav li.current .step-num { color: #23366F; }
.step-nav li .state-tag {
  margin-left: auto;
  font-size: 16px;
  color: var(--g-400);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.step-check {
  display: inline-block;
  margin-left: auto;
  width: 9px;
  height: 5px;
  border-left: 2px solid #23366F;
  border-bottom: 2px solid #23366F;
  transform: rotate(-45deg);
}

/* chat rail: pinned to bottom of the step-nav column (margin-top: auto pushes it
   down regardless of what other siblings, e.g. rail-client-block, sit above it).
   Separation from the step list above it is spacing only, no divider line. */
.chat-rail {
  margin-top: auto;
  padding: 24px 24px 20px;
}
.chat-rail .chat-rail-label {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--g-500);
  margin-bottom: 8px;
}
/* filled pill button — same fully-rounded shape as the nav's hover/active pill —
   instead of a flat rectangular block or outline; white text/icon via currentColor */
.chat-rail .chat-entry {
  display: block;
  width: 100%;
  text-align: left;
  background: #CB4B40;
  border: none;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  font-family: inherit;
  color: #ffffff;
  box-shadow: none;
}
.chat-rail .chat-entry:hover { background: #B23F35; }

/* variant O only: icon + text needs flex layout to sit inline; color/shape now come
   from the shared pill rule above so both B/D's plain-text button and O's icon+text
   button render as the same filled pill */
.rail-sticky-wrap .chat-entry {
  display: flex;
  align-items: center;
}
.chat-icon {
  display: inline-block;
  width: 15px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  position: relative;
  margin-right: 8px;
  flex-shrink: 0;
}
.chat-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -5px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
}

.chat-rail .chat-caption {
  font-size: 16px;
  color: var(--g-600);
  margin-top: 8px;
  line-height: 1.4;
}

/* ---- main column ---- */
.main-col {
  flex: 1;
  padding: 32px;
  max-width: 760px;
}

/* client card variant */
.client-card {
  border: 1px solid var(--g-200);
  background: var(--g-0);
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: 4px;
}
.client-card h2 {
  margin: 0 0 10px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--g-600);
}
.client-card .field {
  font-size: 16px;
  color: var(--g-800);
  margin-bottom: 3px;
}
.client-card .field .flabel {
  color: var(--g-500);
  display: inline-block;
  min-width: 64px;
}
.client-card .card-actions { margin-top: 12px; }

/* client bar (collapsed header) variant */
.client-bar {
  border: 1px solid var(--g-200);
  background: var(--g-0);
  padding: 10px 16px;
  margin-bottom: 24px;
  border-radius: 4px;
  font-size: 16px;
}
.client-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.client-bar-label {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--g-600);
  font-weight: 600;
  margin-bottom: 8px;
}
.client-bar-row .summary { font-weight: 600; }
.client-bar-row .summary .sep { color: var(--g-400); font-weight: 400; margin: 0 6px; }
.client-bar-row .toggle-indicator { color: var(--g-500); font-size: 16px; white-space: nowrap; }
.client-bar-details {
  display: none;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--g-100);
}
.client-bar.expanded .client-bar-details { display: block; }
.client-bar-details .field { font-size: 16px; color: var(--g-800); margin-bottom: 4px; }
.client-bar-details .field .flabel { color: var(--g-500); display: inline-block; min-width: 110px; }

/* quick decision: primary content */
.quick-decision h1 {
  font-size: 18px;
  font-weight: 600;
  color: #23366F;
  margin: 0 0 6px;
}
.quick-decision .intro {
  font-size: 16px;
  font-weight: 400;
  color: #555555;
  max-width: 640px;
  margin-bottom: 24px;
  line-height: 1.5;
}

.section-block {
  border: 1px solid var(--g-200);
  background: #ECEEEF;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
.section-block h2 { font-size: 18px; font-weight: 600; color: #23366F; margin: 0 0 4px; }
.section-block .section-hint {
  font-size: 16px;
  color: var(--g-600);
  margin-bottom: 14px;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 16px;
}
table.data-table th {
  text-align: left;
  font-weight: 500;
  color: #555555;
  border-bottom: 1px solid var(--g-300);
  padding: 6px 8px;
}
table.data-table td {
  padding: 8px;
  border-bottom: 1px solid var(--g-100);
  color: #23366F;
  font-weight: 400;
}
table.data-table tr.empty-row td {
  color: var(--g-500);
  font-style: italic;
}
table.data-table .remove-link {
  color: var(--g-700);
  text-decoration: underline;
  cursor: pointer;
  font-size: 16px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.inline-form {
  display: none;
  gap: 10px;
  padding: 14px;
  background: var(--g-50);
  margin-bottom: 14px;
  border-radius: 4px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.inline-form.open { display: flex; }
.inline-form .field-group { display: flex; flex-direction: column; gap: 4px; }
.inline-form label { font-size: 16px; color: var(--g-600); }
.inline-form input, .inline-form select {
  padding: 8px;
  border: 1px solid var(--g-300);
  font-size: 16px;
  font-family: inherit;
  border-radius: 3px;
  min-width: 200px;
}
.inline-form .form-actions { display: flex; gap: 8px; }

.trade-add-row { display: flex; gap: 10px; align-items: center; }
.trade-add-row input { flex: 1; padding: 9px; border: 1px solid var(--g-300); font-size: 16px; font-family: inherit; border-radius: 3px; }

button, .btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 3px;
  padding: 9px 16px;
  border: 1px solid var(--g-400);
  background: var(--g-0);
  color: var(--g-900);
}
button:hover, .btn:hover { background: var(--g-100); }
.btn-primary { background: var(--g-900); color: var(--g-0); border-color: var(--g-900); }
.btn-primary:hover { background: var(--g-800); }
.btn-secondary { background: var(--g-0); border-color: var(--g-400); }
.btn-text { border: none; background: none; text-decoration: underline; padding: 0; color: var(--g-700); }

.cta-row { margin: 20px 0 0; }
.cta-row--top { margin: 0 0 24px; }
.cta-row--center { display: flex; justify-content: center; }
.bottom-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--g-200);
}
.bottom-nav .actions-right {
  display: flex;
  gap: 12px;
}

/* Check my quote centered, Back + Skip grouped and pinned to the right edge — the
   two outer 1fr columns are always equal width regardless of the right group's
   content, so the center column stays a true center rather than an optical one */
.bottom-nav--center-cta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.bottom-nav--center-cta .actions-right {
  justify-self: end;
}

/* variant O: Back + Skip grouped together, pinned to the right edge (no left-side
   item, since Check my quote now lives in its own centered row above this one) */
.bottom-nav--grouped-right { justify-content: flex-end; }

/* variant N: Back / Skip repeated near the top, laid out the same way as
   .bottom-nav (Back left, Skip right) — Check my quote stays bottom-only, since
   there's nothing to check until addresses/trades further down are populated */
.top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 24px;
}

/* variant O: Back + Skip grouped as one right-aligned cluster (toolbar convention)
   instead of spread across the full width like N's top row */
.top-actions--grouped {
  justify-content: flex-end;
  gap: 12px;
}

/* variant M: "Check my quote" pinned as a sticky footer. Stops short of the right
   edge so it never sits under the floating chat bubble (bubble occupies roughly the
   last 220px of the viewport width). */
.main-col--sticky-footer-space { padding-bottom: 110px; }
.sticky-cta-footer {
  position: fixed;
  left: 260px;
  right: 220px;
  bottom: 0;
  background: var(--g-0);
  border-top: 1px solid var(--g-300);
  padding: 16px 32px;
  display: flex;
  justify-content: flex-end;
  z-index: 40;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}

/* chat bubble (floating) variant */
.chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--g-900);
  color: var(--g-0);
  padding: 14px 20px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  z-index: 50;
  border: none;
  font-family: inherit;
}
.chat-bubble:hover { background: var(--g-800); }

/* chat panel: shared markup, positioned differently per variant */
.chat-panel {
  display: none;
  font-size: 16px;
  background: var(--g-0);
  border: 1px solid var(--g-300);
  border-radius: 6px;
  padding: 14px;
  line-height: 1.5;
}
.chat-panel.open { display: block; }
.chat-panel .chat-panel-title { font-weight: 600; margin-bottom: 6px; font-size: 16px; }
.chat-panel .chat-panel-caption { color: var(--g-600); }
.chat-panel--floating {
  position: fixed;
  bottom: 78px;
  right: 24px;
  width: 260px;
  box-shadow: 0 2px 12px rgba(0,0,0,.22);
  z-index: 50;
}
.chat-panel--inline { margin-top: 10px; }

/* ---- client chip: minimal persistent client identifier (variant E) ---- */
.client-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--g-300);
  background: var(--g-0);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 16px;
  color: var(--g-900);
  text-decoration: none;
  margin-bottom: 24px;
}
.client-chip:hover { background: var(--g-100); }
.client-chip .chip-name { font-weight: 600; }
.client-chip .chip-sep { color: var(--g-400); }
.client-chip .chip-company { color: var(--g-700); }

/* ---- client identity moved into the step-nav rail (variants G, H, I, J) ---- */
/* its own distinct rounded card, isolated from the rail's plain background by margin
   on all sides — deliberately NOT connected to the quote-type/step list below it (no
   shared background, no shared/removed corners). The rail itself stays plain. */
.rail-client-block {
  margin: 16px 16px 20px;
  padding: 16px 20px;
  background: #ECEEEF;
  border-radius: 10px;
}
.rail-client-block .rail-client-label {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--g-500);
  margin-bottom: 4px;
}
.rail-client-block .rail-client-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--g-900);
  margin-bottom: 6px;
}
.rail-client-block .rail-client-link {
  font-size: 16px;
  color: var(--g-700);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  display: inline-block;
}
.rail-client-block .rail-client-link:hover { color: var(--g-900); }

/* heading above the step list, using the quote type name as a table-of-contents
   title instead of a generic "Steps" label (variant G) */
.rail-quote-type {
  padding: 0 24px 6px;
  font-size: 18px;
  font-weight: 700;
  color: #23366F;
}

/* ---- client summary drawer (variant H) ---- */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 60;
}
.drawer-overlay.open { display: block; }

.client-drawer {
  position: fixed;
  top: 0;
  right: -360px;
  width: 340px;
  max-width: 85vw;
  height: 100%;
  background: var(--g-0);
  border-left: 1px solid var(--g-300);
  box-shadow: -2px 0 14px rgba(0, 0, 0, .2);
  z-index: 61;
  transition: right .2s ease;
  padding: 24px;
  overflow-y: auto;
}
.client-drawer.open { right: 0; }
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--g-200);
  padding-bottom: 12px;
}
.drawer-header h2 { font-size: 16px; margin: 0; }
.drawer-close {
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--g-600);
  padding: 0 4px;
}
.drawer-close:hover { color: var(--g-900); }
.drawer-body .field { font-size: 16px; margin-bottom: 10px; color: var(--g-800); }
.drawer-body .field .flabel { color: var(--g-500); display: inline-block; min-width: 110px; }

/* ---- standalone client summary page ---- */
.summary-card {
  border: 1px solid var(--g-200);
  background: var(--g-0);
  border-radius: 4px;
  padding: 24px;
  max-width: 480px;
}
.summary-card .field { font-size: 16px; margin-bottom: 10px; color: var(--g-800); }
.summary-card .field .flabel { color: var(--g-500); display: inline-block; min-width: 120px; }
.back-link { display: inline-block; margin-top: 20px; font-size: 16px; }