/* ════════════════════════════════════════════════════════════════
   Insight Metrics — B2B Portal CSS
   v3.4.0 Mobile-app Editorial — 1:1 with b2b-mobile-preview.html
   ════════════════════════════════════════════════════════════════ */

/* ── WordPress portal overrides ───────────────────────────────────
   The portal SPA takes over the entire viewport. We don't render the
   .phone frame (preview-only); .app fills 100dvh and screens scroll
   internally. WordPress theme chrome above/below is unaffected
   because #im-b2b-app uses position: fixed; inset: 0; z-index: 9999.
   ─────────────────────────────────────────────────────────────── */
#im-b2b-app{
  position: fixed; inset: 0; z-index: 2147483000;
  background: var(--bg, #F7F4EE);
}
/* Nexros theme ships a custom cursor follower at z-index:999999 which
   sits on top of our portal and looks like a stray grey dot floating in
   the bottom-left of every screen. Hide all theme cursor layers while
   the portal is locked so the portal owns the foreground. */
body.im-b2b-portal-locked .pxl-cursor,
body.im-b2b-portal-locked .pxl-cursor-wrapper,
body.im-b2b-portal-locked .pxl-cursor--follower,
body.im-b2b-portal-locked [class*="pxl-cursor"]{
  display: none !important;
}
#im-b2b-app .app{
  width: 100% !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
/* Stage / phone frame are preview-only — never rendered inside WP */
#im-b2b-app .stage, #im-b2b-app .stage-meta, #im-b2b-app .phone::before{ display: none !important; }
/* WordPress theme padding lock — already handled inline in shortcode */
body.im-b2b-portal-locked{ overflow: hidden !important; }

/* v3.9.25 — Theme reset: many WP themes (Nexros, Elementor kits, etc.)
   apply aggressive negative letter-spacing on h1/h2/h3 which makes
   our serif headings overlap. Force portal-scope headings to use
   our own typographic settings rather than inheriting from the theme. */
#im-b2b-app h1,
#im-b2b-app h2,
#im-b2b-app h3,
#im-b2b-app h4,
#im-b2b-app h5,
#im-b2b-app h6{
  letter-spacing: -0.012em;
  text-transform: none;
  word-spacing: 0;
}
#im-b2b-app .article h2{ letter-spacing: -0.005em; }
#im-b2b-app .large-title h1{ letter-spacing: -0.025em; }

/* Themes commonly apply `button{ text-transform: uppercase }` which leaks
   into our person names and other content rendered inside `<button>`
   rows. Restore natural casing for the *text-bearing* leaves of those
   rows. Uppercase chrome (.eyebrow, .chip, .pill, .badge, .w-lbl,
   .sec-label, .nav-identity-meta, .ios-section-header .label, .seg
   buttons, .btn-big) keeps its uppercase via their own rules below. */
#im-b2b-app .candidate-row .cand-name,
#im-b2b-app .candidate-row .cand-meta,
#im-b2b-app .candidate-row .cand-type,
#im-b2b-app .ios-row .row-title,
#im-b2b-app .ios-row .row-meta,
#im-b2b-app .ios-row .row-meta span,
#im-b2b-app .ios-row .pct,
#im-b2b-app .set-row .label,
#im-b2b-app .set-row .label > span,
#im-b2b-app .integ-tile .integ-name,
#im-b2b-app .integ-tile .integ-meta,
#im-b2b-app .test-pick .tp-name,
#im-b2b-app .test-pick .tp-meta,
#im-b2b-app .t-item p,
#im-b2b-app .t-item .t-time,
#im-b2b-app .act-row .act-text,
#im-b2b-app .act-row .act-time,
#im-b2b-app .nav-identity-name{
  text-transform: none;
  letter-spacing: normal;
}
/* `.label small` is the meta line under a `.set-row` label — keep it
   natural-cased so it doesn't read as a shouting chip. */
#im-b2b-app .set-row .label small{
  text-transform: none; letter-spacing: normal; font-weight: 400;
}

/* ── Editorial app design system ───────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   Insight Metrics — B2B Editorial App  (Interactive prototype)
   ════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root{
  --bg: #F7F4EE; --bg-soft: #FBF9F4; --paper: #FFFFFF;
  /* --muted/--muted-2 darkened from #8A8378/#B8B1A4 for WCAG AA contrast
     (4.5:1+) against --bg and --paper. Old values failed AA. */
  --ink: #1A1613; --ink-2: #3B342E; --muted: #6E6862; --muted-2: #8A8378;
  --rule: #E6DFD2; --rule-soft: #EFE9DC; --hairline: #ECE5D5;
  --gold: #B48B4C; --gold-deep: #8F6A2F; --gold-soft: #EADFC7; --gold-paper: #FBF6EA;
  --navy: #1F2A44; --navy-deep: #0E1628;
  --success: #4C6B4A; --success-bg: #E6EFE1;
  --warn: #8A5A1F; --warn-bg: #FFF3DC;
  --danger: #8E3A3A; --danger-bg: #F5E2DE;

  --shadow-1: 0 1px 2px rgba(26,22,19,.04), 0 0 0 1px var(--rule);
  --shadow-2: 0 6px 24px -12px rgba(26,22,19,.12);
  --shadow-deep: 0 24px 60px -20px rgba(26,22,19,.35);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 16px; --tabbar-h: 76px; --header-h: 56px;

  /* Z-index hierarchy — single source of truth so dropdowns/sheets/toasts
     don't conflict. nav < tabbar < fab < scrim < modal < sheet < search < toast. */
  --z-nav: 40; --z-tabbar: 50; --z-fab: 60;
  --z-scrim: 70; --z-modal: 80; --z-sheet: 90;
  --z-search: 100; --z-toast: 110;
}

html, body{
  background: var(--bg); font-family: var(--font-body); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}

/* Phone-frame stage for desktop preview only */
.stage{
  min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 20px 60px;
  background: radial-gradient(ellipse at top, #3a3024 0%, #1d1812 60%, #110d09 100%);
}
.stage-meta{
  position: fixed; top: 14px; left: 18px;
  font: 500 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(234,223,199,.5); z-index: 10;
}
.stage-meta b{ color: var(--gold-soft); font-weight: 600; }

.phone{
  width: 390px; max-width: 100%;
  background: var(--bg);
  border-radius: 44px;
  overflow: hidden; position: relative;
  box-shadow:
    0 0 0 8px #0c0906, 0 0 0 9px #2a221a,
    0 40px 80px -10px rgba(0,0,0,.6),
    0 80px 120px -30px rgba(180,139,76,.15);
  height: 844px;
  isolation: isolate;
}
.phone::before{
  content:''; position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 28px;
  background: #0c0906; border-radius: 16px; z-index: 200;
}

/* ── App container ─────────────────── */
.app{
  position: relative;
  height: 844px;
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(180,139,76,.08), transparent 70%),
    radial-gradient(60% 40% at 0% 0%, rgba(234,223,199,.18), transparent 70%),
    var(--bg);
  overflow: hidden;
  isolation: isolate;
}

/* ════════════════════════════════════════════════════════════════
   v3.5.0 — Premium B2B Editorial Header
   The iOS-style status bar (battery/wifi/clock) was removed for
   professional B2B presentation. The .status-bar selectors below
   collapse the element to zero (in case anything still emits it),
   the new .app-nav is a true responsive SaaS top bar.
   ════════════════════════════════════════════════════════════════ */
.status-bar{ display: none !important; }

