/* ===============================
   SH Security — Site Styles (full)
   =============================== */

/* ---- Core theme tokens ---- */
:root{
  --brand:#0d6efd;
  --brand-2:#6f42c1;
  --brand-3:#20c997;

  /* new: richer banner gradient colours (light) */
  --brand-from: #0b5bd3;  /* deep blue */
  --brand-to:   #7b5ae0;  /* soft purple */
  --brand-ink:  #0b1020;  /* ink used on light buttons over banner */

  --ink:#1a1f36;
  --muted:#6b7280;
  --bg:#f7f9fc;

  --nav-bg: #ffffff;      /* light navbar background */
}

html,body{color:var(--ink);}

/* Hero background (light) */
.hero{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(32,201,151,0.12), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(13,110,253,0.12), transparent 60%),
    linear-gradient(180deg,#ffffff, var(--bg));
}

/* Top gradient band & “Experiencing a breach?” banner */
.brand-gradient{
  /* soft vignette + rich brand gradient */
  background:
    radial-gradient(1000px 320px at 18% -30%, color-mix(in oklab, var(--brand-from) 16%, transparent), transparent 70%),
    linear-gradient(135deg, var(--brand-from), var(--brand-to));
  border-bottom: 1px solid color-mix(in oklab, var(--brand-to) 25%, transparent);
  color:#fff;
}

/* Buttons on the banner */
.brand-gradient .btn-light{
  background:#fff;
  border-color:#fff;
  color:var(--brand-ink);
}
.brand-gradient .btn-outline-light{
  color:#fff;
  border-color:rgba(255,255,255,.7);
}
.brand-gradient .btn-outline-light:hover{
  background:rgba(255,255,255,.1);
  border-color:#fff;
}

