/* ============================================================================
   MARA theme — drop-in restyle for maraesg-app-v3
   Loaded AFTER the Tailwind Play CDN script in src/views/layout.php.
   Pairs with the remapped tailwind.config in that file: together they convert
   the app's existing utility classes to the MARA design system without
   touching a single view. See handoff/README.md.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

:root{
  /* Purple + blue are reserved for attention: primary CTAs, active nav, key badges, heroes. */
  --purple-50:#F4F1FE;--purple-100:#EDE7FE;--purple-200:#DBD0FE;--purple-300:#C3B0FD;
  --purple-400:#996DFF;--purple-500:#7855F2;--purple-600:#6A40FE;--purple-700:#5A31D8;
  --blue-700:#0A56A7;--blue-500:#2979DD;

  /* Neutrals: soft, cool greys — no violet cast, so the UI reads calm not purple. */
  --ink-900:#1C2130;--ink-700:#3B4254;--ink-500:#6D7484;--ink-400:#98A0AF;
  --ink-300:#C5CBD6;--ink-200:#E5E8F0;--ink-100:#EEF1F7;--ink-050:#F5F7FC;

  /* Soft pastel accents for calm, informational surfaces (not attention items). */
  --sky-50:#EDF3FD;--sky-100:#DBE8FB;--sky-500:#3B82C4;--sky-700:#2A6099;
  --mint-50:#E9F6F0;--mint-100:#D2EEE2;--mint-500:#12A88E;--mint-700:#0B7D6A;
  --blush-50:#FCF0F4;--blush-100:#F8DEE7;--blush-500:#DB6E92;--blush-700:#B14C6E;
  --sand-50:#FBF4E8;--sand-100:#F5E6CC;--sand-500:#CE9A32;--sand-700:#9A6F1C;

  --gradient-purple:linear-gradient(100deg,#6A40FE 0%,#996DFF 100%);
  --gradient-purple-hover:linear-gradient(100deg,#5A31D8 0%,#8355FF 100%);
  --gradient-hero:linear-gradient(100deg,#0A56A7 0%,#2979DD 34%,#7855F2 74%,#996DFF 100%);
  --gradient-tint:linear-gradient(135deg,#FBFCFE 0%,#EFF3FA 100%);

  --font-display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --font-body:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --shadow-sm:0 1px 3px rgb(23 21 38 / .06),0 1px 2px rgb(23 21 38 / .04);
  --shadow-md:0 4px 14px rgb(23 21 38 / .06),0 1px 3px rgb(23 21 38 / .04);
  --shadow-shell:0 24px 60px rgb(23 21 38 / .08);
  --shadow-purple:0 6px 18px rgb(120 85 242 / .28);
  --focus-ring:0 0 0 3px rgb(120 85 242 / .22);

  --rail-width:76px;
}

/* ---- Base --------------------------------------------------------------- */
/* A whisper-soft pastel wash (cool blue → faint lilac → mint) sits behind the
   floating white rail + shell, adding warmth without shouting. */
body{background:linear-gradient(155deg,#EEF4FC 0%,#F5F3FB 52%,#F0F7F4 100%);
  color:var(--ink-900);font-family:var(--font-body);font-size:15px;line-height:1.62}
h1,h2,h3,h4,h5,h6,label,th,button,.font-semibold,.font-bold{font-family:var(--font-display)}
h1{letter-spacing:-.028em}h2,h3{letter-spacing:-.018em}h4,h5{letter-spacing:-.01em}
::selection{background:var(--sky-100);color:var(--ink-900)}
a{color:var(--purple-500)}a:hover{color:var(--purple-700)}

/* Neutral count/status pills read as soft pastel-blue rather than flat grey.
   Two-class specificity beats the single-class Tailwind colour utilities, and
   only targets pill-shaped chips — square quiet buttons keep their neutral fill. */
.rounded-full.bg-slate-100{background:var(--sky-50)}
.rounded-full.bg-slate-100.text-slate-600,.rounded-full.bg-slate-100.text-slate-500{color:var(--sky-700)}

/* MARA does not animate state: colour changes only, instantly. */
*,*::before,*::after{transition:none!important;animation-duration:0s!important}
.fa-spin{animation:fa-spin 2s linear infinite!important}
.transition,.transition-all{transition:none!important}

/* ---- Brand utilities the views already use ------------------------------ */
.bg-brand{background:var(--purple-500)}
.text-brand{color:var(--purple-500)}
.text-brand-dark{color:var(--purple-700)}
.bg-brand-light{background:var(--purple-50)}
.border-brand{border-color:var(--purple-500)}
.hover\:bg-brand-dark:hover{background:var(--purple-700)}
.hover\:border-brand:hover{border-color:var(--purple-300)}
.hover\:text-brand:hover{color:var(--purple-500)}
.border-line{border-color:var(--ink-200)}
.text-ink{color:var(--ink-900)}

/* Primary action = ONE per context. Solid purple, quiet shadow (no glow) so it
   reads as "the button to press", not as decoration shouting across the page. */
button.bg-brand,a.bg-brand,input.bg-brand,.btn-primary{
  background:var(--purple-500);color:#fff;border:1px solid transparent;
  box-shadow:var(--shadow-sm);font-weight:500;border-radius:10px
}
button.bg-brand:hover,a.bg-brand:hover,.btn-primary:hover{background:var(--purple-600)}
button.bg-brand:disabled,.btn-primary:disabled{background:var(--ink-100);color:var(--ink-400);box-shadow:none}

/* Secondary action = neutral fill. Use `.btn-quiet` on filled buttons that are
   NOT the primary action on their screen, so purple stays rare and meaningful. */
.btn-quiet,button.btn-quiet,a.btn-quiet{
  background:var(--ink-100)!important;color:var(--ink-900)!important;border:1px solid transparent!important;
  box-shadow:none!important;font-weight:500}
.btn-quiet:hover,button.btn-quiet:hover,a.btn-quiet:hover{background:var(--ink-200)!important;color:var(--ink-900)!important}
.btn-quiet i{color:var(--ink-400)!important}

/* Buttons read as medium weight, not bold. These element+class selectors
   outrank the .font-semibold/.font-bold utilities the views put on buttons,
   while leaving real headings and text links untouched. */
button.bg-brand,a.bg-brand,input.bg-brand,
button.border-line,a.border-line,
button.btn-quiet,a.btn-quiet,.btn-primary,
button.font-semibold,button.font-bold,
input[type=submit],input[type=button]{font-weight:500}

/* Quiet/secondary buttons */
.bg-slate-100{background:var(--ink-100)}
.hover\:bg-slate-200:hover{background:var(--ink-200)}
a.border-line,button.border-line{background:#fff}
a.border-line:hover,button.border-line:hover{border-color:var(--ink-300);color:var(--ink-900);background:var(--ink-050)}

/* ---- Panels ------------------------------------------------------------- */
.rounded-xl.border.border-line.bg-white,
.rounded-xl.bg-white.border.border-line{border-radius:16px;box-shadow:var(--shadow-sm)}
.rounded-lg{border-radius:10px}
.rounded-xl{border-radius:16px}
.rounded-full{border-radius:999px}

/* ---- Fields ------------------------------------------------------------- */
input[type=text],input[type=email],input[type=number],input[type=date],textarea,select{
  border-radius:10px;border-color:var(--ink-200);font-family:var(--font-body)
}
/* Form controls read as normal weight — they otherwise inherit the bold from a
   wrapping <label> (label{font-weight:600}). Set directly so inheritance can't win. */
input,select,textarea{font-weight:400}
input:focus,textarea:focus,select:focus{border-color:var(--purple-500)!important;box-shadow:var(--focus-ring)!important;outline:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
label{font-weight:600;font-size:13.5px}
/* Cards/options are often built as a <label> wrapping rich content, so nested
   descriptive text inherits the label's bold Poppins. Reset such text to normal
   body weight — but leave anything that opts into a font/weight utility
   (font-semibold, font-medium, font-body…) untouched, so titles keep their look. */
label span:not([class*="font-"]),label p:not([class*="font-"]){font-weight:400;font-family:var(--font-body)}

/* ---- Tables ------------------------------------------------------------- */
thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);font-weight:600}
tbody tr{border-color:var(--ink-200)}

/* ---- MARA shell (added by the new layout.php) --------------------------- */
.mara-page{display:flex;gap:16px;padding:18px;min-height:100vh;align-items:flex-start}
/* Collapsed to a 76px icon rail; expands on hover to reveal the labels. Sticks
   to the viewport like a real sidebar rather than growing with page content. */
.mara-rail{width:var(--rail-width);flex-shrink:0;display:flex;flex-direction:column;gap:5px;
  padding:16px 11px 18px;background:#fff;border-radius:26px;box-shadow:var(--shadow-shell);
  overflow:hidden;transition:width .18s ease!important;z-index:20;
  position:sticky;top:18px;height:calc(100vh - 36px);align-self:flex-start}
.mara-rail:hover{width:222px}
.mara-logo{display:flex;align-items:center;height:58px;margin-bottom:8px;padding-left:1px;flex-shrink:0}
.mara-logo img{width:52px;height:52px;transition:transform .3s ease!important}
/* The logo turns a half-turn as the rail opens, and back as it shuts. */
.mara-rail:hover .mara-logo img{transform:rotate(180deg)}
.mara-rail a,.mara-rail button,.mara-rail>.mara-locked{display:flex;align-items:center;justify-content:center;gap:0;height:46px;
  padding:0 12px;border-radius:13px;color:var(--ink-400);background:none;border:0;cursor:pointer;
  text-decoration:none;font-family:var(--font-display);font-size:14px;font-weight:500;white-space:nowrap;width:100%}
.mara-rail a i,.mara-rail button i,.mara-rail>.mara-locked i{width:20px;flex-shrink:0;text-align:center;font-size:19px}
.mara-rail a:hover{background:var(--ink-100);color:var(--ink-700)}
.mara-rail a[aria-current=page]{background:var(--purple-50);color:var(--purple-500)}
.mara-rail>.mara-locked{color:var(--ink-300);cursor:not-allowed}
.mara-rail-label{opacity:0;width:0;overflow:hidden;transition:opacity .1s ease!important}
.mara-rail:hover .mara-rail-label{opacity:1;width:auto}
/* Collapsed = icons dead-centre (labels take no width). Expanded = icon + label, left-aligned. */
.mara-rail:hover a,.mara-rail:hover button,.mara-rail:hover>.mara-locked,
.mara-rail:hover .mara-avatar-item{gap:14px;justify-content:flex-start}
.mara-rail .mara-rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:4px;width:100%}
.mara-rail-foot form{width:100%}
.mara-avatar-item{display:flex;align-items:center;justify-content:center;gap:0;height:46px;padding:0 9px;white-space:nowrap;
  font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--ink-700)}
.mara-avatar{width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--ink-100);color:var(--ink-700);font-family:var(--font-display);font-weight:600;font-size:14px}
.mara-signout{color:#F43F5E!important}
.mara-signout:hover{background:#FEF2F2!important}
.mara-ai-launch{color:var(--purple-500)!important;margin-top:4px}
.mara-ai-launch:hover{background:var(--purple-50)!important}

/* ---- Ask MARA slide-over ------------------------------------------------ */
.mara-ai{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.mara-ai.open{visibility:visible;pointer-events:auto}
.mara-ai-backdrop{position:absolute;inset:0;background:rgb(23 21 38 / .34);opacity:0;transition:opacity .18s ease!important}
.mara-ai.open .mara-ai-backdrop{opacity:1}
.mara-ai-panel{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;
  background:var(--gradient-tint);opacity:0;transition:opacity .18s ease!important}
.mara-ai.open .mara-ai-panel{opacity:1}
.mara-ai-head{display:flex;align-items:center;gap:11px;padding:15px 22px;background:#fff;
  border-bottom:1px solid var(--ink-200);box-shadow:var(--shadow-sm)}
.mara-ai-logo{width:34px;height:34px;flex-shrink:0}
.mara-ai-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink-900);line-height:1.1}
.mara-ai-status{font-family:var(--font-body);font-size:12px;color:var(--ink-500);display:flex;align-items:center;gap:5px}
.mara-ai-dot{width:7px;height:7px;border-radius:50%;background:#22C55E}
.mara-ai-head .mara-ai-icon:first-of-type{margin-left:auto}
.mara-ai-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:0;background:none;
  border-radius:9px;color:var(--ink-400);cursor:pointer;font-size:15px}
.mara-ai-icon:hover{background:var(--ink-100);color:var(--ink-700)}
.mara-ai-body{flex:1;min-height:0;overflow-y:auto;padding:28px 24px;display:flex;flex-direction:column;gap:12px;align-items:center}
.mara-ai-intro{margin:auto 0;text-align:center;padding:10px 4px;width:100%;max-width:640px}
.mara-ai-intro-logo{width:46px;height:46px;margin:0 auto 14px;display:block}
.mara-ai-intro h3{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink-900);margin:0}
.mara-ai-intro p{font-family:var(--font-body);font-size:14px;color:var(--ink-500);margin:6px 0 18px}
.mara-ai-starters{display:flex;flex-direction:column;gap:9px}
.mara-ai-starter{display:flex;align-items:center;gap:10px;text-align:left;padding:13px 16px;border:1px solid var(--ink-200);
  border-radius:13px;background:#fff;box-shadow:var(--shadow-sm);
  font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--ink-700);cursor:pointer}
