:root{
  /* ═══════════════════════════════════════════════════════════════
     ElevateVia Design System — SOURCE OF TRUTH
     Two colours come from the logo: Midnight Blue #002663 and white.
     Everything blue below is ONE hue — #002663's own 217° — at eleven
     lightnesses. Nothing on the platform may introduce a second blue:
     pick a step from this ramp instead.
     ═══════════════════════════════════════════════════════════════ */
  --navy-50:#F4F7FC;   --navy-100:#E7EEF8;  --navy-200:#C9D9EF;
  --navy-300:#9CB8DF;  --navy-400:#5D89C8;  --navy-500:#1C59BA;
  --navy-600:#11479C;  --navy-700:#07347E;  --navy-800:#002663;  /* ◀ THE LOGO */
  --navy-900:#001B47;  --navy-950:#00102B;
  /* Which of the two darks to reach for:
       navy-800  INK — headings, the wordmark, figures, anything set in
                 dark type. It is the logo's own colour, so the words on a
                 page and the mark at the top of it are the same navy.
       navy-900  SURFACE — the sidebar, the public header, the banner and
                 closing bands. One ink for type, one for chrome.
     They are close enough to look like a mistake when they meet, which is
     what happened: the hero headline was navy-900 sitting directly under a
     navy-800 wordmark. */

  /* Roles. Components reference THESE, not the ramp directly, so a
     change of mind about which step plays a role is one line here. */
  --color-brand-primary:var(--navy-800);   /* brand, primary actions */
  --color-brand-bright:var(--navy-500);    /* interactive blue: links, focus, active */
  --color-brand-tint:var(--navy-100);      /* subtle brand fills */
  --color-secondary:var(--navy-600);       /* secondary accents, avatars, tier badges */
  --color-secondary-tint:var(--navy-100);
  --color-secondary-text:var(--navy-800);
  --color-ink:#0C1424;                     /* body text — near-black carrying the navy hue */
  --color-text-2:#5A6478;                  /* secondary text */
  --color-border:#D9E0EA;                  /* borders, dividers */
  --color-bg:#F5F7FB;                      /* page background */
  --color-warning:#9A4708;                 /* pending, at-risk */
  --color-error:#C62828;                   /* declined, critical */
  --color-nav-muted:#97A2B5;               /* muted text on navy surfaces */

  /* ── SEMANTIC STATUS — deliberately NOT brand colours ──────────
     Under the old emerald brand these WERE the brand tokens, so
     "done" and "ElevateVia" were one green. They stand alone now: a
     green tick has to keep meaning done. Each is AA on its tint. */
  --color-success:#0B7A55; --color-success-bright:#12A06F; --color-success-tint:#DCF5E8;
  --color-warning-tint:#FBE9CC; --color-error-tint:#FAE0E0;

  /* ── Radius scale. Four steps, no ad-hoc values. ─────────────── */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  --radius:var(--r-lg);

  /* ── Elevation. Restrained on purpose: this is a system that
     separates surfaces with BORDERS and reserves shadow for things
     that genuinely float. Stacked glow is what makes an interface
     read as decorated rather than designed. ───────────────────── */
  --shadow-sm:0 1px 2px rgba(0,38,99,.06);
  --shadow-md:0 2px 8px rgba(0,38,99,.08);
  --shadow-lg:0 12px 32px rgba(0,38,99,.14);
  --focus:0 0 0 3px rgba(28,89,186,.24);   /* ONE focus ring, everywhere */

  --sidebar-w:250px;
  /* Landing page column. Every container on that page reads these, so the
     nav, hero, panels, stats band, CTA and footer stay on one column - a
     panel wider than the hero above it is worse than a narrow panel.
     The cap stops lines growing without limit on ultrawide displays. */
  --page-max:1760px;
  --page-gutter:clamp(16px,3vw,44px);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ── Compatibility aliases. Old names, current values — so no rule
     or template has to change to get the new system. ──────────── */
  --navy-td:var(--navy-800);
  --indigo:var(--color-secondary); --indigo-400:var(--color-brand-bright);
  --gold-600:var(--navy-600); --gold-500:var(--color-secondary); --gold-400:var(--navy-300); --gold-100:var(--navy-100);
  --ink:var(--color-ink); --slate-700:#2A3242; --slate-500:var(--color-text-2); --slate-400:#6B7689; --slate-300:var(--color-border);
  --slate-200:#E3E9F1; --slate-100:#EEF2F7; --slate-50:var(--color-bg); --white:#fff;
  --green-600:var(--color-success); --green-500:var(--color-success-bright); --green-100:var(--color-success-tint);
  --amber-500:var(--color-warning); --amber-100:var(--color-warning-tint);
  --red-500:var(--color-error); --red-100:var(--color-error-tint);
  --blue-500:var(--color-secondary); --blue-100:var(--navy-100);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--slate-50);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
/* ...but a link written inline in body copy has to look like one. The rule
   above is right for nav items, cards and buttons — they carry their own
   styling — and wrong for a sentence with a link in it, which was rendering
   as plain text with no hint it could be clicked.
   Scoped to UNCLASSED links inside prose, so anything with a class of its
   own (.btn, .ev-nav-links a, .mk-help-link) keeps exactly what it had.
   .link is the escape hatch for a prose link that sits outside these
   containers. */
.link,
p a:not([class]),
li a:not([class]),
.small a:not([class]),
.tiny a:not([class]),
.banner a:not([class]),
.hint a:not([class]){color:var(--navy-600);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.link:hover,
p a:not([class]):hover,
li a:not([class]):hover,
.small a:not([class]):hover,
.tiny a:not([class]):hover,
.banner a:not([class]):hover,
.hint a:not([class]):hover{color:var(--navy-800);text-decoration-thickness:2px}
h1,h2,h3,h4{margin:0;color:var(--navy-800);letter-spacing:-.02em;line-height:1.15}
img{max-width:100%}
.muted{color:var(--slate-500)} .small{font-size:13px} .tiny{font-size:11.5px}
.mono{font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-600)}
input,select,textarea,button{font-family:inherit;font-size:14px}

