:root {
  /* I VISION brand rebrand — warm brown/orange (Flaxseed Oil label reference),
     replacing the old cool blue/navy theme. --navy is deep brown (headings/dark
     text), --blue is repurposed as the primary orange accent (buttons, active
     states, links) rather than renamed, to keep every existing var(--blue)
     reference correct without touching hundreds of call sites. */
  --navy: #6b3a17;
  --navy-dark: #4a2610;
  --blue: #e8730a;
  --blue-light: #fceada;
  --purple: #8b5a2b;
  --purple2: #4a2610;
  --green: #16a35a;
  --green-light: #e7f8ef;
  --orange: #f5921b;
  --orange-light: #fef2e2;
  --red: #e6455d;
  --red-light: #fdecef;
  --pink: #ec4899;
  --teal: #0d9488;
  --teal-light: #e3f6f4;
  --gray-50: #fdfbf5;
  --gray-100: #f8f3e9;
  --gray-500: #9c8a70;
  --gray-700: #5a4530;
  --border: #ede5d3;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  background: var(--gray-50);
  font-family: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: #2b2013;
}

a { text-decoration: none; }

/* ---------- Layout shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 258px;
  flex-shrink: 0;
  background: var(--gray-50);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  overflow-y: auto;
  z-index: 1030;
  transition: transform .2s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.brand-logo-img { width: 100%; max-width: 190px; height: auto; display: block; }
/* Sidebar brand now uses the wide wordmark-only crop (900x163, no crest) —
   needs more horizontal room than the crest+wordmark lockup to stay legible. */
.sidebar-brand .brand-logo-img { max-width: 210px; }

.sidebar-nav { padding: 16px 14px; flex: 1; }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 14px;
  color: var(--navy); font-size: .92rem; font-weight: 600;
  margin-bottom: 8px;
}
.sidebar-nav .nav-link i { font-size: 1.25rem; width: 22px; text-align: center; color: var(--navy); }
.sidebar-nav .nav-link:hover { background: var(--gray-100); color: var(--navy); }
.sidebar-nav .nav-link.active {
  background: linear-gradient(135deg, var(--blue) 0%, #c2600a 100%); color: #fff;
  box-shadow: 0 6px 14px rgba(232,115,10,.35);
}
.sidebar-nav .nav-link.active i { color: #fff; }
.sidebar-nav .nav-link .badge { margin-left: auto; }
.sidebar-nav .nav-section-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gray-500); padding: 14px 16px 8px; font-weight: 700;
}

/* A couple of nav items get a solid colored icon "chip" instead of a bare icon —
   a small emphasis treatment, purely visual, same links/routes underneath. */
