/* ============================================================
   Design tokens
   Subject: an ADJD-registered will you complete online.
   Palette pulled directly from the OwnX logo: charcoal wordmark
   + blue gradient X.
   ============================================================ */
:root {
  --ink: #262626;
  /* charcoal, matches logo's OWN lettering */
  --ink-raised: #FFFFFF;
  /* raised light surface (inputs, plan cards) */
  --paper: #F5F7FA;
  /* page background */
  --parchment: #FFFFFF;
  /* elevated card surface */
  --parchment-dim: #EDF1F5;
  --text-on-ink: var(--ink);
  --text-muted: #6B7280;
  --brass: #0080D6;
  /* primary accent, from logo's blue */
  --brass-bright: #1CA3FF;
  --ledger-green: #0057A8;
  /* "registered / verified" state, deep blue */

  /* Standard Brand Blue Tokens */
  --blue-primary: #0080D6;
  --blue-hover: #006CB5;
  --blue-bright: #1CA3FF;
  --blue-dark: #0057A8;
  --blue-light: #EBF5FC;
  --blue-subtle: rgba(0, 128, 214, 0.08);
  --ox-blue: var(--blue-primary);
  --ox-blue-hover: var(--blue-hover);

  --line: rgba(38, 38, 38, 0.12);
  --on-brand: #FFFFFF;
  --brand-gradient: linear-gradient(135deg, #0080D6, #006CB5);
  /* the X mark's gradient */


  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: 'IBM Plex Mono', monospace;

  /* Glass surfaces — used only inside the logged-in app shell
     (customer + reviewer dashboards), not the public marketing site. */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.07);
  --glass-shadow-lg: 0 24px 64px -16px rgba(15, 23, 42, 0.16);
  --radius-lg: 18px;
  --radius-md: 12px;
}

* {
  box-sizing: border-box;
}

/* Removes the native up/down spinner arrows from every type="number"
   field across the app (percentage inputs, quantities, etc.) -- a plain
   text-style number field is what every one of these actually looks
   like in the design elsewhere, and the spinner adds a click target
   nobody uses without matching that visual language. */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav (shared base — every public-facing page) ---------- */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}

.nav-bar.is-scrolled {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--glass-shadow);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.nav__brand {
  display: flex;
  align-items: center;
}

.nav__brand-logo {
  height: 28px;
  width: auto;
  display: block;
}

.nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav__links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14.5px;
  transition: color .15s ease;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--text-on-ink);
}

.nav__links a.btn--brass {
  color: var(--on-brand);
}

/* ---------- Buttons (shared base — every public-facing page) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn[hidden] {
  display: none;
}

.btn:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
}

.btn--brass {
  background: var(--blue-primary, #0080D6);
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 128, 214, 0.25);
}

.btn--brass:hover {
  background: var(--blue-hover, #006CB5);
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 128, 214, 0.35);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text-on-ink);
}

.btn--ghost:hover {
  border-color: var(--brass);
}

.btn--outline {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--line, rgba(0, 0, 0, 0.16));
  color: var(--ink, #0f172a);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn--outline:hover {
  background: #ffffff;
  border-color: var(--blue-primary, #0080D6);
  color: var(--blue-primary, #0080D6);
}

.btn--danger {
  background: transparent;
  border-color: rgba(192, 57, 43, 0.4);
  color: #C0392B;
}

.btn--danger:hover {
  background: rgba(192, 57, 43, 0.08);
  border-color: #C0392B;
}

/* Reviewer pages only: the ONE action that actually advances this
   application to its next stage (Approve, Generate/Continue, Process
   Documents, Mark as Paid, the manual ADJD-progress markers) -- same
   solid/gradient weight as .btn--brass so it still reads as a primary
   button, just in the app's existing danger-red (see .btn--danger /
   .flash-banner--error) instead of brand blue, so it visually stands out
   as "do this next" among the other, optional actions on the same page. */
.btn--action-needed {
  background: linear-gradient(135deg, #E74C3C, #C0392B);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(192, 57, 43, 0.35);
}

.btn--action-needed:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(192, 57, 43, 0.42);
}

.btn--sm {
  padding: 8px 14px;
  font-size: 13px;
}

.btn svg,
.btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn--sm svg,
.btn--sm .btn__icon {
  width: 13px;
  height: 13px;
}

.flash-banner {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: 13.5px;
}

.flash-banner--error {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: #C0392B;
}

.flash-banner--success {
  background: rgba(0, 87, 168, 0.08);
  border: 1px solid rgba(0, 87, 168, 0.3);
  color: var(--ledger-green);
}

/* ---------- Scroll-reveal (shared base — JS toggles .is-visible via IntersectionObserver, used on payment/questionnaire/gift/redeem too) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--d1.is-visible {
  transition-delay: .08s;
}

.reveal--d2.is-visible {
  transition-delay: .16s;
}

.reveal--d3.is-visible {
  transition-delay: .24s;
}

.reveal--d4.is-visible {
  transition-delay: .32s;
}

.count-up {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   HOMEPAGE 2.1 — refinement pass
   OwnX black + blue identity (not ivory/gold): near-black
   headlines, deep-navy trust sections, OwnX blue accents/CTAs,
   white/blue-grey backgrounds. Editorial serif reserved for a
   handful of emotional statements; section headings are bold
   sans. Scoped entirely to `.home-body`.
   ============================================================ */
.home-body {
  --home-charcoal: #14161C;
  --home-navy: #0F1F3D;
  --home-navy-2: #17335E;
  --home-white: #FFFFFF;
  --home-blue-grey: #EEF2F7;
  --home-blue: #0080D6;
  --home-blue-bright: #1CA3FF;
  --home-line: rgba(20, 22, 28, 0.12);
  --home-line-on-navy: rgba(255, 255, 255, 0.14);
  --home-text: #191C22;
  --home-text-muted: #5A6472;
  --home-text-on-navy: #F5F7FA;
  --home-text-on-navy-muted: rgba(245, 247, 250, 0.68);
  --home-font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --home-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  /*--home-font-mono: 'IBM Plex Mono', monospace;*/
  --home-font-mono: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--home-white);
  color: var(--home-text);
  font-family: var(--home-font-body);
}

/* ---------- Nav (scoped override — homepage only) ---------- */
.home-body .nav-bar {
  background: transparent;
}

.home-body .nav-bar.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--home-line);
}

.home-body .nav {
  border-bottom: 1px solid transparent;
  padding: 26px 0;
}

.home-body .nav__links a {
  color: var(--home-text-muted);
  font-family: var(--home-font-body);
  font-size: 14px;
}

.home-body .nav__links a:hover,
.home-body .nav__links a:focus-visible {
  color: var(--home-charcoal);
}

.home-body .nav__links a.btn--brass {
  color: #fff;
}

.home-body .btn--brass {
  background: var(--home-blue);
  color: #fff;
  box-shadow: none;
  border-radius: 3px;
  font-family: var(--home-font-body);
}

.home-body .btn--brass:hover {
  background: var(--home-blue-bright);
  transform: none;
  box-shadow: 0 4px 14px rgba(0, 128, 214, 0.28);
}

.home-body .btn--ghost {
  border-color: var(--home-line);
  color: var(--home-charcoal);
  border-radius: 3px;
  font-family: var(--home-font-body);
}

.home-body .btn--ghost:hover {
  border-color: var(--home-blue);
  background: transparent;
}

.home-body .footer {
  border-top: 1px solid var(--home-line);
  color: var(--home-text-muted);
}

/* ---------- Shared editorial primitives ---------- */
.home-body .eyebrow {
  font-family: var(--home-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--home-blue);
  margin-bottom: 18px;
  display: block;
}

.home-body .eyebrow--on-navy {
  color: var(--home-blue-bright);
}

.home-body .section2 {
  position: relative;
  padding: 128px 0;
}

.home-body .section2.container,
.home-body .container.section2 {
  padding-left: 24px;
  padding-right: 24px;
}

.home-body .section2--tight {
  padding: 80px 0;
}

.home-body .section2--blue-grey {
  background: var(--home-blue-grey);
}

.home-body .section2--navy {
  background: var(--home-navy);
  color: var(--home-text-on-navy);
}

.home-body .section2--rule {
  border-top: 1px solid var(--home-line);
}

.home-body .section2--navy.section2--rule {
  border-top: 1px solid var(--home-line-on-navy);
}

.home-body .heading2 {
  font-family: var(--home-font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.18;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  color: var(--home-charcoal);
}

.home-body .section2--navy .heading2 {
  color: inherit;
}

.home-body .heading2.sans {
  font-family: var(--home-font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 34px;
}

.home-body .sub2 {
  font-size: 17px;
  color: var(--home-text-muted);
  max-width: 56ch;
  margin: 0 0 56px;
  line-height: 1.6;
}

.home-body .section2--navy .sub2 {
  color: var(--home-text-on-navy-muted);
}

.home-body .statement {
  font-family: var(--home-font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin: 0;
  color: inherit;
}

.home-body .statement em {
  font-style: normal;
  color: var(--home-blue-bright);
}

/* ---------- Hero — editorial, no product UI ---------- */
.home-body .hero3 {
  padding: 64px 0 84px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.home-body .hero3.container,
.home-body .container.hero3 {
  padding-left: 24px;
  padding-right: 24px;
}

.home-body .hero3__eyebrow {
  font-family: var(--home-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--home-blue);
  margin-bottom: 20px;
}

.home-body .hero3 h1 {
  font-family: var(--home-font-display);
  font-weight: 700;
  font-size: 58px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--home-charcoal);
}

.home-body .hero3__lead {
  font-size: 18px;
  color: var(--home-text-muted);
  max-width: 44ch;
  margin: 0 0 30px;
  line-height: 1.6;
}

.home-body .hero3__ctas {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.home-body .hero3__fine {
  font-size: 13px;
  color: var(--home-text-muted);
  margin-bottom: 28px;
}

/* Hero Social Proof / Google Reviews Authenticity Badge */
.home-body .hero3__trust-rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 40px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  font-size: 13px;
  color: #374151;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.home-body .hero3__trust-rating:hover {
  border-color: rgba(66, 133, 244, 0.4);
  box-shadow: 0 4px 18px rgba(66, 133, 244, 0.12);
  transform: translateY(-2px);
  color: #111827;
}

.home-body .hero3__google-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.home-body .hero3__stars {
  display: inline-flex;
  gap: 3px;
  color: #F59E0B;
}

.home-body .hero3__stars svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.home-body .hero3__rating-text {
  font-weight: 600;
  color: #111827;
}

.home-body .hero3__rating-sub {
  color: #6B7280;
  font-weight: 400;
}

.home-body .hero3__rating-arrow {
  color: #9CA3AF;
  transition: transform 0.2s ease, color 0.2s ease;
  margin-left: -2px;
}

.home-body .hero3__trust-rating:hover .hero3__rating-arrow {
  transform: translateX(3px);
  color: #4285F4;
}

/* Document Mockup Visual Container */
.home-body .hero3__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.home-body .hero3__visual-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.12));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.home-body .hero3__visual-svg:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 28px 50px rgba(15, 23, 42, 0.18));
}

.home-body .credentials {
  padding: 24px 0;
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  width: 100%;
  box-sizing: border-box;
}

.home-body .credentials.container,
.home-body .container.credentials {
  padding-left: 24px;
  padding-right: 24px;
}

.home-body .credentials__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.home-body .credentials__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  font-family: var(--home-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--home-text-muted);
  border-left: 1px solid var(--home-line);
  white-space: nowrap;
}

.home-body .credentials__item:first-child {
  border-left: none;
  padding-left: 0;
}

.home-body .credentials__item svg {
  width: 15px;
  height: 15px;
  color: var(--home-blue);
  flex-shrink: 0;
}

/* ---------- Storytelling — signature moment: photo + deep-navy panel ---------- */
.home-body .story {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  align-items: stretch;
  min-height: 540px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.home-body .story__media {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15, 31, 61, 0.1), rgba(15, 31, 61, 0.55)),
    url('https://images.unsplash.com/photo-1773625680521-24296b61ba25?w=1400&q=75&auto=format&fit=crop') center/cover no-repeat;
}

.home-body .story__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 72px;
  background: var(--home-navy);
  color: var(--home-text-on-navy);
}

.home-body .story__copy .statement {
  margin-bottom: 24px;
  color: #fff;
}

.home-body .story__copy p {
  font-size: 16.5px;
  color: var(--home-text-on-navy-muted);
  max-width: 46ch;
  line-height: 1.7;
  margin: 0 0 12px;
}

/* ---------- UAE context / data storytelling ---------- */
.home-body .data-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.home-body .data-block {
  padding: 0 32px 0 0;
  border-left: 1px solid var(--home-line);
  padding-left: 32px;
}

.home-body .data-block:first-child {
  border-left: none;
  padding-left: 0;
}

.home-body .data-block__num {
  font-family: var(--home-font-display);
  font-size: 40px;
  color: var(--home-charcoal);
  margin-bottom: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.home-body .data-block__label {
  font-size: 13.5px;
  color: var(--home-text-muted);
  line-height: 1.5;
}

/* ---------- How it works + your account — one merged journey ---------- */
.home-body .journey {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;
}

.home-body .journey__steps {
  display: flex;
  flex-direction: column;
}

.home-body .journey__step {
  padding: 32px 0;
  border-top: 1px solid var(--home-line);
  cursor: default;
  opacity: 0.42;
  transition: opacity .35s ease;
}

.home-body .journey__step:first-child {
  border-top: none;
}

.home-body .journey__step.is-active {
  opacity: 1;
}

.home-body .journey__step-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}

.home-body .journey__step-num {
  font-family: var(--home-font-mono);
  font-size: 13px;
  color: var(--home-blue);
}

.home-body .journey__step-tag {
  font-family: var(--home-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-text-muted);
  margin-left: auto;
}

.home-body .journey__step h3 {
  font-family: var(--home-font-body);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.home-body .journey__step p {
  font-size: 14.5px;
  color: var(--home-text-muted);
  margin: 0;
  max-width: 46ch;
  line-height: 1.6;
}

.home-body .journey__visual {
  position: sticky;
  top: 100px;
  background: var(--home-navy);
  border-radius: 4px;
  padding: 28px;
  box-shadow: 0 28px 60px -24px rgba(15, 31, 61, 0.4);
}

.home-body .dash-mock2 {
  background: #fff;
  color: var(--home-text);
  border-radius: 4px;
  padding: 30px;
}

.home-body .dash-mock2__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.home-body .dash-mock2__name {
  font-family: var(--home-font-body);
  font-weight: 700;
  font-size: 15px;
}

.home-body .dash-mock2__ref {
  font-family: var(--home-font-mono);
  font-size: 11px;
  color: var(--home-text-muted);
  margin-bottom: 20px;
}

.home-body .dash-mock2__badge {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--home-blue);
  padding: 4px 11px;
  border-radius: 20px;
}