/* buttons */
/* Three levels and no more. A filled navy button is THE action on a
   screen; an outlined one is the alternative; a ghost is navigation.
   Every one is a flat fill - a gradient on a control says "decorated"
   where this product needs to say "considered". */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:10px 18px;border:1px solid transparent;border-radius:var(--r-pill);font-weight:600;font-size:14px;cursor:pointer;transition:background .16s,border-color .16s,color .16s,box-shadow .16s;white-space:nowrap;line-height:1}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-primary{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
/* btn-gold is legacy markup from the emerald palette. It points at the
   primary treatment rather than inventing a fourth button, so old
   templates inherit the system instead of drifting outside it. */
.btn-gold{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn-gold:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn-secondary{background:#fff;color:var(--navy-800);border-color:var(--navy-300)}
.btn-secondary:hover{background:var(--navy-50);border-color:var(--navy-500)}
.btn-ghost{background:#fff;color:var(--navy-800);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--navy-50);border-color:var(--navy-300)}
.btn-sm{padding:7px 13px;font-size:13px}.btn-lg{padding:14px 26px;font-size:15px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
/* Brand-tinted (gold/blue are legacy names for the same navy chip),
   semantic, or neutral. Nothing else. */
.badge.gold,.badge.blue{background:var(--navy-100);color:var(--navy-700)}
.badge.green{background:var(--color-success-tint);color:var(--color-success)}
.badge.amber{background:var(--color-warning-tint);color:var(--color-warning)}
.badge.red{background:var(--color-error-tint);color:var(--color-error)}
.badge.slate{background:var(--slate-100);color:var(--slate-500)}
.badge.navy{background:var(--navy-800);color:#fff}

/* cards / layout */
.card{background:#fff;border-radius:var(--radius);border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}
.pad{padding:20px} .pad-lg{padding:26px}
.card-hover{transition:transform .16s,box-shadow .16s,border-color .16s}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--navy-300)}
.grid{display:grid;gap:18px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.flex{display:flex}.items-center{align-items:center}.items-start{align-items:flex-start}.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}.mb24{margin-bottom:24px}
.w-full{width:100%}.text-right{text-align:right}.text-center{text-align:center}

/* app shell */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:none;background:var(--navy-900);color:#cdd6ee;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:40}
.brand{padding:20px 20px;display:flex;align-items:center;gap:11px}
/* The ElevateVia mark. One rule: every .logo on the platform — sidebar,
   landing nav and footer, and the login/signup/verify screens — reads it.
   Taken from the black-background artwork, whose mark is blue with WHITE
   arrows, and cut out with a transparent surround. No ground, no rounded
   card, no shadow: it sits directly on whatever is behind it, so the near
   -black sidebar and the white pages both show through the notch instead
   of a box sitting on top of them. contain, so the whole mark is visible
   whatever size the slot is. */
.logo{width:34px;height:34px;flex:none;
  background:url("../img/logo-mark.png") center/contain no-repeat}
/* Dark grounds — the sidebar rail and the public header. The navy mark
   reads at 1.17:1 against navy: the tile disappears and only the arrows
   survive, so the mark stops being the mark.
   Inverting it (white tile, navy arrows) fixed the contrast but turned the
   mark into a white chip stuck on the rail, which is the thing the cut-out
   was for. This version keeps the mark's own orientation — white arrows,
   dark tile — and makes the tile legible the way a mark on dark usually
   is: a thin wash inside the silhouette and a hairline around it, notch
   included. The ground still shows through; the edge is just drawn now. */
.sidebar .logo,
.ev-nav-brand .logo{background-image:url("../img/logo-mark-dark.svg")}
.brand b{color:#fff;font-weight:800;font-size:17px}.brand b i{font-style:normal;color:var(--navy-300)}
.snav{flex:1;overflow-y:auto;padding:8px 12px}
.snav .sec{padding:14px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#909FC6}
.snav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;color:#b9c3e0;font-size:14px;font-weight:500;margin-bottom:2px}
.snav a:hover{background:rgba(255,255,255,.06);color:#fff}
.snav a.active{background:var(--navy-600);color:#fff;font-weight:600}
.snav a .nb{margin-left:auto;background:var(--navy-400);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px}
.sfoot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#9aa6c9}
/* Mobile nav toggle — hidden on desktop, where the sidebar is always
   visible. Shown only below the breakpoint (rule in the media query). */
.menu-toggle{display:none;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--navy-800);padding:4px 8px;margin-right:4px}
.main{flex:1;margin-left:var(--sidebar-w);min-width:0}
.topbar{height:62px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--slate-200);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:30}
.topbar .title{font-weight:700;font-size:16px}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:13px;flex:none}
.content{padding:26px 30px 60px;max-width:1180px;margin:0 auto}

.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:25px;margin-bottom:5px}.page-head .sub{color:var(--slate-500);font-size:14px;max-width:640px}

/* stat tiles */
.stat .label{font-size:12.5px;color:var(--slate-500);font-weight:600}
.stat .value{font-size:27px;font-weight:800;color:var(--navy-800);margin-top:6px}
.stat .delta{font-size:12px;font-weight:600;margin-top:5px}.delta.up{color:var(--green-600)}

/* trust ring */
.ring{position:relative;flex:none}
.ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .n{font-size:32px;font-weight:800;color:var(--navy-800);line-height:1}.ring .o{font-size:11px;color:var(--slate-400);font-weight:600}

/* progress */
.prog{height:8px;background:var(--slate-200);border-radius:999px;overflow:hidden}
.prog>span{display:block;height:100%;border-radius:var(--r-pill);background:var(--navy-600)}
.prog.green>span{background:var(--color-success)}
.prog.gold>span{background:var(--navy-500)}
.prog.red>span{background:var(--color-error)}
.prog.indeterminate>span{width:35%!important;animation:prog-indeterminate 1.1s ease-in-out infinite}
@keyframes prog-indeterminate{0%{margin-left:-35%}100%{margin-left:100%}}

/* fields */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--slate-700);margin-bottom:6px}
.input,.select,.textarea{width:100%;padding:10px 13px;border:1px solid var(--slate-300);border-radius:10px;background:#fff;color:var(--ink);outline:none;transition:border .15s,box-shadow .15s}
.input:focus,.select:focus,.textarea:focus{border-color:var(--navy-500);box-shadow:var(--focus)}
.chat-input input:focus{border-color:var(--navy-500);box-shadow:var(--focus)}
a:focus-visible{outline:2px solid var(--navy-500);outline-offset:2px;border-radius:2px}
select.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%235A6478' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px}
select.select::-ms-expand{display:none}
.textarea{resize:vertical;min-height:88px}
/* The password rules, under the field. Small and quiet — they are a
   reference while typing, not a warning. */
.pw-rules{margin:8px 0 0;padding-left:17px;list-style:disc}
.pw-rules li{font-size:12px;color:var(--color-text-2);line-height:1.5;margin-bottom:2px}

.hint{font-size:12px;color:var(--slate-400);margin-top:5px}

/* rows / kv */
.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--slate-200);font-size:13px}
.kv:last-child{border-bottom:none}.kv .k{color:var(--slate-500)}.kv .v{font-weight:600;color:var(--navy-800)}
.vrow{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--slate-200);border-radius:var(--radius);background:#fff;margin-bottom:10px}
.vico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:16px}

/* tables */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--slate-200);background:#fff}
table.data{width:100%;border-collapse:collapse;min-width:520px}
table.data th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);font-weight:700;padding:12px 16px;background:var(--slate-50);border-bottom:1px solid var(--slate-200)}
table.data td{padding:12px 16px;border-bottom:1px solid var(--slate-100);font-size:13.5px}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--slate-50)}

/* feed cards */
.match-pill{display:inline-flex;align-items:center;gap:5px;background:var(--green-100);color:var(--green-600);font-weight:700;font-size:12px;padding:4px 10px;border-radius:999px}
/* Thesis fit is a DEGREE of overlap, so it is encoded as one colour at
   three intensities rather than a green/amber verdict - the platform does
   not judge a match. The pale step cannot carry white text, so it takes
   navy; keeping the pairing in CSS means neither can be set without the
   other. */