.mara-ai-starter::before{content:"\f0eb";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--purple-400);font-size:13px}
.mara-ai-starter:hover{border-color:var(--purple-300);color:var(--purple-700)}
.mara-ai-thread{display:flex;flex-direction:column;gap:12px;width:100%;max-width:760px}
.mara-ai-msg{max-width:88%;padding:11px 14px;border-radius:14px;font-family:var(--font-body);font-size:14px;line-height:1.55}
.mara-ai-user{align-self:flex-end;background:var(--gradient-purple);color:#fff;border-bottom-right-radius:5px}
.mara-ai-assistant{align-self:flex-start;background:#fff;color:var(--ink-900);border:1px solid var(--ink-200);
  box-shadow:var(--shadow-sm);border-bottom-left-radius:5px}
.mara-ai-error{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}
.mara-ai-typing{display:inline-flex;gap:4px;align-items:center}
.mara-ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-400);animation:mara-ai-bounce 1s infinite!important}
.mara-ai-typing span:nth-child(2){animation-delay:.15s!important}
.mara-ai-typing span:nth-child(3){animation-delay:.3s!important}
@keyframes mara-ai-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.mara-ai-foot{padding:10px 24px 20px}
.mara-ai-composer{display:flex;align-items:center;gap:8px;border:1px solid var(--ink-200);border-radius:16px;
  padding:7px 8px 7px 16px;width:100%;max-width:760px;margin:0 auto;background:#fff;box-shadow:var(--shadow-md)}
.mara-ai-composer:focus-within{border-color:var(--purple-500);box-shadow:var(--focus-ring)}
.mara-ai-composer textarea{flex:1;border:0;outline:none;resize:none;font-family:var(--font-body);font-size:14px;
  line-height:1.5;color:var(--ink-900);background:none;max-height:140px;padding:0;display:block}
/* The container carries the focus ring — kill the inner textarea's own border/ring
   (the global field-focus rule is !important, so override it here). */
.mara-ai-composer textarea:focus,.ask-mara-box textarea:focus{border:0!important;box-shadow:none!important}
.mara-ai-send{flex-shrink:0;width:36px;height:36px;border:0;border-radius:10px;background:var(--gradient-purple);
  color:#fff;cursor:pointer;box-shadow:var(--shadow-purple)}
.mara-ai-send:disabled{background:var(--ink-200);color:var(--ink-400);box-shadow:none;cursor:default}
.mara-ai-tag{margin:8px 2px 0;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--ink-400);text-align:center}

/* ---- Home "Ask MARA" inline panel --------------------------------------- */
.ask-mara{background:var(--gradient-tint);border:1px solid var(--purple-100);border-radius:18px;padding:22px 24px 20px}
.ask-mara-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.ask-mara-ico{width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;background:#fff;color:var(--purple-500);font-size:18px;box-shadow:var(--shadow-sm)}
.ask-mara-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink-900);line-height:1.2}
.ask-mara-sub{font-family:var(--font-body);font-size:13.5px;color:var(--ink-500)}
.ask-mara-box{background:#fff;border:1px solid var(--ink-200);border-radius:14px;padding:14px 16px 12px;box-shadow:var(--shadow-sm)}
.ask-mara-box textarea{width:100%;border:0;outline:none;resize:none;font-family:var(--font-body);font-size:14.5px;
  line-height:1.55;color:var(--ink-900);background:none;min-height:56px}
.ask-mara-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.ask-mara-powered{font-family:var(--font-body);font-size:11.5px;color:var(--ink-400)}
.ask-mara-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:0;border-radius:11px;
  background:var(--gradient-purple);color:#fff;font-family:var(--font-display);font-weight:600;font-size:13.5px;
  cursor:pointer;box-shadow:var(--shadow-purple)}