.home-body .dash-mock2__step {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--home-line);
}

.home-body .dash-mock2__step:first-of-type {
  border-top: none;
}

.home-body .dash-mock2__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  background: var(--home-blue);
  margin-top: 1px;
}

.home-body .dash-mock2__dot--pending {
  background: rgba(20, 22, 28, 0.12);
  color: var(--home-text-muted);
}

.home-body .dash-mock2__step strong {
  display: block;
  font-size: 13.5px;
}

.home-body .dash-mock2__step span {
  font-size: 12px;
  color: var(--home-text-muted);
}

/* ---------- "What you're protecting" — signature deep-navy moment ---------- */
.home-body .protecting {
  text-align: center;
  background: var(--home-navy);
  color: var(--home-text-on-navy);
}

.home-body .protecting__eyebrow {
  text-align: center;
}

.home-body .protecting__lines {
  max-width: 760px;
  margin: 0 auto;
}

.home-body .protecting__line {
  font-family: var(--home-font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.5;
  color: rgba(245, 247, 250, 0.24);
  transition: color .5s ease;
}

.home-body .protecting__line.is-visible {
  color: #fff;
}

.home-body .protecting__line--accent.is-visible {
  color: var(--home-blue-bright);
}

/* ---------- Why OwnX / Who's behind OwnX — editorial list, not a card grid ---------- */
.home-body .why-list {
  display: flex;
  flex-direction: column;
}

.home-body .why-row {
  display: grid;
  grid-template-columns: 90px 1fr 220px;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--home-line);
  align-items: baseline;
}

.home-body .why-row:first-child {
  border-top: none;
}

.home-body .why-row__num {
  font-family: var(--home-font-mono);
  font-size: 14px;
  color: var(--home-blue);
}

.home-body .why-row__num svg {
  width: 20px;
  height: 20px;
  color: var(--home-blue);
}

.home-body .why-row h3 {
  font-family: var(--home-font-body);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.home-body .why-row p {
  font-size: 14.5px;
  color: var(--home-text-muted);
  margin: 0;
  max-width: 52ch;
  line-height: 1.6;
}

.home-body .why-row__stat {
  text-align: right;
  font-family: var(--home-font-display);
  font-size: 24px;
  color: var(--home-charcoal);
}

.home-body .why-row__stat small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--home-text-muted);
  font-family: var(--home-font-body);
  margin-top: 4px;
}

.home-body .credentials2-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}

.home-body .credentials2-block {
  padding: 0 24px;
  border-left: 1px solid var(--home-line);
}

.home-body .credentials2-block:first-child {
  border-left: none;
}

.home-body .credentials2-block__num {
  font-family: var(--home-font-display);
  font-size: 34px;
  color: var(--home-charcoal);
  margin-bottom: 6px;
}

.home-body .credentials2-block__label {
  font-size: 12.5px;
  color: var(--home-text-muted);
}

/* ---------- Comparison table ---------- */
.home-body .comparison2-wrap {
  border: 1px solid var(--home-line);
  border-radius: 4px;
  overflow-x: auto;
  background: #fff;
}

.home-body .comparison2 {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.home-body .comparison2 th,
.home-body .comparison2 td {
  padding: 18px 22px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--home-line);
}

.home-body .comparison2 th {
  font-family: var(--home-font-body);
  font-weight: 700;
  font-size: 14.5px;
}

.home-body .comparison2 thead th:not(:first-child) {
  text-align: center;
}

.home-body .comparison2 td:not(:first-child) {
  text-align: center;
  color: var(--home-text-muted);
}

.home-body .comparison2 tbody tr:last-child td {
  border-bottom: none;
}

.home-body .comparison2 .col-ownx2 {
  background: rgba(0, 128, 214, 0.06);
  color: var(--home-charcoal);
  font-weight: 700;
}

.home-body .comparison2 thead .col-ownx2-h {
  background: var(--home-blue);
  color: #fff;
}

.home-body .comparison2-note {
  font-size: 13px;
  color: var(--home-text-muted);
  margin-top: 16px;
}

/* ---------- Security — simple flow, then technical proof ---------- */
.home-body .sec-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 72px;
}

.home-body .sec-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
}

.home-body .sec-flow__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--home-line-on-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-body .sec-flow__icon svg {
  width: 19px;
  height: 19px;
  color: var(--home-blue-bright);
}

.home-body .sec-flow__step span {
  font-size: 12px;
  color: var(--home-text-on-navy-muted);
  text-align: center;
  max-width: 90px;
}

.home-body .sec-flow__arrow {
  color: var(--home-line-on-navy);
  font-size: 16px;
}

.home-body .security2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--home-line-on-navy);
  border: 1px solid var(--home-line-on-navy);
  border-radius: 4px;
  overflow: hidden;
}

.home-body .security2-card {
  background: var(--home-navy);
  padding: 28px 26px;
}

.home-body .security2-card svg {
  width: 22px;
  height: 22px;
  color: var(--home-blue-bright);
  margin-bottom: 16px;
  display: block;
}

.home-body .security2-card h3 {
  font-family: var(--home-font-body);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.home-body .security2-card p {
  font-size: 13.5px;
  color: var(--home-text-on-navy-muted);
  margin: 0 0 12px;
  line-height: 1.6;
}

.home-body .security2-card__tag {
  font-family: var(--home-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--home-blue-bright);
}

/* ---------- Pricing — editorial, not SaaS cards ---------- */
.home-body .plans2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
}

.home-body .plan2 {
  padding: 44px 38px;
}

.home-body .plan2:first-child {
  border-right: 1px solid var(--home-line);
}

.home-body .plan2--featured__tag {
  font-family: var(--home-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--home-blue);
  margin-bottom: 10px;
  display: block;
}

.home-body .plan2__name {
  font-family: var(--home-font-body);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.home-body .plan2__price {
  font-size: 34px;
  font-weight: 600;
  margin: 14px 0 6px;
  font-family: var(--home-font-display);
  color: var(--home-charcoal);
}

.home-body .plan2__desc {
  font-size: 13.5px;
  color: var(--home-text-muted);
  margin: 0 0 24px;
}

.home-body .plan2__features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.home-body .plan2__features li {
  font-size: 13.5px;
  padding: 6px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--home-text);
}

.home-body .plan2__features li::before {
  content: '—';
  color: var(--home-blue);
  flex-shrink: 0;
}

.home-body .pricing2-note {
  font-size: 13px;
  color: var(--home-text-muted);
  text-align: center;
  margin-top: 28px;
}

.home-body .fee-split {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.home-body .fee-split__item {
  text-align: center;
  padding: 0 20px;
}

.home-body .fee-split__item+.fee-split__item {
  border-left: 1px solid var(--home-line);
}

.home-body .fee-split__label {
  font-family: var(--home-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-text-muted);
  margin-bottom: 6px;
}

.home-body .fee-split__value {
  font-family: var(--home-font-display);
  font-size: 20px;
  color: var(--home-charcoal);
}

/* ---------- Verified Google Reviews Section ---------- */
.home-body .reviews-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.home-body .google-badge-card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  transition: all 0.25s ease;
  color: #1F2937;
  flex-shrink: 0;
}

.home-body .google-badge-card:hover {
  border-color: rgba(66, 133, 244, 0.4);
  box-shadow: 0 6px 20px rgba(66, 133, 244, 0.12);
  transform: translateY(-2px);
}

.home-body .google-badge-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-body .google-badge-card__score {
  font-family: var(--home-font-sans);
  font-size: 19px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.home-body .google-badge-card__stars {
  color: #F59E0B;
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 1;
}

.home-body .google-badge-card__sub {
  font-size: 11.5px;
  color: #6B7280;
  margin-top: 5px;
  font-weight: 500;
}

.home-body .g-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.home-body .g-review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  color: inherit;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.home-body .g-review-card:hover {
  border-color: rgba(66, 133, 244, 0.4);
  box-shadow: 0 8px 24px rgba(66, 133, 244, 0.1);
  transform: translateY(-4px);
}

.home-body .g-review-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.home-body .g-review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13.5px;
  color: #FFFFFF;
  flex-shrink: 0;
}

.home-body .g-review-card__avatar--1 {
  background: linear-gradient(135deg, #1E3A8A, #3B82F6);
}

.home-body .g-review-card__avatar--2 {
  background: linear-gradient(135deg, #065F46, #10B981);
}

.home-body .g-review-card__avatar--3 {
  background: linear-gradient(135deg, #831843, #EC4899);
}

.home-body .g-review-card__user {
  flex: 1;
  min-width: 0;
}

.home-body .g-review-card__name {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-body .g-review-card__date {
  display: block;
  font-size: 11.5px;
  color: #6B7280;
  margin-top: 2px;
}

.home-body .g-review-card__g-icon {
  flex-shrink: 0;
}

.home-body .g-review-card__stars {
  color: #F59E0B;
  letter-spacing: 2px;
  font-size: 13px;
  margin-bottom: 12px;
}

.home-body .g-review-card__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #374151;
  margin: 0 0 18px;
  flex-grow: 1;
}

.home-body .g-review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
}

.home-body .g-review-card__source {
  color: #9CA3AF;
  font-weight: 500;
}

.home-body .g-review-card__action {
  color: #2563EB;
  font-weight: 600;
}

.home-body .g-review-card:hover .g-review-card__action {
  text-decoration: underline;
}

.home-body .reviews-cta-wrap {
  text-align: center;
  margin-top: 8px;
}

.home-body .reviews-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1F2937;
  text-decoration: none;
  transition: all 0.2s ease;
}

.home-body .reviews-cta-btn:hover {
  background: #F9FAFB;
  border-color: rgba(66, 133, 244, 0.4);
  color: #111827;
}

/* ---------- FAQ — grouped, refined accordion ---------- */
.home-body .faq2-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.home-body .faq2-group__title {
  font-family: var(--home-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--home-blue);
  margin: 0 0 18px;
}

.home-body .faq2-list {
  display: flex;
  flex-direction: column;
}

.home-body .faq2-item {
  border-top: 1px solid var(--home-line);
}

.home-body .faq2-item:first-child {
  border-top: none;
}

.home-body .faq2-item__q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 18px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--home-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-family: var(--home-font-body);
}

.home-body .faq2-item__chevron {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform .25s ease;
  color: var(--home-blue);
}

.home-body .faq2-item.is-open .faq2-item__chevron {
  transform: rotate(180deg);
}

.home-body .faq2-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}

.home-body .faq2-item.is-open .faq2-item__a {
  max-height: 320px;
  padding: 0 0 20px;
}

.home-body .faq2-item__a p {
  margin: 0;
  font-size: 13.5px;
  color: var(--home-text-muted);
  line-height: 1.6;
}

/* ---------- Gift — plain editorial block, no card ---------- */
.home-body .gift3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.home-body .gift3__icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  vertical-align: -2px;
}

.home-body .gift3__headline {
  font-family: var(--home-font-display);
  font-size: 25px;
  font-weight: 500;
  margin: 0 0 8px;
  max-width: 40ch;
  color: var(--home-charcoal);
}

.home-body .gift3__sub {
  font-size: 14px;
  color: var(--home-text-muted);
  margin: 0;
  max-width: 40ch;
}

.home-body .gift3__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ---------- Final CTA — cinematic close (Full Width) ---------- */
.home-body .final2-wrap {
  width: 100%;
  padding: 0;
  margin: 0;
}

.home-body .final2 {
  position: relative;
  text-align: center;
  padding: 120px 24px;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  color: var(--home-text-on-navy);
}

.home-body .final2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 31, 61, 0.65), rgba(15, 31, 61, 0.92)),
    url('https://images.unsplash.com/photo-1773625680521-24296b61ba25?w=1800&q=75&auto=format&fit=crop') center/cover no-repeat;
}