.fit-ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;white-space:nowrap}
.fit-ring.fit-high{background:var(--navy-800);color:#fff}
.fit-ring.fit-mid{background:var(--navy-500);color:#fff}
.fit-ring.fit-low{background:var(--navy-100);color:var(--navy-800);box-shadow:inset 0 0 0 1px var(--navy-200)}
/* The caption is what stops the disc reading as a rating out of 100 —
   see the fitring macro. The wrapper carries flex:none in its place. */
.fit-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.fit-ring-cap{font-size:10.5px;font-weight:600;line-height:1.1;color:var(--slate-500);white-space:nowrap;text-align:center}

/* chat */
.chat{display:flex;flex-direction:column;height:420px}
.chat-scroll{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--slate-50)}
.msg{max-width:74%}.msg .bub{padding:10px 14px;border-radius:15px;font-size:14px;box-shadow:var(--shadow-sm)}
/* The chat ground is tinted, not white, so muted micro-text needs the
   darker of the two greys to clear AA on it. */
.msg .meta{font-size:11px;color:var(--color-text-2);margin-top:4px}
.msg.them .bub{background:#fff;border:1px solid var(--slate-200);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end}.msg.me .bub{background:var(--navy-800);color:#fff;border-bottom-right-radius:4px}.msg.me .meta{text-align:right}
/* "Chat started" marker at the top of the thread. A rule either side turns
   the line into a visible starting point for the conversation instead of a
   stray caption; the rules sit on pseudo-elements so the text stays the only
   thing a screen reader announces. */
.chat-start{display:flex;align-items:center;gap:10px;white-space:nowrap}
.chat-start::before,.chat-start::after{content:"";flex:1;height:1px;background:var(--slate-200)}
.chat-input{display:flex;gap:10px;padding:12px;border-top:1px solid var(--slate-200);background:#fff}
.chat-input input{flex:1;border:1px solid var(--slate-200);border-radius:999px;padding:10px 15px;outline:none}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--slate-200);margin-bottom:20px;overflow-x:auto}
.tabs a{padding:10px 15px;font-size:14px;font-weight:600;color:var(--slate-500);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.active{color:var(--navy-800);border-bottom-color:var(--navy-800)}

/* banners */
.banner{border-radius:var(--radius);padding:15px 18px;display:flex;gap:13px;align-items:flex-start}
.banner.gold,.banner.blue{background:var(--navy-50);border:1px solid var(--navy-200)}
.banner.green{background:var(--color-success-tint);border:1px solid #A9E3C9}
.banner.red{background:#FEF3F2;border:1px solid #FECDCA;color:#7A271A}
.banner.red a{color:#7A271A;font-weight:600;text-decoration:underline}
.input.invalid{border-color:#D92D20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.invalid-box{outline:2px solid #D92D20;outline-offset:6px;border-radius:6px}

/* checklist / timeline */
.chk{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--slate-100)}
.chk:last-child{border-bottom:none}
.chk .box{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;font-size:13px;color:#fff}
.box.done{background:var(--green-500)}.box.progress{background:var(--amber-500)}.box.pending{background:#fff;border:2px solid var(--slate-300)}
.timeline{position:relative;padding-left:32px}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:var(--slate-200)}
.tl{position:relative;padding-bottom:22px}.tl:last-child{padding-bottom:0}
.tl .dot{position:absolute;left:-32px;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--slate-300);font-size:12px;color:#fff}
.tl .dot.done{background:var(--green-500);border-color:var(--green-500)}
.tl .dot.active{background:var(--navy-500);border-color:var(--navy-500);color:#fff;box-shadow:var(--focus)}

/* flash */
.flash-wrap{position:fixed;top:14px;right:14px;z-index:200;display:flex;flex-direction:column;gap:10px}
.flash{padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-lg);font-size:14px;max-width:380px;color:#fff;animation:slidein .2s ease}
.flash.ok{background:var(--navy-800)}.flash.warn{background:var(--color-warning)}.flash.info{background:var(--navy-900)}
.flash.warn{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.flash-x{flex:none;background:none;border:0;color:inherit;font:inherit;font-size:18px;line-height:1;padding:0 2px;cursor:pointer;opacity:.85}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}}

/* ── public header ───────────────────────────────────────────────
   Two rows on one navy bar. Not sticky: a two-row header that follows you
   down the page eats a third of a phone screen, and nothing in it is
   needed mid-scroll. */
/* Two tiers, told apart by TONE rather than by a hairline. The brand row
   is the deepest navy and anchors the page; the link row sits one step up
   with a lit top edge, so it reads as a shelf on the bar instead of the
   same block cut in half.

   Solid navy-900, flat, and NOT glass. It was translucent over a blur,
   which cannot hold an exact colour by definition: at .82 over the white
   hero the bar composited to about #1D3967 instead of #001B47, and the
   saturate() lifted it further. Matching the app sidebar exactly is worth
   more here than the pane effect, so the translucency is gone and the
   swatch is now the token itself. */
.ev-nav{position:sticky;top:0;z-index:60;color:#fff;
  background:var(--navy-900)}
.ev-nav-top,.ev-nav-links{max-width:var(--page-max);margin:0 auto;
  padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.ev-nav-top{display:flex;align-items:center;gap:20px;padding-top:16px;padding-bottom:14px}
/* The brand lockup sits directly on the bar — no plate under it.

   It used to carry one: a light glass pill, because the mark is navy with
   white arrows and the bar is navy too, so the mark needed a bright field
   to read against (navy-800 on navy-900 is 1.17:1). The plate solved that
   and brought its own problem — a white lozenge is the loudest thing in
   the header, and it dragged the wordmark into navy ink with it, so the
   one element that should sit quietly in the chrome was the one element
   lifted out of it.

   The mark carries its own edge now (see .logo above), which is what the
   plate was really for, so the lockup can sit on the bar like everything
   else in the row. The wordmark goes white, which is also what every other
   piece of type up here already is.

   'Via' takes navy-300. On the plate it had to be navy-600, a dark enough
   blue to hold against a light field; on the bar that same blue measures
   1.93:1 and the syllable disappears. navy-300 is the mirror of that
   choice — 8.3:1 on navy-900, and still a visible step down from the
   white it follows rather than a second white. */
.ev-nav-brand{display:flex;align-items:center;gap:10px;
  text-decoration:none;margin-right:auto}
.ev-nav-brand b{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.01em}
.ev-nav-brand b i{font-style:normal;color:var(--navy-300)}
.ev-nav-acct{display:flex;align-items:center;gap:16px;flex:none}
.ev-nav-link{font-size:14px;font-weight:600;color:#DCE7F6;white-space:nowrap}
.ev-nav-link:hover{color:#fff}
.ev-nav-cta{font-size:14px;font-weight:600;color:var(--navy-800);background:#fff;
  padding:9px 18px;border-radius:var(--r-pill);white-space:nowrap}
.ev-nav-cta:hover{background:var(--navy-100)}

/* The second tier, separated by a line rather than a tint. The tint was
   5.5% white, which put this row above navy-900 even once the bar itself
   was exact — two rows, two colours, neither of them the sidebar's. A
   hairline divides them and leaves both rows on the token. */
.ev-nav-shelf{background:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
.ev-nav-links{display:flex;gap:30px;padding-bottom:13px;padding-top:12px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ev-nav-links::-webkit-scrollbar{display:none}
.ev-nav-links a{font-size:14px;font-weight:600;color:#C9D9EF;white-space:nowrap;
  padding-bottom:3px;border-bottom:2px solid transparent}
.ev-nav-links a:hover{color:#fff;border-bottom-color:var(--navy-400)}

/* Services page: icon beside the block it labels. */
.sv-row{display:flex;gap:18px;align-items:flex-start}
.sv-ico{width:44px;height:44px;flex:none;border-radius:var(--r-md);display:grid;
  place-items:center;background:var(--navy-100);color:var(--navy-700)}
.sv-ico svg{width:23px;height:23px;display:block}

@media(max-width:900px){
  /* Static on a phone. Two rows is ~100px, and pinning that to the top of
     an 844px screen spends 12% of it on a bar nothing needs mid-scroll. */
  .ev-nav{position:static}
  .ev-nav-top{padding-top:12px;padding-bottom:11px;gap:12px}
  .ev-nav-brand{gap:8px}
  .ev-nav-brand b{font-size:17px}
  .ev-nav-acct{gap:12px}
  .ev-nav-cta{padding:8px 14px;font-size:13.5px}
  .ev-nav-link{font-size:13.5px}
  .ev-nav-links{gap:22px;font-size:13.5px}
  .sv-row{flex-direction:column;gap:12px}
}

/* landing */
.mk-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--slate-200)}
.mk-nav .in{max-width:var(--page-max);margin:0 auto;padding:14px var(--page-gutter);display:flex;align-items:center;gap:20px}
.mk-nav b{font-weight:800;font-size:17px}.mk-nav b i{font-style:normal;color:var(--color-secondary)}
/* A LIGHT hero: white ground, navy words, photograph to the right. The
   supplied banner was drawn from this palette already — its headline is
   navy-900, its second line navy-400 and its pill navy-100 — so the live
   text and the artwork meet without a colour seam.

   The words are markup, not part of the picture. A banner with its copy
   baked in cannot reflow on a phone, cannot be read aloud, and cannot be
   seen by the L5 scanner, which reads templates. */
.hero{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 58%,#F4F7FC 100%);
  color:var(--ink);border-bottom:1px solid var(--slate-200)}
.hero .in{max-width:var(--page-max);margin:0 auto;padding:64px var(--page-gutter) 72px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{color:var(--navy-800);font-size:46px;line-height:1.06;max-width:760px}
/* Flat, not gradient-filled: clipped-gradient text is the clearest
   tell of a decorated interface, and it reads worse at small sizes.

   navy-600, which is what the platform uses for accent text everywhere
   else — .eyebrow, the sidebar's active item, the 'Via' in the header
   wordmark. It was navy-400, the only text anywhere on the platform in
   that tint; navy-400 otherwise appears on a badge, a hover border and an
   arrow. The first line needs no change: h1 is navy-900 site-wide.

   It also settles a contrast note from when this hero was built. navy-400
   on white is 3.57:1, which clears the 3:1 that applies at this size but
   nothing beyond it; navy-600 is 8.68:1 and passes at any size. */
.hero h1 .g{color:var(--navy-600)}
.hero p{font-size:18px;color:var(--slate-700);max-width:600px;margin-top:20px}
.hero-art{min-width:0}
.hero-art img{display:block;width:100%;height:auto;border-radius:var(--r-xl)}
.corridor{display:inline-flex;align-items:center;gap:9px;background:var(--navy-100);
  border:1px solid #DCE6F4;padding:7px 15px;border-radius:999px;
  font-size:13px;font-weight:700;color:var(--navy-800);margin-bottom:22px}
.section{max-width:var(--page-max);margin:0 auto;padding:64px var(--page-gutter)}
/* Four pillars, four columns. This was repeat(3,...) from when there
   were three, so the fourth wrapped onto a row of its own and left a
   hole - invisible on the old open page, obvious inside a panel. */
/* Four pillars, so the grid only ever divides into four: 1x4 on desktop
   and 2x2 below 1100px. Never three across — that leaves a lone fourth
   card on a row of its own, which is what this replaced. Below 900px the
   carousel block takes over and shows one at a time. */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1100px){.feat{grid-template-columns:repeat(2,1fr)}}
.feat .c{padding:24px;border-radius:18px;border:1px solid var(--slate-200);background:#fff}
/* Feature tile icon. These were empty divs showing a bare tinted square,
   which is what made the page read as unfinished. One stroke weight, one
   grid, currentColor so the tile owns the colour. */
.feat .c .i{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  margin-bottom:14px;background:var(--navy-100);color:var(--navy-700)}
.feat .c .i svg{width:23px;height:23px;display:block}

@media(max-width:900px){
  :root{--sidebar-w:0px}
  /* --sidebar-w drives .main's margin-left, which must be 0 on mobile
     since the sidebar becomes an overlay instead of a layout column —
     but .sidebar's own width="var(--sidebar-w)" rule (desktop) shares
     that same variable, so it was collapsing to 0px here too. With no
     overflow:hidden on .sidebar, its children (logo, nav links, footer)
     don't get clipped by a 0-width box — they render at natural size
     directly on top of .content, which is what showed as "overlapping"
     after login on mobile. Give the drawer its own fixed width instead
     of reusing the layout variable. */
  .sidebar{width:250px;max-width:80vw;overflow:hidden;transform:translateX(-100%)}
  .main{margin-left:0}
  .g2,.g3,.g4,.feat{grid-template-columns:1fr}
  .hero h1{font-size:34px}

  /* Many pages set grid-template-columns inline (e.g. "1.5fr 1fr"),
     which overrides the .g2/.g3 rule above and stays two-column on a
     phone — that is what made cards overlap. Force every grid to a
     single column at this width regardless of inline styles. */
  .grid{grid-template-columns:1fr !important;gap:14px}
  /* Header rows and metric strips that lay out horizontally need to
     stack too, or their children collide. */
  .page-head{flex-direction:column;align-items:stretch}
  .page-head .flex{flex-wrap:wrap}
  .ev-metric-row{flex-direction:column;gap:12px}
  .ev-deal-actions{flex-wrap:wrap}
  .content{padding:16px !important;overflow-x:hidden}
  .topbar{padding:0 16px}
  /* Long values (ticket bands, USD figures) shouldn't force sideways
     scrolling on narrow screens. */
  .card{min-width:0}
  .vrow{flex-wrap:wrap}

  /* Show the hamburger and turn the sidebar into a slide-in drawer.
     Default (closed) keeps it off-canvas; body.nav-open slides it in. */
  .menu-toggle{display:inline-block}
  .sidebar{transition:transform .22s ease;box-shadow:2px 0 18px rgba(0,0,0,.18)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .main::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}
}

/* ── legal workflow: timeline states not previously needed ───────── */
.tl .dot.blocked{background:var(--red-500);border-color:var(--red-500);box-shadow:0 0 0 4px rgba(214,69,80,.18)}
.tl .dot.waived{background:var(--slate-300);border-color:var(--slate-300);color:var(--slate-700)}
.tl .dot.pending{background:#fff;border-color:var(--slate-300)}

/* ── legal workflow: parallel status board ─────────────────────── */
.wf-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.wf-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
@media(max-width:1100px){.wf-cols{grid-template-columns:1fr}}
.wf-colhead{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:13px;font-weight:700;color:var(--slate-500)}
.wf-colhead .n{color:var(--slate-400);font-weight:600}
.wf-card{border:1px solid var(--slate-200);border-radius:12px;background:#fff;padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.wf-card.done{border-color:#a9e3c9;background:var(--green-100)}
.wf-card.blocked{border-color:#f0b8bd;background:var(--red-100)}
.wf-card .t{font-weight:600;font-size:13.5px;color:var(--navy-800);line-height:1.35}
.wf-card.done .t{color:var(--green-600)}
.wf-num{font-size:11px;color:var(--slate-400);font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.wf-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.wf-empty{border:1px dashed var(--slate-300);border-radius:12px;padding:11px;text-align:center;font-size:12px;color:var(--slate-400)}

/* ── legal workflow: per-step document dropdowns ───────────────── */
.wf-docs{border-top:1px solid var(--slate-100);padding-top:8px}
.wf-docs summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--indigo);list-style:none;display:flex;align-items:center;gap:6px}
.wf-docs summary::-webkit-details-marker{display:none}
.wf-docs summary::before{content:"▸";font-size:10px;color:var(--slate-400)}
.wf-docs[open] summary::before{content:"▾"}
.wf-doccount{background:var(--slate-100);color:var(--slate-500);font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px}
.wf-doc{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:9px;padding:9px 11px;margin-bottom:7px}
.wf-doc-name{font-size:12.5px;font-weight:600;color:var(--navy-800);word-break:break-word}

/* ── Elevate reference deal card (from the color-system "Applied" example) ── */
.ev-card{border:1px solid var(--color-border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md);background:#fff}
.ev-card-nav{background:var(--color-ink);padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.ev-card-nav .brand{font-weight:600;font-size:15px;color:#fff}
.ev-card-nav .context{font-size:12px;color:var(--color-nav-muted)}
.ev-card-body{background:#fff;padding:20px}
.ev-metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px}
.ev-metric{background:var(--color-bg);border-radius:10px;padding:14px}
.ev-metric .label{font-size:12px;color:var(--color-text-2);margin-bottom:4px}
.ev-metric .value{font-weight:600;font-size:22px;color:var(--color-ink)}
.ev-metric .trend{font-size:11px;color:var(--color-brand-primary);margin-top:4px}
.ev-deal-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ev-deal-name{font-weight:600;font-size:16px;color:var(--color-ink)}
.ev-tag{font-size:12px;padding:4px 12px;border-radius:20px;white-space:nowrap;font-weight:500;display:inline-block}
.ev-tag-success{background:var(--color-brand-tint);color:var(--color-brand-primary)}
.ev-tag-tier{background:var(--color-secondary-tint);color:var(--color-secondary-text);margin-bottom:16px}
.ev-deal-actions{display:flex;gap:10px;flex-wrap:wrap}
.ev-btn{border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;border:none;cursor:pointer;text-decoration:none;display:inline-block}
.ev-btn-primary{background:var(--color-brand-primary);color:#fff}
.ev-btn-secondary{background:transparent;color:var(--color-ink);border:1px solid var(--color-border)}

/* ══════════════════════════════════════════════════════════════════
   Landing page — marketing sections (mk-*). Uses the emerald/indigo/ink
   tokens; all responsive collapse is handled in the 900px block below.
   ══════════════════════════════════════════════════════════════════ */

/* trust stats bar */
.mk-stats{background:var(--color-ink);color:#fff}
.mk-stats-in{max-width:var(--page-max);margin:0 auto;padding:22px var(--page-gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mk-stat{text-align:center}
.mk-stat .n{font-size:19px;font-weight:800;color:#fff}
.mk-stat .l{font-size:12.5px;color:var(--color-nav-muted);margin-top:4px}

/* ── landing: trust strip — 4-up grid on desktop, carousel on mobile ── */
.mk-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mk-trust-card{
  background:#fff;border:1px solid var(--slate-200);border-radius:16px;padding:22px;
  box-shadow:0 1px 2px rgba(0,38,99,.05)}
.mk-trust-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:18px;font-weight:700;line-height:1;margin-bottom:14px}
.mk-trust-n{font-weight:700;font-size:15.5px;color:var(--color-ink)}
.mk-trust-l{font-size:13px;color:var(--color-text-2);margin-top:6px;line-height:1.45}

/* section row headers with a side action */
.mk-row-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}

/* teaser card grids */
.mk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mk-card{display:flex;flex-direction:column;border:1px solid var(--slate-200);border-radius:16px;background:#fff;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.mk-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--navy-300)}
.mk-card-media{position:relative;height:132px;background:var(--navy-50);border-bottom:1px solid var(--slate-200);display:grid;place-items:center;overflow:hidden}
.mk-card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.mk-card-title{font-weight:700;font-size:16px;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.mk-tags{display:flex;gap:8px;flex-wrap:wrap}
.mk-kv{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:12px;border-top:1px solid var(--slate-100)}
/* min-width:0 is what makes the ellipsis below actually happen. A grid item
   defaults to min-width:auto, so a long Focus value grew its own 1fr track
   instead of being truncated inside it, ran past the card, and was cut by the
   card's overflow:hidden — a hard chop mid-word with no ellipsis, which reads
   as a broken card rather than a shortened value. */
.mk-kv>div{min-width:0}
.mk-kv-v{font-weight:700;font-size:14px;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-cta-row{margin-top:14px;padding-top:12px;border-top:1px solid var(--slate-100);font-size:13px;font-weight:600;color:var(--color-brand-primary)}

/* band pills (word only for anonymous visitors) */
/* The verification pill sizes to its own text, centred, whatever height the
   name/location column beside it grows to (a two-line location used to
   stretch it into a tall blob with the word stuck at the top). */
.mk-band{flex:none;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.3;padding:5px 11px;border-radius:999px;white-space:nowrap;text-align:center}
.mk-band-high{background:var(--color-brand-tint);color:var(--color-brand-primary)}
.mk-band-medium{background:#fbe7c6;color:#8a5a00}
.mk-band-low{background:var(--slate-100);color:var(--slate-500)}

/* ── landing banners ─────────────────────────────────────────────
   Desktop: the image is the backdrop, the words sit on it. Mobile: the
   image moves above the words and is shown WHOLE. The two cannot be the
   same layout — a wide crop forced into a phone-height box either loses
   most of its subject or leaves text on top of whatever survives. */
/* A direct child of .mk-stack, so it inherits that column's gutter. The
   old wrapper applied --page-gutter a second time inside a container that
   already had it, insetting every band past the panels above and below. */
.bn{position:relative;overflow:hidden;border-radius:var(--r-xl);margin:0 0 22px;
  background:var(--navy-900);color:#fff;isolation:isolate}

/* No image: the brand ground carries it, with one soft light source so it
   is not a flat rectangle. */
.bn:not(.bn-has-img){
  background:radial-gradient(760px 320px at 85% -30%,rgba(28,89,186,.42),transparent),
             var(--navy-900)}

/* Dotted world map behind a banner. Opt in with .bn-world, so only the
   cross-border band carries it and the others stay plain.

   A background-image rather than inline SVG: 2,459 dots is 87KB, which is
   worth one cached request and not worth inlining into the page on every
   load. It sits UNDER .bn-body's z-index, and under the scrim when the
   banner also has a photograph.

   contain, not cover: cover crops a 2:1 map to a tall box and you lose the
   continents that make it read as a map at all. Pinned right so the text on
   the left keeps a clean ground. */
.bn-world::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("../img/world-dots.svg") no-repeat center;
  background-size:100% auto;
  opacity:.55;pointer-events:none}
/* A scrim over the left third, where the words are. Spanning the full width
   is what makes it read as a world rather than as a crop of one, but that
   also puts dots directly behind the headline — this clears the ground for
   the text without hiding the map. */
.bn-world::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,27,71,.94) 0%, rgba(0,27,71,.86) 34%,
    rgba(0,27,71,.30) 62%, rgba(0,27,71,0) 88%)}
/* With a photograph the photo's own scrim already does this job. */
.bn-world.bn-has-img::before,.bn-world.bn-has-img::after{display:none}
/* One step brighter on the map banner, for the same reason the banners
   with a photograph lift theirs: the eyebrow is the palest text on the
   panel, and on a phone the map sits directly behind it — over a dot it
   measured 4.45:1, just under the 4.5 it needs. navy-200 clears it. */
.bn-world .bn-eyebrow{color:var(--navy-200)}

.bn-body{position:relative;z-index:2;padding:46px clamp(22px,4vw,56px);
  max-width:660px}
.bn-eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy-300);margin-bottom:10px}
.bn-title{font-size:clamp(20px,2.3vw,27px);line-height:1.2;color:#fff;margin:0}
.bn-text{margin:12px 0 0;font-size:15px;line-height:1.6;color:#C9D9EF}
/* align-self, because inline-block is not enough here: .bn-has-img .bn-body
   is a column flex container, and a flex item is blockified whatever its
   display says. The link stretched to the full column and took its
   underline with it — a 154px label with a 548px rule under it. */
.bn-cta{display:inline-block;align-self:flex-start;margin-top:18px;font-size:14px;
  font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.bn-cta:hover{border-bottom-color:#fff}

/* Desktop: cover the panel, and lay a scrim over it so the text keeps its
   contrast whatever the photograph turns out to be. Without the scrim the
   legibility of the page depends on which image someone uploads. */
.bn-has-img .bn-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.bn-has-img::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(0,27,71,.92) 0%,
    rgba(0,27,71,.80) 42%,
    rgba(0,27,71,.35) 72%,
    rgba(0,27,71,.15) 100%)}
.bn-has-img .bn-body{min-height:300px;display:flex;flex-direction:column;
  justify-content:center}
/* The eyebrow is the palest thing on the banner, and over a LIGHT image the
   scrim lifts the backdrop enough that navy-300 fell to 4.2:1. One step
   brighter, and only where there is an image — on the plain navy bands the
   original tone is already well clear. */
.bn-has-img .bn-eyebrow{color:var(--navy-200)}

@media(max-width:820px) and (min-width:561px){
  /* Tablet keeps the stacked layout: the wide file at its own proportions
     with the words below it. The card here is close to square, and the
     phone's tall overlay would have to crop the middle out of any picture
     to fill it. */
  .bn-has-img .bn-img{position:static;width:100%;height:auto;display:block}
  .bn-has-img picture{display:contents}
  .bn-has-img .bn-body{position:relative;z-index:2;min-height:0;
    margin-top:-44px;padding-top:58px;
    background:linear-gradient(to bottom,
      rgba(0,27,71,0) 0, rgba(0,27,71,.70) 24px, var(--navy-900) 44px)}
  .bn-has-img::after{display:none}
}

@media(max-width:820px){
  /* On a phone the text runs the full width, so a map pinned right sits
     directly behind it. Centred, larger and fainter: it reads as texture
     rather than as something competing with the sentence on top of it. */
  .bn-world::before{background-position:center;background-size:170% auto;opacity:.30}
  .bn-body{padding:26px 20px 28px;max-width:none}
  .bn-text{font-size:14.5px}
  .bn{margin-bottom:16px}
}

@media(max-width:560px){
  /* ONE surface, not two stacked ones.

     What was here put the image in a block of its own ABOVE a solid text
     block and softened the join with a fade. The join was the problem, not
     its hardness — two panels glued end to end read as two panels however
     gently they meet.

     So: the picture covers the whole card and the words sit on a frosted,
     darkened panel over its lower part. There is no seam to disguise
     because there is no second surface, and the image keeps running behind
     the text rather than stopping against it.

     min-height is what reserves the clear picture above the words: the
     panel is only as tall as its own text, so without a floor on the card
     a short banner would be nearly all text. */
  .bn-has-img{display:flex;flex-direction:column;justify-content:flex-end;
    min-height:640px}
  .bn-has-img picture{display:contents}
  .bn-has-img .bn-img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;z-index:0}
  .bn-has-img .bn-body{position:relative;z-index:2;min-height:0;
    padding:24px 20px 26px;
    background:linear-gradient(to bottom,
      rgba(0,27,71,0) 0, rgba(0,27,71,.74) 52px, rgba(0,27,71,.90) 112px,
      rgba(0,27,71,.95) 100%);
    -webkit-backdrop-filter:blur(16px) saturate(125%);
    backdrop-filter:blur(16px) saturate(125%)}
  /* Where the blur is unavailable the scrim alone has to carry legibility,
     so it goes near-opaque rather than leaving text on a sharp picture. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .bn-has-img .bn-body{background:linear-gradient(to bottom,
      rgba(0,27,71,.88) 0, var(--navy-900) 96px)}
  }
  /* A chip, not a line of small caps. Over a photograph a bare label has
     nothing to sit on; the chip gives it its own ground and reads as a tag
     on the picture rather than as a stray caption.

     Its ground is opaque navy rather than a translucent white, because the
     chip sits at the TOP of the panel where the scrim has barely started.
     Measured over the light banner art, white-on-translucent-white came out
     at 2.4:1 — the rest of the panel passes comfortably only because the
     scrim is fully up by the time the heading starts. */
  .bn-has-img .bn-eyebrow{display:inline-block;align-self:flex-start;
    margin:0 0 12px;padding:6px 12px;border-radius:999px;
    background:rgba(0,27,71,.86);border:1px solid rgba(255,255,255,.26);
    color:#fff;font-size:10.5px;letter-spacing:.11em}
  /* A button, not an underlined word. At the bottom of a tall card the
     action has to look pressable; an underline reads as a footnote. */
  .bn-has-img .bn-cta{display:inline-flex;align-items:center;
    margin-top:18px;padding:12px 21px;border-radius:999px;border-bottom:0;
    background:#fff;color:var(--navy-800);font-size:14.5px;font-weight:650}
  .bn-has-img .bn-cta:hover{background:var(--navy-50);border-bottom:0}
  .bn-has-img .bn-text{margin-top:10px;line-height:1.55}
  .bn-has-img::after{display:none}
}

/* ── closed-deal log ──────────────────────────────────────────────
   A row, not a card: a card invites a logo and a name, and this section
   exists precisely because neither may appear. Reading across gives the
   corridor, what it was, and when — and nothing that narrows it to a
   company. */
.dl-list{display:flex;flex-direction:column;gap:10px}
.dl-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;background:#fff;border:1px solid var(--slate-200);
  border-radius:var(--r-lg)}
.dl-corridor{display:flex;align-items:center;gap:9px;font-weight:700;
  font-size:14.5px;color:var(--navy-800);flex:1 1 210px;min-width:0}
.dl-place{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-arrow{color:var(--navy-400);font-weight:600;flex:none}
.dl-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:2 1 260px}
.dl-when{font-size:13px;color:var(--color-text-2);white-space:nowrap;
  margin-left:auto;flex:none;font-variant-numeric:tabular-nums}
@media(max-width:900px){
  /* Below the breakpoint the list becomes a carousel, one deal per view.
     Matching the page's other carousels at 900px rather than 640 keeps a
     tablet from meeting a third layout nobody designed.
     Stack the row's parts too: the corridor is the line people read first
     and it must not wrap mid-country. */
  .dl-list.mk-carousel{
    display:flex;flex-direction:row;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dl-list.mk-carousel::-webkit-scrollbar{display:none}
  .dl-list.mk-carousel > .dl-row{
    scroll-snap-align:center;flex:0 0 86%;max-width:86%}
  .dl-row{flex-direction:column;align-items:flex-start;gap:9px}
  /* Turn the row's horizontal bases off, or they become heights in column
     direction and stretch each part down the card. */
  .dl-row > *{flex:0 0 auto;width:100%}
  .dl-when{margin-left:0}
}

/* placeholders kept honest — no invented testimonials/press */
.mk-placeholder-note{max-width:640px;margin:0 auto;text-align:center;padding:22px;border:1px dashed var(--slate-300);border-radius:14px;color:var(--slate-500);font-size:13.5px;background:var(--slate-50)}
.mk-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:820px;margin-left:auto;margin-right:auto}
.mk-logo-placeholder{height:44px;border:1px dashed var(--slate-300);border-radius:10px;display:grid;place-items:center;font-size:11px;color:var(--color-text-2);letter-spacing:.06em;text-transform:uppercase}

/* ── landing: sections as panels ──────────────────────────────────
   The content sections used to sit straight on the page ground as one
   continuous scroll, so nothing said where one idea ended and the next
   began. Each is now a white panel on the tinted page, which is what
   separates them; the hero and the closing CTA stay full-bleed, because
   a full-width dark band is its own separator.
   .mk-stack supplies the gutter so a panel never touches the screen
   edge, and the panel overrides .section's own max-width/margin/padding
   (both are single-class selectors, so this block must stay after it). */
.mk-stack{max-width:var(--page-max);margin:0 auto;padding:34px var(--page-gutter) 0}
.mk-panel{max-width:none;margin:0 0 22px;padding:38px clamp(18px,2.2vw,40px);
  background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-xl)}
.mk-stack > .mk-panel:last-of-type{margin-bottom:34px}
/* Cards sit one layer in from the panel now, so they take the palest
   step of the ramp: white-on-white left them relying on a hairline. */
.mk-panel .feat .c,
.mk-panel .mk-card,
.mk-panel .tstrip-card{background:var(--navy-50)}
.mk-panel .mk-card-media{background:#fff}

/* final CTA band */
.mk-final{background:radial-gradient(900px 400px at 70% -20%,rgba(28,89,186,.30),transparent),var(--navy-900);color:#fff}
.mk-final-in{max-width:var(--page-max);margin:0 auto;padding:60px var(--page-gutter);text-align:center}
.mk-final h2{color:#fff;font-size:30px}
.mk-final p{color:var(--color-nav-muted);font-size:16px}

/* ── need-help band + Help Centre / guide pages ──────────────────
   Two columns of one idea each, on the page ground rather than in a
   panel: it belongs to the footer, and boxing it would make it read as
   another content section competing with the ones above. */
.mk-help{border-top:1px solid var(--slate-200)}
.mk-help-in{max-width:var(--page-max);margin:0 auto;padding:46px var(--page-gutter) 40px}
.mk-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.mk-help-item{display:flex;gap:14px;align-items:flex-start}
.mk-help-ico{width:34px;height:34px;flex:none;border-radius:var(--r-md);
  display:grid;place-items:center;background:var(--navy-100);color:var(--navy-700)}
.mk-help-ico svg{width:19px;height:19px;display:block}
.mk-help-link{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;
  color:var(--navy-600)}
.mk-help-link:hover{color:var(--navy-800);text-decoration:underline}

/* Help Centre: the form carries the page, the aside is support material. */
.hc-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start}
.hc-form{max-width:620px}
.hc-req{color:#B42318}
.hc-side{display:flex;flex-direction:column;gap:16px}
.hc-note{background:var(--navy-50);border:1px solid var(--navy-200);
  border-radius:var(--r-lg);padding:18px}
.hc-list{margin:10px 0 0;padding-left:18px;color:var(--color-text-2)}
.hc-list li{margin-bottom:9px;line-height:1.5}
.hc-list a{color:var(--navy-600);font-weight:600}

/* Guide: numbered steps that stay readable as they wrap. */
.gd-steps{margin:16px 0 0;padding-left:20px}
.gd-steps > li{margin-bottom:14px;line-height:1.6;font-size:14.5px}
.gd-steps b{color:var(--navy-800)}
.gd-sub{margin:8px 0 0;padding-left:18px;color:var(--color-text-2);font-size:14px}
.gd-sub li{margin-bottom:5px}

@media(max-width:900px){
  .mk-help-grid{grid-template-columns:1fr;gap:24px}
  .mk-help-in{padding:34px var(--page-gutter) 30px}
  .hc-grid{grid-template-columns:1fr;gap:24px}
}

/* ── site footer ─────────────────────────────────────────────────
   Link columns over a centred wordmark bar. auto-fit rather than a
   fixed three, so adding a fourth column later needs no new rule and
   the columns reflow on a phone instead of being squeezed. */
.ev-foot{border-top:1px solid var(--slate-200);background:#fff}
.ev-foot-in{max-width:var(--page-max);margin:0 auto;padding:46px var(--page-gutter) 30px}
/* Flex, not a stretched grid: with a 1760px column an auto-fit grid
   spreads three headings across the whole width and they stop reading as
   a group. Kept as a group and centred, wrapping when they run out of
   room, and a fourth column later needs no rule change.

   Centred because the bar underneath already is — wordmark, copyright,
   legal and social all sit on the middle. Packed left, the columns were
   the one part of the footer that did not, which on a wide screen left
   them huddled against the left edge of an otherwise centred block. */
.ev-foot-cols{display:flex;flex-wrap:wrap;justify-content:center;
  gap:28px 76px}
/* Sized by their own content, not to a fixed 168px. The last column's
   longest link is about 128px, so a 168px floor left 40px of empty box
   after "Help Centre" — the flex line centred correctly and the words
   still sat 40px left of centre at every width. The 76px gap is what
   separates the columns; they do not need padding to do it. */
.ev-foot-col{min-width:0}
.ev-foot-col h4{font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy-800);margin:0 0 14px}
.ev-foot-col a{display:block;font-size:14px;color:var(--color-text-2);
  margin-bottom:11px;line-height:1.4}
.ev-foot-col a:hover{color:var(--navy-700);text-decoration:underline}

.ev-foot-base{margin-top:38px;padding-top:26px;border-top:1px solid var(--slate-200);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.ev-foot-mark{display:flex;align-items:center;gap:10px}
.ev-foot-mark b{font-size:19px;font-weight:800;color:var(--navy-800)}
.ev-foot-copy{margin:0;font-size:13px;color:var(--color-text-2)}
.ev-foot-legal{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.ev-foot-legal a{font-size:13.5px;font-weight:600;color:var(--navy-600)}
.ev-foot-legal a:hover{text-decoration:underline}
.ev-foot-social{display:flex;gap:18px;align-items:center;margin-top:2px}
.ev-foot-social a{color:var(--color-text-2);display:grid;place-items:center}
.ev-foot-social a:hover{color:var(--navy-700)}
.ev-foot-social svg{width:19px;height:19px;display:block}
.ev-foot-note{margin:4px 0 0;font-size:11.5px;color:var(--slate-400);max-width:520px}

/* About page: three statements side by side, one each. */
.ab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.ab-item{background:var(--navy-50);border:1px solid var(--navy-200);
  border-radius:var(--r-lg);padding:20px}

@media(max-width:900px){
  .ev-foot-in{padding:34px var(--page-gutter) 26px}
  .ev-foot-cols{gap:24px}
  .ev-foot-base{margin-top:28px}
}

/* Narrow enough that the columns stack one per row, where centring stops
   helping: each block would be centred while its own links stay
   left-aligned, so the left edges no longer line up with each other.
   Packed left again, which gives the stack one clean edge. */
@media(max-width:600px){
  .ev-foot-cols{justify-content:flex-start}
}

/* minimal public footer */
.mk-foot{border-top:1px solid var(--slate-200);background:#fff}
.mk-foot-in{max-width:var(--page-max);margin:0 auto;padding:22px var(--page-gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mk-foot b i{font-style:normal}

/* ── landing: mobile (≤900px) ─────────────────────────────────────
   The existing 900px block collapses .feat and .grid, but the new
   marketing grids use their own classes, so they need explicit rules
   here to avoid the exact overlap issue called out in that block. */
@media(max-width:900px){
  .mk-stats-in{grid-template-columns:repeat(2,1fr);gap:16px}
  .mk-cards{grid-template-columns:1fr;gap:16px}
  .mk-logos{grid-template-columns:repeat(3,1fr)}
  .mk-row-head{flex-direction:column;align-items:stretch;gap:12px}
  /* One column: the picture goes under the words, where it has the full
     width to itself rather than a half-column it cannot fill. */
  .hero .in{padding:44px var(--page-gutter) 0;grid-template-columns:1fr;gap:28px}
  .hero p{font-size:16px}
  /* Full-bleed at the foot of the hero: the photograph runs to both edges
     and sits on the section boundary, so it reads as the end of the hero
     rather than as a picture parked inside it. */
  .hero-art{margin:4px calc(-1 * var(--page-gutter)) 0}
  .hero-art img{border-radius:0}
  .section{padding:44px var(--page-gutter)}
  .mk-nav .in{padding:12px var(--page-gutter);gap:12px}
  /* keep the nav's two buttons from crowding the wordmark on small phones */
  .mk-nav b{font-size:15px}
}

/* very small phones — stats to a single column so labels never clip */
@media(max-width:520px){
  /* The landing nav (wordmark + two buttons) ran 13px past a 320px
     viewport, so the public page scrolled sideways on the smallest
     phones still in use. Tighten the row rather than hide an action. */
  .mk-nav .in{padding:10px var(--page-gutter);gap:10px}
  .mk-nav .btn{padding:7px 12px;font-size:12.5px}
  .mk-nav b{font-size:14px}
  .mk-stats-in{grid-template-columns:1fr}
  .mk-logos{grid-template-columns:repeat(2,1fr)}
  .mk-final h2{font-size:24px}
  .hero h1{font-size:29px}
}

/* ══════════════════════════════════════════════════════════════════
   Landing carousels — a carousel at EVERY width, never a wrapping grid.
   .mk-cards is a 3-up grid, which was fine while the card lists were
   hardcoded to exactly three; with real listings a fourth card wrapped
   onto a second row and the page showed six at once. As a track it shows
   three per view on desktop and pages to the rest, one per view (with a
   peek of the next) on mobile, where JS also auto-advances every 4s.
   .feat (the trust pillars) keeps its grid on desktop — three items,
   fixed, no paging needed.
   ══════════════════════════════════════════════════════════════════ */
.mk-cards.mk-carousel{
  display:flex;
  grid-template-columns:none;            /* override the 3-up grid */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:20px;
  scrollbar-width:none;
  scroll-padding:0;
}
.mk-cards.mk-carousel::-webkit-scrollbar{display:none}
/* Three per view, the gaps shared between them, so a fourth card is
   reached by scrolling rather than by wrapping underneath. */
.mk-cards.mk-carousel > *{
  scroll-snap-align:start;
  flex:0 0 calc((100% - 40px) / 3);
  max-width:calc((100% - 40px) / 3);
}
.mk-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.mk-dot{width:7px;height:7px;border-radius:50%;background:var(--slate-300);border:none;
  padding:0;cursor:pointer;transition:background .2s,width .2s}
.mk-dot.active{background:var(--color-brand-primary);width:18px;border-radius:999px}
/* A single page of cards needs no pager. */
.mk-dots:empty{display:none}
@media(max-width:900px){
  .mk-carousel{
    display:flex;
    grid-template-columns:none;          /* override the grid rules */
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    padding-bottom:6px;                  /* room for the scrollbar/dots */
    scrollbar-width:none;                /* Firefox: hide native bar */
  }
  .mk-carousel::-webkit-scrollbar{display:none}   /* WebKit: hide native bar */
  .mk-carousel > *,
  .mk-cards.mk-carousel > *{
    scroll-snap-align:center;
    flex:0 0 86%;                        /* one card per view, a peek of the next */
    max-width:86%;
  }
  .mk-cards.mk-carousel{gap:14px}
  /* the trust-pillar cards use .feat > .c; cards use .mk-cards > .mk-card —
     both are direct children, so the rule above covers both. */

}

/* Country code picker (searchable combobox) */
.cc-picker{position:relative;flex:none;width:132px}
.cc-picker-btn{display:flex;align-items:center;gap:7px;cursor:pointer;width:100%;text-align:left;font-size:14px}
.cc-picker-btn .cc-flag{font-size:16px;line-height:1}
.cc-picker-btn .cc-code{font-weight:600;color:var(--ink)}
.cc-picker-btn .cc-caret{margin-left:auto;color:var(--slate-400);font-size:11px}
.cc-panel{position:absolute;top:calc(100% + 6px);left:0;width:280px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:40;padding:8px}
.cc-search{margin-bottom:6px}
.cc-list{list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto}
.cc-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;cursor:pointer;font-size:13.5px}
.cc-item:hover,.cc-item:focus{background:var(--slate-100)}
.cc-item .cc-flag{font-size:16px;flex:none}
.cc-item .cc-name{flex:1;color:var(--ink)}
.cc-item .cc-dial{flex:none}
.cc-empty{padding:10px;text-align:center;font-size:13px}
@media (max-width:480px){.cc-panel{width:min(320px,86vw)}}

/* Document dropzone */
.doc-dropzone{display:flex;align-items:center;justify-content:center;gap:8px;min-width:220px;
  padding:14px 16px;border:1.5px dashed var(--slate-300);border-radius:12px;cursor:pointer;
  text-align:center;font-size:13px;font-weight:600;color:var(--slate-500);
  transition:border-color .15s,background .15s,color .15s}
.doc-dropzone:hover{border-color:var(--indigo-400);color:var(--indigo);background:var(--slate-50)}
.doc-dropzone.dragover{border-color:var(--indigo);background:rgba(28,89,186,.08);color:var(--indigo)}
.doc-dropzone.has-file{border-style:solid;border-color:var(--green-500);color:var(--green-600);background:var(--green-100)}
.doc-dropzone.uploading{opacity:.6;pointer-events:none}
.score-btn-ready{background:var(--navy-800);color:#fff}
.score-btn-notready{background:var(--slate-150);color:var(--slate-500);border:1px solid var(--slate-300)}

/* Multi-select checkbox dropdown (static/js/multiselect.js).
   Used for the thesis page's Sectors of interest and Instruments. */
.ms-dropdown{position:relative}
.ms-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
  cursor:pointer;background:#fff;gap:8px}
.ms-toggle .ms-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--slate-500)}
.ms-dropdown.ms-has-value .ms-toggle .ms-label{color:var(--ink)}
/* See the caret note by .combo-caret: one chevron for every dropdown. */
.ms-caret{flex:none;width:8px;height:8px;font-size:0;color:var(--slate-500);
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);margin-top:-4px;margin-right:2px}
.ms-panel{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;background:#fff;
  border:1px solid var(--slate-200);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px}
.ms-dropdown.open .ms-panel{display:block}
/* The sector taxonomy is 49 entries — the list scrolls, the search box does not. */
.ms-list{max-height:260px;overflow-y:auto}
.ms-search{margin-bottom:6px}
.ms-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.ms-opt:hover{background:var(--slate-50)}
.ms-opt input{width:16px;height:16px;cursor:pointer;flex:none}
.ms-nohits{padding:10px;text-align:center;margin:0}
/* Section label inside a long option list (e.g. countries with no
   companies yet). Sticky so it stays legible while scrolling. */
/* Any / Only these / Except these, above the country list. A segmented
   control rather than three loose radios: they are one choice, and at this
   size a row of dots with labels reads as three separate settings. */
.filter-mode{display:flex;gap:2px;margin:0 0 8px;padding:2px;background:var(--slate-100);
  border-radius:var(--r-md)}
.filter-mode-opt{flex:1;display:block;position:relative}
.filter-mode-opt input{position:absolute;opacity:0;width:0;height:0}
.filter-mode-opt span{display:block;text-align:center;font-size:12px;font-weight:600;
  color:var(--color-text-2);padding:6px 4px;border-radius:calc(var(--r-md) - 2px);
  cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.filter-mode-opt input:checked + span{background:#fff;color:var(--navy-800);
  box-shadow:0 1px 2px rgba(0,38,99,.10)}
.filter-mode-opt input:focus-visible + span{box-shadow:var(--focus)}

.ms-divider{position:sticky;top:0;background:#fff;padding:8px 10px 4px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-400);border-top:1px solid var(--slate-100);margin-top:4px}
.ms-dropdown.ms-invalid .ms-toggle{border-color:#b42318}
.ms-dropdown.ms-invalid::after{content:"Pick at least one.";display:block;margin-top:5px;
  font-size:12px;color:#b42318}

/* Discover filter + sort bar.
   The Sort menu is a popover (.sort-dd). The filter sheet is NOT — it is an
   ordinary card in normal flow, so it cannot overlap the cards below it or
   the columns beside it. See static/js/filtersheet.js. */
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filterbar .ms-toggle,.filterbar .filter-btn{display:inline-flex;align-items:center;gap:8px;width:auto}
.filterbar-count{margin-left:auto}
.sort-dd .ms-panel{left:0;right:auto;min-width:220px}

.filter-sheet{margin-top:12px}
/* One column per filter, side by side, each scrolling on its own. minmax(0,1fr)
   rather than 1fr so a long option name cannot push a column wider than its
   share and squeeze the others. */
.filter-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
/* Discover Investors has a fourth filter (investor type). */
.filter-cols.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.filter-col-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-bottom:6px;font-size:13px;font-weight:600;color:var(--navy-800)}
.filter-col .ms-search{margin-bottom:6px}
.filter-col-list{max-height:236px;overflow-y:auto;border:1px solid var(--slate-200);
  border-radius:10px;padding:4px;background:#fff}
.filter-col-list .ms-opt{font-size:13.5px;padding:7px 9px}

/* Tablet: two columns, then one. Stacking is the only honest option on a
   phone — three columns of checkboxes side by side would be unreadable —
   and each stays fully visible with its own scroll. */
@media (max-width:1180px){
  .filter-cols.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .filter-cols,.filter-cols.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .filter-cols,.filter-cols.cols-4{grid-template-columns:minmax(0,1fr)}
  .filter-col-list{max-height:190px}
  .filterbar-count{margin-left:0;width:100%}
  .sort-dd,.filterbar .filter-btn{flex:1 1 auto}
  .sort-dd .ms-panel{min-width:0}
}

/* Company card branding (macros.html company_card).
   Only ever applies when the founder has uploaded something — an unbranded
   card matches none of these selectors and renders as it always did. */
.card.has-cover{padding-top:0;overflow:hidden}
.cc-cover{margin:0 -26px 16px;height:132px;background:var(--slate-100);overflow:hidden}
.cc-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cc-logo{width:42px;height:42px;border-radius:11px;flex:none;overflow:hidden;
  background:#fff;border:1px solid var(--slate-200);display:grid;place-items:center}
.cc-logo img{width:100%;height:100%;object-fit:contain;display:block}
/* A cover meets the card's rounded top corners, so it has to round with it. */
.card.has-cover .cc-cover{border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}

/* Funding Zone branding controls */
.brand-thumb{border:1px dashed var(--slate-300);border-radius:10px;background:var(--slate-50);
  display:grid;place-items:center;overflow:hidden;flex:none}
.brand-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.brand-thumb-logo{width:58px;height:58px}
.brand-thumb-cover{width:104px;height:58px}
.brand-thumb-cover img{object-fit:cover}
/* The preview is the real card at feed width, so it reads honestly. */
.card-preview{max-width:420px}
@media (max-width:900px){
  .card-preview{max-width:none}
  .cc-cover{height:110px}
}

/* Landing card branding — only applies when a founder uploaded something. */
/* Pinned to the media box rather than sized inside it. place-items:center on
   the parent (there to centre the "IMAGE" placeholder) means a grid item is
   NOT stretched, so the image's height:100% resolved against an auto-sized
   grid area and a tall portrait upload fell back to its natural height —
   spilling down over the card's name and badge. inset:0 makes the size
   independent of how the grid chooses to lay the item out, and the parent
   clips regardless. */
.mk-card-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The logo overlaps the media/body seam, the way a profile picture sits on a
   cover photo. .mk-card already clips overflow, so it cannot escape the card. */
.mk-card-logo{position:absolute;left:16px;bottom:-20px;width:44px;height:44px;border-radius:12px;
  background:#fff;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm);
  display:grid;place-items:center;overflow:hidden}
.mk-card-logo img{width:100%;height:100%;object-fit:contain;display:block}
/* Only the cards that actually have a logo need room made for it. */
.mk-card-body.has-logo{padding-top:32px}
/* In the body instead of on a band. The landing cards carry no cover, so
   there is no seam for the logo to straddle; it becomes an ordinary block
   at the top of the card. Same size, border and blur — only the anchoring
   changes. */
.mk-card-logo-inline{position:static;margin:0 0 12px}

/* Landing-page teaser anonymity.
   The NAME is not in the markup — the template ships a placeholder — so this
   blur is presentation over something already withheld, not the protection
   itself. The IMAGES are the real bytes with a CSS blur, which hides them on
   the page but not from anyone who opens the file directly. */
/* The band on a card with no uploaded cover.

   NOT RENDERED ANYWHERE TODAY. The landing cards were the only thing that
   used .mk-card-media, and the band was taken off them; these rules are
   kept so putting it back is a template change rather than a rebuild.

   Soft shapes pushed well out of focus, so it reads as a picture being
   withheld — the same story the blurred name and logo beside it tell —
   rather than as a missing one.
   Scaled past its own edges because a blur samples transparency at the
   boundary and would otherwise fade to nothing at the card's corners. */
.mk-cover-veil{position:absolute;inset:0;overflow:hidden;display:block;
  background:var(--navy-100)}
.mk-cover-veil::before{content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(38% 60% at 18% 30%, rgba(28,89,186,.70), transparent 70%),
    radial-gradient(34% 55% at 62% 22%, rgba(0,38,99,.60), transparent 70%),
    radial-gradient(42% 65% at 82% 74%, rgba(93,137,200,.75), transparent 70%),
    radial-gradient(30% 50% at 38% 84%, rgba(156,184,223,.80), transparent 70%),
    linear-gradient(140deg,#E7EEF8,#C9D9EF);
  filter:blur(18px);transform:scale(1.15)}

.mk-blur{filter:blur(5px);user-select:none;pointer-events:none}
/* Scaled up slightly: a blur samples past the element's edge, which would
   otherwise show as a soft transparent rim around the picture. */
.mk-blur-img{filter:blur(12px);transform:scale(1.12)}
.mk-card-logo .mk-blur-img{filter:blur(7px)}


/* Searchable single-select (static/js/combo.js) — country, state, city.
   Built to sit in the same visual family as .input and the multi-select
   dropdown, so the thesis form reads as one set of controls. */
.combo{position:relative}
.combo-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  background:#fff;font-size:14px;color:var(--slate-400)}
.combo.has-value .combo-btn{color:var(--ink);font-weight:500}
.combo-btn:hover{border-color:var(--slate-300)}
.combo.open .combo-btn{border-color:var(--navy-500);box-shadow:var(--focus)}
.combo-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Drawn, not typed. The glyph these used (U+25BE) is absent from Inter, so
   it fell back to a system font and rendered as a thin dash next to native
   selects that showed a proper chevron. Borders + currentColor give one
   shape at one weight that the open state can rotate. */
.combo-caret{flex:none;width:8px;height:8px;font-size:0;color:var(--slate-500);
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);margin-top:-4px;margin-right:2px;transition:transform .15s}
.combo.open .combo-caret{transform:rotate(225deg);margin-top:2px}
.combo.is-disabled .combo-btn{opacity:.55;cursor:not-allowed;background:var(--slate-50)}

.combo-panel{position:absolute;z-index:50;top:calc(100% + 6px);left:0;right:0;background:#fff;
  border:1px solid var(--slate-200);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px}
.combo-search{margin-bottom:6px}
.combo-list{max-height:248px;overflow-y:auto;scrollbar-width:thin}
.combo-item{padding:9px 11px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-item:hover{background:var(--slate-100)}
/* The current choice is marked, so reopening the list shows where you are. */
.combo-item.selected{background:var(--color-brand-tint);color:var(--color-brand-primary);font-weight:600}
.combo-item.selected::after{content:"✓";float:right;margin-left:8px}
/* "Use what I typed" — separated, because it adds a value rather than picks one. */
.combo-custom{color:var(--color-secondary);font-weight:600;
  border-top:1px solid var(--slate-100);margin-top:4px;padding-top:10px}
.combo-empty{padding:10px;text-align:center;margin:0}
/* A combo whose required value is still empty at submit (combo.js) — the
   browser cannot flag it, because the value lives in a hidden input. */
.combo-invalid .combo-btn{border-color:#b42318}
.combo-invalid::after{content:"Required.";display:block;margin-top:5px;font-size:12px;color:#b42318}


/* Landing panels on small screens: a tighter gutter and less inner
   padding, so the panel reads as a panel rather than as the page. */
@media(max-width:900px){
  .mk-stack{padding-top:22px}
  .mk-panel{padding:26px 18px;margin-bottom:16px}
  .mk-stack > .mk-panel:last-of-type{margin-bottom:24px}
}

/* ══════════════════════════════════════════════════════════════════
   LIQUID GLASS — landing page
   Glass is a MATERIAL: it only reads as glass when there is something
   behind it to refract. On a near-flat #F5F7FB ground a frosted panel
   is just a grey panel, so this adds an ambient field for the panels
   to sit in, then floats them on it.
   Three ingredients, all of them doing work:
     1. translucency  - you can see the field through the surface
     2. backdrop blur - what you see through it is diffused, not legible
     3. a lit edge    - a bright top border + inner highlight reads as
                        the thickness of the material catching light

   Deliberately restrained. A heavier pour looked better in isolation
   and worse in use: the cards went pale, and "Unscored", the tag chips
   and the figures are exactly the content a verification product cannot
   afford to render as decoration. The glass carries the PANEL - the
   depth, the edge, the field showing through the gutters - while the
   cards on top stay near-opaque, so the numbers read as crisply as they
   do on a solid page.
   ══════════════════════════════════════════════════════════════════ */

/* 1. The field. Fixed, so panels drift over it as the page scrolls -
   that parallax is most of what sells the material as glass. */
body.glass-page{background:var(--color-bg)}
body.glass-page::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(820px 560px at 10% 10%, rgba(28,89,186,.42), transparent 60%),
    radial-gradient(760px 520px at 92% 22%, rgba(0,38,99,.38), transparent 58%),
    radial-gradient(800px 580px at 26% 74%, rgba(93,137,200,.42), transparent 60%),
    radial-gradient(700px 520px at 86% 86%, rgba(17,71,156,.34), transparent 58%),
    var(--color-bg);
}

/* 2. The panels. Nested backdrop-filters compound badly and cost a lot,
   so ONLY the panel filters; the cards inside are plain translucency. */
body.glass-page .mk-panel{
  position:relative;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  box-shadow:
    0 10px 34px rgba(0,38,99,.13),
    inset 0 1px 0 rgba(255,255,255,.9);
}
/* The lit edge: a highlight that fades down the first third of the
   surface, the way light catches the top of a real bevel. */
body.glass-page .mk-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 30%);
}
body.glass-page .mk-panel > *{position:relative;z-index:1}

/* 3. Cards read as a second, thinner pane on top of the first. */
body.glass-page .mk-panel .feat .c,
body.glass-page .mk-panel .tstrip-card,
body.glass-page .mk-panel .mk-card{
  background:rgba(255,255,255,.93);
  border:1px solid var(--slate-200);
  box-shadow:0 1px 3px rgba(0,38,99,.06);
}
body.glass-page .mk-panel .mk-card:hover{
  background:#fff;
  box-shadow:0 10px 26px rgba(0,38,99,.13);
  border-color:var(--navy-300);
}
body.glass-page .mk-panel .mk-card-media{background:var(--navy-50)}
body.glass-page .mk-panel .feat .c .i,
body.glass-page .mk-panel .tstrip-ico{background:var(--navy-100);color:var(--navy-700)}

/* 4. Chrome. The nav already blurred; make it the same material. */
body.glass-page .mk-nav{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.55)}
body.glass-page .mk-foot{
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  border-top:1px solid rgba(255,255,255,.55)}

/* 5. The hero is a LIGHT field now, so the pill and the ghost button take
   their ordinary light treatment rather than the dark-glass one that was
   here. Glass over white is just a pale rectangle — worse than the solid
   it replaces — so these two opt out of the effect entirely. */
body.glass-page .corridor{
  background:var(--navy-100);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid #DCE6F4;color:var(--navy-800)}
body.glass-page .hero .btn-ghost{
  background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--navy-300);color:var(--navy-800)}
body.glass-page .hero .btn-ghost:hover{background:var(--navy-50);border-color:var(--navy-400)}

/* 6. No backdrop-filter support (or reduced transparency): fall back to
   the solid panels, which is the design this replaces. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.glass-page .mk-panel,
  body.glass-page .mk-panel .feat .c,
  body.glass-page .mk-panel .tstrip-card,
  body.glass-page .mk-panel .mk-card{background:#fff;border-color:var(--slate-200)}
  body.glass-page .mk-panel::before{display:none}
}


/* The portrait file loads for the whole mobile range (the <source> says
   820px), because the card is a tall box at every mobile width and a 3:1
   crop asked to cover one keeps about a third of its subject. This block
   only raises the card's floor for phones. */
@media(max-width:560px){
  /* The floor steps up as the screen narrows, because the same sentence
     wraps to more lines there and the panel grows with it. One number for
     the whole range gave 63% of clear picture at 560px and 51% at 320px;
     these three hold 60-65% across it. */
  .bn-has-img{min-height:780px}
}
@media(max-width:400px){ .bn-has-img{min-height:830px} }
@media(max-width:344px){ .bn-has-img{min-height:890px} }