/* ── Top navigation bar ───────────────────────────────────────── */
.app-nav{
  position: absolute; top: var(--safe-top);
  left: 0; right: 0; z-index: var(--z-nav);
  height: 60px;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: rgba(251,249,244,.86);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.app-nav.scrolled{
  border-bottom-color: var(--rule);
  background: rgba(251,249,244,.94);
  box-shadow: 0 1px 0 rgba(26,22,19,.02), 0 6px 20px -16px rgba(26,22,19,.18);
}

.app-nav .nav-left,
.app-nav .nav-right{
  display: flex; align-items: center;
  gap: 8px; min-width: 0;
}
.app-nav .nav-left{ min-width: 0; }
.app-nav .nav-right{ justify-content: flex-end; }

/* Search lives in column 2 only on desktop. Hidden on mobile. */
.app-nav .nav-search{ display: none; }

/* ── Brand cluster ────────────────────────────────────────────── */
.nav-brand{
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0; max-width: 100%;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: background-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-brand:hover{ background: rgba(180,139,76,.07); }
.nav-brand:active{ transform: scale(.99); }

.nav-mark{
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(26,22,19,.18), 0 0 0 1px rgba(26,22,19,.12) inset;
}
.nav-mark svg{ width: 32px; height: 32px; display: block; }
.nav-mark-img{
  width: 100%; height: 100%; display: block;
  object-fit: contain; padding: 3px;
}

.nav-brand-text{
  display: flex; flex-direction: column;
  min-width: 0; line-height: 1.1;
  /* Hide on mobile to keep the bar uncluttered; the mark alone reads as brand */
  display: none;
}
.nav-brand-name{
  font-family: var(--font-serif);
  font-weight: 500; font-style: italic;
  font-size: 17px; letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.nav-brand-meta{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 3px;
  font: 500 11px var(--font-body);
  color: var(--muted);
  letter-spacing: .005em;
}
.nav-brand-dot{
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--rule);
  flex-shrink: 0;
}
.nav-brand-detail{ white-space: nowrap; }

/* Plan badge — tier-aware colour */
.nav-plan-chip{
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px;
  border-radius: 999px;
  font: 600 9.5px var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--gold-paper);
  color: var(--gold-deep);
  border: 1px solid var(--gold-soft);
}
.nav-plan-chip--pro,
.nav-plan-chip--premium{
  background: linear-gradient(135deg, #2a2118 0%, #1a1613 100%);
  color: var(--gold-soft);
  border-color: transparent;
}
.nav-plan-chip--enterprise{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #EADFC7;
  border-color: transparent;
}
.nav-plan-chip--trial{
  background: var(--warn-bg);
  color: var(--warn);
  border-color: rgba(138,90,31,.18);
}

/* ── Inline command-bar search (desktop only) ─────────────────── */
.nav-search{
  display: none;
  align-items: center; gap: 10px;
  width: 100%; max-width: 420px;
  height: 40px; padding: 0 12px 0 14px;
  margin: 0 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--muted);
  font: 400 13.5px var(--font-body);
  cursor: text; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  -webkit-appearance: none; appearance: none;
}
.nav-search:hover{
  border-color: var(--gold-soft);
  background: var(--bg-soft);
}
.nav-search:focus-visible{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(180,139,76,.14);
}
.nav-search-icon{
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: var(--muted); fill: none;
}
.nav-search-label{
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-search-kbd{
  display: inline-flex; align-items: center; gap: 2px;
  height: 22px; padding: 0 7px;
  background: var(--rule-soft);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: 600 10.5px var(--font-body);
  letter-spacing: .04em;
  flex-shrink: 0;
}
.nav-search-kbd span{ font-size: 12px; line-height: 1; margin-right: 1px; }

/* Compact title — kept in the DOM for legacy JS but visually hidden.
   We surface the page title via the editorial .large-title at the
   top of each screen instead; cleaner than a duplicated nav title. */
.app-nav .compact-title{
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.app-nav .static-title{
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Icon buttons (refined) ───────────────────────────────────── */
.icon-btn{
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 10px;
  background: var(--paper); border: 1px solid var(--rule);
  display: grid; place-items: center;
  position: relative; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
  padding: 0;
}
.icon-btn:hover{
  background: var(--bg-soft);
  border-color: var(--gold-soft);
}
.icon-btn:active{ transform: scale(.94); }
.icon-btn:focus-visible{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(180,139,76,.14);
}
.icon-btn svg{
  width: 17px; height: 17px;
  stroke: var(--ink-2); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn--ghost{
  background: transparent;
  border-color: transparent;
}
.icon-btn--ghost:hover{
  background: var(--rule-soft);
  border-color: transparent;
}

.icon-btn .pulse{
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px;
  background: var(--gold);
  border: 2px solid var(--paper); border-radius: 50%;
}
.icon-btn .pulse::before{
  content:''; position: absolute; inset: -3px;
  border-radius: 50%; background: var(--gold); opacity: .35;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{ 0%{transform:scale(.7);opacity:.5} 100%{transform:scale(2);opacity:0} }
.icon-btn--ghost .pulse{ border-color: var(--bg); }

.icon-btn.back{ background: transparent; border-color: transparent; box-shadow: none; }
.icon-btn.back:hover{ background: var(--rule-soft); border-color: transparent; }

/* ── Identity card (avatar + name + role + chev) ──────────────── */
.nav-identity{
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 6px 0 4px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
  -webkit-appearance: none; appearance: none;
}
.nav-identity:hover{
  background: var(--bg-soft);
  border-color: var(--rule);
}
.nav-identity:active{ transform: scale(.99); }
.nav-identity:focus-visible{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(180,139,76,.14);
}
.nav-identity-badge{
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--gold-soft);
  display: grid; place-items: center;
  font: 600 11.5px var(--font-body); letter-spacing: .04em;
  position: relative;
  box-shadow: 0 1px 2px rgba(26,22,19,.18), 0 0 0 1px rgba(26,22,19,.12) inset;
}
.nav-identity-badge::after{
  content:''; position: absolute; bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  background: var(--success);
  border: 2px solid var(--bg);
  border-radius: 50%;
}
.nav-identity-meta{
  display: none;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
  min-width: 0;
}
.nav-identity-name{
  font: 600 13px var(--font-body);
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 140px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-identity-role{
  font: 500 10.5px var(--font-body);
  color: var(--muted);
  letter-spacing: .12em; text-transform: uppercase;
  margin-top: 2px;
}
.nav-identity-chev{
  width: 14px; height: 14px;
  stroke: var(--muted-2);
  display: none;
}

/* Legacy .avatar kept for sheets/dropdowns elsewhere in the app */
.avatar{
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--gold-soft);
  display: grid; place-items: center;
  font: 600 12px var(--font-body); letter-spacing: .04em;
  cursor: pointer; position: relative;
  -webkit-appearance: none; appearance: none;
  padding: 0; border: none;
}
.avatar::after{
  content:''; position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  background: var(--success);
  border: 2px solid var(--bg); border-radius: 50%;
}

/* ── Hide nav-help on the very narrowest phones to save space ── */
@media (max-width: 374px){
  .app-nav .nav-help{ display: none; }
  .app-nav{ gap: 6px; }
  .nav-brand{ padding-left: 4px; padding-right: 4px; }
}

/* ── Screen system ─────────────────── */
.screens{
  position: absolute;
  inset: 0;
  padding-top: calc(var(--safe-top) + 60px);
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.screens::-webkit-scrollbar{ display: none; }
.screen{ display: none; animation: pageIn .28s cubic-bezier(.2,.8,.2,1); }
.screen.active{ display: block; }
@keyframes pageIn{
  from{ transform: translateX(20px); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}

/* ── Large editorial title ─────────── */
.large-title{ padding: 4px var(--gutter) 14px; }
.large-title .eyebrow{
  font: 500 10.5px var(--font-body);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.large-title .eyebrow::before{ content:''; width: 18px; height: 1px; background: var(--gold); }
.large-title h1{
  font-family: var(--font-serif);
  font-weight: 500; font-size: 34px;
  line-height: 1.02; letter-spacing: -0.025em; color: var(--ink);
}
.large-title h1 em{ font-style: italic; color: var(--gold-deep); font-weight: 500; }
.large-title .lede{ font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* ── Segmented control ─────────────── */
.segmented{
  margin: 12px var(--gutter) 0;
  background: var(--rule-soft);
  border-radius: 12px; padding: 3px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  position: relative;
}
.segmented button{
  appearance: none; background: transparent; border: none;
  font: 600 11px var(--font-body); color: var(--ink-2);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 0; border-radius: 9px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.segmented button.active{
  background: var(--paper); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(26,22,19,.08), 0 0 0 1px rgba(26,22,19,.04);
}

/* ── Live Activity widget ──────────── */
.live-widget{
  margin: 16px var(--gutter) 0;
  background:
    linear-gradient(135deg, rgba(180,139,76,.08), rgba(234,223,199,.22) 60%, rgba(180,139,76,.04) 100%),
    var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px; padding: 18px 18px 16px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: transform .15s ease;
}
.live-widget:active{ transform: scale(.99); }
.live-widget::before{
  content:''; position: absolute; top: -50px; right: -50px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(180,139,76,.18), transparent 60%);
  pointer-events: none;
}
.lw-row{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lw-pill{
  font: 600 10px var(--font-body);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 8px;
  background: var(--gold-paper); border-radius: 999px;
  border: 1px solid var(--gold-soft);
}
.lw-pill::before{
  content:''; width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(180,139,76,.18);
  animation: livedot 2s ease-out infinite;
}
@keyframes livedot{ 0%,100%{box-shadow:0 0 0 3px rgba(180,139,76,.18)} 50%{box-shadow:0 0 0 5px rgba(180,139,76,.05)} }
.lw-link{
  font: 500 12px var(--font-body); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.lw-link svg{ width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.lw-num{
  font-family: var(--font-serif); font-size: 56px; line-height: .95; font-weight: 500;
  letter-spacing: -0.04em; color: var(--ink);
  display: flex; align-items: baseline; gap: 6px;
}
.lw-num small{
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--muted); letter-spacing: 0;
}
.lw-num em{ font-style: italic; color: var(--gold-deep); font-family: var(--font-serif); font-weight: 500; }
.lw-label{ font-size: 13px; color: var(--muted); margin-top: 6px; }
.lw-segments{
  margin-top: 16px; display: flex; gap: 4px;
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--rule-soft);
}
.lw-segments span{ display: block; height: 100%; }
.lw-legend{
  display: flex; gap: 16px; margin-top: 10px;
  font-size: 11.5px; color: var(--muted);
}
.lw-legend i{
  display: inline-block; width: 8px; height: 8px;
  border-radius: 3px; margin-right: 6px; vertical-align: middle;
}
.lw-legend b{ color: var(--ink); font-weight: 600; margin-left: 3px; }
.lw-foot{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--muted);
}
.lw-foot .delta{
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--success); font-weight: 600;
}
.lw-foot .delta svg{ width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lw-foot b{ color: var(--ink); font-weight: 600; }

/* ── iOS section header ─────────────── */
.ios-section{ margin-top: 22px; }
.ios-section-header{
  padding: 0 calc(var(--gutter) + 6px) 8px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.ios-section-header .label{
  font: 500 11px var(--font-body);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-section-header .more{ white-space: nowrap; flex: 0 0 auto; }
.ios-section-header .label em{
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 13px; text-transform: none; letter-spacing: 0;
  color: var(--gold-deep); margin-left: 2px;
}
.ios-section-header .more{
  font: 500 12px var(--font-body); color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: 3px;
  letter-spacing: -0.005em; cursor: pointer;
}
.ios-section-header .more svg{ width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Snap-scroll widgets ─────────────── */
.widget-row{
  display: flex; gap: 10px;
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.widget-row::-webkit-scrollbar{ display: none; }
.widget{
  flex: 0 0 158px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px; padding: 14px;
  scroll-snap-align: start;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform .15s ease;
}
.widget:active{ transform: scale(.97); }
.widget.dark{
  background: linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 100%);
  border-color: transparent; color: var(--gold-soft);
}
.widget.dark .w-num{ color: var(--bg-soft); }
.widget.dark .w-lbl{ color: var(--muted-2); }
.widget.dark .w-trend{ color: var(--gold-soft); }
.widget.dark .w-glyph{ background: rgba(234,223,199,.1); border-color: rgba(234,223,199,.18); }
.widget.dark .w-glyph svg{ stroke: var(--gold-soft); }
.w-glyph{
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--gold-paper);
  border: 1px solid var(--gold-soft);
  margin-bottom: 10px;
}
.w-glyph svg{ width: 15px; height: 15px; stroke: var(--gold-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w-num{
  font-family: var(--font-serif); font-size: 28px; line-height: 1; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink);
  display: flex; align-items: baseline; gap: 3px;
}
.w-num sup,
.w-num .w-num-unit{
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--muted); position: relative; top: 0;
  margin-left: 1px; letter-spacing: 0;
  vertical-align: baseline; align-self: baseline;
}
.w-lbl{
  font-size: 10.5px; color: var(--muted);
  letter-spacing: .12em; text-transform: uppercase;
  margin-top: 3px; font-weight: 600;
}
.w-trend{ margin-top: 10px; font-size: 11.5px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.w-trend.up{ color: var(--success); }
.w-trend svg{ width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── iOS Grouped table ──────────────── */
.ios-list{
  margin: 0 var(--gutter);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.ios-row{
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  cursor: pointer;
  transition: background .15s ease;
  position: relative;
}
.ios-row:active{ background: var(--rule-soft); }
.ios-row + .ios-row{ border-top: 1px solid var(--hairline); }

.row-thumb{
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--gold-paper);
  border: 1px solid var(--gold-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.row-thumb.lav{ background: #EFEAF3; border-color: #E0D8E8; }
.row-thumb.mint{ background: #E3EEE7; border-color: #D2E1D8; }
.row-thumb.sky{ background: #E4ECF2; border-color: #D2DDE6; }
.row-thumb.rose{ background: #F4E7E5; border-color: #E5D5D2; }
.row-thumb.amber{ background: #F5E9D0; border-color: #E6D5B5; }
.row-thumb svg{ width: 20px; height: 20px; stroke: var(--gold-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row-thumb.lav svg{ stroke: #6B5980; }
.row-thumb.mint svg{ stroke: #4C6B4A; }
.row-thumb.sky svg{ stroke: #3B5A78; }
.row-thumb.rose svg{ stroke: #8A4747; }
.row-thumb.amber svg{ stroke: #8A5A1F; }

.row-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.row-title{
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-meta{
  font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden;
}
.row-meta > *{ flex-shrink: 0; }
.row-meta .dot{ width: 3px; height: 3px; background: var(--muted-2); border-radius: 50%; }

.row-progress{ display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.row-progress .track{
  flex: 1; height: 4px;
  background: var(--rule-soft);
  border-radius: 999px; overflow: hidden;
}
.row-progress .track span{
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  border-radius: 999px;
}
.row-progress .pct{
  font-family: var(--font-serif); font-size: 13px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.01em;
  min-width: 30px; text-align: right;
}
.row-trail{
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px; flex-shrink: 0;
}
.badge{
  font: 600 10px var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: var(--success-bg); color: var(--success);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.badge::before{ content:''; width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.badge.draft{ background: var(--rule-soft); color: var(--ink-2); }
.badge.warn{ background: var(--warn-bg); color: var(--warn); }
.chev{ width: 14px; height: 14px; stroke: var(--muted-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ── Quick action tiles ─────────────── */
.quick{
  margin: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.tile{
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 84px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease;
}
.tile:active{ transform: scale(.97); }
.tile.feature{
  background: linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px -10px rgba(180,139,76,.6);
}
.tile.dark{
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-color: transparent; color: var(--gold-soft);
}
.tile-glyph{
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--gold-paper); border: 1px solid var(--gold-soft);
  display: grid; place-items: center;
}
.tile.feature .tile-glyph{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.22); }
.tile.dark .tile-glyph{ background: rgba(234,223,199,.1); border-color: rgba(234,223,199,.18); }
.tile-glyph svg{ width: 17px; height: 17px; stroke: var(--gold-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile.feature .tile-glyph svg{ stroke: #fff; }
.tile.dark .tile-glyph svg{ stroke: var(--gold-soft); }
.tile-title{
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.2; letter-spacing: -0.01em;
}
.tile.feature .tile-title{ color: #fff; }
.tile.dark .tile-title{ color: var(--bg-soft); }
.tile-sub{ font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.tile.feature .tile-sub{ color: rgba(255,255,255,.78); }
.tile.dark .tile-sub{ color: var(--muted-2); }

/* ── Stories (v3.6.2 — richer tile, distinctive per-test color/icon) ── */
.stories{
  display: flex; gap: 14px;
  padding: 4px var(--gutter) 6px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.stories::-webkit-scrollbar{ display: none; }
.story{
  flex: 0 0 84px; text-align: center;
  scroll-snap-align: start; cursor: pointer;
}
.story:active .story-ring{ transform: scale(.94); }
.story-ring{
  width: 68px; height: 68px;
  border-radius: 50%;
  margin: 0 auto 8px;
  position: relative;
  background: conic-gradient(from 200deg at 50% 50%, var(--gold) 0deg, var(--gold-soft) 90deg, var(--gold-deep) 200deg, var(--gold) 360deg);
  padding: 2px;
  transition: transform .15s ease;
  box-shadow: 0 6px 16px -10px rgba(180,139,76,.45);
}
.story-ring::after{ content:''; position: absolute; inset: 2px; border-radius: 50%; background: var(--bg); }
.story-img{
  position: absolute; inset: 4px; border-radius: 50%;
  background: var(--gold-paper);
  display: grid; place-items: center; z-index: 1;
  overflow: hidden;
}
/* Subtle dotted texture overlay — gives tiles depth instead of flat solid */
.story-img::before{
  content:''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0, transparent 32%),
    radial-gradient(circle at 78% 80%, rgba(0,0,0,.04) 0, transparent 40%);
  pointer-events: none;
}
.story-img.lav  { background: linear-gradient(135deg, #F5F0F8 0%, #E5DDEC 100%); }
.story-img.mint { background: linear-gradient(135deg, #ECF3EE 0%, #D8E6DD 100%); }
.story-img.sky  { background: linear-gradient(135deg, #ECF1F6 0%, #D6E1EB 100%); }
.story-img.rose { background: linear-gradient(135deg, #F8ECEA 0%, #ECD6D2 100%); }
.story-img.amber{ background: linear-gradient(135deg, #FAF1D9 0%, #EDDFB8 100%); }
.story-img.gold { background: linear-gradient(135deg, #FBF6EA 0%, #EBDDB8 100%); }
.story-img.slate{ background: linear-gradient(135deg, #ECEEF1 0%, #D7DBE0 100%); }
/* v3.7.3 — `dyn` colour class drives a per-slug-unique gradient via the
   --h CSS variable set inline by the template. Saturation + lightness
   are clamped so every test stays within the editorial palette. */
.story-img.dyn  {
  background: linear-gradient(135deg,
    hsl(var(--h, 40), 38%, 92%) 0%,
    hsl(var(--h, 40), 36%, 80%) 100%);
}
.story-img svg{
  width: 28px; height: 28px;
  stroke: var(--gold-deep); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  position: relative; z-index: 2;
}
.story-img.lav   svg{ stroke: #5E4D74; color: #5E4D74; }
.story-img.mint  svg{ stroke: #3F5C42; color: #3F5C42; }
.story-img.sky   svg{ stroke: #324F6B; color: #324F6B; }
.story-img.rose  svg{ stroke: #7E3F3F; color: #7E3F3F; }
.story-img.amber svg{ stroke: #7A5417; color: #7A5417; }
.story-img.gold  svg{ stroke: var(--gold-deep); color: var(--gold-deep); }
.story-img.slate svg{ stroke: #3F4855; color: #3F4855; }
.story-img.dyn   svg{
  stroke: hsl(var(--h, 40), 38%, 28%);
  color:  hsl(var(--h, 40), 38%, 28%);
}
.story-img.add{
  background: linear-gradient(135deg, var(--ink) 0%, #0c0906 100%);
}
.story-img.add::before{ display: none; }
.story-img.add svg{ stroke: var(--gold-soft); color: var(--gold-soft); }
.story-name{
  font-size: 11.5px; color: var(--ink-2); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve two lines so short single-word names ("Add test") line up
     with two-line names ("16 Personality Types (MBTI)") in the row. */
  min-height: 2.5em;
}
.story-cap{
  font-size: 10px; color: var(--muted); margin-top: 2px;
  letter-spacing: .04em;
}

/* ── Activity timeline ─────────────── */
.timeline{
  margin: 0 var(--gutter);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 14px 14px 6px;
  box-shadow: var(--shadow-1);
}
.t-item{ position: relative; padding: 8px 0 10px 22px; }
.t-item::before{
  content:''; position: absolute; left: 5px; top: 14px;
  width: 8px; height: 8px;
  background: var(--paper);
  border: 2px solid var(--gold); border-radius: 50%; z-index: 1;
}
.t-item.success::before{ border-color: var(--success); }
.t-item.muted::before{ border-color: var(--muted-2); }
.t-item:not(:last-child)::after{
  content:''; position: absolute; left: 8.5px; top: 22px; bottom: -2px;
  width: 1px; background: var(--hairline);
}
.t-item p{ font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.t-item p b{ color: var(--ink); font-weight: 600; }
.t-time{ font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: .02em; }

/* ── Editorial dark note ───────────── */
.note{
  margin: 22px var(--gutter) 0;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(180,139,76,.18), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #110d09 100%);
  border-radius: 22px;
  padding: 22px 20px 18px;
  color: var(--bg-soft);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.note::before{
  content:''; position: absolute; top: 24px; right: 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  opacity: .55;
}
.note .eyebrow{
  font: 600 10px var(--font-body);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 8px;
}
.note .eyebrow::before{ content:''; width: 14px; height: 1px; background: var(--gold); }
.note h3{
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: 21px; line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--bg-soft); margin-bottom: 8px;
}
.note h3 .quote{
  display: inline-block;
  color: var(--gold);
  font-size: 0;
  margin-right: 6px;
  vertical-align: top;
}
.note h3 .quote::before{
  content: "\201C";
  font-size: 32px; line-height: 0;
  position: relative; top: 14px;
  font-style: normal;
}
.note p{ font-size: 13px; color: rgba(247,244,238,.65); line-height: 1.55; margin-bottom: 14px; }
.note .actions{ display: flex; gap: 8px; }
.note-cta{
  flex: 1;
  background: var(--gold); color: var(--ink);
  font: 600 13px var(--font-body);
  padding: 11px 14px; border-radius: 10px;
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer;
  transition: transform .15s ease;
  letter-spacing: -0.005em;
  border: none;
}
.note-cta:active{ transform: scale(.98); }
.note-cta svg{ width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.note-ghost{
  flex: 0 0 auto;
  padding: 11px 14px; border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(234,223,199,.16);
  color: var(--gold-soft);
  font: 600 13px var(--font-body); cursor: pointer;
}

/* ── Bars ──────────────────────────── */
.bars{
  margin: 0 var(--gutter);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-1);
}
.bar-row{
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 12px; align-items: center;
  cursor: pointer;
}
.bar-row .name{ font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
.bar-row .val{ font-family: var(--font-serif); font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.bar-row .track{
  grid-column: 1 / -1;
  height: 5px; background: var(--rule-soft); border-radius: 999px; overflow: hidden;
}
.bar-row .track span{ display: block; height: 100%; border-radius: 999px; }

/* ── Section footer (v3.6.0 — professional, was magazine "Edition") ── */
.edition{
  text-align: center;
  font: 500 11.5px var(--font-body);
  letter-spacing: 0; text-transform: none;
  color: var(--muted);
  margin: 28px 0 0;
  padding: 12px var(--gutter) 0;
  border-top: 1px solid var(--hairline);
}
.edition .rule{ display: none; } /* decorative gold rule removed */
.edition em{
  font-style: normal; font-weight: 600;
  color: var(--ink-2);
  font-size: inherit; letter-spacing: 0;
  margin: 0;
}

/* ── FAB ───────────────────────────── */
.fab{
  position: absolute;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 14px);
  right: var(--gutter);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
  display: grid; place-items: center;
  box-shadow:
    0 8px 24px -4px rgba(180,139,76,.5),
    0 12px 32px -10px rgba(143,106,47,.6);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s;
  z-index: var(--z-fab); border: 0;
}
.fab:active{ transform: scale(.92); }
.fab svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fab::before{
  content:''; position: absolute; inset: -6px;
  border-radius: 50%;
  background: rgba(180,139,76,.18);
  z-index: -1;
  animation: fab-pulse 2.4s ease-out infinite;
}
@keyframes fab-pulse{ 0%{transform:scale(.7);opacity:.8} 100%{transform:scale(1.5);opacity:0} }
.fab.hidden{ opacity: 0; pointer-events: none; transform: scale(.6); }

/* ── Bottom tabbar ─────────────────── */
.tabbar{
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px calc(8px + var(--safe-bottom));
  z-index: var(--z-tabbar);
}
.tab{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  /* 44px minimum height per WCAG 2.5.5 — was 40-42px. */
  min-height: 44px;
  padding: 10px 4px 8px;
  border-radius: 12px;
  cursor: pointer; position: relative;
  transition: background .15s ease;
  text-decoration: none;
  background: none; border: none;
  width: 100%; /* fill grid cell so the whole column is tappable */
}
.tab:active{ background: var(--rule-soft); }
.tab svg{ width: 22px; height: 22px; stroke: var(--muted); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s ease; }
.tab span{ font: 500 10px var(--font-body); letter-spacing: .02em; color: var(--muted); transition: color .15s ease; }
.tab.active svg{ stroke: var(--ink); }
.tab.active span{ color: var(--ink); font-weight: 600; }
.tab.active::before{
  content:''; position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -8px);
  width: 28px; height: 3px;
  background: var(--gold); border-radius: 999px;
}

/* ── Pull-to-refresh hint ──────────── */
.ptr-hint{
  text-align: center;
  font: 500 10px var(--font-body);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 4px 0; opacity: .7;
}

/* ── Filter chips ───────────────────── */
.chips{
  display: flex; gap: 8px;
  padding: 0 var(--gutter) 12px;
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar{ display: none; }
.chip{
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--paper); border: 1px solid var(--rule);
  font: 500 12px var(--font-body); color: var(--ink-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip svg{ width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip.active{
  background: var(--ink); border-color: var(--ink); color: var(--gold-soft);
}
.chip:active{ transform: scale(.95); }

/* ════════════════════════════════════════════════════════════════
   Library catalogue card (v3.6.3 — Premium UIUX)
   - Floating white "app icon" tile inside a patterned thumbnail
   - Pattern is distinct per test family (dot grid, contours, etc.)
   - Tag pills: refined "Top pick" star or category chip
   - Bottom color-aware accent strip
   - Hover: lift + reveal "Open" arrow chevron
   ════════════════════════════════════════════════════════════════ */
.lib-grid{
  margin: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

.lib-card{
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 14px 14px 16px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,22,19,.04);
  transition: transform .18s cubic-bezier(.2,.8,.2,1),
              border-color .18s ease,
              box-shadow .18s ease;
}
.lib-card::after{
  /* Color-aware accent strip at the bottom of the card */
  content:''; position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--card-accent, var(--gold));
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .2s ease, transform .2s ease;
}
.lib-card:hover{
  border-color: var(--rule);
  box-shadow:
    0 1px 2px rgba(26,22,19,.04),
    0 0 0 1px rgba(180,139,76,.18),
    0 18px 36px -22px rgba(26,22,19,.22);
  transform: translateY(-2px);
}
.lib-card:hover::after{ opacity: 1; transform: translateY(0); }
.lib-card:active{ transform: translateY(0) scale(.985); }

/* Per-color accent — drives the bottom strip and hover halo */
.lib-card--lav  { --card-accent: #8775A1; }
.lib-card--mint { --card-accent: #5C7E5F; }
.lib-card--sky  { --card-accent: #4A6D90; }
.lib-card--rose { --card-accent: #A35454; }
.lib-card--amber{ --card-accent: #A37322; }
.lib-card--gold { --card-accent: var(--gold-deep); }
.lib-card--slate{ --card-accent: #5A6573; }
/* v3.7.3 — dynamic accent picks up the slug's hue */
.lib-card--dyn  { --card-accent: hsl(var(--h, 40), 40%, 38%); }

/* ── Thumbnail ─────────────────────────────────────────────── */
.lib-thumb{
  width: 100%; aspect-ratio: 16 / 10;
  border-radius: 14px;
  display: grid; place-items: center;
  margin-bottom: 14px;
  position: relative; overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 -1px 0 rgba(26,22,19,.04) inset,
    0 0 0 1px rgba(26,22,19,.04);
}

.lib-thumb.lav  { background: radial-gradient(120% 100% at 0% 0%, #F8F4FB 0%, #E2D6EE 60%, #C9B8DD 100%); }
.lib-thumb.mint { background: radial-gradient(120% 100% at 0% 0%, #EFF6F1 0%, #CDDED2 60%, #ADC4B5 100%); }
.lib-thumb.sky  { background: radial-gradient(120% 100% at 0% 0%, #EFF4F8 0%, #CCDBE7 60%, #ADC2D2 100%); }
.lib-thumb.rose { background: radial-gradient(120% 100% at 0% 0%, #FAEEEC 0%, #E6CCC6 60%, #D0AFA8 100%); }
.lib-thumb.amber{ background: radial-gradient(120% 100% at 0% 0%, #FBF3DC 0%, #E8D6A8 60%, #D3BC7B 100%); }
.lib-thumb.gold { background: radial-gradient(120% 100% at 0% 0%, #FCF7EC 0%, #E8D6A0 60%, #CFB872 100%); }
.lib-thumb.slate{ background: radial-gradient(120% 100% at 0% 0%, #EEF1F4 0%, #CFD5DC 60%, #B3BCC6 100%); }
/* v3.7.3 — `dyn` library thumb uses HSL hue from --h for a unique gradient
   per slug. Saturation rises through the radial stops so cards still feel
   editorial rather than flat. */
.lib-thumb.dyn  {
  background: radial-gradient(120% 100% at 0% 0%,
    hsl(var(--h, 40), 42%, 95%) 0%,
    hsl(var(--h, 40), 38%, 84%) 60%,
    hsl(var(--h, 40), 36%, 72%) 100%);
}

/* ── Background pattern (data-pattern drives the texture) ──── */
.lib-thumb-pattern{
  position: absolute; inset: 0;
  pointer-events: none;
  color: rgba(26,22,19,.16);
  background-position: 0 0;
  background-repeat: repeat;
  /* v3.7.6 — every card needs SOME texture. Default: subtle dot field
     that the family-specific rules below override. Without this, the
     91 new icon keys (risk, strategic, excel-advanced, …) rendered
     onto flat gradient cards while only the canonical 11 had texture. */
  background-image: radial-gradient(circle, currentColor 0.9px, transparent 1.3px);
  background-size: 16px 16px;
  opacity: .22;
}
/* v3.7.7 — kill any WP/Elementor list-style bullet leaking into the
   thumb. Was producing a stray • dot in card corners on some themes.
   Same defensive pattern we use on .empty-state. */
.lib-thumb,
.lib-thumb *,
.lib-card,
.lib-card *{
  list-style: none !important;
}
.lib-thumb::before, .lib-thumb::after{ content: none !important; }
.lib-thumb-pattern::before, .lib-thumb-pattern::after{ content: none !important; }
/* MBTI — dotted 4×4 matrix evoking the 16 personality types */
[data-pattern="mbti"] .lib-thumb-pattern{
  background-image:
    radial-gradient(circle, currentColor 1.1px, transparent 1.4px);
  background-size: 12px 12px;
  opacity: .35;
}
/* Leadership — stacked contour lines suggesting ascent */
[data-pattern="leadership"] .lib-thumb-pattern{
  background-image:
    repeating-linear-gradient(0deg, transparent 0 16px, currentColor 16px 16.6px);
  opacity: .25;
  mask-image: radial-gradient(110% 70% at 50% 100%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(110% 70% at 50% 100%, #000 0%, transparent 80%);
}
/* Big Five — pentagon dot mesh */
[data-pattern="pentagon"] .lib-thumb-pattern{
  background-image:
    radial-gradient(circle at 50% 30%, currentColor 1px, transparent 1.4px),
    radial-gradient(circle at 22% 60%, currentColor 1px, transparent 1.4px),
    radial-gradient(circle at 78% 60%, currentColor 1px, transparent 1.4px),
    radial-gradient(circle at 38% 92%, currentColor 1px, transparent 1.4px),
    radial-gradient(circle at 62% 92%, currentColor 1px, transparent 1.4px);
  background-size: 40px 40px;
  opacity: .35;
}
/* DISC — concentric arcs / quadrant rings */
[data-pattern="disc"] .lib-thumb-pattern{
  background:
    radial-gradient(circle at 50% 50%, transparent 22px, currentColor 22px 23px, transparent 24px 100%),
    radial-gradient(circle at 50% 50%, transparent 38px, currentColor 38px 39px, transparent 40px 100%),
    radial-gradient(circle at 50% 50%, transparent 54px, currentColor 54px 55px, transparent 56px 100%);
  background-repeat: no-repeat;
  background-position: center;
  opacity: .3;
}
/* Cognitive — synaptic dot cloud (offset grid) */
[data-pattern="cognitive"] .lib-thumb-pattern{
  background-image:
    radial-gradient(circle, currentColor 1.2px, transparent 1.5px),
    radial-gradient(circle, currentColor .8px, transparent 1.2px);
  background-size: 18px 18px, 9px 9px;
  background-position: 0 0, 9px 9px;
  opacity: .28;
}
/* EQ — soft wave lines */
[data-pattern="eq"] .lib-thumb-pattern{
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, currentColor 14px 14.6px);
  opacity: .22;
  mask-image: radial-gradient(120% 80% at 50% 100%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 100%, #000 30%, transparent 90%);
}
/* Communication — diagonal hatching */
[data-pattern="communication"] .lib-thumb-pattern{
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, currentColor 9px 9.6px);
  opacity: .22;
}
/* Situational — branching grid */
[data-pattern="situational"] .lib-thumb-pattern{
  background-image:
    linear-gradient(currentColor .6px, transparent .6px),
    linear-gradient(90deg, currentColor .6px, transparent .6px);
  background-size: 18px 18px;
  opacity: .2;
  mask-image: radial-gradient(70% 70% at 50% 60%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 60%, #000 30%, transparent 85%);
}
/* Skills — small crosshatch */
[data-pattern="skills"] .lib-thumb-pattern{
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, currentColor 8px 8.6px),
    repeating-linear-gradient(-45deg, transparent 0 8px, currentColor 8px 8.6px);
  opacity: .18;
}
/* Values + default — large fading rings */
[data-pattern="values"] .lib-thumb-pattern,
[data-pattern="default"] .lib-thumb-pattern{
  background:
    radial-gradient(circle at 80% 20%, currentColor 0 0.8px, transparent 1.2px),
    radial-gradient(circle at 30% 70%, currentColor 0 0.8px, transparent 1.2px);
  background-size: 22px 22px;
  opacity: .22;
}

/* ── Mini-viz frame (v3.6.4 — replaces generic icon with a small
       data-visualization of what the test actually produces) ────── */
.lib-thumb-viz{
  position: relative; z-index: 2;
  width: 96px; height: 96px;
  border-radius: 20px;
  background: var(--paper);
  display: grid; place-items: center;
  padding: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(26,22,19,.07),
    0 12px 24px -10px rgba(26,22,19,.2),
    0 3px 6px -2px rgba(26,22,19,.08);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.lib-card:hover .lib-thumb-viz{ transform: translateY(-3px) scale(1.04); }
/* v3.7.8 — bumped white card to 96×96 + SVG to 84×84. Combined with
   the v3.7.7 transform-scale upscale on simple icons, this makes
   non-canonical glyphs read at the same visual weight as the
   hand-tuned canonical previews. */
.lib-thumb-viz svg{
  width: 84px; height: 84px;
  stroke-width: 1.4;
}
.lib-thumb.lav   .lib-thumb-viz svg{ stroke: #5E4D74; color: #5E4D74; }
.lib-thumb.mint  .lib-thumb-viz svg{ stroke: #3F5C42; color: #3F5C42; }
.lib-thumb.sky   .lib-thumb-viz svg{ stroke: #324F6B; color: #324F6B; }
.lib-thumb.rose  .lib-thumb-viz svg{ stroke: #7E3F3F; color: #7E3F3F; }
.lib-thumb.amber .lib-thumb-viz svg{ stroke: #7A5417; color: #7A5417; }
.lib-thumb.gold  .lib-thumb-viz svg{ stroke: var(--gold-deep); color: var(--gold-deep); }
.lib-thumb.slate .lib-thumb-viz svg{ stroke: #3F4855; color: #3F4855; }
.lib-thumb.dyn   .lib-thumb-viz svg{
  stroke: hsl(var(--h, 40), 40%, 28%);
  color:  hsl(var(--h, 40), 40%, 28%);
}

/* ── Top-right tag pills ──────────────────────────────────── */
.lib-thumb-tag{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font: 700 9.5px var(--font-body);
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(26,22,19,.94);
  color: var(--gold-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px -2px rgba(26,22,19,.35);
}
.lib-thumb-tag svg{ width: 9px; height: 9px; stroke: none; }
.lib-thumb-tag--cat{
  background: rgba(255,255,255,.82);
  color: var(--ink-2);
  box-shadow: 0 1px 0 rgba(26,22,19,.06) inset, 0 1px 4px -1px rgba(26,22,19,.1);
}

/* Legacy `.pop` class kept for back-compat */
.lib-thumb .pop{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  font: 700 9.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(26,22,19,.94); color: var(--gold-soft);
  border: none;
}

/* ── Card body ────────────────────────────────────────────── */
.lib-body{ padding: 0 2px; }
.lib-name{
  font: 600 15px var(--font-body);
  color: var(--ink); letter-spacing: -0.012em; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.lib-tag{
  font: 500 12px var(--font-body);
  color: var(--muted); letter-spacing: -0.005em;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
  min-height: 2.8em;
}
.lib-meta{
  display: flex; gap: 6px; flex-wrap: wrap;
}
.lib-meta-chip{
  display: inline-flex; align-items: center;
  font: 600 10.5px var(--font-body);
  letter-spacing: .02em;
  color: var(--ink-2);
  background: var(--rule-soft);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.lib-meta .dot{
  display: inline-block; width: 3px; height: 3px;
  background: var(--muted-2); border-radius: 50%;
  vertical-align: middle; margin: 0 6px;
}

/* Single-column on the smallest phones */
@media (max-width: 374px){
  .lib-grid{ grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   Hero card — featured test, spans 2 columns, dark editorial chrome
   ════════════════════════════════════════════════════════════════ */
.lib-card--hero{
  grid-column: span 2;
  padding: 0;
  background: linear-gradient(180deg, #1d1812 0%, #110d09 100%);
  border-color: transparent;
  color: var(--bg-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 220px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(26,22,19,.08),
    0 24px 48px -28px rgba(26,22,19,.45);
}
.lib-card--hero::after{
  left: 0; right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--card-accent, var(--gold)) 30%, var(--card-accent, var(--gold)) 70%, transparent 100%);
  opacity: 1; transform: none;
  height: 2px;
  border-radius: 0;
  bottom: 0;
}
.lib-card--hero:hover{
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(26,22,19,.08),
    0 36px 60px -28px rgba(26,22,19,.55),
    0 0 0 1px rgba(180,139,76,.3);
}

.lib-hero-canvas{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(180,139,76,.22) 0%, transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(234,223,199,.1) 0%, transparent 70%),
    linear-gradient(140deg, #2a2118 0%, #14100b 100%);
}
.lib-hero-pattern{
  position: absolute; inset: 0;
  color: rgba(234,223,199,.18);
  pointer-events: none;
}
/* Reuse the same pattern system as small cards, just lighter */
.lib-card--hero [data-pattern="mbti"] .lib-hero-pattern{
  background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.6px);
  background-size: 16px 16px;
  opacity: .55;
}
.lib-card--hero [data-pattern="leadership"] .lib-hero-pattern{
  background-image: repeating-linear-gradient(0deg, transparent 0 22px, currentColor 22px 22.8px);
  opacity: .35;
  mask-image: radial-gradient(120% 80% at 50% 110%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 110%, #000 0%, transparent 80%);
}
.lib-card--hero [data-pattern="pentagon"] .lib-hero-pattern{
  background-image:
    radial-gradient(circle at 50% 30%, currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at 22% 60%, currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at 78% 60%, currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at 38% 92%, currentColor 1.2px, transparent 1.6px),
    radial-gradient(circle at 62% 92%, currentColor 1.2px, transparent 1.6px);
  background-size: 56px 56px;
  opacity: .55;
}
.lib-card--hero [data-pattern="disc"] .lib-hero-pattern{
  background:
    radial-gradient(circle at 50% 50%, transparent 30px, currentColor 30px 31px, transparent 32px 100%),
    radial-gradient(circle at 50% 50%, transparent 52px, currentColor 52px 53px, transparent 54px 100%),
    radial-gradient(circle at 50% 50%, transparent 74px, currentColor 74px 75px, transparent 76px 100%);
  background-repeat: no-repeat;
  background-position: center;
  opacity: .55;
}
.lib-card--hero [data-pattern="cognitive"] .lib-hero-pattern{
  background-image:
    radial-gradient(circle, currentColor 1.4px, transparent 1.8px),
    radial-gradient(circle, currentColor 1px, transparent 1.4px);
  background-size: 26px 26px, 13px 13px;
  background-position: 0 0, 13px 13px;
  opacity: .45;
}
.lib-card--hero [data-pattern="eq"] .lib-hero-pattern{
  background: repeating-linear-gradient(115deg, transparent 0 18px, currentColor 18px 18.8px);
  opacity: .3;
}
.lib-card--hero [data-pattern="communication"] .lib-hero-pattern{
  background: repeating-linear-gradient(135deg, transparent 0 14px, currentColor 14px 14.8px);
  opacity: .3;
}
.lib-card--hero [data-pattern="situational"] .lib-hero-pattern,
.lib-card--hero [data-pattern="skills"] .lib-hero-pattern,
.lib-card--hero [data-pattern="values"] .lib-hero-pattern,
.lib-card--hero [data-pattern="default"] .lib-hero-pattern{
  background-image:
    linear-gradient(currentColor .6px, transparent .6px),
    linear-gradient(90deg, currentColor .6px, transparent .6px);
  background-size: 26px 26px;
  opacity: .25;
}

.lib-hero-aurora{
  position: absolute;
  inset: -40% -10% auto auto;
  width: 80%; height: 80%;
  background: radial-gradient(circle at center, rgba(180,139,76,.45) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
  filter: blur(8px);
}

.lib-hero-vizframe{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 130px; height: 130px;
  border-radius: 26px;
  background: rgba(247,244,238,.96);
  display: grid; place-items: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 0 0 1px rgba(180,139,76,.25),
    0 32px 60px -20px rgba(0,0,0,.55),
    0 6px 14px -4px rgba(0,0,0,.35);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.lib-card--hero:hover .lib-hero-vizframe{ transform: translate(-50%, -54%) scale(1.04); }
.lib-hero-vizframe svg{
  width: 96px; height: 96px;
  stroke: var(--gold-deep); color: var(--gold-deep);
  stroke-width: 1.5;
}

.lib-hero-body{
  padding: 24px 26px 26px;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.lib-hero-eyebrow{
  font: 600 10.5px var(--font-body);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.lib-hero-star{ font-size: 12px; line-height: 1; }
.lib-hero-name{
  font-family: var(--font-serif);
  font-weight: 500; font-style: italic;
  font-size: 28px; line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--bg-soft);
  margin: 0;
}
.lib-hero-tag{
  font: 400 13.5px var(--font-body);
  color: rgba(247,244,238,.7);
  line-height: 1.5;
  margin: 4px 0 4px;
  max-width: 36ch;
}
.lib-hero-stats{
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(234,223,199,.16);
  font: 500 11.5px var(--font-body);
  color: rgba(247,244,238,.55);
  letter-spacing: -0.005em;
}
.lib-hero-stats strong{
  color: var(--bg-soft);
  font-weight: 700;
  margin-right: 3px;
}
.lib-hero-cta{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  align-self: flex-start;
  font: 600 12.5px var(--font-body);
  letter-spacing: .03em;
  color: var(--ink);
  background: var(--gold);
  padding: 10px 18px;
  border-radius: 999px;
  transition: transform .2s ease, background-color .2s ease;
  box-shadow: 0 6px 16px -4px rgba(180,139,76,.45);
}
.lib-hero-cta svg{ width: 14px; height: 14px; }
.lib-card--hero:hover .lib-hero-cta{
  background: #C99A5A;
  transform: translateX(2px);
}

/* Hero falls back to single column on tablet down */
@media (max-width: 767px){
  .lib-card--hero{
    grid-column: span 2;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .lib-hero-canvas{ aspect-ratio: 16/9; min-height: 180px; }
  .lib-hero-vizframe{ width: 108px; height: 108px; border-radius: 22px; }
  .lib-hero-vizframe svg{ width: 78px; height: 78px; }
  .lib-hero-body{ padding: 20px 20px 22px; }
  .lib-hero-name{ font-size: 24px; }
}

/* ── Settings rows ──────────────────── */
.set-section{ margin-top: 18px; }
.set-section .sec-label{
  padding: 0 calc(var(--gutter) + 6px) 8px;
  font: 500 11px var(--font-body);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.set-list{
  margin: 0 var(--gutter);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.set-row{
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  transition: background .15s ease;
}
.set-row:active{ background: var(--rule-soft); }
.set-row + .set-row{ border-top: 1px solid var(--hairline); }
.set-glyph{
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--gold-paper); border: 1px solid var(--gold-soft);
  flex-shrink: 0;
}
.set-glyph svg{ width: 15px; height: 15px; stroke: var(--gold-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.set-glyph.lav{ background: #EFEAF3; border-color: #E0D8E8; }
.set-glyph.lav svg{ stroke: #6B5980; }
.set-glyph.mint{ background: #E3EEE7; border-color: #D2E1D8; }
.set-glyph.mint svg{ stroke: #4C6B4A; }
.set-glyph.rose{ background: #F4E7E5; border-color: #E5D5D2; }
.set-glyph.rose svg{ stroke: #8A4747; }
.set-glyph.dark{ background: var(--ink); border-color: transparent; }
.set-glyph.dark svg{ stroke: var(--gold-soft); }
.set-row .label{
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.005em;
}
.set-row .label small{ display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.set-row .value{ font-size: 12px; color: var(--muted); }
.set-row.danger .label{ color: var(--danger); }

/* iOS toggle. Used as <div class="toggle" role="switch"> — `.on` class
   reflects checked state. The wrapping .set-row (or the toggle itself)
   handles the click; portal.js syncs to backend after toggle. */
.toggle{
  width: 42px; height: 26px;
  border-radius: 999px;
  background: var(--rule);
  position: relative;
  cursor: pointer;
  transition: background .2s ease;
  flex-shrink: 0;
  /* Ensure a 44×44 touch target via padding hit box on the parent row;
     the toggle itself is 42×26 visually but clickable area is the row. */
}
.toggle::after{
  content:''; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.toggle.on{ background: var(--gold); }
.toggle.on::after{ transform: translateX(16px); }
.toggle[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; pointer-events: none; }
/* Hide pulse animation when FAB is hidden — keeps GPU idle. */
.fab.hidden::before{ animation: none; }

/* Trial card */
.trial-card{
  margin: 14px var(--gutter) 0;
  background: linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-radius: 18px;
  padding: 16px;
  color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 18px -10px rgba(180,139,76,.6);
}
.trial-card::before{
  content:''; position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
}
.trial-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.trial-eb{
  font: 600 10px var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.trial-days{
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 500;
  color: #fff; letter-spacing: -0.01em;
}
.trial-days em{ font-style: italic; }
.trial-bar{ height: 6px; background: rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
.trial-bar span{ display: block; height: 100%; background: #fff; border-radius: 999px; }
.trial-meta{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  font-size: 12px; color: rgba(255,255,255,.85);
}
.trial-cta{
  background: rgba(0,0,0,.2); color: #fff;
  font: 600 11px var(--font-body); letter-spacing: -0.005em;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  cursor: pointer;
}

/* ── Detail screen header ──────────── */
.detail-hero{
  margin: 4px var(--gutter) 0;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(180,139,76,.18), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #110d09 100%);
  border-radius: 22px;
  padding: 22px 20px 18px;
  color: var(--bg-soft);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.detail-hero .eyebrow{
  font: 600 10px var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.detail-hero h2{
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--bg-soft); margin-bottom: 10px;
}
.detail-hero h2 em{ font-style: italic; color: var(--gold); }
.detail-hero .stats{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(234,223,199,.16);
}
.detail-hero .stats > div{ text-align: left; }
.detail-hero .stats .num{
  font-family: var(--font-serif); font-size: 22px; font-weight: 500;
  color: var(--bg-soft); letter-spacing: -0.02em;
}
.detail-hero .stats .num em{ font-style: italic; color: var(--gold); }
.detail-hero .stats .lbl{
  font-size: 10px; color: rgba(234,223,199,.65); margin-top: 2px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
}

.detail-actions{
  display: flex; gap: 8px; margin-top: 14px;
}
.btn-primary{
  flex: 1; background: var(--gold); color: var(--ink);
  font: 600 13px var(--font-body); letter-spacing: -0.005em;
  padding: 11px 14px; border-radius: 10px;
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; border: none;
  transition: transform .15s ease;
}
.btn-primary:active{ transform: scale(.98); }
.btn-primary svg{ width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost{
  padding: 11px 14px; border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(234,223,199,.16);
  color: var(--gold-soft);
  font: 600 13px var(--font-body); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost svg{ width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Candidate list */
.candidate-row{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s ease;
}
.candidate-row + .candidate-row{ border-top: 1px solid var(--hairline); }
.candidate-row:active{ background: var(--rule-soft); }
.cand-avatar{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold-paper);
  color: var(--gold-deep);
  display: grid; place-items: center;
  font: 600 12px var(--font-body); letter-spacing: .04em;
  flex-shrink: 0;
}
.cand-avatar.lav{ background: #EFEAF3; color: #6B5980; }
.cand-avatar.mint{ background: #E3EEE7; color: #4C6B4A; }
.cand-avatar.sky{ background: #E4ECF2; color: #3B5A78; }
.cand-avatar.rose{ background: #F4E7E5; color: #8A4747; }
.cand-body{ flex: 1; min-width: 0; }
.cand-name{ font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.cand-meta{ font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cand-type{
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 14px; color: var(--gold-deep);
  letter-spacing: -0.01em; flex-shrink: 0;
}

/* MBTI report */
.report-hero{
  margin: 4px var(--gutter) 0;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(180,139,76,.18), transparent 60%),
    linear-gradient(165deg, var(--ink) 0%, #110d09 100%);
  border-radius: 24px;
  padding: 24px 22px 22px;
  color: var(--bg-soft);
  position: relative; overflow: hidden;
  text-align: center;
}
.report-hero .eyebrow{
  font: 600 10px var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.report-hero .type{
  font-family: var(--font-serif); font-weight: 500;
  font-size: 56px; line-height: 1; letter-spacing: -0.04em;
  color: var(--gold-soft);
  margin-bottom: 8px;
}
.report-hero .nick{
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 19px; color: var(--gold);
  margin-bottom: 18px;
}
.dim-row{
  display: grid; grid-template-columns: minmax(80px, 22%) 1fr minmax(40px, max-content);
  gap: 12px;
  align-items: center;
  text-align: left;
}
.dim-row + .dim-row{ margin-top: 10px; }
.dim-row .l{
  font: 600 11px var(--font-body); color: var(--gold-soft);
  text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dim-row .r{
  font: 600 11px var(--font-body); color: rgba(234,223,199,.4);
  white-space: nowrap; text-align: left;
}
.dim-bar{
  position: relative; height: 6px;
  background: rgba(234,223,199,.12); border-radius: 999px;
  overflow: hidden;
}
.dim-bar span{
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  border-radius: 999px;
}

/* ── Sheets / overlays ─────────────── */
.scrim{
  position: absolute; inset: 0;
  background: rgba(26,22,19,.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: var(--z-scrim);
}
.scrim.open{ opacity: 1; pointer-events: auto; }

.sheet{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--paper);
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  z-index: var(--z-sheet);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  padding: 12px 0 calc(var(--safe-bottom) + 16px);
  box-shadow: 0 -8px 30px -10px rgba(0,0,0,.2);
}
.sheet.open{ transform: translateY(0); }
.sheet-handle{
  width: 40px; height: 4px;
  background: var(--rule);
  border-radius: 999px;
  margin: 0 auto 12px;
}
.sheet-head{
  padding: 0 var(--gutter) 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.sheet-head h3{
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
}
.sheet-head h3 em{ font-style: italic; color: var(--gold-deep); }
.sheet-close{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--rule-soft);
  display: grid; place-items: center;
  cursor: pointer; border: none;
}
.sheet-close svg{ width: 14px; height: 14px; stroke: var(--ink-2); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-content{ padding: 0 var(--gutter); }

/* notification rows */
.notif-row{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s ease;
  border-bottom: 1px solid var(--hairline);
}
.notif-row:last-child{ border-bottom: none; }
.notif-row:active{ background: var(--rule-soft); }
.notif-row.unread{ background: var(--gold-paper); }
.notif-glyph{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold-paper);
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--gold-soft);
}
.notif-glyph svg{ width: 16px; height: 16px; stroke: var(--gold-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notif-glyph.mint{ background: #E3EEE7; border-color: #D2E1D8; }
.notif-glyph.mint svg{ stroke: #4C6B4A; }
.notif-glyph.lav{ background: #EFEAF3; border-color: #E0D8E8; }
.notif-glyph.lav svg{ stroke: #6B5980; }
.notif-body{ flex: 1; min-width: 0; }
.notif-title{ font: 600 13px var(--font-body); color: var(--ink); letter-spacing: -0.005em; }
.notif-meta{ font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.notif-time{ font-size: 11px; color: var(--muted-2); margin-top: 4px; }

/* Search overlay */
.search-overlay{
  position: absolute; inset: 0;
  background: rgba(247,244,238,.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: var(--z-search);
  padding: calc(var(--safe-top) + 60px) var(--gutter) 20px;
  /* Fade rather than snap so it matches sheet/modal feel. */
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
  overflow-y: auto;
}
.search-overlay.open{ opacity: 1; visibility: visible; transition: opacity .2s ease; }
.search-bar{
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px;
}
.search-input{
  flex: 1;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.search-input svg{ width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.search-input input{
  flex: 1; background: transparent; border: none; outline: none;
  font: 500 14px var(--font-body); color: var(--ink); letter-spacing: -0.005em;
}
.search-input input::placeholder{ color: var(--muted); }
.search-cancel{
  font: 500 14px var(--font-body); color: var(--gold-deep);
  background: none; border: none; cursor: pointer;
  letter-spacing: -0.005em;
}
.search-section{ margin-top: 24px; }
.search-section .lbl{
  font: 500 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; padding: 0 4px;
}
.search-recent{
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 4px;
}
.search-recent .tag{
  padding: 6px 11px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--rule);
  font: 500 12px var(--font-body); color: var(--ink-2);
  cursor: pointer; letter-spacing: -0.005em;
}

/* Toast */
.toast{
  position: absolute;
  top: calc(var(--safe-top) + 60px);
  left: 50%;
  transform: translate(-50%, -120%);
  background: var(--ink); color: var(--gold-soft);
  padding: 10px 16px;
  border-radius: 14px;
  font: 600 12.5px var(--font-body); letter-spacing: -0.005em;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.4);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
  z-index: var(--z-toast);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }
.toast svg{ width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* New assessment wizard */
.wizard-step{ padding: 4px 0 8px; }
.wizard-eb{
  font: 500 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.wizard-h{
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 14px;
}
.wizard-h em{ font-style: italic; color: var(--gold-deep); }
.test-pick{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.test-pick + .test-pick{ margin-top: 8px; }
.test-pick.selected{ border-color: var(--gold); background: var(--gold-paper); }
.test-pick:active{ transform: scale(.99); }
.tp-glyph{
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--gold-paper); border: 1px solid var(--gold-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.tp-glyph.lav{ background: #EFEAF3; border-color: #E0D8E8; }
.tp-glyph.mint{ background: #E3EEE7; border-color: #D2E1D8; }
.tp-glyph.sky{ background: #E4ECF2; border-color: #D2DDE6; }
.tp-glyph svg{ width: 18px; height: 18px; stroke: var(--gold-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-glyph.lav svg{ stroke: #6B5980; }
.tp-glyph.mint svg{ stroke: #4C6B4A; }
.tp-glyph.sky svg{ stroke: #3B5A78; }
.tp-body{ flex: 1; min-width: 0; }
.tp-name{ font: 600 13.5px var(--font-body); color: var(--ink); letter-spacing: -0.01em; }
.tp-meta{ font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tp-check{
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all .15s ease;
}
.test-pick.selected .tp-check{
  background: var(--gold); border-color: var(--gold);
}
.test-pick.selected .tp-check svg{
  width: 12px; height: 12px;
  stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.test-pick:not(.selected) .tp-check svg{ display: none; }

.sheet-foot{
  position: sticky; bottom: 0;
  padding: 14px var(--gutter) 4px;
  background: linear-gradient(to top, var(--paper) 70%, transparent);
}
.sheet-foot button{
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--gold), var(--gold-deep));
  color: #fff;
  font: 600 14px var(--font-body); letter-spacing: -0.005em;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .15s ease;
  box-shadow: 0 8px 20px -8px rgba(180,139,76,.5);
}
.sheet-foot button:active{ transform: scale(.98); }
.sheet-foot button svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Account sheet */
.acct-card{
  background: linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 100%);
  border-radius: 18px;
  padding: 18px;
  color: var(--bg-soft);
  margin-bottom: 12px;
}
.acct-row{
  display: flex; align-items: center; gap: 12px;
}
.acct-row .av{
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: grid; place-items: center;
  font: 600 16px var(--font-body); letter-spacing: .04em;
  flex-shrink: 0;
}
.acct-row .info{ flex: 1; }
.acct-row .name{ font-family: var(--font-serif); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--bg-soft); }
.acct-row .name em{ font-style: italic; color: var(--gold); }
.acct-row .mail{ font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }

/* Empty state */
.empty{
  text-align: center; padding: 30px 20px;
  color: var(--muted);
}
.empty .glyph{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gold-paper);
  border: 1px solid var(--gold-soft);
  margin: 0 auto 12px;
  display: grid; place-items: center;
}
.empty .glyph svg{ width: 22px; height: 22px; stroke: var(--gold-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty p{ font: 500 13px var(--font-body); color: var(--ink-2); margin-bottom: 4px; }
.empty small{ font-size: 11.5px; color: var(--muted); }

/* Hide tabbar on detail */
/* When the user enters a detail screen, slide the tabbar off and disable
   pointer + keyboard access. Without pointer-events:none, the offscreen
   bar is still clickable on devices with edge-tracking and remains
   focusable for keyboard tab order. */
.app.detail-view .tabbar{
  transform: translateY(100%);
  transition: transform .25s ease, visibility 0s linear .25s;
  visibility: hidden;
  pointer-events: none;
}
.app.detail-view .tabbar .tab{ pointer-events: none; }
.app.detail-view .fab{ opacity: 0; pointer-events: none; transform: scale(.6); }

/* Body lock when sheet open */
.app.sheet-open .screens{ overflow: hidden; }

/* ── Form fields ────────────── */
.field{ margin: 14px 0; }
.field label{ display: block; font: 500 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea, .field select{
  width: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px;
  font: 500 15px var(--font-body); color: var(--ink); background: var(--paper);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus{ border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.field textarea{ min-height: 96px; resize: none; font-family: var(--font-body); }
.field .hint{ font-size: 12px; color: var(--muted); margin-top: 6px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Big primary action ─────── */
.btn-big{
  width: 100%; padding: 16px 18px; border: none; border-radius: 16px;
  background: var(--ink); color: var(--bg); font: 600 13px var(--font-body);
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 12px 28px -10px rgba(26,22,19,.45);
}
.btn-big.gold{ background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: #fff; }
.btn-big.ghost{ background: var(--paper); color: var(--ink); border: 1px solid var(--rule); box-shadow: none; }
.btn-big.danger{ background: var(--danger); color: #fff; box-shadow: 0 10px 24px -10px rgba(142,58,58,.45); }
.btn-big svg{ width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

.btn-row{ display: flex; gap: 10px; margin: 14px 0; }
.btn-row .btn-big{ flex: 1; }

/* ════════════════════════════════════════════════════════════════
   Pricing / Upgrade page (v3.6.5 — world-class B2B SaaS layout)
   - Editorial hero header with italic serif "plan"
   - Pill toggle for Monthly ↔ Annual with live price swap
   - 3-column grid (single column on mobile)
   - Featured "Most popular" plan with gold ribbon + dark canvas
   - Trust signal strip + Enterprise call-out card
   - Confirmation modal styled for actual upgrades
   ════════════════════════════════════════════════════════════════ */

/* Legacy .tier-* selectors retained as light shims for any other view
   that still uses them. */
.tier{ background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 20px; margin: 12px 0; position: relative; }
.tier.current{ border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.tier-eb{ font: 500 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.tier-name{ font: 600 26px var(--font-serif); margin-top: 6px; }
.tier-price{ font: 600 32px var(--font-serif); margin-top: 8px; }
.tier-price small{ font-size: 13px; color: var(--muted); font-weight: 400; }
.tier-feats{ margin: 14px 0; padding: 0; list-style: none; }
.tier-feats li{ display: flex; gap: 10px; align-items: center; padding: 7px 0; font-size: 13.5px; color: var(--ink-2); }
.tier-feats li svg{ width: 14px; height: 14px; stroke: var(--gold-deep); flex: 0 0 14px; }
.tier-cta{ display: block; width: 100%; padding: 13px; border: 1px solid var(--rule); background: var(--bg-soft); border-radius: 12px; font: 600 14px var(--font-body); text-align: center; cursor: pointer; }
.tier-flag{ position: absolute; top: -10px; right: 16px; background: var(--gold); color: #fff; padding: 4px 10px; border-radius: 20px; font: 600 10.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; }

/* ── Upgrade hero ─────────────────────────────────────────────── */
.upgrade-hero{
  padding: 16px var(--gutter) 18px;
  text-align: center;
}
.upgrade-eyebrow{
  font: 600 10.5px var(--font-body);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.upgrade-eyebrow-dash{ width: 24px; height: 1px; background: var(--gold); }
.upgrade-title{
  font-family: var(--font-serif);
  font-weight: 500; font-size: 40px;
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink);
  /* Override WordPress themes (nexros/Elementor) that force capitalize on h1 */
  text-transform: none !important;
}
.upgrade-title em{
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 500;
  text-transform: none !important;
}
.upgrade-lede{
  margin: 12px auto 0;
  max-width: 540px;
  font: 400 14.5px var(--font-body);
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: -0.005em;
}

/* Billing cycle toggle */
.upgrade-toggle{
  display: inline-flex;
  margin: 22px auto 4px;
  padding: 4px;
  background: var(--rule-soft);
  border-radius: 999px;
  position: relative;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
.upgrade-toggle-btn{
  appearance: none; background: transparent; border: 0;
  font: 600 13px var(--font-body);
  color: var(--ink-2);
  letter-spacing: -0.005em;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s ease;
}
.upgrade-toggle-btn:hover:not(.active){ color: var(--ink); }
.upgrade-toggle-btn.active{
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26,22,19,.08), 0 0 0 1px rgba(26,22,19,.04);
}
.upgrade-toggle-save{
  font: 700 9.5px var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--gold-paper);
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
}
.upgrade-toggle-btn.active .upgrade-toggle-save{
  background: linear-gradient(135deg, var(--gold) 0%, #C99A5A 100%);
  color: var(--ink);
  border-color: transparent;
}

/* ── Plans grid ──────────────────────────────────────────────── */
.upgrade-grid{
  display: grid;
  gap: 14px;
  padding: 22px var(--gutter) 0;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 768px){
  .upgrade-grid{
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 20px;
    padding-top: 30px;
  }
}

/* ── Plan card ───────────────────────────────────────────────── */
.plan-card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 28px 24px 24px;
  box-shadow: 0 1px 2px rgba(26,22,19,.04);
  transition: transform .2s cubic-bezier(.2,.8,.2,1),
              box-shadow .2s ease,
              border-color .2s ease;
}
.plan-card:hover{
  transform: translateY(-3px);
  border-color: var(--gold-soft);
  box-shadow:
    0 1px 2px rgba(26,22,19,.04),
    0 0 0 1px rgba(180,139,76,.2),
    0 24px 48px -24px rgba(26,22,19,.18);
}

/* Featured plan — dark editorial canvas with gold accents */
.plan-card--featured{
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(180,139,76,.22) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(234,223,199,.08) 0%, transparent 70%),
    linear-gradient(170deg, #1d1812 0%, #110d09 100%);
  color: var(--bg-soft);
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(26,22,19,.08),
    0 28px 56px -24px rgba(26,22,19,.4);
}
@media (min-width: 768px){
  .plan-card--featured{
    /* Subtle lift, no transform on hover so it doesn't pop */
    transform: translateY(-8px);
    padding-top: 32px;
  }
  .plan-card--featured:hover{ transform: translateY(-12px); }
}

/* Current plan state */
.plan-card--current{
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success), 0 1px 2px rgba(26,22,19,.04);
}
.plan-card--current:hover{ transform: none; }

/* Ribbon */
.plan-ribbon{
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 10px var(--font-body);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold) 0%, #D9A86A 100%);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow:
    0 6px 14px -4px rgba(180,139,76,.55),
    0 0 0 4px rgba(247,244,238,.95);
  white-space: nowrap;
}
.plan-ribbon svg{ width: 11px; height: 11px; }

.plan-currentflag{
  position: absolute;
  top: -10px; right: 18px;
  font: 700 9.5px var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  background: var(--success);
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
}
/* When the card has BOTH the "Most popular" ribbon AND the
   "Current plan" flag, the ribbon sits centred at the top and the
   current-plan chip would overlap it. Stack the current-plan chip
   below the ribbon so they don't collide. */
.plan-card--featured.plan-card--current .plan-currentflag{
  top: 18px; right: 18px;
}

/* Plan head */
.plan-head{ margin-bottom: 20px; }
.plan-tier{
  display: inline-flex; align-items: center;
  font: 700 10.5px var(--font-body);
  letter-spacing: .18em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.plan-tier--free   { background: var(--rule-soft);  color: var(--ink-2); }
.plan-tier--starter{ background: var(--gold-paper); color: var(--gold-deep); border: 1px solid var(--gold-soft); }
.plan-tier--growth { background: rgba(247,244,238,.16); color: var(--gold); border: 1px solid rgba(180,139,76,.4); }
.plan-card--featured .plan-tier{
  background: rgba(180,139,76,.18);
  color: var(--gold);
  border: 1px solid rgba(180,139,76,.35);
}

/* Price block */
.plan-price{
  margin: 18px 0 4px;
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px;
}
.plan-price-amount{
  font-family: var(--font-serif);
  font-weight: 600; font-size: 44px;
  line-height: 1; letter-spacing: -0.025em;
  color: inherit;
}
.plan-card--featured .plan-price-amount{ color: var(--bg-soft); }
.plan-price-period{
  font: 500 14px var(--font-body);
  color: var(--muted);
  letter-spacing: -0.005em;
}
.plan-card--featured .plan-price-period{ color: rgba(247,244,238,.6); }

.plan-price-billing{
  font: 500 11.5px var(--font-body);
  letter-spacing: .04em;
  color: var(--muted-2);
  margin-top: 6px;
  min-height: 1.4em;
}
.plan-card--featured .plan-price-billing{ color: rgba(247,244,238,.5); }

.plan-tagline{
  margin-top: 14px;
  font: 400 13.5px var(--font-body);
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.plan-card--featured .plan-tagline{ color: rgba(247,244,238,.7); }

/* CTA */
.plan-cta{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px 18px;
  font: 600 13.5px var(--font-body);
  letter-spacing: -0.005em;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  transition: transform .15s ease,
              background-color .15s ease,
              border-color .15s ease,
              box-shadow .15s ease,
              color .15s ease;
  -webkit-appearance: none; appearance: none;
}
.plan-cta:hover{
  background: var(--bg-soft);
  border-color: var(--gold-soft);
}
.plan-cta:active{ transform: scale(.985); }
.plan-cta-arrow{
  width: 14px; height: 14px;
  transition: transform .2s ease;
}
.plan-cta:hover .plan-cta-arrow{ transform: translateX(3px); }

/* Primary CTA on featured card */
.plan-cta--primary{
  background: var(--gold);
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 8px 22px -6px rgba(180,139,76,.55);
}
.plan-cta--primary:hover{
  background: #D9A86A;
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 12px 28px -8px rgba(180,139,76,.65);
}
.plan-card--featured .plan-cta{
  background: var(--gold);
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 10px 24px -8px rgba(180,139,76,.55);
}
.plan-card--featured .plan-cta:hover{ background: #D9A86A; }

/* Disabled / current state */
.plan-cta--current,
.plan-cta[disabled]{
  background: var(--rule-soft);
  border-color: var(--rule);
  color: var(--muted);
  cursor: default;
  box-shadow: none;
}
.plan-cta--current:hover,
.plan-cta[disabled]:hover{ background: var(--rule-soft); border-color: var(--rule); transform: none; }

/* Feature list */
.plan-feats{
  list-style: none; padding: 22px 0 0;
  margin: 22px 0 0;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 11px;
}
.plan-card--featured .plan-feats{
  border-top-color: rgba(234,223,199,.16);
}
.plan-feat{
  display: flex; align-items: flex-start; gap: 12px;
  font: 500 13.5px var(--font-body);
  color: var(--ink-2);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.plan-card--featured .plan-feat{ color: rgba(247,244,238,.88); }
.plan-feat-icon{
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold-paper);
  display: grid; place-items: center;
  margin-top: 1px;
  color: var(--gold-deep);
}
.plan-card--featured .plan-feat-icon{
  background: rgba(180,139,76,.25);
  color: var(--gold);
}
.plan-feat-icon svg{ width: 11px; height: 11px; stroke-width: 2.6; }
.plan-feat--hi .plan-feat-text{ color: var(--ink); font-weight: 600; }
.plan-card--featured .plan-feat--hi .plan-feat-text{ color: var(--bg-soft); font-weight: 600; }
.plan-feat--muted{ opacity: .68; }
.plan-feat--muted .plan-feat-icon{ background: var(--rule-soft); color: var(--muted); }

/* ── Trust signal strip ──────────────────────────────────────── */
.upgrade-trust{
  margin: 32px var(--gutter) 0;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 12px 30px;
  max-width: 1100px;
}
@media (min-width: 768px){
  .upgrade-trust{
    margin-left: auto; margin-right: auto;
  }
}
.trust-item{
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12.5px var(--font-body);
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.trust-item svg{
  width: 16px; height: 16px;
  stroke: var(--gold-deep); color: var(--gold-deep);
}

/* ── Enterprise card ─────────────────────────────────────────── */
.upgrade-enterprise{
  position: relative; overflow: hidden;
  margin: 18px var(--gutter) 8px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(180,139,76,.18) 0%, transparent 60%),
    linear-gradient(170deg, #1f2a44 0%, #0e1628 100%);
  color: rgba(247,244,238,.92);
  border-radius: 20px;
  padding: 28px 28px;
  display: flex; flex-direction: column;
  gap: 22px;
  max-width: 1100px;
}
@media (min-width: 768px){
  .upgrade-enterprise{
    flex-direction: row; align-items: center; justify-content: space-between;
    margin: 18px auto 8px;
    padding: 32px 36px;
  }
}
.upgrade-enterprise-glow{
  position: absolute;
  top: -60%; right: -30%;
  width: 80%; height: 200%;
  background: radial-gradient(circle at center, rgba(180,139,76,.22) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(20px);
}
.upgrade-enterprise-content{ position: relative; z-index: 1; max-width: 600px; }
.upgrade-enterprise-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 10.5px var(--font-body);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.upgrade-enterprise-eyebrow svg{ width: 14px; height: 14px; }
.upgrade-enterprise h3{
  font-family: var(--font-serif);
  font-weight: 500; font-size: 24px;
  line-height: 1.15; letter-spacing: -0.015em;
  color: var(--bg-soft);
  margin-bottom: 6px;
}
.upgrade-enterprise p{
  font: 400 13.5px var(--font-body);
  line-height: 1.55;
  color: rgba(247,244,238,.65);
  letter-spacing: -0.005em;
}
.upgrade-enterprise-cta{
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  background: var(--gold);
  color: var(--ink);
  font: 600 13px var(--font-body);
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
  box-shadow: 0 8px 22px -6px rgba(180,139,76,.55);
}
.upgrade-enterprise-cta:hover{ background: #D9A86A; transform: translateX(2px); }
.upgrade-enterprise-cta svg{ width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════
   Upgrade-confirmation modal
   ════════════════════════════════════════════════════════════════ */
.upgrade-modal{
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: 22px;
  z-index: var(--z-modal, 1000);
}
.upgrade-modal.open{ display: flex; }
.upgrade-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(26,22,19,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: upgradeModalFadeIn .25s ease;
}
@keyframes upgradeModalFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.upgrade-modal-dialog{
  position: relative;
  background: var(--paper);
  border-radius: 22px;
  padding: 32px 28px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 24px 56px -12px rgba(26,22,19,.45),
    0 0 0 1px rgba(26,22,19,.06);
  animation: upgradeModalRise .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes upgradeModalRise{
  from{ opacity: 0; transform: translateY(20px) scale(.97); }
  to  { opacity: 1; transform: none; }
}
.upgrade-modal-close{
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--muted);
  transition: background-color .15s ease, color .15s ease;
}
.upgrade-modal-close:hover{ background: var(--rule-soft); color: var(--ink); }
.upgrade-modal-close svg{ width: 18px; height: 18px; }
.upgrade-modal-icon{
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold) 0%, #D9A86A 100%);
  display: grid; place-items: center;
  color: var(--ink);
  box-shadow: 0 12px 28px -8px rgba(180,139,76,.55);
}
.upgrade-modal-icon svg{ width: 28px; height: 28px; }
.upgrade-modal-eyebrow{
  font: 600 10.5px var(--font-body);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.upgrade-modal-title{
  font-family: var(--font-serif);
  font-weight: 500; font-size: 26px;
  line-height: 1.15; letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 12px;
  /* WordPress themes (nexros/Elementor) force capitalize on headings;
     override so "Welcome to Growth" doesn't become "Welcome To Growth". */
  text-transform: none !important;
}
.upgrade-modal-title span{ text-transform: none !important; }
.upgrade-modal-eyebrow{ text-transform: uppercase !important; }
.upgrade-modal-summary{
  font: 400 14px var(--font-body);
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: -0.005em;
  max-width: 36ch;
  margin: 0 auto 14px;
}
.upgrade-modal-summary strong{
  color: var(--ink);
  font-weight: 700;
}
.upgrade-modal-meta{
  display: inline-flex; align-items: center;
  font: 500 11.5px var(--font-body);
  letter-spacing: .04em;
  color: var(--muted-2);
  background: var(--rule-soft);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.upgrade-modal-meta-dot{
  width: 3px; height: 3px;
  background: var(--muted-2);
  border-radius: 50%;
  margin: 0 10px;
}
.upgrade-modal-actions{
  display: flex; gap: 10px;
  margin-top: 6px;
}
.upgrade-modal-btn{
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  font: 600 13.5px var(--font-body);
  letter-spacing: -0.005em;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  -webkit-appearance: none; appearance: none;
  /* Override WP theme/Elementor button rules */
  text-transform: none !important;
  white-space: nowrap;
  min-height: 0;
  line-height: 1.2;
}
.upgrade-modal-btn-label{ text-transform: none !important; }
.upgrade-modal-btn--ghost{
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-2);
}
.upgrade-modal-btn--ghost:hover{ background: var(--rule-soft); border-color: var(--gold-soft); }
.upgrade-modal-btn--primary{
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--bg-soft);
  box-shadow: 0 8px 22px -8px rgba(26,22,19,.55);
}
.upgrade-modal-btn--primary:hover{ background: #2a221a; }
.upgrade-modal-btn--primary[aria-busy="true"]{
  cursor: wait;
  background: var(--muted);
}
.upgrade-modal-btn--primary[aria-busy="true"] .upgrade-modal-btn-label::after{
  content: '…';
}
.upgrade-modal-btn svg{ width: 14px; height: 14px; }
.upgrade-modal-fineprint{
  font: 400 11.5px var(--font-body);
  color: var(--muted-2);
  line-height: 1.5;
  margin-top: 16px;
  letter-spacing: -0.005em;
}

/* Success state — after confirming an upgrade.
   Uses !important on display:none so the rules survive Elementor /
   nexros button-group reset rules with higher specificity. */
.upgrade-modal-dialog--success .upgrade-modal-icon{
  background: linear-gradient(135deg, var(--success) 0%, #6F8B6D 100%) !important;
  color: #fff !important;
}
.upgrade-modal-dialog--success .upgrade-modal-eyebrow{ color: var(--success) !important; }
.upgrade-modal-dialog--success .upgrade-modal-actions,
.upgrade-modal-dialog--success .upgrade-modal-meta,
.upgrade-modal-dialog--success .upgrade-modal-fineprint{ display: none !important; }
.upgrade-modal-dialog--success .upgrade-modal-summary{ margin-bottom: 8px; }
.upgrade-modal-dialog--success .upgrade-modal-done{ display: inline-flex !important; }
.upgrade-modal-done{
  display: none;
  margin-top: 18px;
  align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--success);
  color: #fff;
  font: 600 13px var(--font-body);
  border-radius: 999px;
  cursor: pointer;
  border: 0;
  box-shadow: 0 8px 22px -8px rgba(76,107,74,.55);
  text-transform: none !important;
  white-space: nowrap;
}
.upgrade-modal-done:hover{ background: #3F5C42; }
.upgrade-modal-done svg{ width: 14px; height: 14px; }

/* Tiny screens — stack modal actions */
@media (max-width: 379px){
  .upgrade-modal-actions{ flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════
   Current plan card (v3.6.6 — billing overview screen)
   Dark editorial canvas with PROPER text contrast — replaces the
   legacy .tier.dark which had near-invisible cream-on-cream labels.
   ════════════════════════════════════════════════════════════════ */
.current-plan{
  position: relative;
  margin: 0 var(--gutter);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(180,139,76,.22) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(234,223,199,.08) 0%, transparent 70%),
    linear-gradient(170deg, #1d1812 0%, #110d09 100%);
  color: var(--bg-soft);
  box-shadow:
    0 1px 2px rgba(26,22,19,.08),
    0 24px 48px -24px rgba(26,22,19,.4);
}
.current-plan-canvas{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(234,223,199,.07) 1px, transparent 1.6px);
  background-size: 24px 24px;
  opacity: .6;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 80%);
}
.current-plan-content{
  position: relative;
  padding: 26px 26px 22px;
  z-index: 1;
}
.current-plan-row{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.current-plan-eyebrow{
  font: 600 10.5px var(--font-body);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  text-transform: uppercase !important;
}
.current-plan-name{
  font-family: var(--font-serif);
  font-weight: 500; font-size: 28px;
  line-height: 1.1; letter-spacing: -0.018em;
  color: var(--bg-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  text-transform: none !important;
}
.current-plan-trial-badge{
  display: inline-flex; align-items: center;
  font: 700 9.5px var(--font-body);
  letter-spacing: .18em; text-transform: uppercase;
  background: rgba(180,139,76,.25);
  color: var(--gold);
  border: 1px solid rgba(180,139,76,.4);
  padding: 4px 10px;
  border-radius: 999px;
  vertical-align: middle;
  position: relative; top: -2px;
}
.current-plan-price{
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.current-plan-price-amount{
  font-family: var(--font-serif);
  font-weight: 600; font-size: 32px;
  line-height: 1; letter-spacing: -0.022em;
  color: var(--bg-soft);
}
.current-plan-price-period{
  display: block;
  font: 500 12px var(--font-body);
  color: rgba(247,244,238,.55);
  margin-top: 4px;
  letter-spacing: -0.005em;
}
.current-plan-meta{
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font: 500 12.5px var(--font-body);
  color: rgba(247,244,238,.72);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.current-plan-meta strong{
  color: var(--bg-soft);
  font-weight: 700;
}
.current-plan-bar{
  height: 6px;
  background: rgba(234,223,199,.16);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 22px;
}
.current-plan-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);
  border-radius: 999px;
  transition: width .3s ease;
}
.current-plan-actions{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(234,223,199,.16);
}
.current-plan-cta{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold);
  color: var(--ink);
  font: 600 13px var(--font-body);
  letter-spacing: -0.005em;
  padding: 11px 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
  box-shadow: 0 8px 22px -6px rgba(180,139,76,.55);
}
.current-plan-cta:hover{ background: #D9A86A; transform: translateX(2px); }
.current-plan-cta svg{ width: 14px; height: 14px; }
.current-plan-secondary{
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12.5px var(--font-body);
  color: rgba(247,244,238,.72);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 8px 6px;
  transition: color .15s ease;
}
.current-plan-secondary:hover{ color: var(--gold); }
.current-plan-secondary svg{ width: 12px; height: 12px; }

@media (max-width: 479px){
  .current-plan-row{ flex-direction: column; }
  .current-plan-price{ text-align: left; }
  .current-plan-actions{ flex-direction: column; align-items: stretch; }
  .current-plan-cta{ justify-content: center; }
  .current-plan-secondary{ justify-content: center; }
}

/* ── Invoice row ────────────── */
.inv-row{ display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; }
.inv-row:last-child{ border: 0; }
.inv-num{ font: 500 11px var(--font-body); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.inv-date{ font: 500 14px var(--font-body); color: var(--ink); margin-top: 2px; }
.inv-amt{ font: 600 15px var(--font-serif); color: var(--ink); }
.inv-status{ padding: 3px 9px; border-radius: 20px; background: var(--success-bg); color: var(--success); font: 600 10.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.inv-status.pending{ background: var(--warn-bg); color: var(--warn); }

/* ── Code / token block ─────── */
.code-block{
  background: var(--navy-deep); color: #EAE0CC; border-radius: 14px;
  padding: 14px 88px 14px 16px; /* reserve room for the .copy button */
  font: 500 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all; line-height: 1.55; position: relative;
}
.code-block .copy{ position: absolute; top: 10px; right: 10px; background: rgba(234,223,199,.12); color: var(--gold-soft); border: none; padding: 5px 10px; border-radius: 8px; font: 600 11px var(--font-body); letter-spacing: .08em; cursor: pointer; }
.code-block .copy:hover{ background: rgba(234,223,199,.22); }

/* ── Big stat block ─────────── */
.stat-block{
  background: var(--paper); border: 1px solid var(--rule); border-radius: 18px;
  padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 12px 0;
}
.stat-block .cell{ }
.stat-block .num{ font: 600 30px var(--font-serif); color: var(--ink); }
.stat-block .num em{ font-style: italic; font-weight: 500; color: var(--gold-deep); }
.stat-block .lab{ font: 500 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.stat-block .delta{ font: 600 12px var(--font-body); color: var(--success); margin-top: 2px; }
.stat-block .delta.down{ color: var(--danger); }

/* ── Choice rows (radio list) ── */
.choice{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; }
.choice:last-child{ border: 0; }
.choice .body{ flex: 1; min-width: 0; }
.choice .name{ font: 500 14.5px var(--font-body); color: var(--ink); }
.choice .desc{ font: 400 12.5px var(--font-body); color: var(--muted); margin-top: 2px; }
.choice .radio{ width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule); flex: 0 0 20px; display: grid; place-items: center; }
.choice.selected .radio{ border-color: var(--gold); }
.choice.selected .radio::after{ content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }

/* ── Stepper ────────────────── */
.stepper{ display: flex; align-items: center; gap: 8px; margin: 16px 0; }
.step{ flex: 1; height: 4px; border-radius: 2px; background: var(--rule-soft); position: relative; overflow: hidden; }
.step.active{ background: var(--gold); }
.step.done{ background: var(--gold-deep); }

/* ── Person row (team) ──────── */
.team-row{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; }
.team-row:last-child{ border: 0; }
.team-row .av{ width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-paper); color: var(--gold-deep); font: 600 13px var(--font-body); flex: 0 0 42px; }
.team-row .av.lav{ background: #EEE7F4; color: #5A4773; }
.team-row .av.mint{ background: #E2EEDF; color: #4C6B4A; }
.team-row .av.sky{ background: #DDE8F0; color: #2C4A66; }
.team-row .av.rose{ background: #F5E2DE; color: var(--danger); }
.team-row .body{ flex: 1; min-width: 0; }
.team-row .name{ font: 500 14.5px var(--font-body); color: var(--ink); }
.team-row .meta{ font: 400 12.5px var(--font-body); color: var(--muted); margin-top: 2px; }
.team-row .role{ padding: 4px 10px; border-radius: 20px; background: var(--gold-paper); color: var(--gold-deep); font: 600 10.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.team-row .role.viewer{ background: var(--rule-soft); color: var(--muted); }
.team-row .role.member{ background: #DDE8F0; color: #2C4A66; }

/* ── Integration tile ───────── */
.integ-tile{ display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; margin-bottom: 10px; cursor: pointer; }
.integ-icon{ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 700 16px var(--font-body); }
.integ-icon.slack{ background: #FBF6EA; color: #4A154B; }
.integ-icon.workday{ background: #E0EAF6; color: #003c71; }
.integ-icon.bamboo{ background: #E2EEDF; color: #4C6B4A; }
.integ-icon.zoom{ background: #DDE8F0; color: #2C4A66; }
.integ-icon.greenhouse{ background: var(--success-bg); color: var(--success); }
.integ-icon.zapier{ background: #FFE8DC; color: #8A4A1F; }
.integ-name{ font: 500 14.5px var(--font-body); color: var(--ink); }
.integ-meta{ font: 400 12.5px var(--font-body); color: var(--muted); margin-top: 2px; }
.integ-status{ padding: 4px 10px; border-radius: 20px; background: var(--success-bg); color: var(--success); font: 600 10.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.integ-status.off{ background: var(--rule-soft); color: var(--muted); }

/* ── Question card (sample test) ─ */
.q-card{ background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 22px; margin: 12px 0; }
.q-num{ font: 500 11px var(--font-body); letter-spacing: .14em; color: var(--gold-deep); text-transform: uppercase; }
.q-prompt{ font: 500 18px var(--font-serif); color: var(--ink); margin: 8px 0 18px; line-height: 1.4; }
.q-opt{ padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 10px; cursor: pointer; font: 500 14px var(--font-body); display: flex; gap: 12px; align-items: center; transition: all .15s; }
/* Hover only on devices that actually have hover — on touch this used
   to leave a "stuck" gold-soft border after tapping. */
@media (hover: hover) {
  .q-opt:hover{ border-color: var(--gold-soft); }
}
.q-opt:active{ border-color: var(--gold-soft); }
.q-opt.selected{ border-color: var(--gold); background: var(--gold-paper); }
.q-opt .ix{ width: 24px; height: 24px; border-radius: 50%; background: var(--rule-soft); display: grid; place-items: center; font: 600 11px var(--font-body); color: var(--muted); flex: 0 0 24px; }
.q-opt.selected .ix{ background: var(--gold); color: #fff; }

/* ── Article body ───────────── */
.article{ padding: 0 var(--gutter); }
.article h2{ font: 500 22px var(--font-serif); color: var(--ink); margin: 22px 0 8px; }
.article h2 em{ font-style: italic; color: var(--gold-deep); font-weight: 500; }
.article p{ font: 400 14.5px var(--font-body); color: var(--ink-2); line-height: 1.65; margin-bottom: 12px; }
.article ul{ list-style: none; padding-left: 0; }
.article ul li{ position: relative; padding-left: 18px; margin-bottom: 6px; font: 400 14px var(--font-body); color: var(--ink-2); line-height: 1.55; }
.article ul li::before{ content: '·'; position: absolute; left: 4px; color: var(--gold-deep); font-weight: 700; }
.article blockquote{ border-left: 3px solid var(--gold); padding-left: 14px; margin: 16px 0; font: 500 italic 15px var(--font-serif); color: var(--ink-2); }

/* ── Donut chart (analytics) ── */
.donut{ position: relative; width: 140px; height: 140px; margin: 0 auto; }
.donut svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle{ fill: none; stroke-width: 14; }
.donut .track{ stroke: var(--rule-soft); }
.donut .arc{ stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.donut .center{ position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut .center b{ font: 600 32px var(--font-serif); color: var(--ink); }
.donut .center small{ font: 500 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 2px; }

/* ── Bar list ───────────────── */
.bar-list{ background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 16px; margin: 12px 0; }
.bar-item{ margin-bottom: 14px; }
.bar-item:last-child{ margin: 0; }
.bar-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.bar-name{ font: 500 13px var(--font-body); color: var(--ink); }
.bar-pct{ font: 600 12.5px var(--font-serif); color: var(--gold-deep); }
.bar-track{ height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.bar-fill{ height: 100%; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%); border-radius: 3px; }

/* ── Activity row ───────────── */
.act-row{ display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.act-row:last-child{ border: 0; }
.act-dot{ width: 36px; height: 36px; border-radius: 50%; background: var(--gold-paper); color: var(--gold-deep); display: grid; place-items: center; flex: 0 0 36px; }
.act-dot svg{ width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.act-dot.green{ background: var(--success-bg); color: var(--success); }
.act-dot.lav{ background: #EEE7F4; color: #5A4773; }
.act-dot.rose{ background: var(--danger-bg); color: var(--danger); }
.act-text{ font: 500 13.5px var(--font-body); color: var(--ink); line-height: 1.45; }
.act-text b{ font-weight: 600; }
.act-text em{ color: var(--gold-deep); font-style: italic; font-weight: 500; }
.act-time{ font: 400 11.5px var(--font-body); color: var(--muted); margin-top: 3px; }

/* ── Compact key-value rows ── */
.kv-list{ background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; margin: 12px 0; }
.kv-row{ display: flex; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--rule-soft); font: 500 14px var(--font-body); }
.kv-row:last-child{ border: 0; }
.kv-row .k{ color: var(--muted); }
.kv-row .v{ color: var(--ink); }
.kv-row .v em{ font-style: italic; color: var(--gold-deep); font-weight: 500; }

/* ── Color swatch (appearance) ── */
.swatch-row{ display: flex; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.swatch{ width: 56px; height: 56px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.swatch.gold{ background: var(--gold); }
.swatch.navy{ background: var(--navy); }
.swatch.olive{ background: #6B7A4A; }
.swatch.rose{ background: #B86A6A; }
.swatch.violet{ background: #6A5783; }
.swatch.selected{ border-color: var(--ink); }

/* ── Status pill ────────────── */
.pill{ padding: 4px 10px; border-radius: 20px; background: var(--success-bg); color: var(--success); font: 600 10.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.pill.warn{ background: var(--warn-bg); color: var(--warn); }
.pill.muted{ background: var(--rule-soft); color: var(--muted); }
.pill.gold{ background: var(--gold-paper); color: var(--gold-deep); }

/* Phone-frame collapse for mobile. Bumped from 380px → 480px so iPhone
   12/13/14 (390px), iPhone SE/8 (375px), Pixel 6 (412px) all collapse
   to full-bleed. 100dvh respects the iOS Safari toolbar collapse. */
@media (max-width: 480px){
  .phone{ width: 100%; border-radius: 0; height: 100dvh; box-shadow: none; }
  .phone::before{ display: none; }
  .stage{ padding: 0; background: var(--bg); }
  .stage-meta{ display: none; }
  .app{ height: 100dvh; }
}

/* ═══ v3.5 SaaS Polish ═══════════════════════════════════════════════
   Additive layer on top of v3.4 editorial design system. Adds the UX
   states a B2B SaaS portal needs: empty states, skeletons, full button
   hierarchy, accessible form inputs, iOS-style toggles/checkboxes,
   tabs, modal dialogs, pagination, toast variants, focus-visible rings,
   reduced-motion & high-contrast support, and responsive breakpoints
   for tablet/desktop. All existing rules are preserved — new component
   names are namespaced (.empty-state, .btn, .input, .modal, etc.) and
   shared names (.btn-primary, .btn-ghost) use compound selectors so
   the old single-class behaviour stays intact.
   ──────────────────────────────────────────────────────────────── */

/* ── New design tokens ─────────────────────────────────────────── */
/* NB: z-index tokens are declared at the top of the file (the canonical
   hierarchy). Keep this block to spacing/radius tokens only — the
   duplicate z-index block here was overriding the canonical values. */
:root{
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --transition-fast: .15s ease;
  --transition: .2s ease;
  --transition-slow: .3s ease;
}

/* ── Empty state (rich variant) ────────────────────────────────── */
.empty-state{
  margin: 24px var(--gutter);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-1);
  /* v3.7.5 — kill WP-theme list-style bullets that leak into the empty
     paragraph; was rendering a stray • dot to the left of the body text. */
  list-style: none !important;
}
.empty-state *{ list-style: none !important; }
.empty-state-body::before, .empty-state-body::after,
.empty-state-title::before, .empty-state-title::after{ content: none !important; }
.empty-state-icon{
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--gold-paper);
  border: 1px solid var(--gold-soft);
  margin: 0 auto 14px;
  display: grid; place-items: center;
}
.empty-state-icon svg{
  width: 26px; height: 26px;
  stroke: var(--gold-deep); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.empty-state-title{
  font-family: var(--font-serif);
  font-style: italic; font-weight: 500;
  font-size: 22px; letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 6px;
}
.empty-state-title em{ color: var(--gold-deep); }
.empty-state-body{
  font: 400 13.5px var(--font-body);
  color: var(--muted);
  line-height: 1.55;
  max-width: 280px;
  margin: 0 auto 16px;
}
.empty-state-action{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--gold-deep); color: #fff;
  font: 600 13px var(--font-body); letter-spacing: -0.005em;
  border: none; cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.empty-state-action:hover{ background: var(--ink); }
.empty-state-action:active{ transform: scale(.98); }
.empty-state-action svg{
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.empty-state.compact{
  margin: 12px 0;
  padding: 18px 16px;
  border-radius: var(--radius-md);
}
.empty-state.compact .empty-state-icon{
  width: 40px; height: 40px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.empty-state.compact .empty-state-icon svg{ width: 18px; height: 18px; }
.empty-state.compact .empty-state-title{ font-size: 17px; margin-bottom: 4px; }
.empty-state.compact .empty-state-body{ font-size: 12.5px; margin-bottom: 12px; }

/* ── Skeleton loading shimmer ──────────────────────────────────── */
.skeleton{
  background: linear-gradient(
    90deg,
    var(--rule-soft) 0%,
    var(--hairline) 40%,
    var(--gold-paper) 50%,
    var(--hairline) 60%,
    var(--rule-soft) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: block;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
.skeleton-line{ height: 12px; border-radius: 6px; margin: 6px 0; }
.skeleton-line.sk-sm{ width: 40%; height: 10px; }
.skeleton-line.sk-md{ width: 70%; height: 12px; }
.skeleton-line.sk-lg{ width: 100%; height: 16px; }
.skeleton-circle{
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-circle.sk-sm{ width: 28px; height: 28px; }
.skeleton-circle.sk-lg{ width: 56px; height: 56px; }
.skeleton-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 0 var(--gutter) 10px;
  box-shadow: var(--shadow-1);
  display: flex; gap: 12px; align-items: flex-start;
}
.skeleton-card .skeleton-body{ flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* ── Button system (compound .btn.btn-*) ────────────────────────
   The existing .btn-primary / .btn-ghost rules remain authoritative
   when used standalone. Use class="btn btn-primary" to opt into the
   new system. */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--paper);
  color: var(--ink);
  font: 600 13.5px var(--font-body);
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-user-select: none; user-select: none;
  white-space: nowrap;
}
.btn:active{ transform: scale(.98); }
.btn svg{
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.btn.btn-primary{
  background: var(--ink);
  color: var(--gold-soft);
  border-color: var(--ink);
}
.btn.btn-primary:hover{ background: var(--ink-2); }
.btn.btn-gold{
  background: linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(180,139,76,.6);
}
.btn.btn-gold:hover{ box-shadow: 0 10px 22px -10px rgba(180,139,76,.75); }
.btn.btn-ghost{
  background: transparent;
  color: var(--ink-2);
  border-color: var(--rule);
}
.btn.btn-ghost:hover{ background: var(--rule-soft); color: var(--ink); }
.btn.btn-danger{
  background: var(--danger-bg);
  color: var(--danger);
  border-color: transparent;
}
.btn.btn-danger:hover{ background: var(--danger); color: #fff; }
.btn.btn-sm{
  padding: 7px 11px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  gap: 6px;
}
.btn.btn-sm svg{ width: 12px; height: 12px; }
.btn.btn-lg{
  padding: 14px 22px;
  font-size: 15px;
  border-radius: var(--radius-md);
  gap: 10px;
}
.btn.btn-lg svg{ width: 16px; height: 16px; }
.btn.btn-block{ width: 100%; display: flex; }
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn[aria-busy="true"]{
  color: transparent;
  pointer-events: none;
}
.btn[aria-busy="true"]::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--ink);
  animation: btn-spin .7s linear infinite;
}
.btn.btn-primary[aria-busy="true"]::after,
.btn.btn-gold[aria-busy="true"]::after{ color: var(--gold-soft); }
.btn.btn-danger[aria-busy="true"]::after{ color: var(--danger); }
@keyframes btn-spin{ to{ transform: rotate(360deg); } }

/* ── Form inputs ────────────────────────────────────────────────
   Standalone input styles. The existing .field input rules still apply
   when inputs are wrapped in .field — these target unwrapped inputs
   and named utility classes (.input, .textarea, .select). */
.field-label{
  display: block;
  font: 500 11px var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.field-label .req{ color: var(--danger); margin-left: 4px; }
.input,
.textarea,
.select{
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font: 400 13.5px var(--font-body);
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder,
.textarea::placeholder{ color: var(--muted-2); }
.input:hover:not(:disabled),
.textarea:hover:not(:disabled),
.select:hover:not(:disabled){ border-color: var(--muted-2); }
.input:focus,
.textarea:focus,
.select:focus{
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(180,139,76,.12);
}
.textarea{ min-height: 96px; resize: vertical; font-family: var(--font-body); line-height: 1.5; }
.select{
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238A8378' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"]{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(142,58,58,.10);
}
.input:disabled,
.textarea:disabled,
.select:disabled{
  background: var(--rule-soft);
  color: var(--muted);
  cursor: not-allowed;
}
.field-error{
  margin-top: 6px;
  font: 500 11.5px var(--font-body);
  color: var(--danger);
  display: flex; align-items: center; gap: 5px;
}
.field-error svg{
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.field-help{
  margin-top: 6px;
  font: 400 11.5px var(--font-body);
  color: var(--muted);
  line-height: 1.45;
}
.input-group{
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input-group:focus-within{
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(180,139,76,.12);
}
.input-group .input{
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.input-group .input:focus{ box-shadow: none; }
.input-group-addon{
  display: inline-flex; align-items: center;
  padding: 0 12px;
  background: var(--rule-soft);
  color: var(--muted);
  font: 500 12px var(--font-body);
  border-right: 1px solid var(--rule);
}
.input-group-addon:last-child{ border-right: none; border-left: 1px solid var(--rule); }

/* ── Toggles & checkboxes (v3.5 additions) ─────────────────────
   Existing .toggle keeps its v3.4 behaviour. These new helpers
   layer on top without changing it. */
.toggle.lg{
  width: 50px; height: 30px;
}
.toggle.lg::after{ width: 26px; height: 26px; }
.toggle.lg.on::after{ transform: translateX(20px); }
.toggle.gold-deep.on{ background: var(--gold-deep); }
.toggle[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; }

.checkbox{
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  display: inline-grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  position: relative;
  vertical-align: middle;
}
.checkbox:hover{ border-color: var(--gold-deep); }
.checkbox.checked,
.checkbox[aria-checked="true"]{
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}
.checkbox.checked::after,
.checkbox[aria-checked="true"]::after{
  content: '';
  width: 10px; height: 10px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>")
    center/contain no-repeat;
}
.checkbox.lg{ width: 22px; height: 22px; border-radius: 6px; }
.checkbox.lg.checked::after,
.checkbox.lg[aria-checked="true"]::after{ width: 13px; height: 13px; }
.checkbox[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; }

/* Stand-alone radio utility. NOTE: `.choice .radio` at line ~1479 takes
   precedence inside `.choice` rows; this block only applies elsewhere.
   The two used to conflict on size + selected color — now scoped. */
.radio:not(.choice .radio){
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  display: inline-grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast);
  vertical-align: middle;
}
@media (hover: hover) {
  .radio:not(.choice .radio):hover{ border-color: var(--gold-deep); }
}
.radio.checked,
.radio[aria-checked="true"]{ border-color: var(--gold-deep); }
.radio.checked::after,
.radio[aria-checked="true"]::after{
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold-deep);
}

/* ── Tabs (horizontal in-screen nav) ───────────────────────────── */
.tabs{
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar{ display: none; }
.tab-link{
  appearance: none;
  background: transparent;
  border: none;
  padding: 10px 14px;
  font: 500 13px var(--font-body);
  letter-spacing: -0.005em;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--transition-fast);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.tab-link:hover{ color: var(--ink-2); }
.tab-link.active{
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--gold-deep);
}
.tab-link .count{
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--rule-soft);
  color: var(--muted);
  font: 600 10.5px var(--font-body);
  letter-spacing: 0;
}
.tab-link.active .count{ background: var(--gold-paper); color: var(--gold-deep); }
.tabs.pills{
  border-bottom: none;
  gap: 6px;
}
.tabs.pills .tab-link{
  border-bottom: none;
  margin-bottom: 0;
  border-radius: 999px;
  padding: 7px 13px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.tabs.pills .tab-link.active{
  background: var(--ink);
  color: var(--gold-soft);
  border-color: var(--ink);
}

/* ── Modal dialog (centered, separate from .sheet) ─────────────── */
.modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(26,22,19,.5);
  backdrop-filter: blur(4px) saturate(160%);
  -webkit-backdrop-filter: blur(4px) saturate(160%);
  z-index: var(--z-scrim);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-slow);
}
.modal-backdrop.open{ opacity: 1; pointer-events: auto; }
.modal{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 10px)) scale(.97);
  width: calc(100% - 32px);
  max-width: 420px;
  max-height: calc(100% - 64px);
  background: var(--paper);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-deep);
  z-index: var(--z-sheet);
  opacity: 0;
  pointer-events: none;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.modal.open{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.modal-header{
  padding: 18px 20px 12px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
}
.modal-header h3{
  font-family: var(--font-serif); font-weight: 500;
  font-size: 20px; letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
}
.modal-header h3 em{ font-style: italic; color: var(--gold-deep); }
.modal-header .modal-sub{
  font: 400 12.5px var(--font-body);
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}
.modal-close{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--rule-soft);
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.modal-close svg{
  width: 14px; height: 14px;
  stroke: var(--ink-2); fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.modal-body{
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  font: 400 13.5px var(--font-body);
  color: var(--ink-2);
  line-height: 1.55;
}
.modal-actions{
  padding: 12px 20px 18px;
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(to top, var(--bg-soft), var(--paper));
}
.modal-actions .btn{ flex: 0 0 auto; }
.modal-actions.stretch .btn{ flex: 1; }

/* ── Pagination + load more ────────────────────────────────────── */
.load-more{
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 16px var(--gutter);
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  font: 600 13px var(--font-body);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.load-more:hover{ background: var(--rule-soft); border-color: var(--muted-2); }
.load-more:active{ transform: scale(.99); }
.load-more svg{
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.load-more[aria-busy="true"]{
  color: var(--muted);
  pointer-events: none;
}
.load-more[aria-busy="true"]::before{
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--muted-2);
  border-top-color: transparent;
  animation: btn-spin .7s linear infinite;
}
.load-more[aria-busy="true"] svg{ display: none; }

.pager{
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  margin: 16px var(--gutter);
}
.pager-btn{
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font: 500 12.5px var(--font-body);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pager-btn:hover{ background: var(--rule-soft); }
.pager-btn.active{
  background: var(--ink);
  color: var(--gold-soft);
  border-color: var(--ink);
}
.pager-btn[disabled]{ opacity: .4; cursor: not-allowed; pointer-events: none; }
.pager-btn svg{
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pager-ellipsis{
  padding: 0 4px;
  color: var(--muted);
  font: 500 12.5px var(--font-body);
}
.pager-dots{
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  margin: 14px 0;
}
.pager-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
  transition: width var(--transition-fast), background var(--transition-fast);
  border: none; padding: 0;
}
.pager-dot.active{
  width: 18px; border-radius: 999px;
  background: var(--gold-deep);
}

/* ── Stat card empty variant ───────────────────────────────────── */
.stat-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-1);
}
.stat-card .stat-label{
  font: 500 11px var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.stat-card .stat-num{
  font-family: var(--font-serif);
  font-weight: 500; font-size: 32px; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-card .stat-num em{ font-style: italic; color: var(--gold-deep); }
.stat-card.empty{
  border-style: dashed;
  border-color: var(--muted-2);
  background: transparent;
  box-shadow: none;
}
.stat-card.empty .stat-label{ color: var(--muted-2); }
.stat-card.empty .stat-num{
  color: var(--muted-2);
  font-size: 40px;
}
.stat-card.empty .stat-num::before{
  content: '—';
}

/* ── Toast variants (success / error / info) ───────────────────── */
.toast.success{
  background: var(--success);
  color: #fff;
}
.toast.success svg{ stroke: #fff; }
.toast.error{
  background: var(--danger);
  color: #fff;
}
.toast.error svg{ stroke: #fff; }
.toast.info{
  background: var(--ink);
  color: var(--gold-soft);
}
.toast.info svg{ stroke: var(--gold); }
.toast .toast-close{
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  padding: 2px;
  margin-left: 4px;
  display: inline-grid; place-items: center;
}
.toast .toast-close:hover{ opacity: 1; }
.toast .toast-close svg{ width: 12px; height: 12px; stroke: currentColor; }

/* ── Accessibility: focus-visible rings ────────────────────────── */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.tile:focus-visible,
.tab:focus-visible,
.tab-link:focus-visible,
.chip:focus-visible,
.fab:focus-visible,
.toggle:focus-visible,
.checkbox:focus-visible,
.radio:focus-visible,
.pager-btn:focus-visible,
.pager-dot:focus-visible,
.set-row:focus-visible,
.ios-row:focus-visible,
.candidate-row:focus-visible,
.notif-row:focus-visible,
.inv-row:focus-visible,
.bar-row:focus-visible,
.team-row:focus-visible,
.integ-tile:focus-visible,
.live-widget:focus-visible,
.widget:focus-visible,
.choice:focus-visible,
.q-opt:focus-visible{
  outline: 3px solid var(--gold-soft);
  outline-offset: 2px;
  /* Preserve component shape on focus — using inherit keeps rounded
     corners of pill/circle elements. */
  border-radius: inherit;
}
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible{
  /* Inputs already render their own focus state via .input:focus
     (border-color + box-shadow). Suppress the generic outline to
     avoid a double ring, but keep box-shadow / border styling. */
  outline: none;
}
/* Skip-to-content link for keyboard users */
.skip-link{
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--gold-soft);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font: 600 12px var(--font-body);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus{ top: calc(var(--safe-top) + 8px); }

/* Screen-reader only utility */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .screen{ animation: none; }
  .pulse,
  .livedot,
  .fab::before,
  .skeleton{ animation: none; }
  .live-widget:active,
  .widget:active,
  .tile:active,
  .icon-btn:active,
  .fab:active,
  .btn:active,
  .btn-primary:active,
  .empty-state-action:active{ transform: none; }
}

/* ── High contrast ─────────────────────────────────────────────── */
@media (prefers-contrast: more){
  :root{
    --rule: var(--ink-2);
    --rule-soft: var(--muted-2);
    --hairline: var(--ink-2);
    --muted: var(--ink-2);
    --muted-2: var(--ink-2);
  }
  .btn,
  .input,
  .textarea,
  .select,
  .chip,
  .tile,
  .widget,
  .ios-list,
  .timeline,
  .empty-state,
  .stat-card,
  .modal,
  .load-more,
  .pager-btn{
    border-width: 2px;
  }
  .tab-link.active{ border-bottom-width: 3px; }
}

/* ── Density / tablet breakpoint (>= 768px) ────────────────────── */
@media (min-width: 768px){
  /* #im-b2b-app stays position:fixed inset:0 — preserved from v3.4 */
  #im-b2b-app .screens,
  .screens{
    max-width: 1200px;
    margin: 0 auto;
    padding-left: max(var(--gutter), 24px);
    padding-right: max(var(--gutter), 24px);
    padding-top: calc(var(--safe-top) + 76px);
  }

  /* Promote nav to a 3-column grid: brand · search · actions */
  .app-nav{
    height: 68px;
    padding-left: max(var(--gutter), 24px);
    padding-right: max(var(--gutter), 24px);
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr) minmax(220px, 1fr);
    gap: 18px;
  }
  .app-nav .nav-brand-text{ display: flex; }
  .app-nav .nav-search{ display: inline-flex; }
  .app-nav .nav-search-mobile{ display: none; }
  .app-nav .compact-title{ display: none; }
  .nav-identity-meta{ display: flex; }
  .nav-identity-chev{ display: block; }
  .nav-identity{ padding-right: 10px; }
  .tabbar{
    max-width: 1200px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 100%;
    border-radius: 18px 18px 0 0;
  }
  .quick{
    grid-template-columns: repeat(4, 1fr);
  }
  .lib-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .widget-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .widget{
    flex: 1 1 auto;
    scroll-snap-align: none;
  }
  .field-row{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .modal{ max-width: 520px; }
  .large-title h1{ font-size: 42px; }
  .detail-hero h2{ font-size: 32px; }
  .report-hero .type{ font-size: 72px; }
}

/* ── Desktop breakpoint (>= 1200px) ────────────────────────────── */
@media (min-width: 1200px){
  .quick,
  .lib-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .widget-row{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .large-title{ padding-top: 12px; }
  .large-title h1{ font-size: 48px; }
}

/* ── v3.9.25 polish: empty-state separators ──────────────────────────────
   Hide stray separator dots and empty meta spans so rows never render
   with an orphan "·" when data is missing on one side. */
.row-meta > span:empty,
.cand-meta:empty,
.row-title:empty,
.tile-sub:empty,
.cand-type:empty,
.integ-meta:empty,
.act-text:empty,
.act-time:empty,
.t-time:empty,
.t-item > p:empty{
  display: none;
}

/* :has() catches orphan dots in row-meta — supported in all current
   browsers (Chrome 105+, Safari 15.4+, Firefox 121+). */
.row-meta:has(> span:empty:first-child) > .dot,
.row-meta:has(> .dot + span:empty:last-child) > .dot{
  display: none;
}
.row-meta:not(:has(> span:not(.dot):not(:empty))){
  display: none;
}

/* Skeleton-only activity rows (no text + no time) collapse cleanly */
.t-item:has(> p:empty):has(.t-time:empty){
  display: none;
}
.act-row:has(.act-text:empty):has(.act-time:empty){
  display: none;
}

/* Profile sec-label inside set-section: tighten the "You" header */
.profile .set-section + .set-section > .sec-label{
  margin-top: 0;
}
.set-section > .sec-label:first-child{
  margin-top: 0;
}

/* Empty cand-meta (e.g. trailing "·" with nothing after) — kill it */
.cand-meta:is(:empty, [data-empty="true"]){ display: none; }

/* ════════════════════════════════════════════════════════════════
   v3.9.29 — Premium individual-report layout
   ════════════════════════════════════════════════════════════════ */

#im-b2b-app .report-hero--rich{
  text-align: center;
  padding: 36px var(--gutter) 28px;
}
#im-b2b-app .report-hero--rich .eyebrow{
  font: 600 11px var(--font-body);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .85; margin-bottom: 16px;
}
#im-b2b-app .report-archetype{
  font: 500 38px var(--font-serif);
  color: #FFFBF2; letter-spacing: -0.018em;
  line-height: 1.05; margin-bottom: 10px;
}
#im-b2b-app .report-tagline{
  font: italic 400 16px var(--font-serif);
  color: var(--gold); margin-bottom: 22px;
  max-width: 620px; margin-left: auto; margin-right: auto;
}
#im-b2b-app .report-score-row{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 14px 6px 20px;
  background: rgba(234,223,199,.08);
  border: 1px solid rgba(234,223,199,.16);
  border-radius: 999px;
}
#im-b2b-app .report-score{
  font-family: var(--font-serif); color: #FFFBF2;
  display: inline-flex; align-items: baseline; gap: 4px;
}
#im-b2b-app .report-score-num{
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
}
#im-b2b-app .report-score-tot{
  font-size: 13px; color: var(--gold-soft); opacity: .75;
  font-family: var(--font-body); font-weight: 500;
}
#im-b2b-app .report-tier-pill{
  font: 700 10.5px var(--font-body);
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--gold); color: #1A1613;
}
#im-b2b-app .report-tier-pill.tier-exceptional{ background: linear-gradient(135deg, #D9B36C, #B48B4C); color: #1A1613; }
#im-b2b-app .report-tier-pill.tier-high       { background: #88B07E; color: #1A1613; }
#im-b2b-app .report-tier-pill.tier-developing { background: #D4B273; color: #1A1613; }
#im-b2b-app .report-tier-pill.tier-emerging   { background: #C49A8B; color: #1A1613; }

/* Candidate strip */
#im-b2b-app .report-cand-strip{
  display: flex; align-items: center; gap: 14px;
  margin: 18px var(--gutter) 0;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  flex-wrap: wrap;
}
#im-b2b-app .report-cand-avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold-paper); color: var(--gold-deep);
  display: grid; place-items: center;
  font: 600 14px var(--font-body); letter-spacing: .04em;
  flex-shrink: 0; border: 1px solid var(--gold-soft);
}
#im-b2b-app .report-cand-info{ flex: 1 1 auto; min-width: 160px; }
#im-b2b-app .report-cand-name{
  font: 600 15.5px var(--font-body); color: var(--ink);
  letter-spacing: -0.012em;
}
#im-b2b-app .report-cand-email{
  font: 400 12.5px var(--font-body); color: var(--muted); margin-top: 2px;
}
#im-b2b-app .report-cand-chips{
  display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0;
}
#im-b2b-app .report-chip{
  font: 500 11px var(--font-body); letter-spacing: .04em;
  color: var(--ink-2);
  background: var(--rule-soft);
  padding: 5px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
#im-b2b-app .report-chip--verified{ background: var(--success-bg); color: var(--success); font-weight: 600; }
#im-b2b-app .report-chip--verified svg{ width: 11px; height: 11px; }

/* Actions row */
#im-b2b-app .report-actions{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 16px var(--gutter) 4px;
}
#im-b2b-app .report-actions .btn-big{
  flex: 1 1 180px; min-width: 0; padding: 13px 16px; font-size: 12px;
}

/* Report card — shared shell for every report section below the hero */
#im-b2b-app .report-card{
  margin: 22px var(--gutter) 0;
  padding: 22px 22px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(26,22,19,.03);
}
#im-b2b-app .report-card > .eyebrow{
  font: 600 10.5px var(--font-body);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 10px;
}
#im-b2b-app .report-card-h3{
  font: 500 22px var(--font-serif); color: var(--ink);
  letter-spacing: -0.012em; line-height: 1.18; margin-bottom: 14px;
}
#im-b2b-app .report-card-lede{
  font: 400 14.5px var(--font-body); color: var(--ink-2);
  line-height: 1.6; letter-spacing: -0.003em;
}
#im-b2b-app .report-card-example{
  font: italic 400 13px var(--font-serif); color: var(--muted);
  margin-top: 10px; line-height: 1.55;
}

/* Overall narrative card — warm paper, italic accent */
#im-b2b-app .report-card--narrative{
  background: linear-gradient(135deg, #FBF5E5 0%, #F6EED7 100%);
  border-color: rgba(180,139,76,.22);
}
#im-b2b-app .report-card--narrative > .eyebrow{ color: var(--gold-deep); }
#im-b2b-app .report-card--narrative p{
  font: 400 14.5px var(--font-body); color: var(--ink);
  line-height: 1.65; letter-spacing: -0.003em;
}

/* Archetype card */
#im-b2b-app .report-card--archetype{ position: relative; }
#im-b2b-app .report-card--archetype::before{
  content: ''; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 3px; background: var(--arch-accent, var(--gold)); border-radius: 0 3px 3px 0;
}
#im-b2b-app .report-arch-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule);
}
#im-b2b-app .report-arch-col-title{
  font: 600 10.5px var(--font-body);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
#im-b2b-app .report-arch-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
#im-b2b-app .report-arch-list li{
  display: flex; align-items: flex-start; gap: 9px;
  font: 500 13.5px var(--font-body); color: var(--ink-2); line-height: 1.45;
}
#im-b2b-app .report-arch-list li svg{
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px;
  stroke: var(--success); color: var(--success);
}
#im-b2b-app .report-arch-list--warn li svg{ stroke: var(--warn); color: var(--warn); }
@media (max-width: 680px){
  #im-b2b-app .report-arch-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* Dimension breakdown grid */
#im-b2b-app .report-dim-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 6px;
}
@media (max-width: 680px){
  #im-b2b-app .report-dim-grid{ grid-template-columns: 1fr; }
}
#im-b2b-app .report-dim{
  padding: 14px 14px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 14px;
  position: relative;
}
#im-b2b-app .report-dim.is-top{
  background: linear-gradient(135deg, #F1F6F0 0%, #E5EFE3 100%);
  border-color: rgba(98,141,93,.25);
}
#im-b2b-app .report-dim.is-bottom{
  background: linear-gradient(135deg, #FBF1E6 0%, #F4E4D0 100%);
  border-color: rgba(180,139,76,.22);
}
#im-b2b-app .report-dim-head{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
#im-b2b-app .report-dim-name{
  font: 600 13.5px var(--font-body); color: var(--ink);
  letter-spacing: -0.008em;
}
#im-b2b-app .report-dim-tag{
  font: 700 9.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
#im-b2b-app .report-dim-tag--top{ background: var(--success-bg); color: var(--success); }
#im-b2b-app .report-dim-tag--growth{ background: var(--gold-paper); color: var(--gold-deep); }
#im-b2b-app .report-dim-bar-row{
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
}
#im-b2b-app .report-dim-bar{
  height: 8px; background: rgba(26,22,19,.06); border-radius: 999px; overflow: hidden;
}
#im-b2b-app .report-dim-bar > span{
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
#im-b2b-app .report-dim-bar > span.tier-exceptional{ background: linear-gradient(90deg, #88B07E, #5C7E5F); }
#im-b2b-app .report-dim-bar > span.tier-high       { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
#im-b2b-app .report-dim-bar > span.tier-developing { background: linear-gradient(90deg, #D4B273, #B89048); }
#im-b2b-app .report-dim-bar > span.tier-emerging   { background: linear-gradient(90deg, #C49A8B, #A57565); }
#im-b2b-app .report-dim-score{
  font: 600 14px var(--font-serif); color: var(--ink);
  letter-spacing: -0.01em;
}
#im-b2b-app .report-dim-meta{
  margin-top: 6px;
}
#im-b2b-app .report-dim-label{
  font: 600 10.5px var(--font-body); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
#im-b2b-app .report-dim-summary{
  margin-top: 8px; font: 400 12.5px var(--font-body);
  color: var(--ink-2); line-height: 1.55;
}

/* Narrative cards (top strengths + growth areas) */
#im-b2b-app .report-narrative-list{
  display: flex; flex-direction: column; gap: 14px;
}
#im-b2b-app .report-narrative{
  padding: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
#im-b2b-app .report-narrative--growth{ background: linear-gradient(135deg, #FCF5E8 0%, #F6E9D0 100%); border-color: rgba(180,139,76,.18); }
#im-b2b-app .report-narrative-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
#im-b2b-app .report-narrative-title{
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14.5px var(--font-body); color: var(--ink);
  letter-spacing: -0.008em;
}
#im-b2b-app .report-narrative-glyph{
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--gold-paper); color: var(--gold-deep);
  display: grid; place-items: center; flex-shrink: 0;
}
#im-b2b-app .report-narrative-glyph svg{ width: 13px; height: 13px; }
#im-b2b-app .report-narrative--growth .report-narrative-glyph{ background: rgba(180,139,76,.18); color: var(--gold-deep); }
#im-b2b-app .report-narrative-score{
  font: 600 10.5px var(--font-body); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
#im-b2b-app .report-narrative-body{
  font: 400 13.5px var(--font-body); color: var(--ink-2);
  line-height: 1.6; letter-spacing: -0.003em;
}

/* Role fit list */
#im-b2b-app .report-fit-list{
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
  background: var(--bg-soft);
}
#im-b2b-app .report-fit-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
#im-b2b-app .report-fit-row:last-child{ border-bottom: none; }
#im-b2b-app .report-fit-context{
  font: 500 13.5px var(--font-body); color: var(--ink);
  letter-spacing: -0.008em;
}
#im-b2b-app .report-fit-label{
  font: 700 10.5px var(--font-body); letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  white-space: nowrap;
}
#im-b2b-app .report-fit-label--strong  { background: var(--success-bg); color: var(--success); }
#im-b2b-app .report-fit-label--good    { background: #E8F0E6; color: #426446; }
#im-b2b-app .report-fit-label--ok      { background: var(--gold-paper); color: var(--gold-deep); }
#im-b2b-app .report-fit-label--stretch { background: var(--rule-soft); color: var(--muted); }

/* Recommendations list */
#im-b2b-app .report-rec-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  counter-reset: rec;
}
#im-b2b-app .report-rec-list li{
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
#im-b2b-app .report-rec-num{
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--gold-soft);
  display: grid; place-items: center;
  font: 600 12px var(--font-serif); letter-spacing: 0;
}
#im-b2b-app .report-rec-text{
  font: 400 13.5px var(--font-body); color: var(--ink-2);
  line-height: 1.55; letter-spacing: -0.003em;
}

/* Metadata footer */
#im-b2b-app .report-meta-footer{
  margin: 22px var(--gutter) 0;
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 1px dashed var(--rule);
  border-radius: 12px;
}
#im-b2b-app .report-meta-row{
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  font: 400 11.5px var(--font-body); color: var(--muted);
  letter-spacing: -0.002em;
}
#im-b2b-app .report-meta-row strong{
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); margin-right: 6px; font-size: 10px;
}