.home-body .final2__content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.home-body .final2 h2 {
  font-family: var(--home-font-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 auto 16px;
  color: #fff;
  max-width: 26ch;
}

.home-body .final2 p {
  opacity: 0.9;
  margin: 0 auto 32px;
  font-size: 17px;
  max-width: 48ch;
}

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
  .home-body .nav__links a[data-nav-secondary] {
    display: none;
  }

  .home-body .hero3 {
    display: flex !important;
    flex-direction: column !important;
    padding: 36px 0 44px;
    gap: 32px;
  }

  .home-body .hero3.container,
  .home-body .container.hero3 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .home-body .hero3__copy {
    order: 1 !important;
    width: 100%;
  }

  .home-body .hero3__visual {
    aspect-ratio: auto;
    order: 2 !important;
    margin: 12px auto 0;
    max-width: 100%;
    width: 100%;
  }

  .home-body .hero3 h1 {
    font-size: clamp(28px, 7.5vw, 40px);
    margin-bottom: 16px;
    line-height: 1.15;
  }

  .home-body .hero3 h1 br {
    display: none;
  }

  .home-body .hero3__lead {
    font-size: 16.5px;
    margin-bottom: 20px;
  }

  .home-body .hero3__ctas {
    margin-bottom: 18px;
    flex-direction: column;
    width: 100%;
  }

  .home-body .hero3__ctas .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .home-body .hero3__fine {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .home-body .hero3__trust-rating {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    flex-wrap: wrap;
  }

  .home-body .credentials.container,
  .home-body .container.credentials {
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-body .credentials__row {
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .home-body .credentials__item {
    border-left: none;
    padding: 6px 12px;
    background: rgba(0, 128, 214, 0.06);
    border-radius: 20px;
    font-size: 11.5px;
  }

  .home-body .story {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-body .story__media {
    aspect-ratio: 16/9;
    min-height: 200px;
  }

  .home-body .story__copy {
    padding: 40px 20px;
  }

  .home-body .story__copy .statement {
    font-size: 26px;
    line-height: 1.3;
  }

  .home-body .data-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  .home-body .data-block {
    border-left: none;
    padding-left: 0;
    padding-top: 16px;
    border-top: 1px solid var(--home-line);
  }

  .home-body .data-block__num {
    font-size: 32px;
  }

  .home-body .data-block:nth-child(1),
  .home-body .data-block:nth-child(2) {
    border-top: none;
    padding-top: 0;
  }

  .home-body .journey {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .home-body .journey__visual {
    position: static;
    padding: 20px 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .home-body .dash-mock2 {
    padding: 20px 16px;
  }

  .home-body .why-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }

  .home-body .why-row__stat {
    text-align: left;
    margin-top: 4px;
    font-size: 20px;
  }

  .home-body .g-reviews-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-body .reviews-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .home-body .plans2 {
    grid-template-columns: 1fr;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    overflow: hidden;
  }

  .home-body .plan2:first-child {
    border-right: none;
    border-bottom: 1px solid var(--home-line);
  }

  .home-body .fee-split {
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
  }

  .home-body .fee-split__item+.fee-split__item {
    border-left: none;
    border-top: 1px solid var(--home-line);
    padding-top: 12px;
  }

  .home-body .security2-grid {
    grid-template-columns: 1fr;
  }

  .home-body .credentials2-row {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }

  .home-body .credentials2-block {
    border-left: none;
    border-bottom: 1px solid var(--home-line);
    padding: 0 0 16px;
  }

  .home-body .credentials2-block:last-child {
    border-bottom: none;
  }

  .home-body .faq2-groups {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-body .sec-flow {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 0 16px;
    margin-bottom: 36px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .home-body .sec-flow__step {
    flex-shrink: 0;
    padding: 0 10px;
  }

  .home-body .sec-flow__arrow {
    flex-shrink: 0;
  }

  .home-body .gift3 {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-body .protecting__line {
    font-size: 24px;
    line-height: 1.45;
  }

  .home-body .statement {
    font-size: 26px;
  }

  .home-body .heading2 {
    font-size: 28px;
  }

  .home-body .heading2.sans {
    font-size: 26px;
  }

  .home-body .section2 {
    padding: 56px 0;
  }

  .home-body .section2.container,
  .home-body .container.section2 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .home-body .sub2 {
    margin-bottom: 28px;
  }

  .home-body .plan2 {
    padding: 30px 18px;
  }

  .home-body .final2 {
    padding: 56px 20px;
  }

  .home-body .final2 h2 {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .home-body .section2 {
    padding: 44px 0;
  }

  .home-body .section2.container,
  .home-body .container.section2 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-body .plan2 {
    padding: 24px 14px;
  }

  .home-body .hero3 h1 {
    font-size: 29px;
  }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 28px;
  background:
    radial-gradient(ellipse 820px 620px at 8% -10%, rgba(28, 163, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 720px 720px at 102% 6%, rgba(0, 102, 204, 0.12), transparent 55%),
    radial-gradient(ellipse 820px 660px at 30% 112%, rgba(0, 128, 214, 0.10), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

.auth-wrap .nav__brand-logo {
  height: 30px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  color: var(--ink);
  text-align: center;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow-lg);
  padding: 44px 40px;
}

.auth-card__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: var(--brand-gradient);
  box-shadow: var(--glass-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.auth-card__icon svg {
  width: 26px;
  height: 26px;
}

.auth-card h1 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 6px;
}

.auth-card p.sub {
  color: var(--text-muted);
  font-size: 13.5px;
  margin: 0 0 28px;
}

.auth-card .field,
.auth-card .field-group {
  text-align: left;
}

.field {
  margin-bottom: 18px;
}

.field-group {
  margin-bottom: 18px;
}

.field-group:last-of-type {
  margin-bottom: 0;
}

.field label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  font-weight: 600;
}

.field input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: 15px;
  font-family: var(--font-body);
  background: var(--ink-raised);
  box-shadow: var(--glass-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field input:focus-visible {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.field .error {
  color: #C0392B;
  font-size: 12.5px;
  margin-top: 5px;
}

.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-wrap input {
  width: 100%;
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #8A9BA8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color .15s ease, background-color .15s ease;
  z-index: 2;
  user-select: none;
}

.password-toggle:hover {
  color: #1A2328;
  background-color: rgba(0, 0, 0, 0.05);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--brass, #C5A880);
  outline-offset: 1px;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

.auth-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

.auth-card .switch {
  text-align: center;
  font-size: 13.5px;
  margin-top: 22px;
  color: var(--text-muted);
}

.auth-card .switch a {
  color: var(--ledger-green);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 600px) {
  .auth-card {
    padding: 32px 24px;
  }
}

/* ---------- Standalone payment page (single-column glass checkout) ----------
   The card form loads automatically on page load (startCheckout() runs
   immediately, no button) -- everything below it (trust points, steps,
   accepted methods) is static supporting content, not gated behind a click. */
.payment-body {
  background:
    radial-gradient(ellipse 820px 620px at 8% -10%, rgba(28, 163, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 720px 720px at 102% 6%, rgba(0, 102, 204, 0.12), transparent 55%),
    radial-gradient(ellipse 820px 660px at 30% 112%, rgba(0, 128, 214, 0.10), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  min-height: 100vh;
}

.payment-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 44px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.payment-page__logo-link {
  display: block;
}

.payment-page__logo {
  height: 26px;
  width: auto;
  display: block;
}

.payment-card {
  width: 100%;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow-lg);
  padding: 44px 40px;
  text-align: left;
}

.payment-header {
  margin-bottom: 26px;
}

.payment-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.payment-header__eyebrow-icon {
  width: 13px;
  height: 13px;
}

.payment-header h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.payment-header .sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  max-width: 42ch;
}

.payment-plan {
  background: var(--brand-gradient);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  color: var(--on-brand);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 14px 32px -14px rgba(0, 128, 214, 0.5);
  margin-bottom: 26px;
}

.payment-plan__name {
  font-family: var(--font-display);
  font-size: 17px;
  margin-bottom: 3px;
}

.payment-plan__desc {
  font-size: 12px;
  opacity: 0.85;
  max-width: 30ch;
}

.payment-plan__price {
  font-size: 23px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Loading / error states for the auto-started checkout ---------- */
.payment-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 28px 0;
}

.payment-loading__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0, 128, 214, 0.2);
  border-top-color: var(--brass);
  animation: paymentSpin .8s linear infinite;
  flex-shrink: 0;
}

@keyframes paymentSpin {
  to {
    transform: rotate(360deg);
  }
}

.payment-error {
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 4px;
}

.payment-error p {
  font-size: 13.5px;
  color: #C0392B;
  margin: 0 0 12px;
}

.payment-error .btn {
  padding: 9px 18px;
  font-size: 13.5px;
}

/* The Geidea widget is a cross-origin iframe -- its internal fields can't
   be restyled, only its frame can be made to feel like the page's focal
   point: a soft ambient glow (breathing, not moving, so it never risks
   shifting the card fields under someone's cursor mid-entry). Border/radius/
   glow live on .payment-checkout-frame (the shared wrapper around the
   banner + the iframe), not on #checkout-tag itself, so there's exactly
   one border around the whole unit instead of a second one appearing
   where the banner meets the iframe. */
.payment-checkout-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  animation: checkoutGlow 4s ease-in-out infinite;
  margin-top: 22px;
}

#checkout-tag:empty {
  display: none;
}

#checkout-tag iframe {
  display: block;
}

@keyframes checkoutGlow {

  0%,
  100% {
    box-shadow: 0 20px 44px -18px rgba(0, 128, 214, 0.3), 0 2px 10px rgba(38, 38, 38, 0.06);
  }

  50% {
    box-shadow: 0 26px 56px -16px rgba(0, 128, 214, 0.46), 0 2px 10px rgba(38, 38, 38, 0.06);
  }
}

.payment-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 26px;
}

.payment-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.payment-trust__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow);
}

.payment-trust__icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex-shrink: 0;
  margin-top: 1px;
  background: rgba(0, 128, 214, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-trust__icon {
  width: 15px;
  height: 15px;
  color: var(--brass);
}

.payment-trust__item span:not(.payment-trust__icon-wrap) {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-top: 3px;
}

.payment-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

.payment-steps__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.payment-steps__num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 128, 214, 0.1);
  color: var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Sits flush on top of #checkout-tag inside the shared .payment-checkout-frame,
   same flat blue as the header Geidea renders inside that iframe
   (appearance.styles.headerColor in GeideaPaymentService) -- the seam
   between this and the iframe's own header is deliberately invisible so
   the two read as one continuous band. This is the closest "inside"
   Geidea's header gets: the iframe itself is cross-origin
   (payments.geidea.ae) and nothing on our page can reach into it, so this
   sits directly outside it instead. */
.payment-steps--banner {
  flex-direction: row;
  gap: 4px;
  margin: 0;
  padding: 16px 12px;
  background: #0080D6;
}

.payment-steps--banner .payment-steps__item {
  flex: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #fff;
}

.payment-steps--banner .payment-steps__num {
  width: 24px;
  height: 24px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.payment-methods-note {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin: 18px 0 0;
}

.payment-back-link {
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: none;
}

.payment-back-link:hover {
  color: var(--brass);
}

/* ---------- Gift-will purchase page ---------- */
.gift-qty-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.gift-qty-stepper input {
  width: 60px;
  text-align: center;
  padding: 9px 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--ink-raised);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
}

.gift-recipient-row {
  display: grid;
  grid-template-columns: 22px 1fr 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.gift-recipient-row__num {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.gift-recipient-row .wiz-input {
  margin-top: 0;
  padding: 9px 10px;
  font-size: 13.5px;
}

.gift-codes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0;
}

.gift-code-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.gift-code-row__code {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
}

.gift-code-row__recipient {
  font-size: 12.5px;
  color: var(--text-muted);
  flex: 1;
  min-width: 160px;
}

.gift-code-row__copy {
  margin-left: auto;
}

@media (max-width: 600px) {
  .payment-card {
    padding: 32px 26px;
  }

  .payment-header h1 {
    font-size: 24px;
  }

  .payment-steps--banner {
    flex-direction: column;
    gap: 12px;
  }

  .payment-steps--banner .payment-steps__item {
    flex-direction: row;
    text-align: left;
  }
}

/* ---------- Questionnaire step wizard ---------- */
.wiz-nav {
  border-bottom: 1px solid var(--line);
}

.wiz-wrap {
  max-width: 580px;
  margin: 0 auto;
  padding: 48px 20px 100px;
}

.wiz-progress {
  margin-bottom: 36px;
}

.wiz-progress__track {
  display: flex;
  gap: 6px;
}

.wiz-progress__seg {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--parchment-dim);
  transition: background .25s ease;
}

.wiz-progress__seg--done,
.wiz-progress__seg--current {
  background: var(--brand-gradient);
}

.wiz-progress__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
}

.wiz-step {
  animation: wiz-fade .3s ease;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: 36px 32px;
}

@keyframes wiz-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Advisor persona ---------- */
.wiz-advisor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.wiz-advisor__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--parchment-dim);
  border: 1px solid var(--line);
}

.wiz-advisor__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wiz-advisor__name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1px;
}

.wiz-advisor__msg {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-muted);
}

/* ---------- Step 1 Intro Trust Highlights ---------- */
.wiz-intro-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: -12px 0 20px 0;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: #475569;
}

.wiz-intro-highlight {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.wiz-intro-highlight__icon {
  width: 13px;
  height: 13px;
  color: #0284c7;
  flex-shrink: 0;
}

.wiz-tip {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  background: #daf0ff;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid #6ac3ff;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 18px 0 18px;
  box-shadow: var(--glass-shadow);
}

.wiz-tip__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 1px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiz-tip p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
}

/* ---------- Question / group icon badge ---------- */
.wiz-qhead__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--brand-gradient);
  box-shadow: var(--glass-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiz-qhead__icon-svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

/* .field label sets display:block with specificity (0,1,1), which beats
   .wiz-field-label's (0,1,0) on its own -- label.wiz-field-label matches
   specificity and wins on source order, but scope explicitly via .field
   too so this never silently loses the cascade again. */
.field label.wiz-field-label,
.wiz-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.qtip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 5px;
}

.qtip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--line);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.qtip__icon:hover,
.qtip__icon:focus-visible {
  background: var(--brass);
  color: #fff;
  outline: none;
}

.qtip__bubble {
  display: none;
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  max-width: 70vw;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.qtip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}

.qtip__icon:hover+.qtip__bubble,
.qtip__icon:focus+.qtip__bubble {
  display: block;
}

.wiz-field-label__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--parchment-dim);
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wiz-field-label__icon-svg {
  width: 14px;
  height: 14px;
}

/* ---------- Welcome screen ---------- */
.wiz-welcome {
  text-align: center;
}

.wiz-welcome__avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 26px;
  border: 6px solid rgba(0, 128, 214, 0.14);
  background: var(--parchment-dim);
}

.wiz-welcome__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wiz-welcome h1 {
  font-size: 30px;
  margin-bottom: 14px;
}

.wiz-welcome__checklist {
  list-style: none;
  padding: 0;
  margin: 26px auto 0;
  max-width: 380px;
  text-align: left;
}

.wiz-welcome__checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 11px;
  font-size: 14.5px;
  color: var(--ink);
}

.wiz-welcome__checklist li::before {
  content: '✓';
  color: var(--brass);
  font-weight: 700;
}

.wiz-welcome__footnote {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 16px;
  text-align: center;
}

.wiz-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: center;
  margin-bottom: 10px;
}

.wiz-question {
  font-family: var(--font-display);
  font-size: 26px;
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.25;
}

.wiz-lead {
  text-align: center;
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0 0 26px;
}

.wiz-input,
select.wiz-input {
  width: 100%;
  padding: 16px 18px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--ink-raised);
  color: var(--text-on-ink);
  font-family: var(--font-body);
  font-size: 17px;
  box-shadow: var(--glass-shadow);
  margin-top: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wiz-input:focus,
select.wiz-input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.wiz-input[readonly] {
  opacity: .65;
}

select.wiz-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 44px;
}

/* Guest-mode screens (pre-account) reuse the same .field structure the
   auth pages share, but get the richer wizard input treatment here,
   scoped via .wiz-wrap so login/register/auth pages are unaffected. */