.sidebar-nav .nav-link.nav-link-chip i {
  background: var(--blue); color: #fff; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.sidebar-nav .nav-link.nav-link-chip.active i { background: rgba(255,255,255,.25); }

/* min-width: 0 overrides the flex-item default (min-width: auto), which otherwise
   refuses to shrink below the width of its widest descendant (e.g. a wide genealogy
   tree) and stretches the whole page instead of letting that descendant's own
   `overflow: auto` contain it. */
.main-col { flex: 1; min-width: 0; margin-left: 258px; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left .2s ease; }

.topbar {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 14px 26px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1020; min-width: 0;
}
.topbar .page-title { font-weight: 700; font-size: 1.15rem; color: var(--navy); margin: 0; }
.topbar .breadcrumb-mini { font-size: .8rem; color: var(--gray-500); margin: 0; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100);
  display: flex; align-items: center; justify-content: center; color: var(--gray-700);
  position: relative; border: none;
}
.icon-btn .badge-dot {
  position: absolute; top: -2px; right: -2px; background: var(--red); color: #fff;
  font-size: .62rem; min-width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
.user-chip { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--border); }
.user-chip img, .user-chip .avatar-fallback {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.user-chip .user-name { font-size: .85rem; font-weight: 600; color: var(--navy); }
.user-chip .user-meta { font-size: .72rem; color: var(--gray-500); }

.content-area { padding: 24px 26px 60px; flex: 1; min-width: 0; }

/* ---------- Cards ---------- */
.stat-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; display: flex; align-items: center; gap: 14px; height: 100%; min-width: 0;
}
.stat-card > div:last-child { min-width: 0; }
.stat-card .stat-label, .stat-card .stat-value { overflow-wrap: break-word; }
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.stat-card .stat-label { font-size: .78rem; color: var(--gray-500); margin-bottom: 2px; }
.stat-card .stat-value { font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.stat-card .stat-trend { font-size: .72rem; margin-top: 2px; }
.stat-card .stat-trend.up { color: var(--green); }
.stat-card .stat-trend.down { color: var(--red); }

/* Stat cards with a mini sparkline filling the remaining width on the right. */
.stat-card-spark { align-items: stretch; }
.stat-card-spark .stat-card-main { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.stat-card-spark .stat-spark { flex: 1; min-width: 50px; width: 100%; height: 44px; margin-left: 8px; position: relative; }

/* ---------- Quick action cards (icon chip + title/subtitle + chevron) ---------- */
.qa-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff; text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.qa-card:hover { box-shadow: 0 4px 14px rgba(74,38,16,.08); transform: translateY(-1px); }
.qa-card .qa-icon {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.qa-card .qa-title { font-weight: 700; font-size: .88rem; color: var(--navy); }
.qa-card .qa-sub { font-size: .74rem; color: var(--gray-500); margin-top: 1px; }
.qa-card .qa-chevron { margin-left: auto; color: var(--gray-500); font-size: .95rem; flex-shrink: 0; }

/* ---------- Transaction rows with a per-type icon badge ---------- */
.txn-row-v2 { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.txn-row-v2:last-child { border-bottom: none; }
.txn-row-v2 .txn-icon {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: .95rem; flex-shrink: 0;
}
.txn-row-v2 .txn-desc { font-weight: 600; font-size: .85rem; color: var(--navy); }
.txn-row-v2 .txn-date { font-size: .72rem; color: var(--gray-500); margin-top: 1px; }
.txn-row-v2 .txn-amount { margin-left: auto; font-weight: 700; font-size: .88rem; white-space: nowrap; }

/* ---------- Donut chart with a total centered inside the ring ---------- */
.donut-wrap { position: relative; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; pointer-events: none; text-align: center;
}
.donut-center .donut-total-label { font-size: .68rem; color: var(--gray-500); }
.donut-center .donut-total-value { font-size: 1.05rem; font-weight: 800; color: var(--navy); }
.donut-legend-row { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.donut-legend-row .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---------- Compact "My Tree" preview with connector lines ---------- */
.mini-tree-connector { width: 1px; height: 14px; background: var(--border); margin: 0 auto; }
.mini-tree-row { position: relative; }
.mini-tree-row::before {
  content: ''; position: absolute; top: -14px; left: 16.66%; right: 16.66%; height: 1px; background: var(--border);
}
.mini-tree-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: #fff; margin: 0 auto 4px;
}

.bg-soft-blue { background: var(--blue-light); color: var(--blue); }
.bg-soft-green { background: var(--green-light); color: var(--green); }
.bg-soft-orange { background: var(--orange-light); color: var(--orange); }
.bg-soft-red { background: var(--red-light); color: var(--red); }
.bg-soft-purple { background: #f7e9d6; color: var(--purple); }
.bg-soft-teal { background: var(--teal-light); color: var(--teal); }

.panel {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; height: 100%;
}
/* Opt-out for a standalone panel that isn't sitting next to row siblings it needs to
   match the height of — .panel's own height:100% otherwise stretches it to fill
   whatever height its container happens to have (e.g. the page's remaining viewport
   height), leaving a large empty gap below short content. */
.panel-auto-height { height: auto; }

/* A subtle botanical accent bleeding off the bottom-right corner, faded via a mask
   so it reads as texture rather than competing with the panel's real content. */
.panel-accent { position: relative; overflow: hidden; }
.panel-accent::after {
  content: ''; position: absolute; right: -18px; bottom: -18px; width: 150px; height: 170px;
  background: url('../images/ivita-flowers-accent.jpg') center/cover; border-radius: 16px;
  opacity: .16; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 70% 70%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 70% 70%, #000 0%, transparent 72%);
}
.panel-accent > * { position: relative; z-index: 1; }
.panel-title { font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 2px; }

.gradient-panel {
  border-radius: var(--radius); padding: 20px 22px; color: #fff;
  background: linear-gradient(135deg, var(--purple2), var(--blue));
}
.gradient-panel .panel-title { color: #fff; }

.badge-status { font-size: .72rem; font-weight: 600; padding: .32em .7em; border-radius: 20px; }
.badge-active { background: var(--green-light); color: var(--green); }
.badge-inactive { background: var(--gray-100); color: var(--gray-500); }
.badge-vacant { background: var(--orange-light); color: var(--orange); }
.badge-pending { background: var(--orange-light); color: var(--orange); }
.badge-approved { background: var(--green-light); color: var(--green); }
.badge-rejected { background: var(--red-light); color: var(--red); }

.btn-primary { background: var(--blue); border-color: var(--blue); }
.btn-primary:hover { background: #2448c4; border-color: #2448c4; }
.btn-soft-purple { background: #f7e9d6; color: var(--purple2); border: none; }
.btn-soft-green { background: var(--green-light); color: var(--green); border: none; }
.btn-soft-orange { background: var(--orange-light); color: var(--orange); border: none; }
.btn-soft-pink { background: #fdeaf3; color: var(--pink); border: none; }
.btn-soft-blue { background: var(--blue-light); color: var(--blue); border: none; }

.table-clean thead th { border-top: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); font-weight: 600; }
.table-clean td, .table-clean th { vertical-align: middle; padding: .85rem .75rem; }

/* ---------- Genealogy tree ---------- */
.tree-toolbar { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 18px; }

.filter-label { display: block; font-weight: 700; color: var(--navy); font-size: .84rem; margin-bottom: 8px; }

/* Fixed widths moved here from inline styles specifically so a mobile media query can
   override them without needing !important (inline styles beat any stylesheet rule
   regardless of specificity, so they couldn't be responsive as inline attributes). */
.tree-filter-viewby select { width: 170px; }
.tree-filter-legview select { width: 140px; }
.tree-filter-search .search-input-wrap, .tree-filter-search input { width: 230px; }

.search-input-wrap { position: relative; }
.search-input-wrap input { padding-right: 34px; }
.search-input-wrap .bi-search {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  color: var(--gray-500); font-size: .85rem; pointer-events: none;
}

.level-btn-group { display: flex; gap: 6px; }
.level-btn {
  min-width: 38px; height: 31px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--gray-700); font-size: .84rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.level-btn:hover { border-color: var(--blue); color: var(--blue); }
.level-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.level-btn.disabled { pointer-events: none; opacity: .5; }
.tree-wrap {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 16px; overflow: auto; position: relative;
}
.tree-wrap:fullscreen { padding-top: 70px; background: #fff; }
/* Left-aligned rather than centered, so the tree cluster sits clear of the
   right-pinned info panel / zoom controls instead of drifting under them.
   Scaled via the `zoom` CSS property (set in JS) rather than `transform: scale`,
   since `zoom` actually resizes the layout box instead of just repainting it. */
.tree-zoom-layer { display: inline-flex; justify-content: flex-start; min-width: 100%; }
.tree { display: inline-flex; flex-direction: column; align-items: center; min-width: 100%; }

/* Placement-mode toggle used in the page header */
.mode-toggle { display: inline-flex; gap: 6px; }
.mode-toggle button {
  border: none; background: var(--gray-100); font-size: .78rem; font-weight: 600; color: var(--gray-500);
  padding: 6px 16px; border-radius: 8px;
}
.mode-toggle button.active { background: var(--blue); color: #fff; }

/* Member-info grid, pinned top-right — the tree itself is left-aligned (see .tree-zoom-layer)
   so the two no longer compete for the same space. right offset clears the ~88px-wide
   zoom/pan control boxes pinned at right:14px, plus a 16px gap. */
.tree-info-float {
  position: absolute; top: 26px; right: 120px; z-index: 5; font-size: .78rem;
}
.tree-info-float .info-grid { display: grid; grid-template-columns: auto auto auto auto; column-gap: 16px; row-gap: 7px; }
.tree-info-float .info-label { color: var(--gray-500); white-space: nowrap; }
.tree-info-float .info-value { font-weight: 600; color: var(--navy); white-space: nowrap; }

/* Floating pan/zoom controls, pinned to the top-right of the tree canvas */
.tree-float-controls { position: absolute; top: 26px; right: 14px; z-index: 5; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.tree-float-controls .ctrl-box {
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 12px rgba(20,25,60,.08);
  padding: 4px; display: grid;
}
.tree-float-controls .ctrl-box.pan { grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(2, 26px); }
.tree-float-controls .ctrl-box.zoom { grid-template-columns: repeat(3, 30px); grid-auto-rows: 30px; gap: 2px; }
.tree-float-controls button {
  border: none; background: transparent; color: var(--gray-700); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.tree-float-controls button:hover { background: var(--gray-100); color: var(--blue); }

/* ---------- Genealogy tree — mobile ---------- */
@media (max-width: 767px) {
  /* Each filter's width was tuned for a single wide desktop row — once flex-wrap
     stacks them onto their own lines below this width, let each one fill that line
     instead of staying a narrow fixed-width box floating on the left. */
  .tree-filter-col { width: 100%; }
  .tree-filter-viewby select,
  .tree-filter-legview select,
  .tree-filter-search .search-input-wrap,
  .tree-filter-search input {
    width: 100%;
  }
  .tree-toolbar { gap: 14px; padding: 14px 16px; }
  .tree-filter-actions { width: 100%; margin-left: 0 !important; }
  .tree-filter-actions .btn { flex: 1; }

  /* The pan/zoom controls were pinned top-right assuming plenty of spare width
     beside the tree canvas — on a narrow screen they'd sit on top of the tree
     itself instead, so they drop into normal flow above the canvas and center
     themselves, same idea as the toolbar filters above. */
  .tree-float-controls { position: static; justify-content: center; margin: 0 0 14px; }
  .tree-wrap { padding: 16px 10px; }
}

.node-card.is-vacant { cursor: pointer; }
.node-card.is-vacant:hover { box-shadow: 0 0 0 3px var(--orange-light); }
.node-card.is-highlighted { outline: 2px solid var(--blue); outline-offset: 1px; }

.node-expand-hint {
  margin-top: 6px; font-size: .64rem; font-weight: 600; color: var(--blue); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.node-expand-hint:hover { text-decoration: underline; }

.tree ul { display: flex; padding-top: 26px; position: relative; margin: 0; }
.tree li { display: flex; flex-direction: column; align-items: center; list-style: none; position: relative; padding: 0 8px; }

/* Sibling connector line, split across each li's left half (::before) and right
   half (::after). Both halves sit at the SAME top offset and height so they join
   into one continuous horizontal bar — that consistency is what previously broke
   (::before was shifted 26px above ::after, producing a "staircase" instead of a
   straight line). top: -26px is essential: the li's own top edge is where its
   CARD starts (li has no padding-top), so `top: 0` draws the connector 26px
   *inside* the card instead of in the actual 26px gap the parent `ul`'s
   padding-top reserves above it — confirmed by measuring the rendered pixels,
   where the "connector" and the card were starting at the exact same y. -26px
   moves it up into that real gap, matching `.tree ul ul::before` below (the
   parent-to-row stub), which was already using -26px correctly. The vertical
   drop into each card's own center comes from ::after's left border (its left
   edge sits exactly at the li's 50% midpoint); the last child has no ::after to
   provide that, so it gets an equivalent right border on ::before instead
   (whose right edge is also at the midpoint). */
.tree li::before, .tree li::after {
  content: ''; position: absolute; top: -26px; height: 26px; border-top: 2px solid #5b6180;
}
.tree li::before { right: 50%; width: 50%; }
.tree li::after { left: 50%; width: 50%; border-left: 2px solid #5b6180; }

.tree li:first-child::before { border-top: none; }
.tree li:last-child::after { border-top: none; border-left: none; }
.tree li:last-child::before { border-right: 2px solid #5b6180; }

/* Soften the joint where each outer branch's vertical stub meets its horizontal
   run, instead of a sharp 90° corner. */
.tree li:first-child::after { border-radius: 6px 0 0 0; }
.tree li:last-child::before { border-radius: 0 6px 0 0; }

/* Every 3-leg group has exactly one middle child, sitting at (almost) the same
   x-position as the group's overall center — which is exactly where the
   parent-to-row stub (.tree ul ul::before below) already draws its own vertical
   line. Drawing the middle child's own center-drop on top of that (independently
   computed, so it lands a pixel or two off) produced a doubled/fuzzy line. The
   shared stub already covers it, so suppress the middle child's redundant one. */
.tree li:nth-child(2)::after { border-left: none; }

.tree li:only-child::before, .tree li:only-child::after { display: none; }
.tree li:only-child { padding-top: 0; }
.tree > li { padding-top: 0; }

/* Vertical stub from a parent card down into its children's shared horizontal bar.
   Positioned relative to the child <ul> itself, whose own top edge sits right at
   the parent card's bottom (it's the very next thing in the parent li's flow) —
   so top: 0 (not -26px, which measurement showed was 26px too high, sitting
   inside the parent card instead of the gap below it) lets this span exactly the
   26px gap created by the ul's own padding-top, down to where the child row begins. */
.tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #5b6180; height: 26px; }

.node-card {
  width: 148px; max-width: 100%; background: #fff; border: 1px solid #8890b3; border-radius: 12px;
  padding: 10px 10px 12px; text-align: center; box-shadow: 0 2px 6px rgba(20,25,60,.04);
}
/* Status-tinted card background — a colored fill (not just the small status badge) makes
   active/inactive/root read at a glance across a wide tree. .is-root is declared after
   .is-active/.is-inactive so the root's blue always wins over the green an active root
   would otherwise also match (a member is nearly always both root AND active). */
.node-card.is-active { background: var(--green-light); border-color: var(--green); }
.node-card.is-inactive { background: var(--gray-100); border-color: var(--gray-500); }
.node-card.is-root { background: var(--blue-light); border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.node-card .node-avatar {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 6px; background: var(--blue-light);
  color: var(--blue); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.15rem;
  overflow: hidden; flex-shrink: 0;
}
.node-card .node-avatar img { width: 100%; height: 100%; object-fit: cover; }
.node-card.is-active .node-avatar { background: #fff; color: var(--green); border: 2px solid var(--green); }
.node-card.is-inactive .node-avatar { background: #fff; color: var(--gray-500); border: 2px solid var(--gray-500); }
.node-card.is-root .node-avatar { background: #fff; color: var(--blue); border: 2px solid var(--blue); }
.node-you-tag { color: var(--gray-500); font-weight: 500; }
.node-card.is-vacant { border-style: dashed; background: var(--orange-light); }
.node-card.is-vacant .node-avatar { background: #fff; color: var(--orange); border: 2px dashed var(--orange); }
.node-card .node-name { font-size: .78rem; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-card .node-id { font-size: .68rem; color: var(--gray-500); }
/* The card itself is now tinted the same light color as .badge-active/.badge-inactive
   (see .is-active/.is-inactive above), so without this the status pill would nearly
   blend into its own card background. A white pill keeps it legible on any tint. */
.node-card .badge-status { background: #fff; }
.leg-tag {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff;
  padding: .18em .55em; border-radius: 6px; margin-bottom: 6px; display: inline-block;
}
.leg-tag.leg-1 { background: var(--green); }
.leg-tag.leg-2 { background: var(--blue); }
.leg-tag.leg-3 { background: var(--orange); }

.legend-strip { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 14px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); font-size: .82rem; color: var(--gray-700); }
.legend-strip .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }

@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-col { margin-left: 0; }
}

@media (max-width: 575px) {
  .topbar { padding: 12px 14px; }
  .topbar-actions { gap: 8px; }
  .icon-btn { width: 34px; height: 34px; }
}

/* Desktop sidebar collapse — reclaims the 258px for page content (e.g. the
   genealogy tree canvas). Toggled independently of the mobile overlay above. */
@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  body.sidebar-collapsed .main-col { margin-left: 0; }
}
.sidebar-collapse-toggle {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--gray-700); display: flex; align-items: center; justify-content: center;
}
.sidebar-collapse-toggle:hover { background: var(--gray-100); color: var(--blue); }

/* ---------- Social-proof activity toast ("New member joined — 5 mins ago") ---------- */
.activity-toast {
  position: fixed; left: 22px; bottom: 22px; z-index: 1600;
  width: 320px; max-width: calc(100vw - 44px);
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20,25,60,.16);
  padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px;
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.activity-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.activity-toast .toast-icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--green-light); color: var(--green); font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.activity-toast .toast-body { flex: 1; min-width: 0; }
.activity-toast .toast-title { font-size: .84rem; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.activity-toast .toast-name { color: var(--green); }
.activity-toast .toast-meta { font-size: .74rem; color: var(--gray-500); }
.activity-toast .toast-close {
  border: none; background: transparent; color: var(--gray-500); font-size: .95rem;
  line-height: 1; padding: 2px; flex-shrink: 0;
}
.activity-toast .toast-close:hover { color: var(--gray-700); }
.activity-toast .toast-progress {
  position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px;
  background: var(--gray-100); border-radius: 2px; overflow: hidden;
}
.activity-toast .toast-progress-bar { height: 100%; background: var(--green); width: 100%; transform-origin: left; }
.activity-toast.is-visible .toast-progress-bar { animation: activity-toast-progress 8s linear forwards; }
@keyframes activity-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 575px) {
  .activity-toast { left: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

/* ---------- Dashboard advertisement slider ---------- */
.ad-slide { display: flex; min-height: 150px; }
.ad-slide-image {
  width: 260px; flex-shrink: 0; background-size: cover; background-position: center;
  background-color: var(--blue-light);
}
.ad-slide-image-fallback { display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: 2.4rem; }
.ad-slide-body { flex: 1; min-width: 0; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
.ad-slide-title { font-weight: 700; font-size: 1.1rem; color: var(--navy); margin-bottom: 6px; }
.ad-slide-content { font-size: .88rem; color: var(--gray-700); line-height: 1.5; }
.ad-slide-link { font-size: .82rem; font-weight: 600; color: var(--blue); margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; }

.ad-slider .carousel-control-prev, .ad-slider .carousel-control-next { width: 42px; opacity: 0; transition: opacity .15s ease; }
.ad-slider:hover .carousel-control-prev, .ad-slider:hover .carousel-control-next { opacity: 1; }
.ad-slider .carousel-control-prev-icon, .ad-slider .carousel-control-next-icon {
  width: 30px; height: 30px; background-color: rgba(20,25,60,.35); border-radius: 50%; background-size: 60%;
}
.ad-slider-indicators { position: absolute; bottom: 10px; margin: 0; }
.ad-slider-indicators button {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(20,25,60,.25); border: none; opacity: 1;
}
.ad-slider-indicators button.active { background: var(--blue); width: 18px; border-radius: 4px; }

/* Compact variant: used when the slider sits in the dashboard column (replacing
   Income Overview). Styled as a member-spotlight / testimonial card — a circular
   profile photo in a medallion ring, name, and description — rather than a
   rectangular banner, since the actual ad content is a photo + name + description.
   Decorated with small confetti squares and a soft accent glow, purely
   presentational — doesn't depend on any new admin-authored fields. */
.ad-slider-compact { position: relative; overflow: hidden; background: linear-gradient(160deg, #fef6e9 0%, #fdf0dc 100%); }
.ad-slider-compact::before, .ad-slider-compact::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.ad-slider-compact::before { width: 220px; height: 220px; top: -90px; left: -90px; background: rgba(232,115,10,.07); }
.ad-slider-compact::after { width: 180px; height: 180px; bottom: -80px; right: -60px; background: rgba(107,58,23,.06); }
.ad-slider-compact .ad-slide {
  flex-direction: column; align-items: center; text-align: center; min-height: 0;
  padding: 26px 24px 22px; justify-content: center; height: 100%; position: relative; z-index: 1;
}
.ad-slider-compact .ad-slide-image {
  width: 96px; height: 96px; flex: none; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 0 0 3px var(--blue), 0 6px 16px rgba(74,38,16,.18);
}
.ad-slider-compact .ad-slide-image-fallback { font-size: 2rem; }
.ad-slider-compact .ad-slide-body { padding: 16px 4px 0; align-items: center; }
.ad-slider-compact .ad-slide-title { font-size: 1.1rem; }
.ad-slider-compact .ad-slide-content {
  font-size: .84rem; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-slider-compact .ad-slide-link { justify-content: center; }

/* Small confetti squares scattered near the avatar — CSS-only, no image asset. */
.ad-confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ad-confetti span {
  position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: .6;
}
.ad-confetti span:nth-child(1) { top: 18%; left: 12%; background: var(--green); transform: rotate(20deg); }
.ad-confetti span:nth-child(2) { top: 30%; left: 22%; background: var(--blue); transform: rotate(-15deg); width: 6px; height: 6px; }
.ad-confetti span:nth-child(3) { top: 15%; right: 16%; background: #ec4899; transform: rotate(35deg); }
.ad-confetti span:nth-child(4) { top: 34%; right: 24%; background: var(--green); transform: rotate(-25deg); width: 6px; height: 6px; }

@media (max-width: 575px) {
  .ad-slide { flex-direction: column; }
  .ad-slide-image { width: 100%; height: 140px; }
  .ad-slide-body { padding: 16px 18px; }
}

/* ---------- Auth pages: split-screen layout (branding left, form right) ---------- */
/* Decorative swirl texture behind the auth card — soft warm blobs, light-theme
   equivalent of the dark/orange "swirl" reference look, at low opacity so it reads
   as texture, not competing content. */
.auth-body {
  margin: 0; min-height: 100vh; background: var(--gray-50);
  background-image:
    radial-gradient(600px circle at 8% 12%, rgba(232,115,10,.10), transparent 60%),
    radial-gradient(500px circle at 95% 8%, rgba(107,58,23,.08), transparent 55%),
    radial-gradient(700px circle at 90% 95%, rgba(232,115,10,.09), transparent 55%),
    radial-gradient(500px circle at 5% 92%, rgba(107,58,23,.07), transparent 55%);
  display: flex; align-items: center; justify-content: center; padding: 32px;
}

.auth-split {
  display: flex; width: 100%; max-width: 980px; min-height: unset;
  background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 60px rgba(74,38,16,.14);
}

.auth-side {
  flex: 0 0 42%; max-width: 460px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--purple2) 0%, var(--blue) 65%, #f2a93f 100%);
  display: flex; align-items: center;
}
.auth-side::before, .auth-side::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.06);
}
.auth-side::before { width: 420px; height: 420px; top: -140px; right: -160px; }
.auth-side::after { width: 300px; height: 300px; bottom: -120px; left: -100px; background: rgba(255,255,255,.05); }

.auth-side-inner { position: relative; z-index: 1; padding: 48px 40px; color: #fff; width: 100%; text-align: center; }

.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand-on-dark { background: #fff; border-radius: 12px; padding: 14px 18px; display: inline-flex; box-shadow: 0 4px 14px rgba(0,0,0,.12); }

.auth-medallion {
  width: 170px; height: auto; margin: 0 auto 18px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.2));
}
.auth-side-welcome { font-size: 1.7rem; font-weight: 800; line-height: 1.25; margin-bottom: 10px; }
.auth-side-lead { font-size: .9rem; color: rgba(255,255,255,.82); margin: 0 auto 28px; max-width: 320px; }

.auth-feature-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.auth-feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .82rem; color: rgba(255,255,255,.92); }
.auth-feature-list li i { flex-shrink: 0; margin-top: 2px; font-size: .95rem; color: #fff; background: rgba(255,255,255,.16); width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }

/* Featured-product hero — a real product shot tucked into the branding panel,
   reinforcing what the business actually sells. Transparent PNG, drop-shadowed
   directly rather than boxed, so it reads as a product sitting in the scene. */
.auth-product-hero {
  display: block; width: 100%; max-width: 320px; margin: 0 auto; filter: drop-shadow(0 14px 20px rgba(0,0,0,.28));
}

.auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 40px; }
.auth-form-wrap { width: 100%; max-width: 380px; }
.auth-brand-mobile { margin-bottom: 28px; }

@media (max-width: 991px) {
  .auth-body { padding: 0; }
  .auth-split { border-radius: 0; box-shadow: none; min-height: 100vh; }
  .auth-side { display: none; }
  .auth-form-side { padding: 32px 20px; }
}

/* ---------- Registration wizard ---------- */
.reg-steps { display: flex; align-items: center; gap: 8px; }
.reg-step { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--gray-500); }
.reg-step:not(:last-child)::after { content: ''; width: 24px; height: 2px; background: var(--border); margin-left: 8px; }
.reg-step-dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gray-100); color: var(--gray-500);
  display: flex; align-items: center; justify-content: center; font-size: .78rem; flex-shrink: 0;
}
.reg-step.active { color: var(--navy); }
.reg-step.active .reg-step-dot { background: var(--blue); color: #fff; }
.reg-step.done .reg-step-dot { background: var(--green); color: #fff; }

.doc-upload {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px; border: 1.5px dashed var(--border); border-radius: 12px;
  padding: 18px 10px; cursor: pointer; background: var(--gray-50); min-height: 118px; overflow: hidden;
}
.doc-upload:hover { border-color: var(--blue); background: var(--blue-light); }
.doc-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.doc-upload-preview { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .15s ease; }
.doc-upload.has-file .doc-upload-preview { opacity: 1; }
.doc-upload.has-file .doc-upload-body { position: relative; z-index: 1; background: rgba(255,255,255,.88); border-radius: 8px; padding: 6px 10px; }
.doc-upload-body { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.doc-upload-body i { font-size: 1.4rem; color: var(--blue); }
.doc-upload-label { font-size: .78rem; font-weight: 600; color: var(--navy); }
.doc-upload.has-file .doc-upload-label { color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.doc-upload-hint { font-size: .68rem; color: var(--gray-500); }

.reg-qr-img { width: 220px; height: 220px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: #fff; }

.reg-pending-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 18px;
}

/* ---------- Registration success celebration ---------- */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -12px; width: 9px; height: 14px; opacity: .9;
  border-radius: 2px; animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(var(--rot)); opacity: 1; }
  100% { transform: translate(var(--drift), 105vh) rotate(calc(var(--rot) + 540deg)); opacity: 0; }
}

.reg-success-icon-wrap { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; }
.reg-success-icon {
  position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%;
  background: var(--green-light); color: var(--green); display: flex; align-items: center;
  justify-content: center; font-size: 2.4rem; animation: reg-success-pop .5s cubic-bezier(.34,1.56,.64,1);
}
.reg-success-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green);
  opacity: 0; animation: reg-success-ring 1.6s ease-out infinite;
}
.reg-success-ring-2 { animation-delay: .5s; }
@keyframes reg-success-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes reg-success-ring {
  0%   { transform: scale(.8); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reg-success-icon, .reg-success-ring { animation: none; }
}

/* =========================================================
   Public marketing website (home page)
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(74,38,16,.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-header-inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; }
.site-header .brand-logo-img { max-width: 150px; }
.site-logo-img { height: 80px; width: auto; }
@media (max-width: 767px) {
  .site-logo-img { height: 56px; }
}
.site-nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin-left: 16px; flex: 1; }
.site-nav a { color: rgba(255,255,255,.85); font-weight: 600; font-size: .92rem; }
.site-nav a:hover { color: var(--blue); }
.site-header-actions { display: flex; align-items: center; gap: 12px; }
.site-nav-toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  width: 40px; height: 40px; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff;
}
.site-mobile-nav nav { display: flex; flex-direction: column; padding: 8px 24px 16px; border-top: 1px solid rgba(255,255,255,.12); }
.site-mobile-nav nav a { padding: 13px 0; font-weight: 600; font-size: .92rem; color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.12); }
.site-mobile-nav nav a:last-child { border-bottom: none; }
.btn-site-login {
  background: var(--blue); color: #fff !important; padding: 9px 22px; border-radius: 999px;
  font-weight: 700; font-size: .88rem; box-shadow: 0 4px 12px rgba(232,115,10,.28);
}
.btn-site-login:hover { background: #c2600a; color: #fff !important; }

.site-section { padding: 76px 24px; }
.site-section-inner { max-width: 1180px; margin: 0 auto; }
.site-section-alt { background: #fff; }
.site-eyebrow { color: var(--blue); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.site-heading { font-size: 2.1rem; font-weight: 800; color: var(--navy); line-height: 1.25; margin-bottom: 14px; }
.site-lead { color: var(--gray-700); font-size: 1.02rem; max-width: 620px; line-height: 1.6; }

/* Hero */
.site-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--purple2) 0%, var(--blue) 65%, #f2a93f 100%);
  padding: 90px 24px 70px;
}
.site-hero::before, .site-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.06); }
.site-hero::before { width: 480px; height: 480px; top: -180px; right: -140px; }
.site-hero::after { width: 340px; height: 340px; bottom: -160px; left: -100px; background: rgba(255,255,255,.05); }
.site-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 48px; }
.site-hero-copy { flex: 1; min-width: 320px; }
.site-hero-title { font-size: 2.6rem; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 18px; }
.site-hero-lead { color: rgba(255,255,255,.85); font-size: 1.05rem; max-width: 480px; margin-bottom: 30px; line-height: 1.6; }
.site-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-hero-primary {
  background: #fff; color: var(--blue) !important; padding: 13px 28px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.btn-hero-outline {
  background: rgba(255,255,255,.12); color: #fff !important; padding: 13px 28px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; border: 1.5px solid rgba(255,255,255,.5);
}
.site-hero-visual { flex: 0 0 340px; text-align: center; }
.site-hero-visual img { width: 100%; max-width: 320px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.3)); }

/* Feature grid */
.site-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 36px; }
.site-feature-card {
  background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px 22px;
  text-align: left; transition: transform .15s, box-shadow .15s;
}
.site-feature-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(74,38,16,.1); }
.site-feature-icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; margin-bottom: 16px;
}
.site-feature-card h3 { font-size: 1.02rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.site-feature-card p { font-size: .86rem; color: var(--gray-700); line-height: 1.55; margin: 0; }

/* Product showcase */
.site-product { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }
.site-product-visual { flex: 0 0 340px; text-align: center; }
.site-product-visual img { width: 100%; max-width: 320px; filter: drop-shadow(0 18px 26px rgba(74,38,16,.2)); }
.site-product-copy { flex: 1; min-width: 300px; }
.site-product-badges { display: flex; gap: 22px; margin: 22px 0; flex-wrap: wrap; }
.site-product-badge { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; color: var(--navy); }
.site-product-badge i { color: var(--blue); font-size: 1.2rem; }

.p-prod-specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px;
  background: var(--gray-50); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; margin: 24px 0;
}
.p-prod-spec-label { font-size: .72rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.p-prod-spec-value { font-size: .92rem; font-weight: 700; color: var(--navy); }
.p-prod-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Plans */
.site-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 36px; }
.site-plan-card {
  background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px 24px; text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.site-plan-card.is-popular { border-color: var(--blue); box-shadow: 0 10px 24px rgba(232,115,10,.14); position: relative; }
.site-plan-card:hover { transform: translateY(-4px); }
.site-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #fff;
  font-size: .68rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.site-plan-name { font-weight: 700; color: var(--navy); font-size: 1.05rem; margin-bottom: 6px; }
.site-plan-price { font-size: 1.9rem; font-weight: 900; color: var(--blue); margin-bottom: 6px; }
.site-plan-desc { font-size: .82rem; color: var(--gray-700); }

/* How it works steps */
.site-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; margin-top: 36px; }
.site-step { text-align: center; }
.site-step-num {
  width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 1.1rem;
}
.site-step h4 { font-size: .96rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.site-step p { font-size: .84rem; color: var(--gray-700); margin: 0; }

/* Final CTA */
.site-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--purple2) 100%); text-align: center; padding: 70px 24px; }
.site-cta h2 { color: #fff; font-size: 1.8rem; font-weight: 800; margin-bottom: 14px; }
.site-cta p { color: rgba(255,255,255,.8); margin-bottom: 26px; }

/* Footer */
.site-footer { background: var(--navy-dark); color: rgba(255,255,255,.7); padding: 44px 24px 24px; font-size: .85rem; }
.site-footer-inner { max-width: 1180px; margin: 0 auto; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: #fff; }
.site-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 18px; font-size: .78rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* The full inline nav (6 links + language switcher + Login) genuinely doesn't fit
   in tablet-width headers — "About Us" wraps and the Login button gets pushed off
   the edge at ~768px. Hamburger from 991px down, not just true mobile. */
@media (max-width: 991px) {
  .site-nav { display: none; }
  .site-nav-toggle { display: flex; }
  /* With the nav hidden, only 2 items are left in this flex row (logo, actions) —
     without space-between they just pack to the left with the gap as a fixed
     minimum, leaving the actions group short of the right edge on anything wider
     than the exact width the gap value was tuned for. space-between pins the
     actions group to the right edge at any width, gap still guarantees the
     minimum spacing between the two. */
  .site-header-inner { flex-wrap: nowrap; justify-content: space-between; }
}
/* Logo + language pill + Login + hamburger all need to fit on one row at phone
   widths — dropping the "English" text (the dropdown menu still spells out every
   language in full) is what actually buys back the room; a plain icon+caret pill
   is a well-understood pattern and needs far less width than the full label. */
@media (max-width: 480px) {
  .site-header-inner { gap: 20px; padding-left: 16px; padding-right: 16px; }
  .lang-label { display: none; }
  .site-header-actions { gap: 16px; }
  .site-logo-img { height: 46px; }
  .btn-site-login { padding: 9px 14px; font-size: .8rem; }
  .site-nav-toggle { width: 36px; height: 36px; font-size: 1.1rem; }
}
@media (max-width: 767px) {
  .site-hero-title { font-size: 2rem; }
  .site-hero-inner { flex-direction: column; text-align: center; }
  .site-hero-actions { justify-content: center; }
  .site-hero-copy { text-align: center; }
  .site-hero-lead { margin-left: auto; margin-right: auto; }
  .site-product { flex-direction: column; text-align: center; }
  .site-section { padding: 52px 18px; }
}

/* =========================================================
   Product-storefront homepage (I-VITA Flaxseed Oil)
   ========================================================= */
.site-nav a.is-active { color: var(--blue); border-bottom: 2px solid var(--blue); padding-bottom: 4px; }
.site-member-link { color: var(--gray-700); font-size: .84rem; font-weight: 600; }
.site-member-link:hover { color: var(--blue); }
.btn-shop-now {
  background: var(--purple2); color: #fff !important; padding: 10px 22px; border-radius: 999px;
  font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 12px rgba(74,38,16,.25);
}
.btn-shop-now:hover { background: var(--navy); color: #fff !important; }
.btn-shop-now-lg { padding: 14px 30px; font-size: .95rem; }
.btn-learn-more {
  color: var(--navy) !important; font-weight: 700; font-size: .95rem; padding: 14px 10px;
  display: inline-flex; align-items: center; gap: 6px;
}

.p-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #fdf3d9 0%, #fbe3ae 55%, #f7cf82 100%);
}
/* Natural aspect ratio, no object-fit cropping — the banner already has its headline,
   logo and product shot composed into the image, so nothing in it is safe to trim off
   at any width. Height simply follows width, so the full image is always visible. */
.p-hero-full-img { display: block; width: 100%; height: auto; }

.p-feature-strip-wrap { max-width: 1180px; margin: -60px auto 0; padding: 0 24px; position: relative; z-index: 2; }
.p-feature-strip {
  background: #fdfbf5; border-radius: 20px; box-shadow: 0 16px 36px rgba(74,38,16,.14);
  padding: 30px 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 30px;
}
.p-feature-item { display: flex; align-items: flex-start; gap: 14px; }
.p-feature-icon {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--blue); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.p-feature-item h4 { font-size: .88rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.p-feature-item p { font-size: .78rem; color: var(--gray-700); margin: 0; line-height: 1.4; }

.p-why-grid { display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.p-why-copy { flex: 1; min-width: 320px; }
.p-why-kicker { color: var(--blue); font-weight: 700; font-size: .82rem; letter-spacing: .04em; }
.p-why-title { font-size: 2rem; font-weight: 800; color: var(--navy); margin: 4px 0 14px; border-bottom: 3px solid var(--blue); display: inline-block; padding-bottom: 8px; }
.p-why-list-row { display: flex; align-items: center; gap: 18px; margin: 26px 0; }
.p-why-list { display: flex; flex-direction: column; gap: 16px; flex: 1; margin: 0; }
.p-why-flowers-accent { width: 220px; flex-shrink: 0; filter: drop-shadow(0 8px 14px rgba(74,38,16,.14)); }
@media (max-width: 1199px) { .p-why-flowers-accent { display: none; } }
.p-why-item { display: flex; align-items: center; gap: 14px; }
.p-why-icon {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--blue); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.p-why-item h5 { font-size: .92rem; font-weight: 700; color: var(--navy); margin: 0; }
.p-why-item p { font-size: .8rem; color: var(--gray-700); margin: 0; }

.p-benefits-card { flex: 0 0 460px; max-width: 100%; background: var(--blue-light); border-radius: 22px; padding: 34px 30px; }
.p-benefits-card h3 { text-align: center; font-weight: 800; color: var(--navy); font-size: 1.15rem; letter-spacing: .03em; margin-bottom: 24px; }
.p-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.p-benefit { text-align: center; }
.p-benefit-icon {
  width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 10px;
  box-shadow: 0 4px 10px rgba(74,38,16,.1);
}
.p-benefit h5 { font-size: .86rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.p-benefit p { font-size: .74rem; color: var(--gray-700); margin: 0; line-height: 1.4; }

.p-ingredients-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.p-ingredient-chip {
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 12px 20px;
  font-size: .85rem; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 8px;
}
.p-ingredient-chip i { color: var(--blue); }

.p-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 32px; }
.p-testimonial-card { background: var(--gray-50); border-radius: 18px; padding: 28px 24px; }
.p-testimonial-card i { color: var(--blue); font-size: 1.6rem; }
.p-testimonial-card p { color: var(--gray-700); font-size: .9rem; line-height: 1.6; margin: 10px 0 14px; }
.p-testimonial-name { font-weight: 700; color: var(--navy); font-size: .88rem; }

@media (max-width: 991px) {
  .p-feature-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .p-feature-strip { grid-template-columns: 1fr; }
  .p-benefits-card { padding: 26px 20px; }
  /* On mobile the -60px overlap ate into the banner's own content (which has no
     safe margin reserved at that size) — sit it below instead, same as a normal
     stacked section. */
  .p-feature-strip-wrap { margin-top: 20px; }
}

/* =========================================================
   Additional storefront sections (products carousel, process
   steps, enhanced testimonials, MLM-family CTA, app showcase,
   newsletter, richer footer)
   ========================================================= */

/* ---- Our Products carousel ---- */
.p-products-wrap { position: relative; }
.p-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.p-product-card {
  background: linear-gradient(160deg, #fdf3d9 0%, #fbe3ae 100%); border-radius: 18px; padding: 24px 20px;
  text-align: center; transition: transform .15s, box-shadow .15s;
}
.p-product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(74,38,16,.14); }
.p-product-card img { width: 100%; max-width: 150px; margin-bottom: 14px; filter: drop-shadow(0 8px 12px rgba(74,38,16,.18)); }
.p-product-card h4 { font-size: .96rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.p-product-card p { font-size: .78rem; color: var(--gray-700); min-height: 34px; margin-bottom: 12px; }
.p-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--navy); box-shadow: 0 4px 10px rgba(74,38,16,.1); z-index: 2;
}
.p-carousel-arrow.left { left: -20px; }
.p-carousel-arrow.right { right: -20px; }

/* ---- Process steps (dashed connector) ---- */
.p-process-wrap { background: #fdf3d9; border-radius: 22px; padding: 40px 34px; margin-top: 30px; position: relative; }
.p-process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.p-process-steps::before {
  content: ''; position: absolute; top: 30px; left: 10%; right: 10%; height: 0;
  border-top: 2px dashed rgba(107,58,23,.3); z-index: 0;
}
.p-process-step { text-align: center; position: relative; z-index: 1; }
.p-process-icon {
  width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 12px;
}
.p-process-step h5 { font-size: .84rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.p-process-step p { font-size: .72rem; color: var(--gray-700); margin: 0; line-height: 1.4; }

/* ---- Enhanced testimonials ---- */
.p-testimonial-stars { color: #f5a623; font-size: .8rem; margin-bottom: 10px; }
.p-testimonial-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.p-testimonial-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0;
}
.p-testimonial-loc { font-size: .74rem; color: var(--gray-500); }

/* ---- Be a Part of I Vision Family ---- */
.p-family-section { background: var(--gray-100); }
.p-family-grid { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.p-family-perks { display: flex; flex-wrap: wrap; gap: 22px; margin: 22px 0 26px; }
.p-family-perk { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600; color: var(--navy); }
.p-family-perk i { color: var(--blue); font-size: 1.15rem; }
.p-family-copy { flex: 7 1 0; min-width: 320px; }
.p-family-visual { flex: 3 1 0; min-width: 280px; max-width: 100%; position: relative; }
.p-family-photo {
  width: 100%; height: 280px; border-radius: 20px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple2) 100%);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.p-family-photo img, .p-family-photo video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.p-family-photo i { font-size: 4rem; color: rgba(255,255,255,.35); }
.p-family-stat {
  position: absolute; bottom: -24px; right: 20px; background: #fff; border-radius: 16px; padding: 16px 22px;
  box-shadow: 0 10px 26px rgba(74,38,16,.18); text-align: center;
}
.p-family-stat .num { font-size: 1.5rem; font-weight: 900; color: var(--blue); }
.p-family-stat .lbl { font-size: .72rem; color: var(--gray-500); }

/* ---- Manage Your Business Easily ---- */
.p-manage-grid { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }
.p-manage-visual { flex: 0 0 440px; max-width: 100%; position: relative; display: flex; align-items: flex-end; }
.p-device-laptop {
  width: 100%; border-radius: 10px 10px 0 0; overflow: hidden; border: 8px solid var(--navy); border-bottom: none;
  box-shadow: 0 20px 40px rgba(74,38,16,.2);
}
.p-device-laptop img { display: block; width: 100%; }
.p-device-laptop-base { height: 12px; background: var(--navy); border-radius: 0 0 6px 6px; margin: 0 -4px; }
.p-device-phone {
  position: absolute; right: -18px; bottom: -20px; width: 34%; border-radius: 22px; overflow: hidden;
  border: 6px solid var(--navy); box-shadow: 0 14px 30px rgba(74,38,16,.24); background: var(--navy);
}
.p-device-phone img { display: block; width: 100%; }
.p-manage-copy { flex: 1; min-width: 300px; }
.p-manage-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0 26px; }
.p-manage-list div { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--navy); }
.p-manage-list i { color: var(--green); }
.p-store-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.p-store-btn {
  display: flex; align-items: center; gap: 8px; background: var(--navy); color: #fff !important; padding: 9px 18px;
  border-radius: 10px; font-size: .8rem;
}
.p-store-btn i { font-size: 1.3rem; }
.p-store-btn small { display: block; font-size: .62rem; opacity: .8; }
.p-store-btn strong { display: block; font-size: .82rem; }

/* ---- Newsletter ---- */
.p-newsletter { background: linear-gradient(120deg, #fdf3d9 0%, #f7cf82 100%); padding: 44px 24px; }
.p-newsletter-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.p-newsletter-copy { display: flex; align-items: center; gap: 16px; }
.p-newsletter-icon {
  width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--blue); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.p-newsletter-copy h4 { font-size: 1rem; font-weight: 800; color: var(--navy); margin: 0; }
.p-newsletter-copy p { font-size: .8rem; color: var(--gray-700); margin: 0; }
.p-newsletter-form { display: flex; gap: 10px; flex: 1; max-width: 420px; }
.p-newsletter-form input {
  flex: 1; border: none; border-radius: 999px; padding: 12px 20px; font-size: .85rem; font-family: inherit;
}
.p-newsletter-form button {
  background: var(--navy); color: #fff; border: none; border-radius: 999px; padding: 12px 26px;
  font-weight: 700; font-size: .85rem;
}

/* ---- Richer footer ---- */
.site-footer-social { display: flex; gap: 10px; margin-top: 14px; }
.site-footer-social a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; color: #fff !important;
}
.site-footer-social a:hover { background: var(--blue); }
.site-footer-payments { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.site-footer-payments span {
  background: rgba(255,255,255,.1); border-radius: 6px; padding: 4px 10px; font-size: .72rem; font-weight: 700; color: #fff;
}

@media (max-width: 991px) {
  .p-products-grid { grid-template-columns: repeat(2, 1fr); }
  .p-process-steps { grid-template-columns: repeat(1, 1fr); gap: 24px; }
  .p-process-steps::before { display: none; }
  .p-manage-visual { flex-basis: 100%; }
}
@media (max-width: 767px) {
  .p-products-grid { grid-template-columns: 1fr; }
  .p-carousel-arrow { display: none; }
  .p-family-visual, .p-manage-visual { flex-basis: 100%; }
  .p-newsletter-inner { flex-direction: column; align-items: stretch; }
  .p-newsletter-form { max-width: none; }
}