.badge-accent{background:rgba(13,110,253,.1); color:#0b5ed7; border:1px solid rgba(13,110,253,.2)}
.card{border:1px solid #e7ebf3; box-shadow:0 6px 24px rgba(16,24,40,.04);}
.section-accent{background:linear-gradient(180deg,#ffffff,#f0f5ff); border-top:1px solid #eef2ff; border-bottom:1px solid #eef2ff;}
.cta{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:white; border-radius:1rem;}
.navbar-brand span{letter-spacing:.2px}
footer{background:#0b1020; color:#a3aed0}
footer a{color:#d0d6f6; text-decoration:none}
footer a:hover{text-decoration:underline}

/* Typography */
body{font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";}
h1,h2,h3,.display-5{letter-spacing:.2px}

/* Elevated navbar */
.navbar-elevated{backdrop-filter:saturate(180%) blur(6px); box-shadow:0 6px 24px rgba(16,24,40,.06);}

/* Logo sizing utility */
.navbar-brand img{width:clamp(44px,4.2vw,64px); height:auto}

/* Buttons */
.btn{border-radius:.8rem; transition: transform .15s ease, box-shadow .2s ease;}
.btn-primary{box-shadow:0 6px 16px rgba(13,110,253,.25);}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active,.btn-outline-primary:active{transform:translateY(0)}

/* Cards */
.card{border:1px solid #e7ebf3; box-shadow:0 10px 30px rgba(2,6,23,.06); border-radius:1rem}
.card:hover{transform:translateY(-2px); transition:.2s ease; box-shadow:0 14px 36px rgba(2,6,23,.12)}

/* Hero headline sizing and soft shadow */
.hero h1{font-weight:800; text-shadow:0 1px 0 rgba(255,255,255,.6)}

/* Section spacing */
.section-accent{padding-top:3rem; padding-bottom:3rem}

/* CTA refinement */
.cta{box-shadow:0 18px 48px rgba(13,110,253,.25);}

/* Footer */
footer{border-top:none}

/* Optional custom font (CodecPro) – keep commented until files are added
@font-face{font-family:'CodecPro';src:url('/static/fonts/CodecPro-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'CodecPro';src:url('/static/fonts/CodecPro-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'CodecPro';src:url('/static/fonts/CodecPro-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
*/
body{
  font-family:"CodecPro","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
}

/* ---- Dark mode polish ---- */
[data-theme="dark"]{
  --bg:#0b1220;
  --text:#e8eefc;
  --muted:#b6c2e2;
  --card:#0f1b33;
  --border:#1f2b4a;
  --nav-bg:rgba(12,18,32,.84);
  --brand:#7fb3ff;
  --brand-2:#a78bfa;
  --brand-3:#5eead4;

  /* new: banner gradient colours (dark) */
  --brand-from:#1b2745;  /* deep navy */
  --brand-to:#6a4bdb;    /* luminous purple */
}

/* Body & generic text colours */
body{background:var(--bg); color:var(--text);}
.text-muted, footer .text-muted{color:var(--muted)!important;}

/* Navbar */
.navbar{background:var(--nav-bg)!important; border-bottom:1px solid var(--border)!important;}
.navbar .nav-link{color:var(--text)!important; opacity:.85;}
.navbar .nav-link:hover{opacity:1;}

/* Hero (dark) */
.hero{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(32,201,151,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(13,110,253,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), transparent 40%),
    var(--bg);
}
.hero h1,.hero .lead{color:var(--text);}

/* Cards/surfaces (dark) */
.card{background:var(--card); border-color:var(--border); box-shadow:0 10px 30px rgba(0,0,0,.25);}
.card .card-title,.card h3,.card h4,.card p,.card li,.card a{color:var(--text);}
.card a.btn-link{color:var(--brand);}
.card a.btn-link:hover{opacity:.9;}

/* CTA */
.cta{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b1020;}
.cta .btn{background:#ffffff; border-color:#ffffff; color:#0b1020;}
.cta .btn:hover{filter:brightness(.95);}

/* Buttons */
.btn-primary{background-color:var(--brand); border-color:var(--brand);}
.btn-outline-primary{color:var(--brand); border-color:var(--brand);}
.btn-outline-primary:hover{background-color:var(--brand); color:#0b1020;}

/* Badges */
.badge-accent{background:rgba(127,179,255,.16); color:var(--brand); border:1px solid rgba(127,179,255,.28);}

/* Links, lists, dividers */
a{color:var(--brand);}
a:hover{opacity:.9;}
hr{color:var(--border); opacity:1;}

/* Forms on dark backgrounds */
.form-control,.form-select,textarea{
  background:#0f1b33; color:var(--text); border-color:var(--border);
}
.form-control:focus,.form-select:focus,textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(127,179,255,.25);
}

/* Footer (dark) */
footer{background:transparent; color:var(--muted); border-top:1px solid var(--border);}
footer a{color:var(--brand);}

/* Map Bootstrap light backgrounds to dark surfaces */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-body,
[data-theme="dark"] .bg-body-tertiary{
  background-color:var(--card)!important; color:var(--text)!important; border-color:var(--border)!important;
}

/* Hero right-hand info box */
[data-theme="dark"] .hero .bg-white,
[data-theme="dark"] .hero .p-4.bg-white{
  background-color:var(--card)!important;
  border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}

/* Section accent (dark) */
[data-theme="dark"] .section-accent{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* Card & CTA polish */
.card,.cta,.hero .p-4{border-radius:1rem;}
[data-theme="dark"] .card{
  background:var(--card); border-color:var(--border); box-shadow:0 10px 24px rgba(3,8,20,.45);
}
[data-theme="dark"] .card a{color:var(--brand);}
[data-theme="dark"] .card .text-muted{color:var(--muted)!important;}
[data-theme="dark"] .border-bottom{border-bottom:1px solid var(--border)!important;}

/* Accordions/lists */
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .list-group-item{
  background-color:var(--card); color:var(--text); border-color:var(--border);
}

/* Surface utility */
.surface{background:var(--card); border:1px solid var(--border); border-radius:1rem;}

/* Navbar brand & links ensure readability */
[data-theme="dark"] .navbar .navbar-brand,
[data-theme="dark"] .navbar .navbar-brand span,
[data-theme="dark"] .navbar .nav-link{color:var(--text)!important;}
[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .navbar-brand:hover{color:#fff!important;}

/* Sleek hero media */
.media-frame{
  position:relative; overflow:hidden; border-radius:1rem;
  border:1px solid var(--border); box-shadow:0 16px 40px rgba(2,6,23,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.media-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.15)); pointer-events:none;
}
[data-theme="dark"] .media-frame{border-color:transparent;}

/* Mobile navbar layout */
@media (max-width:991.98px){
  .navbar .d-flex.ms-lg-3{width:100%; margin-top:.5rem; gap:.5rem; flex-direction:column; align-items:stretch;}
  .navbar .d-flex.ms-lg-3 .btn{width:100%;}
  .navbar .navbar-nav .nav-link{padding-top:.6rem; padding-bottom:.6rem;}
}

/* Responsive typographic scales */
h1,.display-5{font-weight:700; font-size:clamp(1.6rem,3.5vw + .6rem,2.75rem); line-height:1.2;}
.lead{font-size:clamp(1rem,1.2vw + .6rem,1.25rem);}

@media (max-width:575.98px){
  .card{border-radius:.9rem;}
  .card .h5{margin-bottom:.5rem;}
  .section-accent{padding-top:2rem; padding-bottom:2rem;}
  .cta{border-radius:1rem; padding:1rem!important;}
  a.btn-link{font-weight:600;}
}

/* Improve toggler visibility in dark mode */
[data-theme="dark"] .navbar{--bs-navbar-toggler-icon-bg:none;}
[data-theme="dark"] .navbar .navbar-toggler{border-color:var(--border);}
[data-theme="dark"] .navbar .navbar-toggler-icon{
  background-image:
    linear-gradient(var(--text), var(--text)),
    linear-gradient(var(--text), var(--text)),
    linear-gradient(var(--text), var(--text));
  background-position:center; background-size:100% 2px,100% 2px,100% 2px; background-repeat:no-repeat; padding:0;
}

/* Minor layout tweak for hero */
@media (max-width:991.98px){ .hero .surface{margin-top:1rem;} }

/* Headline & lede helpers */
.hero-title{font-weight:800; line-height:1.05; font-size:clamp(2.2rem,3vw + 1.2rem,3.5rem);}
.hero-lede{font-size:clamp(1.05rem,.6vw + .9rem,1.25rem);}

/* Accessible focus ring */
:focus-visible{outline:3px solid rgba(59,130,246,.65); outline-offset:2px;}

/* Glass card */
.card--glass{
  background:color-mix(in oklab, var(--bs-body-bg, #fff) 92%, transparent);
  border:1px solid color-mix(in oklab, var(--bs-body-color, #0b1220) 12%, transparent);
  backdrop-filter:blur(6px);
}

/* Elevated navbar on scroll */
.navbar-elevated{transition:box-shadow .25s ease, background-color .2s ease;}
.navbar-elevated.is-stuck{
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  background-color:color-mix(in oklab, var(--bs-body-bg, #fff) 92%, transparent);
}

/* Hero chips */
.hero-chip{
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--bs-body-color, #0b1220) 14%, transparent);
  padding:.5rem .9rem; font-size:.875rem;
  background:color-mix(in oklab, var(--bs-body-bg, #fff) 96%, transparent);
}

/* Softer gradient band at the very top (kept for subtlety elsewhere) */
.brand-gradient.thin{
  background:radial-gradient(1200px 400px at 20% -20%,
              color-mix(in oklab, var(--bs-primary, var(--brand)) 16%, transparent) 0%,
              transparent 60%);
}

/* Tight list spacing */
.list-tight li{margin-bottom:.35rem;}

/* ---------- DFIR “flow” component ---------- */
.ir-flow{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:1rem; position:relative;}
@media (max-width:991.98px){ .ir-flow{grid-template-columns:1fr;} }

.ir-step{
  position:relative; padding:1rem; border-radius:1rem;
  border:1px solid var(--border,#e7ebf3);
  background:var(--card,#fff);
  transition:transform .15s ease, box-shadow .2s ease;
}
.ir-step:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(2,6,23,.12);}

.ir-dot{
  --g1:var(--brand,#0d6efd);
  --g2:var(--brand-2,#6f42c1);
  inline-size:40px; block-size:40px; border-radius:999px;
  display:grid; place-items:center; font-weight:700; color:#fff; margin-bottom:.5rem;
  background:linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow:0 8px 22px rgba(13,110,253,.25);
}

/* Connector between steps (desktop only) */
@media (min-width:992px){
  .ir-step::after{
    content:""; position:absolute; top:20px; right:-18px;
    width:36px; height:2px;
    background:color-mix(in oklab, currentColor 35%, transparent);
    opacity:.35;
  }
  .ir-step:last-child::after{display:none;}
}

/* Dark mode fallbacks for flow */
[data-theme="dark"] .ir-step{
  background:var(--card,#0f1b33);
  border-color:var(--border,#1f2b4a);
  box-shadow:0 10px 24px rgba(3,8,20,.45);
}
/* --- Account page dark-mode readability hardening --- */
/* Stronger body colour tokens in dark */
[data-theme="dark"] {
  --account-text: #e8eefc;                 /* primary text */
  --account-subtle: rgba(232,238,252,.88); /* normal text on surfaces */
  --account-muted: rgba(232,238,252,.70);  /* helper/secondary */
}

/* Make anything that uses .text-body actually readable in dark */
[data-theme="dark"] .text-body {
  color: var(--account-text) !important;
}

/* Cards and their headers/footers inside dark mode */
[data-theme="dark"] .card.bg-body,
[data-theme="dark"] .card.bg-body .card-header,
[data-theme="dark"] .card.bg-body .card-footer {
  color: var(--account-subtle) !important;
}

/* Headings/labels/keys inside cards: full strength */
[data-theme="dark"] .card.bg-body :is(h1,h2,h3,h4,h5,strong,dt,label,th) {
  color: var(--account-text) !important;
}

/* Values/body copy inside cards: slightly softer but still clear */
[data-theme="dark"] .card.bg-body :is(p,dd,td,li,small,.form-text) {
  color: var(--account-subtle) !important;
}

/* Forms: inputs & selects should use strong text and clear placeholders */
[data-theme="dark"] .form-label { color: var(--account-text) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea {
  color: var(--account-text) !important;
  background: var(--card) !important;   /* from your theme */
  border-color: var(--border) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--account-muted) !important;
}

/* Tables (recent sign-ins) */
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  color: var(--account-subtle) !important;
  border-color: var(--border) !important;
}

/* Muted/helper text generally */
[data-theme="dark"] .text-body-secondary,
[data-theme="dark"] .form-text {
  color: var(--account-muted) !important;
}

/* Dividers inside dark cards */
[data-theme="dark"] .card.bg-body hr {
  color: var(--border) !important;
  opacity: 1;
}
/* Avatar chip */
.avatar {
  inline-size: 1.75rem; block-size: 1.75rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .9rem;
  background: color-mix(in oklab, var(--brand) 35%, #6b7280);
  color: #fff;
}
.avatar-sm { inline-size: 1.5rem; block-size: 1.5rem; font-size: .85rem; }

/* Dark-mode dropdown legibility */
[data-theme="dark"] .dropdown-menu {
  background: var(--card); border-color: var(--border);
}
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background: color-mix(in oklab, var(--card) 80%, var(--brand) 20%); }
[data-theme="dark"] .dropdown-divider { border-top-color: var(--border); }
.portal-table thead th { color: var(--bs-body-color); font-weight: 600; }
.portal-table tbody td { color: var(--bs-body-color); }
.portal-table tr { background: var(--bs-body-bg); }
.portal-table .border-bottom { border-color: var(--border, rgba(0,0,0,.12)) !important; }
.portal-table tbody tr:nth-child(odd) {
  background: color-mix(in oklab, var(--bs-body-bg) 92%, var(--bs-body-color));
}
/* ---------- Portal table dark-mode fixes ---------- */
/* Neutralise Bootstrap's table variables and set high-contrast defaults */
.portal-table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: rgba(255,255,255,.12);
  --bs-table-striped-bg: rgba(255,255,255,.05);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(255,255,255,.08);
  --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-body-color);
  background: transparent;
}

/* Header row: give it a subtle, darker surface in dark mode and solid borders */
.portal-table thead th{
  background: rgba(255,255,255,.06);
  color: var(--bs-body-color);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* Body cells keep strong contrast */
.portal-table tbody td{
  color: var(--bs-body-color);
  border-color: rgba(255,255,255,.08) !important;
}

/* Stripe rows gently; Bootstrap reads our --bs-table-striped-bg above */
.portal-table tbody tr:nth-child(odd){
  background: var(--bs-table-striped-bg);
}

/* Hover state that works in dark & light */
.portal-table tbody tr:hover{
  background: var(--bs-table-hover-bg);
}

/* Make sure the small “Last 10 entries” header divider matches */
.portal-table .border-bottom{ border-color: rgba(255,255,255,.12) !important; }

/* Light mode adjustments so it also looks good there */
:root:not([data-theme="dark"]) .portal-table thead th{
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
:root:not([data-theme="dark"]) .portal-table{
  --bs-table-border-color: rgba(0,0,0,.1);
  --bs-table-striped-bg: rgba(0,0,0,.025);
  --bs-table-hover-bg: rgba(0,0,0,.04);
}
/* ===== Portal: stronger dark-mode styles ===== */

/* Table (Recent activity) — punchier header + clearer borders */
.portal-table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: rgba(255,255,255,.12);
  --bs-table-striped-bg: rgba(255,255,255,.05);
  --bs-table-hover-bg: rgba(255,255,255,.08);
  --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-body-color);
  background: transparent;
}

/* Header row */
[data-theme="dark"] .portal-table thead th{
  background: rgba(255,255,255,.04) !important;   /* darker than before */
  color: #e9efff !important;                      /* brighter text */
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
}

/* Body cells */
[data-theme="dark"] .portal-table tbody td{
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Subtle zebra + hover that actually shows on dark */
[data-theme="dark"] .portal-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,.03);
}
[data-theme="dark"] .portal-table tbody tr:hover{
  background: rgba(255,255,255,.07);
}

/* Light mode fallbacks so it still looks good in light theme */
:root:not([data-theme="dark"]) .portal-table thead th{
  background: rgba(0,0,0,.035) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
:root:not([data-theme="dark"]) .portal-table{
  --bs-table-border-color: rgba(0,0,0,.08);
  --bs-table-striped-bg: rgba(0,0,0,.025);
  --bs-table-hover-bg: rgba(0,0,0,.045);
}

/* ===== Money badges (Top-ups) — increase contrast in dark mode ===== */
[data-theme="dark"] .card .badge.bg-info-subtle.text-info.border{
  /* use a brighter cyan on a darker chip */
  background: rgba(56,189,248,.18) !important;   /* cyan 400 @ ~18% */
  color: #cfefff !important;                     /* brighten the text */
  border-color: rgba(56,189,248,.55) !important;
  font-weight: 600;
}

/* light-mode counterpart (keeps them readable too) */
:root:not([data-theme="dark"]) .card .badge.bg-info-subtle.text-info.border{
  background: rgba(13,110,253,.10) !important;
  color: #0d6efd !important;
  border-color: rgba(13,110,253,.35) !important;
}
/* ===== Retainer: recent activity table (dark-mode friendly) ===== */

/* Reset Bootstrap table bg so rows inherit the card surface */
.portal-table.table > :not(caption) > * > * {
  background-color: transparent !important;
}

/* Header */
.portal-table thead th {
  font-weight: 600;
  padding-top: .6rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

/* Give the header a proper surface in both themes */
.portal-table thead tr {
  background: var(--card);
}
.portal-table thead th {
  color: var(--text);
}

/* Dark-mode specific polish (in case your vars aren’t applied somewhere) */
[data-theme="dark"] .portal-table thead tr {
  background: #0f1b33 !important;         /* matches your card surface */
}
[data-theme="dark"] .portal-table thead th {
  color: #e8eefc !important;
  border-bottom-color: #1f2b4a !important;
}

/* Body rows */
.portal-table tbody tr {
  border-top: 1px solid var(--border);
}
.portal-table tbody tr:hover {
  background: rgba(255,255,255,.03);       /* subtle hover */
}
.portal-table td {
  color: var(--text);
}

/* “Hours” emphasis stays readable in dark mode */
.portal-table td.fw-semibold {
  color: var(--text);
}

/* Category badge contrast in dark mode */
[data-theme="dark"] .portal-table .badge {
  background: rgba(148,163,184,.18);
  color: #dbe3f5;
  border: 1px solid rgba(148,163,184,.45);
}
/* --- Retainers page polish (dark-mode friendly) --- */

/* Ensure hero/bullet text has full contrast in both themes */
.retainer-hero,
.retainer-hero p,
.retainer-hero li {
  color: var(--text);             /* use your high-contrast token */
}
.retainer-hero .text-muted,
.retainer-hero .text-body-secondary {
  color: var(--muted) !important; /* keep secondary readable */
}
.retainer-hero li strong {
  color: var(--text);
}

/* Improve the “chips” used under Simple portal */
.hero-chip {
  /* stronger contrast than before; still subtle */
  background: color-mix(in oklab, var(--card) 88%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .45rem .8rem;
  font-weight: 600;
}

/* Optional: a brighter chip for tiny, low-contrast screens */
.hero-chip--bright {
  background: color-mix(in oklab, var(--brand) 14%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
}

/* Tighten list spacing so bullets don’t feel airy on dark backgrounds */
.list-comfy li { margin-bottom: .4rem; }

/* Media frame edge for dark background so the image isn't “floating” */
.media-frame {
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(2,6,23,.28);
}
.prose :where(h1,h2,h3){ margin-top:1.2rem; margin-bottom:.6rem; }
.prose p, .prose li { line-height: 1.7; }
.prose img { max-width:100%; height:auto; border-radius:.5rem; }
[data-theme="dark"] .prose pre { background:#0f1b33; border:1px solid var(--border); border-radius:.5rem; padding:.75rem; overflow:auto; }

/* Let the contents wrap to a second line if space is tight */
.navbar .navbar-collapse { flex-wrap: wrap; }

/* Stop labels from breaking in the middle, and trim padding at tight widths */
.navbar .nav-link,
.navbar .btn { white-space: nowrap; }

@media (min-width: 992px) {
  /* Slightly tighter link spacing on big screens to buy a little room */
  .navbar .nav-link { padding-inline: .6rem; }
}

/* When it wraps, give stacked rows a little breathing room */
.navbar .navbar-collapse > * { margin-top: .25rem; }
@media (min-width: 768px) {
  .navbar .navbar-collapse > * { margin-top: 0; }
}

/* Make the brand block occupy less width on tight layouts */
.navbar .navbar-brand { margin-right: .5rem; }
.case-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.case-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
}
.case-meta{
  font-size: .8rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
}
.case-dot{
  width: .45rem;
  height: .45rem;
  margin-top: .35rem;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}
.seasonal-banner{
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg,
    rgba(34,197,94,.10),
    rgba(255,255,255,.04),
    rgba(239,68,68,.10)
  );
}
[data-theme="light"] .seasonal-banner{
  border-bottom-color: rgba(0,0,0,.08);
}