/* Stripe checkout overlay container (your DOM, not Stripe's iframe) */
#checkout-modal.overlay { background: rgba(5,10,25,.65); }

#checkout-modal .card.modal{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

#checkout-modal .card.modal h2{
  color: var(--text);
  margin-top: 0;
}

:root{
  /* Logo-true palette */
  --ink:#0a0f18;
  --bg1:#6aaeb0;          /* teal from logo bg */
  --bg2:#ffd34d;          /* lemon yellow */
  --bg3:#f26e8c;          /* pop pink */
  --panel:#0d1422;        /* card bg */
  --text:#f7f9ff;
  --muted:#aeb7c6;
  --border:rgba(168,179,197,.18);

  /* Accents for UI */
  --accent:#f26e8c;       /* pink */
  --accent-2:#ffd34d;     /* yellow */
  --accent-3:#21c7b7;     /* seafoam/teal */

  --ok:#10b981; --warn:#f59e0b; --bad:#ef4444;
  --radius:16px; --shadow:0 6px 24px rgba(2,6,23,.35);

  /* Type scale */
  --step--1: clamp(11.5px, .74vw, 12.5px);
  --step-0:  clamp(13px, .9vw, 14px);
  --step-1:  clamp(14.5px, 1.05vw, 15.5px);
  --step-2:  clamp(16px, 1.25vw, 18px);
  --step-3:  clamp(18px, 1.6vw, 20px);
  --step-4:  clamp(22px, 2.2vw, 28px);
  --step-5:  clamp(28px, 3vw, 36px);
  --step-6:  clamp(36px, 4vw, 48px);

  /* iOS tap target size */
  --tap: 44px;
}