.wiz-wrap .field input {
  padding: 16px 18px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--ink-raised);
  font-size: 17px;
  box-shadow: var(--glass-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wiz-wrap .field input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.wiz-phone-group {
  display: flex;
  margin-top: 10px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--ink-raised);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wiz-phone-group:focus-within {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.wiz-phone-group--compact {
  margin-top: 0;
}

.wiz-phone-group .wiz-input {
  box-shadow: none;
}

.wiz-phone-code {
  flex: 0 0 auto;
  max-width: 46%;
  border: none;
  border-right: 1.5px solid var(--line);
  border-radius: 0;
  padding: 16px 14px;
  background: transparent;
  color: var(--text-on-ink);
  font-family: var(--font-body);
  font-size: 15px;
}

.wiz-phone-local {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 16px 18px;
  margin-top: 0;
  box-shadow: none;
  font-size: 17px;
}

.wiz-wrap .field .wiz-phone-group input {
  border: none;
  box-shadow: none;
}

.wiz-whatsapp-optin-wrap {
  margin-top: 12px;
  display: flex;
  align-items: center;
}

.wiz-whatsapp-optin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13.5px;
  color: var(--text-muted, #64748b);
  transition: color 0.15s ease;
}

.wiz-whatsapp-optin:hover {
  color: var(--text-on-ink, #0f172a);
}

.wiz-whatsapp-optin input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #25D366;
  cursor: pointer;
  margin: 0;
  border-radius: 4px;
}

.wiz-whatsapp-optin__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #25D366;
  flex-shrink: 0;
}

.wiz-whatsapp-optin__text {
  line-height: 1.35;
  font-weight: 500;
}

.wiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.wiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 17px;
  font-family: var(--font-body);
  background: var(--ink-raised);
  box-shadow: var(--glass-shadow);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.wiz-option:hover {
  border-color: var(--brass);
  box-shadow: var(--glass-shadow-lg);
}

.wiz-option input[type=radio],
.wiz-option input[type=checkbox] {
  accent-color: var(--brass);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.wiz-option:has(input:checked) {
  border-color: var(--brass);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 0 1.5px var(--brass), var(--glass-shadow-lg);
}

.wiz-option__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--parchment-dim);
  color: var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiz-option__icon-svg {
  width: 19px;
  height: 19px;
}

/* ---------- Assets step: Full Coverage confirmed-state card + reference list ---------- */
.wiz-option__body {
  display: flex;
  flex-direction: column;
}

.wiz-option--fixed {
  cursor: default;
}

.wiz-option--fixed:hover {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass), var(--glass-shadow-lg);
}

.wiz-option__badge {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ledger-green);
  background: rgba(0, 87, 168, 0.08);
  border: 1px solid rgba(0, 87, 168, 0.25);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
}

.wiz-option__badge svg {
  width: 12px;
  height: 12px;
}

.coverage-list {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--parchment-dim);
  padding: 18px 20px 6px;
}

.coverage-list__title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.coverage-list__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.coverage-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
}

.coverage-list__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ledger-green);
  flex-shrink: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coverage-list__check svg {
  width: 10px;
  height: 10px;
}

/* ---------- Plan-selection step ---------- */
.wiz-trust-badge {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(0, 87, 168, 0.08);
  border: 1px solid rgba(0, 87, 168, 0.22);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 18px 0 22px;
}

.wiz-trust-badge__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ledger-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiz-trust-badge__icon-svg {
  width: 15px;
  height: 15px;
}

.wiz-trust-badge strong {
  display: block;
  color: var(--ledger-green);
  font-size: 14.5px;
  margin-bottom: 3px;
}

.wiz-trust-badge p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}

.wiz-options--plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 0;
}

.wiz-option--plan {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 22px 20px;
  position: relative;
}

.wiz-option--plan input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.wiz-option__plan-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.wiz-option__plan-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 6px;
}

.wiz-option__plan-price {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
}

.wiz-option--plan:has(input:checked) .wiz-option__plan-price {
  color: var(--brass);
}

.wiz-plan-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.wiz-plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
}

.wiz-plan-feature__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--brass);
  margin-top: 1px;
}

.field-error {
  color: #C0392B;
  font-size: 12.5px;
  margin-top: 6px;
}

.wiz-message {
  font-size: 13px;
  margin-top: 12px;
  min-height: 16px;
}

.wiz-message--error {
  color: #C0392B;
}

.wiz-message--info {
  color: var(--ledger-green);
  background: var(--parchment-dim);
  padding: 10px 14px;
  border-radius: 3px;
}

.wiz-nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
}

.wiz-nav-buttons .btn {
  min-width: 140px;
  justify-content: center;
}

@media (max-width: 600px) {
  .wiz-wrap {
    padding-top: 12px;
    padding-bottom: 24px;
  }

  .wiz-step {
    padding: 22px 18px;
  }

  .wiz-advisor {
    margin-bottom: 18px;
    gap: 10px;
  }

  .wiz-advisor__avatar {
    width: 38px;
    height: 38px;
  }

  .wiz-advisor__msg {
    font-size: 13.5px;
    line-height: 1.4;
  }

  .wiz-tip {
    padding: 12px 14px;
    margin: 12px 0 14px;
  }

  .wiz-nav-buttons {
    margin-top: 20px;
  }
}

.wiz-prev-btn,
.wiz-link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14.5px;
  cursor: pointer;
  padding: 8px 0;
}

.wiz-prev-btn:hover,
.wiz-link-btn:hover {
  color: var(--ink);
}

.wiz-link-btn {
  display: block;
  margin: 16px auto 0;
  text-align: center;
}

/* ---------- Coupon field on the plan-selection wizard step ---------- */
.wiz-coupon {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.wiz-coupon__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.wiz-coupon__row {
  display: flex;
  gap: 10px;
}

.wiz-coupon__row .wiz-input {
  margin-top: 0;
  flex: 1;
}

.wiz-coupon__row .btn {
  flex-shrink: 0;
}

.wiz-coupon__summary {
  margin-top: 16px;
  background: var(--parchment-dim);
  border-radius: 4px;
  padding: 14px 16px;
}

.wiz-coupon__line {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 3px 0;
}

.wiz-coupon__line--discount span:last-child {
  color: var(--ledger-green);
  font-weight: 600;
}

.wiz-coupon__line--total {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.wiz-coupon__line--total span:last-child {
  color: var(--ink);
}

@media (max-width: 600px) {
  .wiz-wrap {
    padding: 32px 14px 90px;
  }

  .wiz-step {
    padding: 26px 20px;
    border-radius: var(--radius-md);
  }

  .wiz-question {
    font-size: 22px;
  }

  .wiz-option {
    padding: 16px 16px;
  }

  .wiz-options--plans {
    grid-template-columns: 1fr;
  }

  .wiz-plan-features {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Customer dashboard shell — sidebar + topbar app frame shared
   by every /dashboard* view (overview, documents, approvals).
   ============================================================ */
.app-body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 640px at 8% -8%, rgba(28, 163, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 760px 760px at 105% 0%, rgba(0, 102, 204, 0.13), transparent 55%),
    radial-gradient(ellipse 900px 700px at 25% 105%, rgba(0, 128, 214, 0.09), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

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

/* ---------- Post-payment success overlay (dashboard/overview.php) ---------- */
body.paysuccess-transitioning .app-shell {
  transform: scale(1.01);
  transition: transform .6s ease .05s;
}

/* Both bleed past the viewport without this: the decorative orbs sit at
   negative offsets (e.g. top:-80px, left:-100px) so they can blur softly
   off the card's edges, and .app-shell scales up 1% during the transition
   -- either one, uncontained, adds unwanted page scrollbars. */
body.paysuccess-transitioning {
  overflow: hidden;
}

.app-shell {
  transition: filter .5s ease, transform .5s ease;
}

.paysuccess {
  overflow: hidden;
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.paysuccess.is-open {
  opacity: 1;
  pointer-events: auto;
}

.paysuccess__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  background: var(--brand-gradient);
  pointer-events: none;
}

.paysuccess__orb--a {
  width: 380px;
  height: 380px;
  top: -80px;
  left: -100px;
  animation: paysuccessDrift1 14s ease-in-out infinite;
}

.paysuccess__orb--b {
  width: 300px;
  height: 300px;
  bottom: -100px;
  right: -80px;
  animation: paysuccessDrift2 16s ease-in-out infinite;
}

@keyframes paysuccessDrift1 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(40px, 30px);
  }
}

@keyframes paysuccessDrift2 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-30px, -40px);
  }
}

.paysuccess__card {
  position: relative;
  background: var(--parchment);
  border-radius: var(--radius-lg);
  padding: 52px 48px 44px;
  max-width: 460px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 32px 80px -16px rgba(15, 23, 42, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: translateY(18px) scale(.96);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}

.paysuccess.is-open .paysuccess__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.paysuccess__sparkles {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.paysuccess__sparkle {
  position: absolute;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  bottom: 55%;
  animation: paysuccessSparkleRise 2.6s ease-out forwards;
}

@keyframes paysuccessSparkleRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(.5) rotate(0deg);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-90px) scale(1.05) rotate(14deg);
  }
}

.paysuccess__check-wrap {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  position: relative;
}

.paysuccess__check-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: 0;
  transform: scale(.7);
}

.paysuccess.is-open .paysuccess__check-ring {
  animation: paysuccessRingIn .5s cubic-bezier(.2, .8, .2, 1) .15s forwards;
}

@keyframes paysuccessRingIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.paysuccess__check-svg {
  position: relative;
  width: 100%;
  height: 100%;
}

.paysuccess__check-svg circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
}

.paysuccess.is-open .paysuccess__check-svg circle {
  animation: paysuccessDrawCircle .5s ease .15s forwards;
}

@keyframes paysuccessDrawCircle {
  to {
    stroke-dashoffset: 0;
  }
}

.paysuccess__check-svg path {
  fill: none;
  stroke: #fff;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.paysuccess.is-open .paysuccess__check-svg path {
  animation: paysuccessDrawCheck .35s cubic-bezier(.2, .8, .2, 1) .55s forwards;
}

@keyframes paysuccessDrawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

.paysuccess__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ledger-green);
  opacity: 0;
  transform: translateY(8px);
}

.paysuccess__headline {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.25;
  margin: 10px 0 14px;
  opacity: 0;
  transform: translateY(8px);
}

.paysuccess__body {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 30px;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(8px);
}

.paysuccess #paysuccessCta {
  opacity: 0;
  transform: translateY(8px);
}

.paysuccess.is-open .paysuccess__eyebrow {
  animation: paysuccessRise .5s ease .7s forwards;
}

.paysuccess.is-open .paysuccess__headline {
  animation: paysuccessRise .5s ease .8s forwards;
}

.paysuccess.is-open .paysuccess__body {
  animation: paysuccessRise .5s ease .9s forwards;
}

.paysuccess.is-open #paysuccessCta {
  animation: paysuccessRise .5s ease 1.05s forwards;
}

@keyframes paysuccessRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.docsuccess {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.docsuccess.is-open {
  opacity: 1;
  pointer-events: auto;
}

.docsuccess__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  background: var(--brand-gradient);
  pointer-events: none;
}

.docsuccess__orb--a {
  width: 380px;
  height: 380px;
  top: -80px;
  left: -100px;
  animation: docsuccessDrift1 14s ease-in-out infinite;
}

.docsuccess__orb--b {
  width: 300px;
  height: 300px;
  bottom: -100px;
  right: -80px;
  animation: docsuccessDrift2 16s ease-in-out infinite;
}

@keyframes docsuccessDrift1 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(40px, 30px);
  }
}

@keyframes docsuccessDrift2 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-30px, -40px);
  }
}

.docsuccess__card {
  position: relative;
  background: var(--parchment);
  border-radius: var(--radius-lg);
  padding: 52px 48px 44px;
  max-width: 460px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 32px 80px -16px rgba(15, 23, 42, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: translateY(18px) scale(.96);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}

.docsuccess.is-open .docsuccess__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.docsuccess__check-wrap {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  position: relative;
}

.docsuccess__check-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: 0;
  transform: scale(.7);
}

.docsuccess.is-open .docsuccess__check-ring {
  animation: docsuccessRingIn .5s cubic-bezier(.2, .8, .2, 1) .15s forwards;
}

@keyframes docsuccessRingIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.docsuccess__check-svg {
  position: relative;
  width: 100%;
  height: 100%;
}

.docsuccess__check-svg circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
}

.docsuccess.is-open .docsuccess__check-svg circle {
  animation: docsuccessDrawCircle .5s ease .15s forwards;
}

@keyframes docsuccessDrawCircle {
  to {
    stroke-dashoffset: 0;
  }
}

.docsuccess__check-svg path {
  fill: none;
  stroke: #fff;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.docsuccess.is-open .docsuccess__check-svg path {
  animation: docsuccessDrawCheck .35s cubic-bezier(.2, .8, .2, 1) .55s forwards;
}

@keyframes docsuccessDrawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

.docsuccess__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ledger-green);
  opacity: 0;
  transform: translateY(8px);
}

.docsuccess.is-open .docsuccess__eyebrow {
  animation: docsuccessRise .5s ease .7s forwards;
}

.docsuccess__headline {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.25;
  margin: 10px 0 14px;
  opacity: 0;
  transform: translateY(8px);
}

.docsuccess.is-open .docsuccess__headline {
  animation: docsuccessRise .5s ease .8s forwards;
}

.docsuccess__body {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 30px;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(8px);
}

.docsuccess.is-open .docsuccess__body {
  animation: docsuccessRise .5s ease .9s forwards;
}

.docsuccess #docsuccessCta {
  opacity: 0;
  transform: translateY(8px);
}

.docsuccess.is-open #docsuccessCta {
  animation: docsuccessRise .5s ease 1.05s forwards;
}

@keyframes docsuccessRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- "You'll also need to upload an ID" popup (Beneficiaries) ----------
   Same shell/orb/card/rise mechanics as .docsuccess, reused verbatim for a
   consistent motion language across every full-screen popup in the app --
   but this isn't a success moment (nothing to celebrate, one more thing is
   still needed), so it swaps the green checkmark-draw-in for a plain amber
   id-card icon and offers two ways out (go now, or dismiss and come back
   later) instead of the single "Got it" acknowledgement. */
.docneeded {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.docneeded.is-open {
  opacity: 1;
  pointer-events: auto;
}

.docneeded__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  background: var(--brand-gradient);
  pointer-events: none;
}

.docneeded__orb--a {
  width: 380px;
  height: 380px;
  top: -80px;
  left: -100px;
  animation: docsuccessDrift1 14s ease-in-out infinite;
}