.ask-mara-btn:hover{background:var(--gradient-purple-hover)}
.ask-mara-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.ask-mara-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--ink-200);
  border-radius:999px;background:#fff;font-family:var(--font-display);font-size:13px;font-weight:500;color:var(--ink-700);
  cursor:pointer;box-shadow:var(--shadow-sm)}
.ask-mara-chip i{color:var(--purple-400);font-size:12px}
.ask-mara-chip:hover{border-color:var(--purple-300);color:var(--purple-700)}

/* ---- Home workflow + tutorials ------------------------------------------ */
.wf-step{position:relative;border:1px solid var(--ink-200);border-radius:14px;padding:16px 16px 15px;background:#fff}
.wf-step .wf-num{width:34px;height:34px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;font-family:var(--font-display);font-weight:700;font-size:14px}
.wf-step-done .wf-num{background:#DCFCE7;color:#16A34A}
.wf-step-todo .wf-num{background:var(--ink-100);color:var(--ink-500)}
.wf-step-active{background:var(--gradient-hero);border-color:transparent;color:#fff;box-shadow:var(--shadow-purple)}
.wf-step-active .wf-num{background:#fff;color:var(--purple-600)}
.wf-step-active .wf-sub{color:rgb(255 255 255 / .8)!important}
.tut-thumb{position:relative;width:118px;height:82px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:22px}
.tut-soon{position:absolute;left:8px;bottom:8px;background:rgb(23 21 38 / .6);color:#fff;font-family:var(--font-display);
  font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px}
.mara-shell{flex:1;min-width:0;background:#fff;border-radius:26px;box-shadow:var(--shadow-shell);overflow:hidden}
.mara-shell-body{padding:26px 40px 44px;display:flex;flex-direction:column;gap:20px}

/* ---- Gate hero (partials/gate_header.php) ------------------------------- */
.mara-hero{position:relative;overflow:hidden;background:var(--gradient-hero);padding:34px 40px 38px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.mara-hero::before,.mara-hero::after{content:"";position:absolute;border-radius:50%;background:rgb(255 255 255 / .07)}
.mara-hero::before{top:-140px;right:-60px;width:360px;height:360px}
.mara-hero::after{top:-40px;right:160px;width:220px;height:220px}
.mara-hero>*{position:relative}
.mara-hero h1{font-family:var(--font-display);font-weight:700;font-size:55px;line-height:.98;letter-spacing:-.028em;color:#fff;margin:0}
.mara-hero p.lede{margin-top:18px;font-family:var(--font-body);font-size:15px;line-height:1.62;color:rgb(255 255 255 / .88);max-width:62ch}
.mara-hero .mara-eyebrow{color:rgb(255 255 255 / .82);margin-bottom:14px}
.mara-hero .mara-eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:rgb(255 255 255 / .6);vertical-align:middle;margin-right:12px}
.mara-hero-action{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  background:rgb(255 255 255 / .16);border:1px solid rgb(255 255 255 / .28);color:#fff!important;
  font-family:var(--font-display);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}
.mara-hero-action:hover{background:rgb(255 255 255 / .26)}
.mara-hero-main{max-width:58ch}
/* Hero pills (industries / tags) */
.mara-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.mara-hero-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:rgb(255 255 255 / .14);border:1px solid rgb(255 255 255 / .26);color:#fff;
  font-family:var(--font-display);font-size:12.5px;font-weight:500;white-space:nowrap}
.mara-hero-chip i{opacity:.8;font-size:11px}
/* Hero right-hand status card */
.mara-hero-card{flex-shrink:0;width:290px;align-self:stretch;background:rgb(255 255 255 / .12);
  border:1px solid rgb(255 255 255 / .22);border-radius:16px;padding:18px 18px 16px;color:#fff;
  display:flex;flex-direction:column;gap:14px}
.mara-hero-card-head{display:flex;align-items:center;gap:12px}
.mara-hero-card-badge{width:38px;height:38px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:11px;background:#fff;color:var(--purple-600);font-family:var(--font-display);font-weight:700;font-size:17px}
.mara-hero-card-title{font-family:var(--font-display);font-weight:600;font-size:14.5px;line-height:1.2}
.mara-hero-card-sub{font-family:var(--font-body);font-size:12.5px;color:rgb(255 255 255 / .72)}
.mara-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mara-hero-stat{background:rgb(255 255 255 / .12);border-radius:11px;padding:11px 6px;text-align:center}
.mara-hero-stat .v{display:block;font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1}
.mara-hero-stat .l{display:block;margin-top:5px;font-family:var(--font-body);font-size:10.5px;letter-spacing:.03em;color:rgb(255 255 255 / .72)}
.mara-hero-card-link{display:flex;align-items:center;justify-content:space-between;margin-top:auto;
  font-family:var(--font-display);font-weight:600;font-size:13px;color:#fff!important;text-decoration:none}
.mara-hero-card-link:hover{color:rgb(255 255 255 / .82)!important}

/* ---- Mono eyebrow ------------------------------------------------------- */
.mara-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.text-brand.uppercase,p.uppercase.text-brand{font-family:var(--font-mono);letter-spacing:.18em}

/* ---- AI-generated surfaces --------------------------------------------- */
.mara-ai-panel{background:var(--gradient-tint);border:1px solid var(--purple-100);border-radius:12px;padding:20px}

/* ---- Progress ----------------------------------------------------------- */
.bg-brand.rounded-full,.rounded-full>.bg-brand{background:var(--gradient-purple)}

/* ---- Gate stepper (partials/gate_nav.php) ------------------------------- */
.mara-step,.mara-step-current{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;
  font-family:var(--font-display);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.mara-step{color:var(--ink-500)}
.mara-step:hover{background:var(--ink-100);color:var(--ink-900)}
.mara-step-current{background:var(--gradient-purple);color:#fff;font-weight:600;box-shadow:var(--shadow-purple)}
.mara-step-locked{color:var(--ink-300);cursor:not-allowed}
.mara-step-locked:hover{background:none;color:var(--ink-300)}

/* ---- Peer chips (gate2/register.php, gate1/value_chain.php) --------------
   Structure matches the source exactly: a hairline-topped strip, a muted
   "Reported by" label, then one pill per peer. The pill holds a 16px ROUND
   logo served from /assets/peer-logos (the DB's peer_company.logo_path), or a
   monogram circle when no logo file is stored. Clicking any chip opens the
   peer benchmark side panel (partials/peer_panel.php). */
.mara-peer-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  border-top:1px solid var(--ink-200);padding:10px 16px}
.mara-peer-label{display:inline-flex;align-items:center;gap:4px;margin-right:4px;
  font-size:12px;font-weight:500;color:var(--ink-400)}
.mara-peer{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;background:#fff;
  border:1px solid var(--ink-200);border-radius:999px;font-size:12px;font-weight:500;
  color:var(--ink-700);cursor:pointer}
.mara-peer:hover{border-color:var(--purple-500);color:var(--purple-500)}
.mara-peer img,.mara-peer .mono{width:16px;height:16px;flex-shrink:0;border-radius:50%;
  object-fit:contain;background:#fff}
.mara-peer .mono{display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink-100);color:var(--ink-500);font-size:9px;font-weight:700}
.mara-peer-more{padding:5px 10px;border:0;border-radius:999px;background:var(--ink-100);
  font-size:12px;font-weight:600;color:var(--ink-700);cursor:pointer}
.mara-peer-more:hover{background:var(--purple-500);color:#fff}
.mara-peer-empty{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:0;
  border-radius:999px;background:var(--ink-100);font-size:12px;font-weight:500;
  color:var(--ink-500);cursor:pointer}
.mara-peer-empty:hover{background:var(--purple-500);color:#fff}