/* Global */
*{ box-sizing:border-box; }
html,body{
  height:100%;
  min-height:100%;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
img{ max-width:100%; height:auto; }

/* Base dark background */
body{
  margin:0;
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  font-size:var(--step-0);
  line-height:1.6;
  letter-spacing:.01em;
  background:linear-gradient(135deg,#0b1326 0%,#0b1326 45%,#0c152c 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  position:relative;
}

/* Corner overlays */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(42vmax 42vmax at 0% 0%, rgba(89,236,255,.55) 0%, transparent 70%),
    radial-gradient(42vmax 42vmax at 100% 0%, rgba(255,211,77,.65) 0%, transparent 70%);
  background-repeat:no-repeat;
}

/* Container + safe areas */
.container{ max-width:1100px; margin:0 auto; padding:24px clamp(16px,3vw,24px); }
@supports(padding:max(0px)){
  .container{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  body{
    padding-left:max(0px, env(safe-area-inset-left));
    padding-right:max(0px, env(safe-area-inset-right));
    padding-bottom:max(0px, env(safe-area-inset-bottom));
  }
}

/* ---------- Topbar / Brand (desktop baseline) ---------- */
.pinned-logo{
  position:absolute;
  top:4%;
  left:3%;
  z-index:1000;
}
.pinned-logo .logo{
  width:120px;
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.topbar{
  padding-left:120px; /* clears the pinned logo on desktop */
  margin-top:-1%;
  padding-bottom:1%;
}
.brand{ display:flex; align-items:center; gap:14px; justify-content:flex-start; }
.logo{
  width:clamp(84px,12vw,140px);
  height:auto;
  display:block;
  border-radius:18px;
  background:transparent;
  border:0;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.badges{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.badge{
  font-size:var(--step--1);
  padding:6px 10px;
  border-radius:9999px;
  background:rgba(255,255,255,.04);
  border:1px solid #ffffff;
  color:#ffffff;
}

/* ---------- Layout / Cards ---------- */
.layout{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:980px){ .layout{ grid-template-columns:1fr 1fr; } }

.card{
  background:rgba(13,19,36,.86);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  backdrop-filter:saturate(1.1) blur(2px);
}

.card-title{
  margin:2px 0 8px;
  font-size:var(--step-3);
  font-weight:900;
  letter-spacing:.005em;
  line-height:1.2;
  position:relative;
}
.card-title::after{
  content:"";
  display:block;
  height:2px;
  width:min(200px,28%);
  margin-top:8px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--accent-3),var(--accent-2),var(--accent));
  opacity:.9;
}
.card-sub{
  font-size:var(--step-0);
  color:var(--muted);
  margin:0 0 12px;
  line-height:1.65;
  text-wrap:pretty;
}

/* Labels */
label{
  font-size:var(--step--1);
  color:#c7f9ff;
  opacity:.9;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:block;
  margin:10px 0 6px;
}

/* ---------- Inputs ---------- */
textarea,input{
  width:100%;
  background:#0b1220;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  transition:box-shadow .2s,border-color .2s;
  font-size:var(--step-0);
  line-height:1.5;
}
textarea:focus,input:focus{
  outline:none;
  border-color:var(--accent-3);
  box-shadow:0 0 0 3px rgba(33,199,183,.22);
}
::placeholder{ color:#7f8aa6; }

/* ---------- Buttons ---------- */
button{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid transparent;
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  letter-spacing:.01em;
  transition:transform .1s ease, box-shadow .2s, border-color .2s, filter .15s;
  min-height:44px;
  font-size:var(--step-0);
}
button:active{ transform:translateY(1px); }

.btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  border-color:rgba(255,255,255,.12);
  color:#0b1020;
  box-shadow:0 10px 26px rgba(242,110,140,.18);
}
.btn-primary:hover{ filter:brightness(1.03); }
.btn-secondary{ background:rgba(255,255,255,.05); border-color:var(--border); color:var(--text); }
.btn-compact{ padding:8px 12px; border-radius:10px; }

/* ===== Cleaner pricing buttons (replaces neon-green bricks) ===== */

/* container layout */
.pricing-buttons{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* unified buy button style */
.buy-btn{
  position:relative;
  --buy-bg: rgba(16,185,129,.10);
  --buy-bd: rgba(16,185,129,.35);
  --buy-bg-hover: rgba(16,185,129,.16);
  --buy-bg-active: rgba(16,185,129,.22);
  --buy-txt: #eafff4;

  background: linear-gradient(180deg, var(--buy-bg), rgba(16,185,129,.08));
  border: 1px solid var(--buy-bd);
  color: var(--buy-txt);
  box-shadow: 0 6px 18px rgba(2,6,23,.18), inset 0 -1px 0 rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr auto; /* label | price */
  align-items: baseline;
  gap: 10px;
  transition: transform .06s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease, filter .15s ease;
}

/* equal widths so row aligns */
.pricing-buttons > .buy-btn{ flex: 1 1 180px; }

/* subtle hover/press */
.buy-btn:hover{
  background: linear-gradient(180deg, var(--buy-bg-hover), rgba(16,185,129,.10));
  border-color: rgba(16,185,129,.48);
  filter: brightness(1.02);
}
.buy-btn:active{
  background: linear-gradient(180deg, var(--buy-bg-active), rgba(16,185,129,.14));
  transform: translateY(1px);
}

/* keyboard focus */
.buy-btn:focus-visible{
  outline:0;
  box-shadow:
    0 0 0 2px rgba(11,16,32,1),
    0 0 0 4px rgba(33,199,183,.35);
}

/* two-part label styling */
.buy-btn .btn-label{
  font-weight:700;
  letter-spacing:.01em;
  color:#e8fff5;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.buy-btn .btn-price{
  font-weight:900;
  color:#b6ffcf;
  white-space:nowrap;
}

/* subtle top edge highlight */
.buy-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%);
  opacity:.6;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* remove old neon style if still applied to specific IDs */
#btnBuy1Top,#btnBuy10Top,#btnBuy20Top,
#btnBuy1Modal,#btnBuy10Modal,#btnBuy20Modal{
  background:none !important;
  border-color:var(--buy-bd) !important;
  color:var(--buy-txt) !important;
  box-shadow:none !important;
}

/* ---------- Micro components ---------- */
.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.actions .spacer{ flex:1 1 auto; }
#fileLabel{ color:#94a3b8; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:9999px;
  font-size:var(--step--1);
  margin:2px;
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
}
.pill.good{ background:#0d2621; color:#86efac; border-color:rgba(52,211,153,.25); }
.pill.bad{  background:#2a1517; color:#fca5a5; border-color:rgba(251,113,133,.25); }
.pill.p-high{ background:rgba(37,99,235,.18);  border-color:rgba(59,130,246,.38);  color:#dbeafe; }
.pill.p-med{  background:rgba(99,102,241,.18); border-color:rgba(129,140,248,.34); color:#e0e7ff; }
.pill.p-low{  background:rgba(99,102,241,.12); border-color:rgba(129,140,248,.26); color:#c7d2fe; }

.progress,.bar{
  height:8px;
  border-radius:9999px;
  background:#0b1220;
  border:1px solid var(--border);
  overflow:hidden;
}
.bar-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--accent-3),var(--accent-2),var(--accent)); }

/* Overlay / modal */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(5,10,25,.65);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.overlay.open{ display:flex; }
.card.modal{
  max-width:560px;
  width:100%;
  max-height:min(88vh,600px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Lock page when modal is open */
body.modal-open{
  position:fixed;
  inset:0;
  width:100%;
  overflow:hidden;
  height:100dvh;
}

/* ---------- Results / Score ---------- */
.results-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.score-block{ display:flex; align-items:center; gap:12px; }
.donut{ width:64px; height:64px; display:grid; place-items:center; position:relative; }
.donut .center{ position:absolute; font-weight:900; font-size:var(--step-2); color:var(--text); }
.rating{ font-size:var(--step--1); color:var(--muted); }

/* KPI grid + wrapping fixes */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  margin-top:10px;
}
.kpi{
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  min-width:0;                 /* allow children to shrink */
}
.kpi *{
  word-break:normal;           /* don't split inside words */
  overflow-wrap:normal;        /* wrap only at spaces */
}
.kpi .helper{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:75%;
}
.kpi b{
  color:var(--text);
  white-space:nowrap;
}
.results-head h2,
.results-head .rating{ white-space:nowrap; }

.stack{
  display:flex;
  height:10px;
  border-radius:9999px;
  overflow:hidden;
  border:1px solid var(--border);
}
.stack > div{ height:100%; }
.stack .ok{  background:#10b98122; }
.stack .gap{ background:#ef444422; }
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.metric{
  padding:8px 10px;
  border:1px dashed var(--border);
  border-radius:10px;
  font-size:var(--step--1);
  color:var(--muted);
}
.metric b{ color:var(--text); }
.section-pills{ display:flex; flex-wrap:wrap; gap:6px; }

/* Tip button (compact 16px circle) — single source of truth */
.tip{ position:relative; display:inline-flex; align-items:center; }
.tip .tip-btn{
  width:16px;
  height:16px;
  min-width:16px;
  min-height:16px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:help;
  appearance:none;
  box-shadow:none;
  vertical-align:middle;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.tip .tip-btn:hover{
  background:rgba(242,110,140,.18);
  border-color:var(--accent);
  color:var(--accent);
}
.tip .tip-btn:active{ transform:translateY(0); }  /* no jump */

/* Bubble – open BELOW the icon */
.tip-bubble{
  position:absolute;
  left:50%;
  top:calc(100% + 8px);     /* moved below the icon */
  bottom:auto;              /* reset bottom */
  transform:translateX(-50%) scale(.95);
  min-width:220px;
  max-width:460px;
  line-height: 1.6;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  font-size:var(--step--1);
  color:var(--text);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:60;
}
.tip:hover .tip-bubble,
.tip:focus-within .tip-bubble{ opacity:1; transform:translateX(-50%) scale(1); }
/* Arrow sits on TOP edge, pointing up */
.tip-bubble .arrow{
  position:absolute;
  left:50%;
  top:-6px;
  bottom:auto;
  width:10px;
  height:10px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--panel);
  /* flip borders to match the bubble outline on the TOP edge */
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-left:0;
  border-top:0;
}

/* Upload row */
.upload-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 10px; }
.file-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px dashed var(--border);
  border-radius:12px;
  font-size:var(--step--1);
  background:rgba(255,255,255,.03);
  min-height:44px;
}
.file-pill input[type="file"]{ display:none; }
.file-btn{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-size:var(--step--1);
}
.dropzone{
  flex:1 1 100px;
  border:1px dashed var(--border);
  border-radius:12px;
  padding:10px 20px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--step--1);
  color:#94a3b8;
}
.dropzone.drag{
  border-color:var(--accent-2);
  background:rgba(255,211,77,.10);
  color:#ffe9a3;
}

/* Spinner */
.spinner{
  display:none;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid #ffe3ef;
  border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}
.spinner.show{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Fix list */
.list-tight{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:0;
  padding:0;
  counter-reset:fix;
}
@media (min-width:900px){ .list-tight{ grid-template-columns:1fr 1fr; } }
.list-tight li{
  list-style:none;
  position:relative;
  padding:14px 14px 12px 46px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(242,110,140,.08);
  box-shadow:var(--shadow);
}
.list-tight li::before{
  counter-increment:fix;
  content:counter(fix);
  position:absolute;
  left:12px;
  top:14px;
  width:22px;
  height:22px;
  border-radius:9999px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:12px;
  color:var(--muted);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
}
.fix-row{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:6px; }
.fix-title{ font-weight:850; font-size:var(--step-1); color:var(--text); margin:0; }
.fix-body{ color:var(--muted); font-size:var(--step-0); line-height:1.7; margin:0; }
.list-tight li .pill{ margin:0; }

/* Minor buttons */
#btnPick,#btnClear{ background:rgba(255,255,255,.08); border-color:#ffffff22; }
#btnPick:hover,#btnClear:hover{ filter:brightness(1.05); }

/* Status LED */
.statusled{
  width:12px;
  height:12px;
  border-radius:9999px;
  background:transparent;
  border:2px solid rgba(148,163,184,.55);
}
.statusled.scanning{
  border-color:var(--accent);
  animation:pulse 1.2s infinite;
  box-shadow:0 0 0 3px rgba(242,110,140,.18);
}
.statusled.done{
  background:#10b981;
  border-color:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.26), 0 0 12px rgba(16,185,129,.35);
}
.statusled.error{
  background:#ef4444;
  border-color:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.22), 0 0 12px rgba(239,68,68,.40);
}
@keyframes pulse{
  0%{ transform:scale(1); }
  70%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}

/* ---------- Jobs area ---------- */
.jobs-wrap{ margin-top:16px; }
.jobs-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:8px 0 14px;
}
.jobs-toolbar .seg{
  display:inline-flex;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:9999px;
  overflow:hidden;
}
.jobs-toolbar .seg button{
  padding:8px 12px;
  border:0;
  background:transparent;
  font-size:var(--step--1);
  color:var(--muted);
  font-weight:800;
  letter-spacing:.02em;
}
.jobs-toolbar .seg button.active{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#0b1020;
}

.jobs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.job-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:260px;
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease;
  overflow:hidden;
}
.job-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(135deg,var(--accent-3),var(--accent-2),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.job-card:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(2,6,23,.18); }
.job-head{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; }
.job-title{
  font-weight:900;
  font-size:var(--step-2);
  margin:0;
  color:var(--text);
  letter-spacing:.005em;
  line-height:1.25;
}
.job-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:var(--step--1); color:var(--muted); }
.job-meta .badge-mini{ padding:4px 8px; border-radius:9999px; border:1px solid var(--border); background:rgba(255,255,255,.04); }
.chip{ font-size:calc(var(--step--1) - .5px); font-weight:900; padding:6px 8px; border-radius:9999px; border:1px solid var(--border); }
.chip.ok{ background:rgba(16,185,129,.1); color:#047857; border-color:rgba(16,185,129,.25); }
.chip.mini{ padding:4px 8px; font-size:calc(var(--step--1) - .5px); }
.job-line{
  font-size:var(--step-0);
  color:var(--muted);
  margin:6px 0 4px;
  -webkit-line-clamp:3;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.65;
  text-wrap:pretty;
}
.job-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.job-tags .pill{ font-size:var(--step--1); padding:4px 8px; }
.job-footer{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.job-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:900;
  font-size:var(--step--1);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  text-decoration:none;
  min-height:36px;
}
.job-btn.brand{ background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#0b1020; border-color:transparent; }
.job-aux{ display:flex; gap:6px; align-items:center; justify-content:flex-end; }

/* ---------- Accessibility / Wrapping ---------- */
*, .job-line, .job-title, .helper, .badge, .pill, .chip{
  word-break:break-word;
  overflow-wrap:anywhere;
}
:focus-visible{ outline:2px solid rgba(242,110,140,.65); outline-offset:2px; border-radius:8px; }

/* ---------- Mobile tweaks: shared ---------- */
/* Exclude tip buttons so they stay tiny */
button,.file-btn,.buy-btn,.job-btn{
  min-height:var(--tap);
  min-width:var(--tap);
}

/* Avoid input zoom on iOS */
@media (max-width:480px){
  select,button,input,textarea{ font-size:16px; }
}

/* ==== MOBILE HEADER FIX (iPhone & small screens) ==== */
@media (max-width: 640px){
  /* Let the logo flow so it doesn't overlap content */
  .pinned-logo{
    position:static !important;
    top:auto; left:auto;
    z-index:1;
  }
  .pinned-logo .logo{
    width:72px !important;
    height:auto;
    border-radius:10px;
    box-shadow:0 6px 16px rgba(0,0,0,.22);
  }

  /* Sticky, notch-safe header */
  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    padding:
      max(10px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      10px
      max(12px, env(safe-area-inset-left));
    background:linear-gradient(180deg,rgba(9,14,28,.88),rgba(9,14,28,.72));
    backdrop-filter:saturate(1.1) blur(8px);
    border-bottom:1px solid var(--border);
  }

  /* Brand left • badges right with one-line scroll */
  .brand{ display:flex; align-items:center; gap:10px; }
  .badges{
    margin-left:auto;
    display:flex; gap:8px; align-items:center;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:2px 0;
    scrollbar-width:none;
  }
  .badges::-webkit-scrollbar{ display:none; }
  .badge{
    flex:0 0 auto;
    font-size:12px;
    padding:6px 10px;
    background:rgba(7,16,32,.6);
    border-color:#ffffff22;
    color:#fff;
  }

  /* Space under sticky bar */
  .container{ padding-top:12px; }
  .layout{ margin-top:8px; }

  /* Stack upload controls nicely */
  .upload-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .file-pill{ width:100%; justify-content:space-between; }
  .dropzone{ width:100%; min-height:var(--tap); }

  /* Actions & pricing */
  .actions{ flex-direction:column; align-items:stretch; gap:8px; }
  .actions .spacer{ display:none; }
  .btn-primary{ width:100%; }
  .pricing-buttons{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; }

  /* Card & type scaling */
  .card{ padding:14px; }
  .card-title{ font-size:var(--step-2); }
  .card-title::after{ width:40%; }

  /* Score visuals scale down */
  .score-block{ gap:10px; }
  .donut{ width:56px; height:56px; }
  .donut .center{ font-size:var(--step-1); }

  /* KPI & metrics collapse */
  .kpi-grid{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:repeat(2,1fr); }

  /* Jobs grid */
  .jobs{ grid-template-columns:1fr; }
  .job-title{ font-size:var(--step-1); }
  .job-footer{ flex-direction:column; align-items:stretch; gap:8px; }

  /* No sideways scroll */
  html, body, .container{ overflow-x:hidden; }
}

/* Ultra-small phones */
@media (max-width:360px){
  .pinned-logo .logo{ width:64px !important; }
  .badge{ font-size:11.5px; padding:5px 9px; }
  .card{ padding:12px; }
}

/* Keep bottom content above Safari toolbar & home indicator */
@supports(padding:max(0px)){
  body{ padding-bottom:max(16px, env(safe-area-inset-bottom)); }
}
 
/* === Type cleanup: inputs + buttons + labels === */
:root{
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --btn-weight: 600;      /* firm but not shouty */
  --input-weight: 500;    /* balanced for fields */
  --label-weight: 700;    /* clear section labels */
  --label-track: .06em;   /* was .12em – tighter = cleaner */
}

/* Improve shaping & rendering for Inter */
html{
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Body copy stays regular */
body{
  font-family: var(--font-sans);
  letter-spacing: 0;            /* removes global extra tracking */
}

/* Labels: keep uppercase but reduce shout */
label{
  font-family: var(--font-sans);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  opacity: .9;
}

/* Inputs & textareas: consistent, compact line-height */
input, textarea, select{
  font-family: var(--font-sans);
  font-weight: var(--input-weight);
  font-size: var(--step-0);
  line-height: 1.4;
  letter-spacing: 0;
}

/* Placeholder tone down */
::placeholder{
  color: #9aa3b2;
  opacity: .9;
  font-weight: 400;
  letter-spacing: 0;
}

/* Buttons: unify style across all button-like elements */
button,
.file-btn,
.job-btn,
.buy-btn{
  font-family: var(--font-sans);
  font-weight: var(--btn-weight);
  letter-spacing: .005em;  /* subtle, not wide */
  line-height: 1.1;
  text-transform: none;     /* keep case natural */
}

/* Primary buttons: stronger contrast for text */
.btn-primary{
  color: #0b1020;
  font-weight: var(--btn-weight);
}

/* Secondary/neutral buttons: slightly higher contrast */
.btn-secondary,
.file-btn,
.job-btn{
  color: #eef2ff;                 /* a bit brighter than --text for clarity */
}

/* Pills/badges: lighten weight so they don’t compete with buttons */
.badge,
.pill,
.chip,
.badge-mini{
  font-weight: 600;               /* was 800–900 in spots */
  letter-spacing: .01em;
}

/* Reduce over-bold headlines that sit next to buttons */
.card-title{
  font-weight: 800;               /* was 900 */
  letter-spacing: .003em;
}

/* === KPI color system (green / yellow / red) === */
.kpi { padding:10px; border:1px solid var(--border); border-radius:12px; min-width:0; }
.kpi-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.kpi-label{ display:flex; align-items:center; gap:8px; min-width:0; }
.kpi-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* small colored dot before each label */
.kpi-dot{
  width:10px; height:10px; border-radius:9999px; flex:0 0 10px;
  background:var(--muted);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}

/* colored states for bar + dot */
.kpi.good  .bar-fill{ background:var(--ok); }
.kpi.warn  .bar-fill{ background:var(--warn); }
.kpi.bad   .bar-fill{ background:var(--bad);  }

.kpi.good  .kpi-dot{ background:var(--ok);  }
.kpi.warn  .kpi-dot{ background:var(--warn); }
.kpi.bad   .kpi-dot{ background:var(--bad);  }

/* make the bar a little more contrasty on dark */
.bar{ height:10px; border-radius:9999px; background:#0b1220; border:1px solid var(--border); overflow:hidden; }
.bar-fill{ height:100%; width:0; }

/* Overall score label tone (Strong/Excellent/etc.) */
.rating.good{ color:var(--ok); }
.rating.warn{ color:var(--warn); }
.rating.bad { color:var(--bad); }

/* Prevent awkward wraps everywhere in the header */
.results-head h2, .results-head .rating, .kpi b, .kpi-label { white-space:nowrap; }

/* Mobile: show shorter labels to avoid wrapping */
@media (max-width:480px){
  .kpi-text::after { content: attr(data-short); }
  .kpi-text { font-variant-ligatures:none; }
  .kpi-text { display:inline-block; }
  .kpi-text { visibility:hidden; }        /* hide long text… */
  .kpi-text::after{ visibility:visible; } /* …show short alias */
}

/* ---------- RESULTS HEADER / DONUT ---------- */
.results-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.score-block{ display:flex; align-items:center; gap:12px; min-width:0; }
.results-head .pill{ flex:0 0 auto; }

/* donut is a wrapper now (see JS below) */
.donut{ width:64px; height:64px; position:relative; display:inline-block; }
.donut svg{ width:100%; height:100%; display:block; }
.donut .center{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-weight:900; font-size:var(--step-2); line-height:1; color:var(--text);
}

/* ---------- KPI GRID & ROWS ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4, minmax(180px, 1fr)); gap:8px; margin-top:10px; }
@media (max-width:1100px){ .kpi-grid{ grid-template-columns:repeat(2, minmax(220px, 1fr)); } }
@media (max-width:640px){  .kpi-grid{ grid-template-columns:1fr; } }

.kpi{ padding:10px; border:1px solid var(--border); border-radius:12px; min-width:0; }
.kpi-row{ display:flex; align-items:center; gap:8px; min-width:0; }
.kpi-label{ display:flex; align-items:center; gap:6px; min-width:0; }
.kpi-text{ min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi b{ margin-left:auto; flex:0 0 auto; white-space:nowrap; }
.bar{ height:10px; border-radius:9999px; background:#0b1220; border:1px solid var(--border); overflow:hidden; margin-top:8px; }

/* KPI dots + states */
.kpi-dot{ width:10px; height:10px; border-radius:9999px; flex:0 0 10px; background:var(--muted); box-shadow:0 0 0 1px rgba(255,255,255,.05) inset; }
.kpi.good  .kpi-dot{ background:var(--ok);  }
.kpi.warn  .kpi-dot{ background:var(--warn); }
.kpi.bad   .kpi-dot{ background:var(--bad);  }
.kpi.good  .bar-fill{ background:var(--ok);  }
.kpi.warn  .bar-fill{ background:var(--warn); }
.kpi.bad   .bar-fill{ background:var(--bad);  }

/* === FIX: KPI labels cut off (no ellipsis, allow wrap) === */
.kpi .helper,
.kpi-label,
.kpi-text{
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* keep the little "i" tip from squeezing the text */
.kpi-label{ display:flex; align-items:center; gap:8px; min-width:0; }
.kpi .tip{ flex:0 0 auto; }      /* don't shrink the tip */
.kpi b{ white-space:nowrap; }    /* keep 20/40 etc. on one line */

/* === FIX: grid adapts so boxes aren't too narrow === */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:8px;
}

/* on very small screens show the short aliases (Prof., Struct., Read.) */
@media (max-width: 420px){
  .kpi-text::after{ content: attr(data-short); }
  .kpi-text{ visibility:hidden; }
  .kpi-text::after{ visibility:visible; }
}

/* --- FINAL GUARD OVERRIDE: keep tip icon 16px no matter what --- */
.tip .tip-btn{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  padding:0 !important;
  line-height:1 !important;
  border-radius:50% !important;
  box-shadow:none !important;
}

/* === Pricing buttons: smaller + single row === */
.pricing-buttons{
  display:flex;
  flex-wrap:nowrap;          /* keep on one row */
  gap:6px;
  align-items:center;
  overflow-x:auto;           /* allow scroll on very small widths */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pricing-buttons::-webkit-scrollbar{ display:none; }

/* compact buy buttons */
.buy-btn{
  padding:8px 10px;          /* smaller */
  border-radius:10px;
  min-height:36px;           /* tighter height */
  grid-template-columns:auto auto;  /* shrink to content */
  gap:8px;
  flex:0 0 auto;             /* no grow, no wrap */
  font-size:0.95em;
}

/* compact text */
.buy-btn .btn-label{
  font-weight:600;
  letter-spacing:.005em;
}
.buy-btn .btn-price{
  font-weight:800;
  font-size:0.95em;
}

/* remove equal-width rule from earlier section */
.pricing-buttons > .buy-btn{ flex:0 0 auto; }

/* keep single row even on mobile (override earlier mobile grid) */
@media (max-width: 640px){
  .pricing-buttons{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
  }
}


/* === Analyze CTA: cleaner, still pops === */
.btn-cta{
  /* calm teal gradient that matches your palette */
  background: linear-gradient(180deg, #36d9cc, var(--accent-3));
  color: #061a18;                        /* strong contrast on teal */
  border: 1px solid rgba(33,199,183,.55);
  border-radius: 12px;
  padding: 10px 16px;
  min-height: 40px;                      /* a touch slimmer than default */
  box-shadow:
    0 10px 24px rgba(33,199,183,.22),    /* soft glow */
    inset 0 -1px 0 rgba(0,0,0,.12);
  transition: transform .08s ease, filter .15s ease, box-shadow .2s ease;
}

.btn-cta:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(33,199,183,.28),
    inset 0 -1px 0 rgba(0,0,0,.12);
}

.btn-cta:active{
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow:
    0 8px 20px rgba(33,199,183,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.btn-cta:focus-visible{
  outline: 0;
  /* crisp focus ring that matches the brand, looks great on dark */
  box-shadow:
    0 0 0 2px rgba(11,16,32,1),
    0 0 0 5px rgba(33,199,183,.45),
    0 10px 24px rgba(33,199,183,.22);
}

/* Keep it from ballooning on small screens next to other buttons */
.actions .btn-cta{ flex: 0 0 auto; }

/* === DONUT + RATING IMPROVEMENTS (override) === */

/* Donut wrapper: keeps number centered within ring */
.donut{
  width:64px;
  height:64px;
  position:relative;
  display:inline-block;
}
.donut svg{
  width:100%;
  height:100%;
  display:block;
}
.donut .center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-weight:900;
  font-size:var(--step-2);
  line-height:1;
  color:var(--text);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* “Strong / Excellent / Fair” badges with glow */
.rating{
  font-weight:900;
  padding:4px 10px;
  border-radius:9999px;
  border:1px solid transparent;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:calc(var(--step--1) + .5px);
}

/* Color bands */
.rating.good{
  color:#0b2f22;
  background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
  border-color:rgba(16,185,129,.35);
  box-shadow:0 0 0 3px rgba(16,185,129,.12) inset;
}
.rating.warn{
  color:#3b2a05;
  background:linear-gradient(180deg, rgba(245,158,11,.22), rgba(245,158,11,.12));
  border-color:rgba(245,158,11,.38);
  box-shadow:0 0 0 3px rgba(245,158,11,.10) inset;
}
.rating.bad{
  color:#3a0b0b;
  background:linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.12));
  border-color:rgba(239,68,68,.38);
  box-shadow:0 0 0 3px rgba(239,68,68,.10) inset;
}

/* Slightly scale down on small screens */
@media (max-width:640px){
  .donut{ width:56px; height:56px; }
  .donut .center{ font-size:var(--step-1); }
}
/* ==== FIX: Rating pill contrast (make text readable on dark) ==== */
.rating{
  font-weight:900;
  padding:4px 10px;
  border-radius:9999px;
  border:1px solid transparent;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:calc(var(--step--1) + .5px);
  color:#eef6ff;                          /* default light text */
}

/* Strong / Good */
.rating.good{
  color:#eafff5;                          /* light mint text */
  background:linear-gradient(180deg, rgba(16,185,129,.42), rgba(16,185,129,.24));
  border-color:rgba(16,185,129,.55);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}

/* Warn / Fair */
.rating.warn{
  color:#fff6db;                          /* light warm text */
  background:linear-gradient(180deg, rgba(245,158,11,.46), rgba(245,158,11,.26));
  border-color:rgba(245,158,11,.62);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}

/* Bad / Weak */
.rating.bad{
  color:#ffe5e5;                          /* light red text */
  background:linear-gradient(180deg, rgba(239,68,68,.44), rgba(239,68,68,.26));
  border-color:rgba(239,68,68,.58);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
/* ==== FIX: keep Overall Score pill to content-width ==== */
.results-head .rating{
  display:inline-flex;      /* shrink to content */
  align-items:center;
  line-height:1.1;
  padding:6px 12px;         /* a touch more breathing room */
  flex:0 0 auto;            /* don't flex-grow in the header */
  width:fit-content;        /* clamp to content */
  max-width:max-content;    /* Safari-friendly */
  margin-top:2px;           /* aligns nicer with title */
  border-radius:9999px;
}
.list-tight.list-mini li {
  padding: 10px 12px 10px 42px;
}
.list-tight.list-mini li::before {
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  font-size: 11px;
}
.ghost-wrap .helper {
  color: var(--muted);
}

/* --- iOS/mobile background paint fix --- */
@media (max-width: 640px){
  /* Solid fallback so there's never a white flash */
  html{ background:#0b1326; }

  /* Use the same gradient but avoid background-attachment: fixed on iOS */
  body{
    background: linear-gradient(135deg,#0b1326 0%,#0b1326 45%,#0c152c 100%) !important;
    background-attachment: scroll !important; /* override the fixed value */
  }

  /* Keep corner glow layer but ensure it paints behind content */
  body::before{
    z-index:0;                  /* was -1; iOS can skip painting negatives */
  }

  /* Make sure content sits above the glow layer */
  header, main, footer, .container, .overlay{
    position: relative;
    z-index: 1;
  }
}

/* Extra guard: target iOS specifically (works alongside the media query) */
@supports (-webkit-touch-callout: none){
  html{ background:#0b1326; }
  body{
    background-attachment: scroll !important;
  }
}


.overall-summary{
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  padding:12px 14px;
  box-shadow: var(--shadow);
  line-height:1.75;
}
.overall-summary p{
  margin:10px 0;
  color:var(--text);
}
.overall-summary p strong, .overall-summary b{
  color: var(--text);
}

/* === Overall Summary styling (clean, readable, dark-friendly) === */
.overall-summary{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}

.os-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.os-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:9999px;
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  color:#06121a;
  border:1px solid rgba(255,255,255,.14);
  text-transform:uppercase;
  font-size:12px;
}

.os-score{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.os-num{
  font-size:clamp(28px, 5vw, 36px);
  font-weight:900;
  line-height:1;
  color:var(--text);
}
.os-rank{
  padding:4px 10px;
  border-radius:9999px;
  border:1px solid transparent;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:12.5px;
}
.os-rank.good{  color:#eafff5; background:linear-gradient(180deg, rgba(16,185,129,.42), rgba(16,185,129,.24)); border-color:rgba(16,185,129,.55); }
.os-rank.warn{  color:#fff6db; background:linear-gradient(180deg, rgba(245,158,11,.46), rgba(245,158,11,.26)); border-color:rgba(245,158,11,.62); }
.os-rank.bad{   color:#ffe5e5; background:linear-gradient(180deg, rgba(239,68,68,.44), rgba(239,68,68,.26)); border-color:rgba(239,68,68,.58); }

.os-tone{
  margin:6px 0 12px;
  color:var(--text);
  font-size:var(--step-1);
  line-height:1.65;
}

.os-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 760px){
  .os-grid{ grid-template-columns: 1fr; }
}

.os-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.03);
}
.os-card h4{
  margin:0 0 6px;
  font-weight:850;
  font-size:var(--step-1);
}

.os-list{
  margin:0; padding-left:18px;
  line-height:1.7;
  color:var(--muted);
}
.os-list li{ margin:4px 0; }

.os-chipline{
  margin:6px 0 0;
  color:var(--muted);
}
.os-chipline .os-label{
  color:#e5faff;
  font-weight:700;
}

.os-ghost{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  border:1px dashed var(--border);
  background:rgba(255,255,255,.03);
}
.os-ghost-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;
}
.os-ghost-badge{
  padding:4px 10px; border-radius:9999px; border:1px solid var(--border); font-weight:800; font-size:12px;
}
.os-ghost-badge.good{ color:#a7f3d0; background:#0d2621; border-color:rgba(52,211,153,.25); }
.os-ghost-badge.warn{ color:#fde68a; background:#291e07; border-color:rgba(245,158,11,.25); }
.os-ghost-badge.bad{  color:#fecaca; background:#2a1517; border-color:rgba(239,68,68,.25); }
.os-ghost-meta{ color:var(--muted); font-size:12.5px; }

.os-next{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.os-next h4{ margin:0 0 6px; font-weight:850; font-size:var(--step-1); }
.os-steps{ margin:0; padding-left:18px; line-height:1.8; color:var(--muted); }
.os-steps li{ margin:4px 0; }


/* === Softer, theme-fit summary styling (overrides) === */

/* Container: subtle surface, no heavy gradients/shadows */
.overall-summary{
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
  padding: 10px 12px;
  line-height: 1.7;
}

/* Each paragraph: light structure via a left accent, not a box */
.overall-summary p{
  position: relative;
  margin: 8px 0;
  padding: 6px 0 6px 12px;
  background: transparent;
  border-left: 3px solid rgba(33,199,183,.28); /* uses --accent-3, softened */
  color: var(--text);
}

/* The lead “key” token (from **Key:**) — quiet pill, small & tidy */
.os-p{
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.os-key{
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: var(--step--1);
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: #cfeff0;                           /* soft, readable */
  background: rgba(33,199,183,.10);         /* faint teal wash */
  border: 1px solid rgba(33,199,183,.22);   /* quiet outline */
  box-shadow: none;
}

/* Tone down any bold inside paragraphs so the key tag is the star */
.overall-summary p b,
.overall-summary p strong{
  color: var(--text);
  font-weight: 700;
}

/* Mobile: keep it airy without feeling busy */
@media (max-width: 640px){
  .overall-summary{ padding: 10px 12px; }
  .overall-summary p{ margin: 6px 0; padding-left: 10px; }
  .os-key{ padding: 2px 7px; letter-spacing: .05em; }
}


/* --- Title bubble sits on its own line; paragraph flows underneath --- */
.os-p{
  margin: 10px 0 14px;
}

.os-key{
  display: inline-block;              /* its own line */
  margin-left: 2px;
  margin-bottom: 6px;                 /* space before the text block */
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: var(--step--1);
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: #cfeff0;
  background: rgba(33,199,183,.10);
  border: 1px solid rgba(33,199,183,.22);
}

/* Only the paragraph body gets the left accent line */
.os-body{
  display: block;                     /* forces line break after the pill */
  padding: 6px 0 6px 12px;
  border-left: 3px solid rgba(33,199,183,.28);
  color: var(--text);
}

/* If you still have a generic .overall-summary p rule, neutralize it */
.overall-summary p{ background: transparent; border-left: none; padding-left: 0; }

/* Mobile tweaks */
@media (max-width: 640px){
  .os-key{ margin-bottom: 5px; padding: 2px 7px; letter-spacing: .05em; }
  .os-body{ padding-left: 10px; }
}

.os-p {
  display: block;
  margin: 14px 0;
}

.os-key {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cfeff0;
  background: rgba(33,199,183,.10);
  border: 1px solid rgba(33,199,183,.22);
}

.os-p {
  color: var(--text);
  line-height: 1.7;
}


/* === Keyword Coverage — calm, subtle variant (drop-in overrides) === */
.kw-card{
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  box-shadow: none;                 /* no inner glow */
  border-radius: 12px;
}

/* state colors = only a faint border tint */
.kw-card.good{ border-color: rgba(16,185,129,.25); }
.kw-card.warn{ border-color: rgba(245,158,11,.25); }
.kw-card.bad { border-color: rgba(239, 68, 68,.25); }

/* header + badge: quieter, flat token */
.kw-head{ margin-bottom:6px; }
.kw-badge{
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 8px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--border);
}

/* bar: thinner, no stripes, muted fill */
.kw-bar{
  height: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 9999px;
}
.kw-ok{
  background: var(--muted);                  /* base muted fill */
  transition: width .45s ease;
}
/* gently tint the fill by state, still low-chroma */
.kw-card.good .kw-ok{ background: rgba(16,185,129,.55); }
.kw-card.warn .kw-ok{ background: rgba(245,158,11,.55); }
.kw-card.bad  .kw-ok{ background: rgba(239, 68, 68,.55); }

/* kill the animated stripes & ticks */
.kw-ok::after{ content:none !important; }
.kw-ticks{ display:none !important; }

/* center label: smaller + softer */
.kw-label{
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-shadow: none;
  letter-spacing: .01em;
}

/* legend pills: compact and desaturated */
.kw-legend{ margin-top:6px; gap:6px; }
.kw-legend .pill{
  padding: 3px 7px;
  font-size: 11px;
  border-color: var(--border);
  filter: saturate(.85) opacity(.95);
}


/* === Compact stat chips for ghost-job summary === */
.stat-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.stat-chip{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:6px 10px;
  border-radius:9999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  font-size:var(--step--1);
  color:var(--muted);
  line-height:1.2;
}

.stat-chip b{
  color:var(--text);
  font-weight:800;
  font-variant-numeric: tabular-nums; /* tidy digits */
}

.stat-chip span{
  opacity:.9;
  white-space:nowrap;
}

/* subtle state tint if you ever want to color by band */
.stat-chip.good{  border-color:rgba(16,185,129,.28);  background:rgba(16,185,129,.10);  color:#a7f3d0; }
.stat-chip.warn{  border-color:rgba(245,158,11,.28);  background:rgba(245,158,11,.10);  color:#fde68a; }
.stat-chip.bad{   border-color:rgba(239,68,68,.28);   background:rgba(239,68,68,.10);   color:#fecaca; }

/* mobile: keep them airy and readable */
@media (max-width:640px){
  .stat-chip{ padding:6px 9px; }
}