.docneeded__orb--b {
  width: 300px;
  height: 300px;
  bottom: -100px;
  right: -80px;
  animation: docsuccessDrift2 16s ease-in-out infinite;
}

.docneeded__card {
  position: relative;
  background: var(--parchment);
  border-radius: var(--radius-lg);
  padding: 52px 48px 44px;
  max-width: 460px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 32px 80px -16px rgba(15, 23, 42, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.6);
  transform: translateY(18px) scale(.96);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}

.docneeded.is-open .docneeded__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.docneeded__icon-wrap {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: #B9770E;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.7);
}

.docneeded.is-open .docneeded__icon-wrap {
  animation: docsuccessRingIn .5s cubic-bezier(.2, .8, .2, 1) .15s forwards;
}

.docneeded__icon {
  width: 40px;
  height: 40px;
  color: #fff;
}

.docneeded__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #B9770E;
  opacity: 0;
  transform: translateY(8px);
}

.docneeded.is-open .docneeded__eyebrow {
  animation: docsuccessRise .5s ease .5s forwards;
}

.docneeded__headline {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.25;
  margin: 10px 0 14px;
  opacity: 0;
  transform: translateY(8px);
}

.docneeded.is-open .docneeded__headline {
  animation: docsuccessRise .5s ease .6s forwards;
}

.docneeded__body {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 30px;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(8px);
}

.docneeded.is-open .docneeded__body {
  animation: docsuccessRise .5s ease .7s forwards;
}

.docneeded__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
}

.docneeded.is-open .docneeded__actions {
  animation: docsuccessRise .5s ease .85s forwards;
}

.app-sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 6;
}

.app-sidebar__brand {
  padding: 8px 12px 28px;
}

.app-sidebar__logo {
  height: 26px;
  width: auto;
  display: block;
}

.app-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.app-sidebar__link:hover {
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}

.app-sidebar__link.is-active {
  background: var(--glass-bg-strong);
  color: var(--brass);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(0, 128, 214, 0.16), inset 0 0 0 1px rgba(0, 128, 214, 0.12);
}

.app-sidebar__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.app-topbar__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}

.app-topbar__user {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-topbar__name {
  font-size: 14px;
  color: var(--text-muted);
}

.app-content {
  max-width: 720px;
  padding: 40px;
}

.dash-welcome {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 0 0 8px;
}

.dash-empty {
  color: var(--text-muted);
}

.dash-section-intro {
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0 0 24px;
}

.dash-subheading {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 40px 0 14px;
}

/* ---------- Status card (overview) ---------- */
.status-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 24px 0;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.status-card .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ledger-green);
}

.status-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 8px 0 10px;
}

.status-card p {
  color: rgba(38, 38, 38, 0.65);
  margin: 0 0 20px;
}

.plan-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 8px 0 18px;
}

.plan-summary__name {
  font-family: var(--font-display);
  font-size: 18px;
}

.plan-summary__price {
  font-size: 20px;
  font-weight: 700;
}

.dash-note {
  font-size: 12.5px;
  color: rgba(38, 38, 38, 0.55);
  margin: 10px 0 0;
}

.dash-note--error {
  color: #b3261e;
  font-size: 13px;
  margin: 0 0 12px;
}

/* Icons::svg() bakes in no size of its own -- every inline use needs an
   explicit sizing class, or it renders at the browser's unconstrained
   default (confirmed live: a bare Icons::svg('flag', '') blew up to fill
   the page). This is the one for a small icon sitting inline in note text. */
.dash-note__icon {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  flex-shrink: 0;
}

.upload-tip {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.upload-tip strong {
  color: var(--ink);
  font-size: 13.5px;
}

.upload-tip ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.upload-tip li {
  margin-bottom: 4px;
}

.dash-progress-label {
  font-size: 13px;
  color: rgba(38, 38, 38, 0.6);
}

/* ---------- Quick-link cards (overview) ---------- */
.dash-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dash-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dash-card:hover {
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow);
  transform: translateY(-2px);
}

.dash-card__icon {
  width: 26px;
  height: 26px;
  color: var(--brass);
  flex-shrink: 0;
}

.dash-card__title {
  font-weight: 600;
  font-size: 14.5px;
}

.dash-card__meta {
  font-size: 13px;
  color: var(--text-muted);
}

.dash-card--attention {
  margin-bottom: 14px;
  border-color: rgba(185, 119, 14, 0.3);
  background: rgba(185, 119, 14, 0.08);
}

.dash-card--attention:hover {
  background: rgba(185, 119, 14, 0.13);
}

.dash-card--attention .dash-card__title {
  color: #B9770E;
}

.dash-card__icon--attention {
  color: #B9770E;
}

/* ---------- Overview: "What's next" ordered action checklist ----------
   Deliberately a literal, ordered to-do list (pay, then beneficiaries,
   then documents) rather than an abstract progress bar -- reuses
   .status-card for the same visual weight as the stage summary above it,
   since this is the second-most-important thing on the page. */
.overview-checklist {
  padding: 26px 28px;
}

.overview-checklist__title {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 16px;
}

.overview-checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.overview-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: var(--ink);
}

.overview-checklist__item:not(:last-child) {
  border-bottom: 1px solid transparent;
  background: linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) calc(100% - 1px)) 10px / 2px 100% no-repeat;
}

.overview-checklist__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 1px;
  border: 2px solid var(--line);
  background: transparent;
}

.overview-checklist__item--done .overview-checklist__marker {
  /*background: var(--ledger-green);
  border-color: var(--ledger-green);*/
  background: #48a800;
  border-color: #48a800;

}

.overview-checklist__check {
  width: 12px;
  height: 12px;
  color: #fff;
}

.overview-checklist__item--current .overview-checklist__marker {
  background: var(--brass);
  border-color: var(--brass);
  box-shadow: 0 0 0 4px rgba(0, 128, 214, 0.16);
}

.overview-checklist__item--done .overview-checklist__label {
  /*color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--ledger-green);
  text-decoration-thickness: 2px;
  */
}

.overview-checklist__item--current {
  background: rgba(0, 128, 214, 0.06);
  border-radius: var(--radius-md);
  margin: 0 -10px;
  padding: 10px;
}

.overview-checklist__item--current:not(:last-child) {
  background-image: none;
}

.overview-checklist__label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}

.overview-checklist__item:not(.overview-checklist__item--current):not(.overview-checklist__item--done) .overview-checklist__label {
  opacity: .55;
  font-weight: 500;
}

.overview-checklist__description {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Locked-section state (documents, before payment) ---------- */
.dash-locked {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.dash-locked__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  opacity: .5;
}

.dash-locked p {
  margin: 0 0 20px;
}

/* ---------- Document checklist ---------- */
.doc-checklist {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-slot {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  padding: 16px 18px;
}

.doc-slot__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}

.doc-slot__info strong {
  font-size: 14.5px;
}

.doc-slot__status {
  font-size: 13px;
  color: rgba(38, 38, 38, 0.55);
}

.doc-slot__status--done {
  color: var(--ledger-green);
}

.doc-slot__child-name-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  font-size: 12px;
  color: rgba(38, 38, 38, 0.6);
  font-weight: 600;
}

.doc-slot__child-name-input {
  font-weight: 400;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  font-family: var(--font-body);
  color: var(--text-on-ink);
  background: var(--ink-raised);
}

.doc-slot__child-name-input:focus {
  outline: none;
  border-color: var(--brass);
}

.doc-slot__child-name {
  font-size: 13px;
  color: rgba(38, 38, 38, 0.7);
  width: 100%;
}

/* ---------- Per-person document row: name + residency toggle + chips ----------
   Matches the approved reference design exactly: one flat card per person
   (name and Yes/No toggle on one line), Passport/Emirates ID as compact
   click-to-upload chips below rather than separate full-width cards. */
.doc-row {
  background: #FBF9F4;
  border: 1px solid rgba(38, 38, 38, 0.14);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.doc-row__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.doc-row__name-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doc-row__name {
  font-weight: 600;
  font-size: 15px;
}

.doc-row__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.doc-row__error {
  display: block;
  font-size: 12.5px;
  color: #C0392B;
  margin-top: 8px;
}

.doc-row__error:empty {
  display: none;
}

/* Segmented-control look (one bordered group, two flush buttons, active =
   solid brass fill) -- matches the reference mockup's .toggle/.toggle
   button treatment exactly. */
.residency-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.residency-toggle__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(38, 38, 38, 0.6);
}

.residency-toggle__group {
  display: inline-flex;
  border: 1px solid rgba(38, 38, 38, 0.14);
  border-radius: 8px;
  overflow: hidden;
}

.residency-toggle__pill {
  position: relative;
  cursor: pointer;
  padding: 8px 16px;
  background: #fff;
  color: #6B7280;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.residency-toggle__pill+.residency-toggle__pill {
  border-left: 1px solid rgba(38, 38, 38, 0.14);
}

.residency-toggle__pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.residency-toggle__pill:has(input:checked) {
  background: var(--brass);
  color: #fff;
  font-weight: 600;
}

.residency-toggle__pill:hover {
  color: var(--brass);
}

.residency-toggle__pill:has(input:checked):hover {
  color: #fff;
}

.residency-toggle__pill:has(input:disabled) {
  cursor: not-allowed;
  opacity: .6;
}

/* Document chips -- Passport plain, Emirates ID tinted brass, exactly like
   the reference mockup's .doc/.doc.eid. Not-yet-uploaded is a single flat
   clickable <label> (click anywhere -> file picker -> uploads immediately,
   still through the same OCR-checked /documents/upload endpoint every
   other upload in the app uses -- nothing about removing the separate
   "Upload" button skips that check). Already-uploaded splits into a
   (optional) download link plus a small separate "replace" hit-target, so
   the two actions never fight over the same click the way a nested
   <a>-inside-<label> would. */
.doc-chip {
  border: 1px solid rgba(38, 38, 38, 0.14);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #6B7280;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease;
}

.doc-chip:hover {
  border-color: var(--brass);
}

.doc-chip--eid {
  color: var(--brass);
  border-color: var(--brass);
}

.doc-chip.is-done {
  color: var(--ledger-green);
  border-color: var(--ledger-green);
  cursor: default;
}

.doc-chip.is-done.doc-chip--eid {
  color: var(--ledger-green);
  border-color: var(--ledger-green);
}

.doc-chip.is-uploading {
  opacity: .55;
  pointer-events: none;
}

.doc-chip:has(.doc-chip__input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}

.doc-chip__text {
  color: inherit;
  text-decoration: none;
}

a.doc-chip__text:hover {
  text-decoration: underline;
}

.doc-chip__replace {
  cursor: pointer;
  color: #6B7280;
  font-size: 15px;
  line-height: 1;
  margin-left: 2px;
  transition: color .15s ease;
}

.doc-chip__replace:hover {
  color: var(--brass);
}

.doc-chip--readonly {
  cursor: default;
}

/* Emirates ID chips reveal/hide as a group when the toggle flips -- an
   opacity+scale fade rather than the max-height trick used elsewhere in
   this checklist, since these are inline flex siblings of the Passport
   chip, not block-level rows needing a height collapse. Closing is instant
   (no animate-out) -- toggling back to "No" after already saying "Yes" is
   rare enough that a plain fade-in on open is the one animation worth the
   motion budget here. */
.doc-eid-reveal {
  display: none;
  gap: 10px;
}

.doc-eid-reveal.is-open {
  display: inline-flex;
  gap: 10px;
  animation: docEidRevealIn .35s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes docEidRevealIn {
  from {
    opacity: 0;
    transform: scale(.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.doc-view-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--ledger-green);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.doc-view-link:hover {
  color: var(--brass);
}

.doc-download-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--brass);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  margin-left: 8px;
}

.doc-download-link:hover {
  color: var(--ink);
}

.doc-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  vertical-align: middle;
}

.doc-action-btn--upload {
  background: var(--brass, #c5a059);
  color: #0b1a2c;
  border: 1px solid var(--brass, #c5a059);
  margin-left: 6px;
}

.doc-action-btn--upload:hover {
  background: #b38f48;
  color: #0b1a2c;
  border-color: #b38f48;
}

.doc-action-btn--replace {
  background: transparent;
  color: var(--text-muted, #64748b);
  border: 1px solid #cbd5e1;
  margin-left: 6px;
}

.doc-action-btn--replace:hover {
  background: #f1f5f9;
  color: var(--ink, #0b1a2c);
  border-color: #94a3b8;
}

.doc-action-btn--delete {
  background: transparent;
  color: #94a3b8;
  border: 1px solid transparent;
  padding: 3px 6px;
  font-size: 15px;
  line-height: 1;
  margin-left: 4px;
}

.doc-action-btn--delete:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* ---------- Document preview, inline in the reviewer's Documents tab ---------- */
.doc-inline-viewer {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow);
}

.doc-inline-viewer[hidden] {
  display: none;
}

.doc-inline-viewer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
}

.doc-inline-viewer__close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 6px;
}

.doc-inline-viewer__close:hover {
  color: #fff;
  background: var(--brass);
}

.doc-inline-viewer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  max-height: 75vh;
  overflow: auto;
  background: var(--ink);
}

.doc-inline-viewer__image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.doc-inline-viewer__frame {
  width: 100%;
  height: 75vh;
  border: none;
}

@media (max-width: 640px) {
  .doc-inline-viewer__body {
    max-height: 60vh;
  }

  .doc-inline-viewer__image,
  .doc-inline-viewer__frame {
    max-height: 60vh;
    height: 60vh;
  }
}

.doc-slot__info a {
  font-size: 13px;
  color: var(--ledger-green);
  text-decoration: none;
  font-weight: 600;
  margin-left: 10px;
}

.doc-upload-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.doc-upload-form input[type=file] {
  font-size: 13px;
  max-width: 240px;
}

.doc-upload-form .btn {
  padding: 8px 16px;
  font-size: 13px;
}

.doc-slot__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  flex-shrink: 0;
}

.doc-slot__remove:hover {
  color: #C0392B;
  background: rgba(192, 57, 43, 0.08);
}

.doc-slot__remove-icon {
  width: 16px;
  height: 16px;
}

.doc-slot__error {
  font-size: 12.5px;
  color: #C0392B;
}

.doc-slot__extraction {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.doc-slot__extraction--failed {
  color: #B9770E;
}

.doc-slot__mismatch {
  display: inline-block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #B9770E;
  background: rgba(185, 119, 14, 0.12);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ---------- Document mismatch confirmation (customer) ---------- */
.mismatch-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.mismatch-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0 0 12px;
}

.mismatch-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mismatch-choice__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.mismatch-choice__option input {
  margin-top: 3px;
  accent-color: var(--brass);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------- Document mismatch triage (reviewer) ---------- */
.triage-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-left: 3px solid rgba(185, 119, 14, 0.5);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.triage-card__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.triage-card__field {
  font-family: var(--font-display);
  font-size: 15px;
}

.triage-card__slot {
  font-size: 12.5px;
  color: var(--text-muted);
}

.triage-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 14px;
}

.triage-card__label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.triage-card__value {
  font-size: 14.5px;
  font-weight: 500;
  padding: 9px 0;
}

.triage-card__input {
  width: 100%;
  font-size: 14.5px;
  font-weight: 500;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--ink-raised);
  color: var(--ink);
  font-family: inherit;
  box-shadow: var(--glass-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.triage-card__input:focus-visible {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.triage-card__low-confidence {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #B9770E;
}

.triage-card__low-confidence svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.triage-card__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.triage-done {
  text-align: center;
  padding: 30px 20px;
}

.triage-done form {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .triage-card__row {
    grid-template-columns: 1fr;
  }

  .triage-card__actions {
    flex-direction: column-reverse;
  }
}

/* ---------- Approvals: stage stepper ---------- */
.stepper {
  list-style: none;
  margin: 0;
  position: relative;
  padding: 28px 26px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

.stepper__item {
  display: flex;
  gap: 16px;
  padding-bottom: 22px;
  position: relative;
}

.stepper__item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: -6px;
  width: 1px;
  background: var(--line);
}

.stepper__item:last-child::before {
  display: none;
}

.stepper__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--line);
  flex-shrink: 0;
  margin-top: 3px;
  z-index: 1;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.stepper__item--done .stepper__dot {
  background: var(--ledger-green);
  border-color: var(--ledger-green);
}

.stepper__item--done .stepper__dot::after {
  content: '✓';
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.stepper__item--current .stepper__dot {
  background: var(--brass);
  border-color: var(--brass);
  box-shadow: 0 0 0 4px rgba(0, 128, 214, 0.15);
}

.stepper__label {
  font-size: 14.5px;
  color: var(--text-muted);
}

.stepper__item--done .stepper__label {
  color: var(--ink);
}

.stepper__item--current .stepper__label {
  color: var(--ink);
  font-weight: 600;
}

.stepper__hint {
  font-size: 13px;
  color: var(--brass);
  margin-top: 3px;
}

/* ---------- Approvals: history log ---------- */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
}

.history-item__stage {
  font-size: 14px;
}

.history-item__meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ---------- Legal Reviewer: queue ---------- */
/* Widened from 1080px -- on typical 1440px+ laptop/desktop screens the
   reviewer's two-column draft/document layout was leaving a large unused
   strip to the right of the sidebar column. */
.app-content--wide {
  max-width: 1440px;
}

.queue-table-wrap {
  overflow-x: auto;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: 6px 22px;
}

.queue-table {
  width: 100%;
  border-collapse: collapse;
}

.queue-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding: 16px 12px 10px;
  border-bottom: 1px solid var(--glass-border);
}

.queue-table td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: top;
  font-size: 14px;
}

.queue-table tbody tr {
  transition: background .15s ease;
}

.queue-table tbody tr:last-child td {
  border-bottom: none;
}

.queue-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.5);
}

.queue-table__name {
  font-weight: 600;
}

.queue-table__meta {
  font-size: 12.5px;
  color: var(--text-muted);
}

.queue-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text-muted);
}

.queue-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}

.queue-badge--neutral {
  color: var(--text-muted);
}

.queue-badge--new {
  background: rgba(0, 128, 214, 0.14);
  color: var(--brass);
  border-color: rgba(0, 128, 214, 0.18);
}

.queue-badge--active {
  background: rgba(0, 87, 168, 0.14);
  color: var(--ledger-green);
  border-color: rgba(0, 87, 168, 0.18);
}

.queue-badge--waiting {
  background: rgba(214, 137, 16, 0.16);
  color: #B9770E;
  border-color: rgba(214, 137, 16, 0.2);
}

.queue-badge--done {
  background: rgba(39, 174, 96, 0.16);
  color: #1E8449;
  border-color: rgba(39, 174, 96, 0.2);
}

.queue-badge--draft_approved {
  background: rgba(124, 58, 237, 0.14);
  color: #7C3AED;
  border-color: rgba(124, 58, 237, 0.2);
}

.queue-badge--migrated {
  background: #f0fff0;
  color: #004e00;
  border-color: #00c600;
  font-size: 11px;
}

/* ---------- Reviewer: Overview stat cards ---------- */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
}

.stat-card__icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 10px;
  color: var(--brass);
  opacity: .8;
}

.stat-card__count {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-card__label {
  font-size: 12px;
  color: var(--text-muted);
}

.stat-card--neutral .stat-card__count {
  color: var(--text-muted);
}

.stat-card--new .stat-card__count {
  color: var(--brass);
}

.stat-card--active .stat-card__count {
  color: var(--ledger-green);
}

.stat-card--waiting .stat-card__count {
  color: #B9770E;
}

.stat-card--draft_approved .stat-card__count {
  color: #7C3AED;
}

.stat-card--done .stat-card__count {
  color: #1E8449;
}

@media (max-width: 860px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Reviewer: CRM quick-filter pills ----------
   Sit above the detailed filter bar -- one click to jump to a whole
   bucket (same neutral/new/active/waiting/done grouping the badge colors
   and Overview's stat cards already use), with its own live count so the
   row doubles as an at-a-glance summary rather than only a filter control. */
.crm-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.crm-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.crm-pill:hover {
  color: var(--ink);
  border-color: rgba(0, 87, 168, 0.25);
}

.crm-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.07);
  font-size: 11px;
  font-weight: 700;
}

.crm-pill.is-active {
  color: #fff;
  background: var(--ledger-green);
  border-color: var(--ledger-green);
}

.crm-pill--new.is-active {
  background: var(--brass);
  border-color: var(--brass);
}

.crm-pill--waiting.is-active {
  background: #B9770E;
  border-color: #B9770E;
}

.crm-pill--draft_approved.is-active {
  background: #7C3AED;
  border-color: #7C3AED;
}

.crm-pill--done.is-active {
  background: #1E8449;
  border-color: #1E8449;
}

.crm-pill.is-active .crm-pill__count {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* ---------- Reviewer: CRM filter bar ---------- */
.crm-filter-bar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 22px;
  flex-wrap: wrap;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.crm-filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.crm-filter-field label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.crm-filter-bar select,
.crm-filter-bar input[type=text] {
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: 13.5px;
  font-family: var(--font-body);
  background: var(--ink-raised);
  box-shadow: var(--glass-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.crm-filter-bar select:focus,
.crm-filter-bar input[type=text]:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.crm-filter-field--search input {
  min-width: 220px;
}

.crm-filter-clear {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding-bottom: 10px;
}

.crm-filter-clear:hover {
  color: var(--ink);
}

/* ---------- Reviewer: CRM table richness (avatar, plan tag, actions) ---------- */
.queue-table__customer {
  display: flex;
  align-items: center;
  gap: 11px;
}

.crm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 87, 168, 0.18), rgba(0, 128, 214, 0.18));
  border: 1px solid rgba(0, 87, 168, 0.16);
  color: var(--ledger-green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.queue-plan-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--ink);
}

.queue-plan-tag--mirror {
  color: var(--ledger-green);
  font-weight: 600;
}

.queue-plan-tag__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.queue-table__meta--stale {
  color: #B9770E;
  font-weight: 600;
}

.queue-table__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
}

.btn--icon svg {
  width: 15px;
  height: 15px;
}

/* ---------- Reviewer: CRM pagination ---------- */
.crm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding: 4px 4px;
}

.crm-pagination__summary {
  font-size: 13px;
  color: var(--text-muted);
}

.crm-pagination__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crm-pagination__page {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- Legal Reviewer: review detail ---------- */
.reviewer-back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 18px;
}

.reviewer-back-link:hover {
  color: var(--ink);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}

.review-header__name {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 4px;
}

.review-header__meta {
  font-size: 13px;
  color: var(--text-muted);
}

/* Mirror Wills only -- switches the whole Draft/Versions/Feedback column
   between the two separate documents this application actually has
   (?will=primary|mirror), styled as pills to match .review-status-badge
   rather than the JS-driven .tab-btn pattern, since this one reloads the
   page instead of toggling a panel in place. */
.review-variant-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.review-variant-toggle__link {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 24px;
  font-size: 13.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.review-variant-toggle__link:hover {
  color: var(--ink);
}

.review-variant-toggle__link.is-active {
  background: rgba(0, 87, 168, 0.16);
  color: var(--ledger-green);
  border-color: rgba(0, 87, 168, 0.22);
}

/* Horizontal action toolbar -- buttons flow left to right and wrap, each
   carrying its own status caption directly underneath, rather than stacking
   every action down the right side of the header. */
.review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.review-toolbar__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-toolbar__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-toolbar__note {
  align-self: center;
}

.review-toolbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin-left: auto;
}

/* Current stage -- deliberately the first thing in the toolbar (not tucked
   into the header's top-right corner opposite the customer's name) and
   sized well above the other status captions on this page, since it's the
   single fact a reviewer most needs before deciding which action to take. */
.review-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px 9px 16px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: var(--text-muted);
}

.review-status-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
  flex-shrink: 0;
}

.review-status-badge--neutral {
  color: var(--text-muted);
}

.review-status-badge--new {
  background: rgba(0, 128, 214, 0.16);
  color: var(--brass);
  border-color: rgba(0, 128, 214, 0.22);
}

.review-status-badge--active {
  background: rgba(0, 87, 168, 0.16);
  color: var(--ledger-green);
  border-color: rgba(0, 87, 168, 0.22);
}

.review-status-badge--waiting {
  background: rgba(214, 137, 16, 0.18);
  color: #B9770E;
  border-color: rgba(214, 137, 16, 0.24);
}

.review-status-badge--draft_approved {
  background: rgba(124, 58, 237, 0.16);
  color: #7C3AED;
  border-color: rgba(124, 58, 237, 0.22);
}

.review-status-badge--done {
  background: rgba(39, 174, 96, 0.18);
  color: #1E8449;
  border-color: rgba(39, 174, 96, 0.24);
}

.call-status {
  font-size: 12.5px;
  color: var(--text-muted);
}

.call-timer {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ledger-green);
  font-weight: 600;
}

/* Variant Toggle Translation Pills */
.tab-trans-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.3;
}

.tab-trans-pill--done {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.tab-trans-pill--pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Translation Status Box in Review Toolbar */
.translation-status-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.translation-status-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.translation-status-card__title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.translation-status-card__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.translation-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1.5px solid transparent;
}

.translation-item-badge--uploaded {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.translation-item-badge--pending {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.translation-item-badge__state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.translation-item-badge--uploaded .translation-item-badge__state {
  background: #16a34a;
  color: #ffffff;
}

.translation-item-badge--pending .translation-item-badge__state {
  background: #d97706;
  color: #ffffff;
}

.translation-item-badge__name {
  font-size: 12.5px;
  font-weight: 700;
}

.translation-item-badge__action {
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  color: inherit;
  transition: background 0.15s ease;
  margin-left: 4px;
}

.translation-item-badge__action:hover {
  background: rgba(0, 0, 0, 0.12);
}

.translation-item-badge__action--upload {
  background: #c5a059;
  color: #0b1a2c;
  font-weight: 700;
}

.translation-item-badge__action--upload:hover {
  background: #b58f48;
}

.review-columns {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
  transition: grid-template-columns 0.25s ease;
}

/* While a document is open in the side column's inline viewer, split the
   (now much wider) container evenly -- the extra room comes from the
   container itself, not from shrinking the draft, so both the draft and
   the document get equal, generous width at the same time. */
.review-columns.review-columns--doc-open {
  grid-template-columns: 1fr 1fr;
}

.review-panel {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--glass-shadow);
}

.review-panel__title {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 14px;
}

.tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 16px;
}

.tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--ink);
}

.tab-btn.is-active {
  color: var(--ledger-green);
  border-bottom-color: var(--ledger-green);
}

.tab-panel[hidden] {
  display: none;
}

.draft-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.draft-preview {
  width: 100%;
  height: 480px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

.doc-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.doc-editor-toolbar[hidden] {
  display: none;
}

.doc-editor-toolbar button[data-cmd] {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
}

.doc-editor-toolbar button[data-cmd]:hover {
  border-color: var(--brass);
}

.doc-editor-toolbar__spacer {
  flex: 1;
}

.review-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.review-actions[hidden] {
  display: none;
}

.review-inline-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-inline-form[hidden] {
  display: none;
}

.review-inline-form label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.review-inline-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
  background: var(--ink-raised);
  box-shadow: var(--glass-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.review-inline-form textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.draft-edit-textarea {
  font-family: var(--font-mono);
  font-size: 12px;
}

.history-item__link {
  font-size: 12.5px;
  color: var(--ledger-green);
  text-decoration: none;
  font-weight: 600;
  margin-left: 10px;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-item {
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
}

.comment-item__author {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-item__author-icon {
  width: 16px;
  height: 16px;
  color: var(--brass);
  flex-shrink: 0;
}

.comment-item__body {
  font-size: 14px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--ink-raised);
  box-shadow: var(--glass-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.comment-form textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.qa-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  margin-bottom: 6px;
}

.qa-row__label {
  color: var(--text-muted);
  flex-shrink: 0;
}

.qa-row__value {
  text-align: right;
  font-weight: 500;
}

.qa-row__input {
  flex: 1;
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--ink-raised);
  min-width: 0;
  box-shadow: var(--glass-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.qa-row__input:focus-visible {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.qa-empty {
  color: var(--text-muted);
  font-weight: 400;
}

.qa-hint {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 400;
}

.qa-warning {
  display: block;
  font-size: 11.5px;
  color: #B9770E;
  font-weight: 600;
}

.doc-checklist--compact .doc-slot {
  padding: 12px 14px;
}

.doc-checklist--compact .doc-slot__info strong {
  font-size: 13px;
}

/* ---------- Customer: amendment request + final approval ---------- */
.amend-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 440px;
}

.amend-form label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 6px;
}

.amend-form select,
.amend-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: 14.5px;
  font-family: var(--font-body);
  background: var(--ink-raised);
  box-shadow: var(--glass-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.amend-form select:focus,
.amend-form textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(0, 128, 214, .15), var(--glass-shadow);
}

.amend-form button {
  align-self: flex-start;
  margin-top: 6px;
}

.final-approve-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 16px;
  max-width: 440px;
}

.final-approve-check input {
  margin-top: 3px;
  accent-color: var(--brass);
  width: 16px;
  height: 16px;
}

/* ---------- Reviewer: compare versions ---------- */
.compare-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.draft-preview--compare {
  height: 560px;
}

.history-item__link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--ledger-green);
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
  font-family: inherit;
}

.history-item__link-btn:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {

  .value-grid,
  .feature-grid,
  .stat-row,
  .security-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .compare-columns {
    grid-template-columns: 1fr;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 56px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .process__list,
  .plans {
    grid-template-columns: 1fr;
  }

  .process__timeline {
    flex-direction: column;
    gap: 24px;
  }

  .process__timeline-step::after {
    display: none;
  }

  .review-columns,
  .review-columns.review-columns--doc-open {
    grid-template-columns: 1fr;
  }

  .value-grid,
  .feature-grid,
  .stat-row,
  .security-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Public CMS page ---------- */
.page-content__hero-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
}

.page-content__title {
  font-family: var(--font-display);
  font-size: 38px;
  max-width: 760px;
  margin: 0 auto 28px;
}

.page-content {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}

.page-content h2 {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 36px 0 12px;
}

.page-content h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 28px 0 10px;
}

.page-content p {
  margin: 0 0 16px;
}

.page-content ul,
.page-content ol {
  margin: 0 0 16px;
  padding-left: 26px;
}

.page-content li {
  margin-bottom: 6px;
}

.page-content a {
  color: var(--brass);
}

.page-content img {
  max-width: 100%;
  border-radius: var(--radius-md);
}

/* ---------- Admin override (act-as-customer) ---------- */
.admin-override {
  background: rgba(196, 130, 12, 0.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(196, 130, 12, 0.3);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 14px 0;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.admin-override__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #b3720a;
  margin-top: 1px;
}

.admin-override__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #b3720a;
  margin-bottom: 6px;
}

.admin-override p {
  margin: 0 0 10px;
}

.admin-override form {
  margin: 0;
}

/* ---------- Activity log ---------- */
.activity-details {
  font-size: 12px;
}

.activity-details summary {
  cursor: pointer;
  color: var(--ledger-green);
  font-weight: 600;
}

.activity-details div {
  margin-top: 6px;
}

.activity-details code {
  background: var(--paper);
  padding: 2px 5px;
  border-radius: 3px;
  word-break: break-word;
}

.activity-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

/* ---------- User management ---------- */
.user-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 3px 4px 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

.user-role-badge__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-role-badge__remove:hover {
  background: rgba(192, 57, 43, 0.15);
  color: #C0392B;
}

.user-add-role {
  display: flex;
  gap: 6px;
  align-items: center;
}

.user-add-role select {
  font-size: 12.5px;
  padding: 5px 6px;
  border-radius: 3px;
  border: 1px solid rgba(38, 38, 38, 0.18);
}

/* ---------- SEO / Pages CMS ---------- */
.field textarea,
.field select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(38, 38, 38, 0.18);
  border-radius: 3px;
  font-size: 14.5px;
  font-family: var(--font-body);
  background: #fff;
}

.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.field textarea {
  resize: vertical;
}

.seo-toolbar {
  margin-bottom: 20px;
}

.seo-field-hint {
  color: var(--text-muted);
  font-size: 12.5px;
  margin: 4px 0 0;
}

.seo-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.seo-slug-link {
  color: var(--ledger-green);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.seo-slug-link:hover {
  text-decoration: underline;
}

.seo-slug-link--draft {
  color: var(--text-muted);
}

.seo-slug-input {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(38, 38, 38, 0.18);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}

.seo-slug-input:focus-within {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.seo-slug-prefix {
  padding: 11px 0 11px 12px;
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  align-self: center;
}

.seo-slug-input input {
  flex: 1;
  border: none;
  padding: 11px 12px 11px 4px;
  font-size: 14.5px;
  font-family: var(--font-mono);
  background: transparent;
}

.seo-slug-input input:focus-visible {
  outline: none;
}

.seo-image-preview {
  display: block;
  max-width: 320px;
  max-height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  margin-bottom: 10px;
}

.seo-editor {
  border: 1px solid rgba(38, 38, 38, 0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}

.seo-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.seo-editor__format-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.seo-editor__toolbar button {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink);
}

.seo-editor__toolbar button:hover {
  background: rgba(0, 128, 214, 0.1);
  border-color: rgba(0, 128, 214, 0.2);
}

.seo-editor__divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0 2px;
}

.seo-editor__spacer {
  flex: 1;
}

.seo-editor__source-toggle {
  font-weight: 600;
  color: var(--ledger-green) !important;
}

.seo-editor__frame {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
}

.seo-editor__source {
  width: 100%;
  height: 420px;
  border: none;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}

/* [hidden] gotcha: explicit `display` above beats the UA stylesheet's
   `[hidden]{display:none}` by specificity, so toggling the attribute alone
   silently does nothing without this override -- hit before elsewhere in
   this file, easy to reintroduce on any new element that sets its own display. */
.seo-editor__frame[hidden],
.seo-editor__source[hidden],
.seo-editor__format-buttons[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .app-shell {
    flex-direction: column;
  }

  .app-sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    overflow-x: auto;
  }

  .app-sidebar__brand {
    padding: 0 16px 0 0;
  }

  .app-sidebar__nav {
    flex-direction: row;
  }

  .app-sidebar__link span {
    display: none;
  }

  .app-topbar {
    padding: 16px 20px;
  }

  .app-content {
    padding: 24px 20px;
  }

  .dash-cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Beneficiaries (distribution) -----------------------------------
   Deliberately larger type and touch targets than the rest of the
   dashboard -- this page is filled in by whoever's writing the will,
   who is disproportionately likely to be an older, less tech-fluent
   user, and it's also the single most consequential page in the whole
   product (it decides who inherits what). Reuses the app's existing
   tokens/fonts throughout so it still reads as the same product, just
   turned up a size. */
.beneficiary-intro {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0 0 28px;
}

.beneficiary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  background: rgba(0, 87, 168, 0.08);
  border: 1.5px solid rgba(0, 87, 168, 0.3);
  color: var(--ledger-green);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.beneficiary-total--incomplete {
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.35);
  color: #C0392B;
}

.beneficiary-total__note {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  opacity: .85;
}

.beneficiary-row {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--glass-shadow);
}

.beneficiary-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.beneficiary-row__title {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0;
}

.beneficiary-row__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
}

.beneficiary-row__remove:hover {
  color: #C0392B;
  background: rgba(192, 57, 43, 0.08);
}

.beneficiary-row__remove-icon {
  width: 18px;
  height: 18px;
}

.beneficiary-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}

.beneficiary-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.beneficiary-options--inline {
  flex-direction: row;
  flex-wrap: wrap;
}

.beneficiary-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 17px;
  font-family: var(--font-body);
  transition: border-color .15s ease, background .15s ease;
  background: var(--ink-raised);
}

.beneficiary-options--inline .beneficiary-option {
  flex: 1 1 200px;
}

.beneficiary-option:hover {
  border-color: var(--brass);
}

.beneficiary-option input[type=radio] {
  accent-color: var(--brass);
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

.beneficiary-option:has(input:checked) {
  border-color: var(--brass);
  background: var(--parchment);
  box-shadow: 0 0 0 1px var(--brass);
}

.beneficiary-option__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--parchment-dim);
  color: var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
}

.beneficiary-option__icon-svg {
  width: 19px;
  height: 19px;
}

.beneficiary-text-input {
  width: 100%;
  padding: 16px 18px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--ink-raised);
  color: var(--text-on-ink);
  font-family: var(--font-body);
  font-size: 17px;
  margin-bottom: 22px;
}

.beneficiary-text-input:focus {
  outline: none;
  border-color: var(--brass);
}

.beneficiary-text-input:has(+ .beneficiary-hint) {
  margin-bottom: 8px;
}

.beneficiary-hint {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
}

.beneficiary-percentage {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 220px;
}

.beneficiary-percentage input {
  width: 100%;
  padding: 16px 18px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--ink-raised);
  color: var(--text-on-ink);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  text-align: right;
}

.beneficiary-percentage input:focus {
  outline: none;
  border-color: var(--brass);
}

.beneficiary-percentage__sign {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text-muted);
}

.beneficiary-percentage__status {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.beneficiary-percentage__status--incomplete {
  color: #C0392B;
}

.beneficiary-add {
  width: 100%;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--line);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 24px;
  transition: border-color .15s ease, color .15s ease;
}

.beneficiary-add:hover {
  border-color: var(--brass);
  color: var(--brass);
}

.contingent-card {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 24px;
  background: var(--parchment-dim);
}

.contingent-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}

.contingent-toggle-row input {
  margin-top: 3px;
  width: 19px;
  height: 19px;
  accent-color: var(--brass);
  flex-shrink: 0;
}

.contingent-toggle-copy strong {
  font-family: var(--font-display);
  font-size: 17px;
  display: block;
  margin-bottom: 4px;
}

.contingent-toggle-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.contingent-body {
  display: none;
}

.contingent-body.is-open {
  display: block;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.beneficiary-save {
  font-size: 17px;
  padding: 16px 32px;
}

.beneficiary-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.beneficiary-doc-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(230, 163, 0, 0.08);
  border: 1px solid rgba(230, 163, 0, 0.35);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 15.5px;
}

/* ==========================================================================
   PUBLIC PAGES & BLOG DESIGN SYSTEM (DARK & BRASS LUXURY AESTHETIC)
   ========================================================================== */

/* Page Hero */
.page-hero {
  background: #0B0E14;
  padding: 80px 0 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.page-hero__container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brass, #0080D6);
  margin-bottom: 16px;
}

.page-hero__title {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.page-hero__accent {
  color: var(--brass, #0080D6);
}

.page-hero__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 680px;
  margin: 0;
}

.page-hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Blog Hero & Archive */
.blog-hero {
  background: #0B0E14;
  padding: 88px 0 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.blog-hero__container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brass, #0080D6);
  margin-bottom: 16px;
}

.blog-hero__title {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: clamp(38px, 5.5vw, 62px);
  line-height: 1.05;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.blog-hero__accent {
  color: var(--brass, #0080D6);
}

.blog-hero__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 640px;
  margin: 0;
}

/* Blog Filter Pills */
.blog-filter-section {
  background: #11141C;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 0;
  position: sticky;
  top: 70px;
  z-index: 40;
}

.blog-filter__container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-categories {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.blog-categories::-webkit-scrollbar {
  display: none;
}

.blog-cat-pill {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.blog-cat-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.2);
}

.blog-cat-pill--active {
  background: var(--brass, #0080D6);
  color: #FFFFFF;
  border-color: var(--brass, #0080D6);
  font-weight: 600;
}

/* Blog Main Section & Featured */
.blog-main-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.blog-featured {
  margin-bottom: 56px;
}

.blog-featured__badge {
  display: inline-block;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
}

.blog-featured__card {
  display: grid;
  grid-template-columns: 1fr;
  background: #131722;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (min-width: 768px) {
  .blog-featured__card {
    grid-template-columns: 2fr 3fr;
  }
}

.blog-featured__card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 128, 214, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.blog-featured__visual {
  background: #080A0E;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  min-height: 220px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.blog-featured__watermark {
  position: absolute;
  right: 10px;
  top: 10px;
  font-family: var(--font-display, serif);
  font-size: 180px;
  line-height: 1;
  font-weight: 900;
  color: rgba(0, 128, 214, 0.05);
  pointer-events: none;
  user-select: none;
}

.blog-featured__visual-content {
  position: relative;
  z-index: 2;
}

.blog-tag {
  display: inline-block;
  background: rgba(0, 128, 214, 0.15);
  color: #4DB5FF;
  border: 1px solid rgba(0, 128, 214, 0.3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.blog-tag--hero {
  font-size: 12px;
  padding: 5px 12px;
}

.blog-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.blog-featured__info {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-featured__title {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 16px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.blog-featured__card:hover .blog-featured__title {
  color: #4DB5FF;
}

.blog-featured__excerpt {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 24px;
}

.blog-featured__cta {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--brass, #0080D6);
}

/* Blog Article Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 28px;
}

.blog-card {
  background: #131722;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 128, 214, 0.4);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.blog-card__inner {
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.blog-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.blog-card__read-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.blog-card__title {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 12px;
  transition: color 0.2s ease;
}

.blog-card:hover .blog-card__title {
  color: #4DB5FF;
}

.blog-card__excerpt {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 24px;
  flex-grow: 1;
}

.blog-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
  color: rgba(255, 255, 255, 0.45);
}

.blog-card__arrow {
  font-weight: 600;
  color: var(--brass, #0080D6);
}

/* Blog Post Detail Page */
.blog-article-hero {
  background: #0B0E14;
  padding: 72px 0 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-article-hero__container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-article-hero__breadcrumbs {
  margin-bottom: 24px;
}

.blog-article-hero__breadcrumbs a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.2s;
}

.blog-article-hero__breadcrumbs a:hover {
  color: #FFFFFF;
}

.blog-article-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.blog-article-hero__read-time,
.blog-article-hero__date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.blog-article-hero__title {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.15;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 20px;
  letter-spacing: -0.015em;
}

.blog-article-hero__lead {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 28px;
}

.blog-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-author__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brass, #0080D6);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-author__info {
  display: flex;
  flex-direction: column;
}

.blog-author__name {
  font-weight: 600;
  font-size: 15px;
  color: #FFFFFF;
}

.blog-author__role {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

/* Blog Article Body & Typography */
.blog-article-main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.blog-article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 992px) {
  .blog-article-layout {
    grid-template-columns: 7fr 3fr;
  }
}

.blog-article-content {
  font-family: var(--font-body, 'Inter', sans-serif);
  color: #D1D5DB;
  font-size: 17px;
  line-height: 1.8;
}

.blog-heading--h2 {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 28px;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 44px 0 18px;
  font-weight: 600;
}

.blog-heading--h3 {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 22px;
  line-height: 1.35;
  color: #F3F4F6;
  margin: 32px 0 14px;
  font-weight: 600;
}

.blog-paragraph {
  margin: 0 0 20px;
}

.blog-list {
  margin: 0 0 24px;
  padding-left: 24px;
}

.blog-list li {
  margin-bottom: 10px;
  line-height: 1.65;
}

.blog-list--ul {
  list-style-type: disc;
}

.blog-list--ol {
  list-style-type: decimal;
}

.blog-link {
  color: #4DB5FF;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.blog-link:hover {
  color: #79cbff;
}

.blog-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 40px 0;
}

/* Callout Boxes */
.blog-callout {
  border-radius: 12px;
  padding: 24px 28px;
  margin: 32px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.blog-callout--info {
  background: rgba(0, 128, 214, 0.08);
  border-left: 4px solid #0080D6;
  color: #E5E7EB;
}

.blog-callout--warning {
  background: rgba(230, 163, 0, 0.08);
  border-left: 4px solid #E6A300;
  color: #FEF3C7;
}

.blog-callout--cta {
  background: #11151F;
  border: 1px solid rgba(0, 128, 214, 0.35);
  border-left: 4px solid #0080D6;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

@media (min-width: 640px) {
  .blog-callout--cta {
    flex-direction: row;
    align-items: center;
  }
}

.blog-callout__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  color: #FFFFFF;
}

.blog-callout__btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* In-Article Bottom CTA */
.blog-bottom-cta {
  background: #11151F;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 36px;
  margin-top: 56px;
}

.blog-bottom-cta h3 {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 24px;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.blog-bottom-cta p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15.5px;
  margin: 0 0 24px;
  line-height: 1.6;
}

.blog-bottom-cta__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Blog Sidebar */
.blog-article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.blog-sidebar-box {
  background: #131722;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 28px;
}

.blog-sidebar-box h4 {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 18px;
  color: #FFFFFF;
  margin: 0 0 14px;
}

.blog-sidebar-box p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 16px;
}

.blog-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-sidebar-list li {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
}

.blog-related-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-related-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.blog-related-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog-related-item__tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brass, #0080D6);
  font-weight: 700;
  margin-bottom: 4px;
}

.blog-related-item__title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0 0 4px;
  transition: color 0.2s;
}

.blog-related-item:hover .blog-related-item__title {
  color: #4DB5FF;
}

.blog-related-item__time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* Pricing Page Styles */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .pricing-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pricing-plan-card {
  background: #11141D;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.pricing-plan-card--popular {
  border-color: var(--brass, #0080D6);
  background: #131826;
  box-shadow: 0 16px 40px rgba(0, 128, 214, 0.12);
}

.pricing-plan-card__badge {
  position: absolute;
  top: -14px;
  right: 28px;
  background: var(--brass, #0080D6);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 9999px;
}

.pricing-plan-card__tag {
  display: block;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
}

.pricing-plan-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.pricing-plan-card__price {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 44px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}

.pricing-plan-card__period {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.pricing-plan-card__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 28px;
  min-height: 48px;
}

.pricing-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-plan-card__features li {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-check {
  color: var(--brass, #0080D6);
  font-weight: 700;
  font-size: 16px;
}

.pricing-plan-card__fine {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin: 12px 0 0;
}

/* Value Grid */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.value-item {
  background: #11141D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 28px;
}

.value-item__icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.value-item h3 {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 19px;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.value-item p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* For Employers Grid & Tiers */
.grid-2x2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 36px;
}

@media (min-width: 768px) {
  .grid-2x2 {
    grid-template-columns: 1fr 1fr;
  }
}

.pain-card {
  background: #11141D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 32px;
}

.pain-card__icon {
  font-size: 28px;
  margin-bottom: 14px;
}

.pain-card h3 {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 20px;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.pain-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.tiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 900px) {
  .tiers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tier-card {
  background: #11141D;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.tier-card--popular {
  border-color: var(--brass, #0080D6);
  background: #131826;
}

.tier-card__badge {
  position: absolute;
  top: -13px;
  right: 24px;
  background: var(--brass, #0080D6);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
}

.tier-card__label {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 22px;
  color: #FFFFFF;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.tier-card__seats {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}

.tier-card__price {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 32px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.tier-card__price span {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

.tier-card__save {
  display: inline-block;
  font-size: 12px;
  color: #4DB5FF;
  font-weight: 600;
  margin-bottom: 24px;
}

.tier-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tier-card__list li {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
}

/* Feature Cards & Boxes (POA, Foundations, Consultation) */
.grid-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 700px) {
  .grid-3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  background: #11141D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 26px;
}

.feature-card__icon {
  font-size: 26px;
  margin-bottom: 14px;
}

.feature-card h3 {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 18px;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.feature-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.highlight-box {
  background: #131722;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 36px;
}

.highlight-box h3 {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 22px;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.highlight-box p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Contact Page Layout */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

@media (min-width: 800px) {
  .grid-2col {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-item {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}

.contact-item__icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 128, 214, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 4px;
}

.contact-item p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 4px;
}

.contact-form-box {
  background: #11141D;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px;
}

.form-label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  background: #080A0E;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14.5px;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brass, #0080D6);
}

/* Legal Card */
.legal-card {
  background: #11141D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 44px 40px;
}

.legal-highlight {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
}

.legal-h2 {
  font-family: var(--font-display, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 20px;
  color: #FFFFFF;
  margin: 32px 0 12px;
}

.legal-p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px;
}

.legal-ul {
  list-style-type: disc;
  padding-left: 24px;
  margin: 0 0 24px;
}

.legal-ul li {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.legal-notice {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
}

/* Public Comprehensive Footer */
.public-footer {
  background: #07090D;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px 0 32px;
}

.public-footer__content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.public-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

@media (min-width: 800px) {
  .public-footer__main {
    grid-template-columns: 2fr 3fr;
  }
}

.public-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.public-footer__tagline {
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin: 8px 0 0;
}

.public-footer__operated {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.public-footer__socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.public-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.2s ease;
}

.public-footer__social-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.public-footer__nav-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px;
}

.public-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.public-footer__heading {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}

.public-footer__col a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}

.public-footer__col a:hover {
  color: #FFFFFF;
}

.public-footer__pill {
  display: inline-block;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 8px;
  border-radius: 4px;
  width: fit-content;
}

.public-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 24px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.4);
}

/* Document Uploading Dark Fullscreen Overlay */
.doc-upload-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  user-select: none;
  cursor: wait;
}

.doc-upload-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.doc-upload-overlay__card {
  position: relative;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 36px 40px 32px;
  max-width: 440px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(12px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: #f8fafc;
}

.doc-upload-overlay.is-active .doc-upload-overlay__card {
  transform: translateY(0) scale(1);
}

.doc-upload-overlay__spinner-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-upload-overlay__spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: #c5a880;
  border-right-color: #c5a880;
  animation: docUploadSpin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

.doc-upload-overlay__spinner-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #c5a880;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes docUploadSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.doc-upload-overlay__title {
  font-family: var(--font-heading, inherit);
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.doc-upload-overlay__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0 0 16px;
}

.doc-upload-overlay__subtext {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #c5a880;
  background: rgba(197, 168, 128, 0.12);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(197, 168, 128, 0.25);
}

/* ============================================================
   OwnX WhatsApp Floating Action Button
   Exact match to legacy React component (whatsapp-button.tsx)
   ============================================================ */
.ownx-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25D366;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, bottom 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  bottom: 100px;
}

.ownx-whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.ownx-whatsapp-float:active {
  transform: scale(0.95);
}

.ownx-whatsapp-float svg {
  display: block;
  pointer-events: none;
}

/* ============================================================
   OwnX Cookie Consent Popup
   Exact match to legacy React component (cookie-consent.tsx)
   ============================================================ */
.ownx-cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 16px 20px;
  pointer-events: none;
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.ownx-cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.ownx-cookie-banner__inner {
  pointer-events: auto;
  max-width: 768px;
  margin: 0 auto;
  background-color: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

.ownx-cookie-banner__content {
  flex: 1;
  min-width: 0;
}

.ownx-cookie-banner__title {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.ownx-cookie-banner__desc {
  color: #9CA3AF;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.ownx-cookie-banner__link {
  color: #1E6FEB;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.ownx-cookie-banner__link:hover {
  text-decoration: underline;
  color: #4991FF;
}

.ownx-cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ownx-cookie-btn {
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  border: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.ownx-cookie-btn--decline {
  background: transparent;
  color: #9CA3AF;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
}

.ownx-cookie-btn--decline:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.06);
}

.ownx-cookie-btn--accept {
  background-color: #1E6FEB;
  color: #FFFFFF;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(30, 111, 235, 0.35);
}

.ownx-cookie-btn--accept:hover {
  background-color: #185ecc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 111, 235, 0.45);
}

.ownx-cookie-btn--accept:active {
  transform: translateY(0);
}

.ownx-cookie-btn--close {
  background: transparent;
  color: #6B7280;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ownx-cookie-btn--close:hover {
  color: #9CA3AF;
  background-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
  .ownx-whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }

  .ownx-whatsapp-float svg {
    width: 28px;
    height: 28px;
  }

  body.has-cookie-banner .ownx-whatsapp-float {
    bottom: 165px;
  }

  .ownx-cookie-banner {
    padding: 12px 14px;
  }

  .ownx-cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 18px;
    gap: 12px;
  }

  .ownx-cookie-banner__actions {
    justify-content: flex-end;
    gap: 8px;
  }

  .ownx-cookie-btn--accept {
    flex: 1;
    text-align: center;
  }
}

/* ==========================================================================
   Questionnaire Admin Builder & Simulator Styles
   ========================================================================== */
.q-admin-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
}

.q-section-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.q-section-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.q-question-row:hover {
  background-color: #f1f5f9 !important;
}

.q-rule-row,
.q-option-row {
  transition: border-color 0.15s ease;
}

.q-rule-row:hover,
.q-option-row:hover {
  border-color: #cbd5e1;
}

.q-tab-btn {
  transition: all 0.15s ease;
}

.q-tab-btn:hover {
  color: var(--color-navy);
}

/* Customer Amendment Questions Section Styling */
.amend-topic-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2b3e4f;
  background: rgba(43, 62, 79, 0.08);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.amend-section-panel {
  position: relative;
  transition: box-shadow 0.2s ease;
}

@keyframes sharpBlink {

  0%,
  100% {
    border-color: #ff4757;
  }

  50% {
    border-color: transparent;
    /* Turns the border invisible halfway through */
  }
}

@keyframes glowPulse {
  0% {
    border-color: rgb(81 119 209);
    box-shadow: 0 0 5px rgb(150 241 255);
  }

  100% {
    border-color: rgba(0, 255, 255, 1);
    box-shadow: 0px 0px 20px rgba(0, 255, 255, 0.6), 0 0 31px rgba(0, 255, 255, 0.4), 0 0 36px rgba(0, 255, 255, 0.2);
  }
}


.blink-btn-sharp {
  /* Apply the animation: 1 second duration, sharp steps, loops infinitely */
  animation: glowPulse 1.5s linear infinite alternate;
}

/* ==========================================================================
   Payment Page Google Reviews & Rating Trust Pill
   ========================================================================== */

.payment-rating-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #b1d7bb;
  border-radius: 10px;
  padding: 10px 16px;
  margin: -14px 0 22px 0;
  text-decoration: none;
  color: #000000;
  transition: all 0.22s ease;
  cursor: pointer;
  background: #f1fff1;
}

.payment-rating-trigger:hover {
  border-color: rgba(66, 133, 244, 0.45);
  box-shadow: 0 4px 14px rgba(66, 133, 244, 0.12);
  transform: translateY(-1px);
}

.payment-rating-trigger__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-rating-trigger__g-icon {
  flex-shrink: 0;
}

.payment-rating-trigger__score {
  font-weight: 700;
  font-size: 14.5px;
  color: #0f172a;
  line-height: 1;
}

.payment-rating-trigger__stars {
  color: #f59e0b;
  letter-spacing: 1.5px;
  font-size: 13px;
  line-height: 1;
}

.payment-rating-trigger__label {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 500;
}

.payment-rating-trigger__right {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #197403;
}

.payment-rating-trigger__arrow {
  display: inline-block;
  font-size: 13px;
  transition: transform 0.2s ease;
}

.payment-rating-trigger:hover .payment-rating-trigger__arrow {
  transform: translateY(2px);
}

/* Reviews Container after accepted payment methods */
.payment-reviews-container {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #e2e8f0;
}

.payment-reviews-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.payment-reviews-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-reviews-bar__score {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}

.payment-reviews-bar__stars {
  color: #f59e0b;
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 1;
}

.payment-reviews-bar__caption {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  margin-top: 3px;
}

.payment-reviews-bar__link {
  font-size: 12.5px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.payment-reviews-bar__link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Single review slide card */
.payment-review-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: opacity 0.25s ease, transform 0.25s ease;
  min-height: 155px;
}

.payment-review-card.is-animating {
  opacity: 0;
  transform: translateY(6px);
}

.payment-review-card:hover {
  border-color: rgba(66, 133, 244, 0.4);
  box-shadow: 0 6px 18px rgba(66, 133, 244, 0.1);
}

.payment-review-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.payment-review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12.5px;
  color: #ffffff;
  flex-shrink: 0;
}

.payment-review-card__user {
  flex: 1;
  min-width: 0;
}

.payment-review-card__name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.3;
}

.payment-review-card__date {
  display: block;
  font-size: 11.5px;
  color: #64748b;
}

.payment-review-card__stars {
  color: #f59e0b;
  letter-spacing: 2px;
  font-size: 12.5px;
  margin-bottom: 8px;
}

.payment-review-card__text {
  font-size: 13px;
  line-height: 1.55;
  color: #334155;
  margin: 0 0 12px 0;
}

.payment-review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 11.5px;
}

.payment-review-card__source {
  color: #94a3b8;
  font-weight: 500;
}

.payment-review-card__action {
  color: #2563eb;
  font-weight: 600;
}

/* Slider Controls */
.payment-reviews-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.payment-reviews-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475467;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.payment-reviews-nav-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.payment-reviews-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.payment-reviews-dot {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.payment-reviews-dot.is-active {
  width: 20px;
  background: #2563eb;
}

@media (max-width: 480px) {
  .payment-rating-trigger {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .payment-reviews-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {

  .payment-rating-trigger__left,
  .payment-rating-trigger__right {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .payment-reviews-bar__left,
  .payment-reviews-bar__link {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

  }
}