/* 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;
  flex-wrap: wrap;   /* <-- wrap to remove scroll */
  gap: 6px;
  overflow-x: visible !important;  /* no horizontal scroll */
}

}


/* === 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{
    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; }
}

/* --- Mobile Hint (bottom sheet) --- */
.mf-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;               /* center vertically */
  justify-content: center;           /* center horizontally */
  background: rgba(5,10,25,.35);     /* subtle dim */
  backdrop-filter: blur(6px);
  z-index: 1000;
  pointer-events: none;
}

.mf-overlay.open{
  display: flex;
  pointer-events: auto;
}

.mf-card{
  width: min(680px, 92vw);
  margin: 0 auto;
  border-radius: 16px 16px max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-bottom));
  border: 1px solid var(--border);
  background: rgba(13,19,36,.96);
  box-shadow: var(--shadow);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(8px); /* softer drop animation */

  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.mf-overlay.open .mf-card{
  transform: translateY(0);
  opacity: 1;
}

.mf-icon{
  width: 44px; height: 44px; border-radius: 9999px;
  margin: 2px 0 8px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 8px 24px rgba(242,110,140,.25);
}

.mf-title{
  margin: 0 0 6px;
  font-size: var(--step-2);
  font-weight: 800;
  color: var(--text);
}
.mf-text{
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.65;
}
.mf-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Only show on small screens */
@media (min-width: 761px){
  #mobile-hint{ display: none !important; }
}

/* Make buttons full width + stacked */
.mf-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.mf-btn-full{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  font-size: 15px;
}

/* Match button styling system */
.btn-primary{
  background: #328093;
  color: #fff;
  border: none;
}

.btn-secondary{
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  border: 1px solid var(--border);
}


/* ===== Static content pages (About / Privacy) ===== */

/* Page shell */
.page-main{
  max-width: 860px;
  margin: 0 auto;
}

/* Compact hero with strong hierarchy */
.page-hero{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding: 16px;
  box-shadow: var(--shadow);
}
.page-hero h1{
  margin: 2px 0 8px;
  font-size: clamp(22px, 5.2vw, 32px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .003em;
}
.page-hero p{
  margin: 0;
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Content grid: single column on iPhone, 2-up on tablet+ */
.page-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 760px){
  .page-grid{ grid-template-columns: 1fr 1fr; }
}

/* Cards for sections */
.card.soft{
  background: rgba(13,19,36,.86);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.card.soft h3{
  margin: 0 0 6px;
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: 1.25;
  font-weight: 850;
}

/* Readable list spacing on mobile */
.prose{
  line-height: 1.75;
  color: var(--text);
}
.prose p{ margin: 8px 0; }
.prose ul{ margin: 8px 0 0; padding-left: 18px; }
.prose li{ margin: 6px 0; }
.prose b{ color: var(--text); }

/* Back link button */
.page-actions{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.page-actions .brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 900;
  font-size: var(--step--1);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: linear-gradient(180deg,var(--accent-2),var(--accent));
  color: #0b1020;
  text-decoration: none;
}

/* Footer: bigger tap targets on iPhone */
.site-footer a{
  display: inline-block;
  padding: 6px 8px;
  min-height: var(--tap);
}

/* Header badges: allow collapse on tiny screens */
@media (max-width: 420px){
  .badges .badge{ font-size: 11.5px; padding: 5px 8px; }
}

/* === Desktop: fix logo/badge overlap by using layout instead of absolute === */
@media (min-width: 641px){
  /* Header becomes a 2-col grid: [logo | badges] */
  .topbar{
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 16px !important;
    padding-left: 12px !important;   /* remove old big left pad */
    margin-top: 0 !important;
    position: relative;
    z-index: 10;
  }

  /* Make the logo participate in layout (no absolute) */
  .pinned-logo{
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: 1 !important;
    margin: 0 !important;
  }
  .pinned-logo .logo{
    width: 110px !important;         /* adjust as you like */
    height: auto !important;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }

  /* Badges stay on the right and won’t slip under the logo */
  .badges{
    margin-left: 0 !important;
    justify-self: end !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
}

/* Mobile (<=640px) already uses flowing logo; keep that behavior */
@media (max-width: 640px){
  .pinned-logo{ position: static !important; }
  .topbar{ padding-left: 0 !important; }

  header.topbar .pinned-logo {
 
    padding-left: 12px !important;
  }
  

}
/* === FIX TOPBAR LOGO OVERLAP ON ABOUT/PRIVACY === */
header.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Force logo to be INLINE, not pinned, on these pages */
header.topbar .pinned-logo {
  position: static !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  z-index: 1 !important;
  padding-right: 12px !important;
}

/* Desktop logo size here */
header.topbar .logo {
  width: 95px !important;
  height: auto !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.25) !important;
}

/* Badges right side, no underlap */
header.topbar .badges {
  margin-left: auto !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Mobile keeps current behavior */
@media (max-width: 640px){
  header.topbar .logo {
    width: 72px !important;
  }
}

/* --- Payment / overlay stacking fixes (keep these at the very end) --- */
/* --- Payment / overlay stacking fixes (keep these at the very end) --- */
#paywall,
#checkout-modal {
  position: fixed !important;
  z-index: 2000 !important;
}

/* ✅ NEW — tap/click fix block */
#paywall, #checkout-modal {
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
  contain: layout paint size;
}

.sheet, .sheet * {
  transform: none !important;
}

.sheet-footer {
  position: sticky;
  bottom: 0;
  z-index: 10002;
  pointer-events: auto;
}

button, .btn, .job-btn, .brand {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}

.modal-open #backdrop {
  pointer-events: none;
}


#mobile-hint {
  z-index: 900 !important;      /* keep the hint below payment modals */
}

/* Safety: if any mobile block downranks overlays, pin them back on top */
@media (max-width: 640px){
  .overlay { position: fixed !important; z-index: 2000 !important; }
  .dropzone{ display: none;

  }
}

/* iPhone modal comfort & scroll guards */
.overlay{
  overscroll-behavior: contain;           /* stop bg scroll bounce */
  -webkit-overflow-scrolling: touch;
  padding: 16px max(16px, env(safe-area-inset-right)) 
           max(16px, env(safe-area-inset-bottom)) 
           max(16px, env(safe-area-inset-left));
}

/* Keep pay button clear of the home indicator */
#checkout-modal .card.modal{
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* When the modal opens, absolutely freeze the page on iOS */
body.modal-open{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;                          /* you already had this—keep it */
  overflow: hidden;
}

/* Make Stripe’s input tap targets comfy on small iPhones */
@media (max-width: 480px){
  #checkout-modal .card.modal { font-size: 16px; } /* prevents zoom on focus */
}

/* Focus visibility in dark mode inside Stripe Element */
.StripeElement--focus, .Input--focused{
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(33,199,183,.22) !important;
  border-color: #21c7b7 !important;
}

/* ============ STRIPE CHECKOUT MODAL – MOBILE RESPONSIVE ============ */

/* 1) Treat it like a bottom sheet on phones */
@media (max-width: 640px) {
  /* Overlay: no extra padding, card hugs bottom & spans width */
  #checkout-modal.overlay {
    align-items: flex-end;               /* bottom sheet */
    justify-content: center;
    padding: 0;                          /* we’ll pad on the card instead */
  }

  /* Card: full-width sheet, rounded top corners only */
 #checkout-modal .card.modal
 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 15%;
        margin-left: 2%;
        margin-right: 2%;
        border-radius: 16px;
        box-shadow: 0 -8px 18px rgba(0, 0, 0, .65);
        padding: 14px 34px calc(14px + env(safe-area-inset-bottom));
        max-height: 82vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 16px;
    }

  /* Title + close button area gets a bit tighter */
  #checkout-modal .card.modal h2 {
    font-size: clamp(18px, 4.8vw, 22px);
    margin-bottom: 8px;
  }

  /* Any header row inside the modal: stack instead of cramped row */
  #checkout-modal .results-head {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  /* Donut + score shrink slightly on phones */
  #checkout-modal .donut {
    width: 52px;
    height: 52px;
  }
  #checkout-modal .donut .center {
    font-size: var(--step-1);
  }

  /* KPI grid / metrics collapse to single column so nothing squishes */
  #checkout-modal .kpi-grid {
    grid-template-columns: 1fr;
  }
  #checkout-modal .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2) Very short screens (landscape or small devices) – push card up, allow more scroll */
@media (max-height: 580px) {
  #checkout-modal.overlay {
    align-items: center;                 /* center vertically instead of bottom */
  }
  #checkout-modal .card.modal {
    max-height: 92vh;                    /* almost full height, fully scrollable */
  }
}

/* 3) Ultra-small phones – trim padding even more */
@media (max-width: 360px) {
  #checkout-modal .card.modal {
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
  }
  #checkout-modal .card.modal h2 {
    font-size: 17px;
  }
}

.pricing-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
}

.pricing-btn {
  width: 100%;
  padding: 14px 16px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 16px;
  color: var(--text);
  font-weight: 500;

  cursor: pointer;
  transition: all 0.15s ease;
}

.pricing-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.25);
}

.pricing-btn:active {
  transform: scale(0.97);
  background: rgba(255,255,255,0.12);
}

.pricing-btn .right {
  color: #c8f5d8; /* Green price */
  font-weight: 600;
}
/* main row: qty + price */
.pricing-btn{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}

.pricing-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* second line: per-scan + savings pill */
.pricing-sub{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: var(--step--1);
  color: var(--muted);
}

/* per-scan text */
.pricing-sub .per-scan{
  opacity:.95;
      font-style: italic;
}

/* savings pill */
.deal-pill{
  padding:2px 8px;
  border-radius:9999px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  margin-right: -4px !important;
}

/* neutral (single scan) */
.deal-pill.neutral{
  background:rgba(148,163,184,.16);
  border:1px solid rgba(148,163,184,.45);
  color:#e5f0ff;
}

/* bulk tiers */
.deal-pill.popular{
  background:rgba(52,211,153,.16);
  border:1px solid rgba(52,211,153,.55);
  color:#bbf7d0;
}

.deal-pill.best{
  background:linear-gradient(135deg,rgba(52,211,153,.22),rgba(34,197,94,.30));
  border:1px solid rgba(22,163,74,.7);
  color:#ecfdf5;
}

/* ===== Premium lock styling ===== */
/* ===== Premium lock styling ===== */

/* each section is a positioned container so overlay can anchor to it */
.results-section {
  margin-top: 16px;
  position: relative;
}

/* header lives outside the body blur; body holds the blurred content */
.results-section-body {
  position: relative;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--panel, rgba(15,23,42,0.96));
  overflow: hidden;
}

/* inner wrapper = only thing that gets blurred when locked */
.results-section-inner {
  position: relative;
  z-index: 1;
}

/* blur + dim ONLY the inner content, not the header */
.results-section.locked .results-section-inner {
  filter: blur(2px);
  opacity: 0.25;
  pointer-events: none;
}

/* --- DYNAMIC OVERLAY LAYOUT --- */
/* fills the section body but leaves room above for the header */
.lock-overlay {
  position: absolute;
  inset: 0;
  padding: 3rem 1rem 1.25rem;   /* pushes card below the header area */
  display: flex;
  justify-content: center;
  align-items: stretch;         /* inner card stretches with section height */
  border-radius: inherit;
  pointer-events: none;         /* only inner card is clickable */
  background: transparent;      /* let the blurred content show through */
  z-index: 2;
}

.lock-overlay-inner {
  pointer-events: auto;
  margin: 0 auto;
  width: 100%;
  max-width: 420px;

  border-radius: 18px;
  padding: 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;

  background: radial-gradient(circle at top,
              rgba(255,255,255,.06),
              rgba(15,23,42,.98));
  box-shadow: 0 18px 45px rgba(15,23,42,.80);
  text-align: center;
}

/* little "PAID FEATURE" chip */
.lock-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(248,250,252,0.08);
  color: var(--accent, #f97373);
}

/* description text – more readable */
.lock-overlay-inner p {
  margin: 0 0 8px;
  max-width: 25rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(235,240,255,0.92);
}

/* small CTA button inside overlay, centered */
.lock-overlay .btn.small {
  padding: 6px 12px;
  font-size: 0.82rem;
  min-height: 32px;
  border-radius: 999px;
  align-self: center;
}


/* === Special case: Structure Checklist lock layout === */
/* Only affect the Structure Checklist section; leave others as-is */
.results-section[data-section="structure"] .lock-overlay {
  /* remove the big top gap used on taller sections */
  padding: 1.25rem 1rem;
  align-items: center;       /* center the lock card over the pills */
}

/* keep body padding snug so overlay hugs the text/graphics */
.results-section[data-section="structure"] .results-section-body {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* === FINAL OVERRIDE: KPI dot + label on ALL sizes === */
.kpi-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0 !important;
}

.kpi-row .kpi-label{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;          /* kill the old 8px gap */
  min-width:0;
}

.kpi-row .kpi-dot{
  flex:0 0 10px;
  width:10px;
  height:10px;
  border-radius:9999px;
  margin-right:4px !important;   /* tiny space between dot + text */
}

.kpi-row .kpi-text{
  display:inline-block;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* keep a little room before the info "i" icon */
.kpi-row .tip{
  margin-left:6px !important;
  flex:0 0 auto;
}


/* === MOBILE KPI GAP FIX – override old alias rules === */
@media (max-width: 480px){
  /* use the real text again, no alias hacks */
  .kpi-text{
    display:inline-block !important;
    visibility:visible !important;
    white-space:nowrap !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* kill any ::after / ::before replacements */
  .kpi-text::before,
  .kpi-text::after{
    content:none !important;
  }
}

/* keep dot snug to the label on all sizes */
.kpi-row .kpi-label{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;        /* tiny gap between dot + text */
  margin:0 !important;
}

.kpi-row .kpi-dot{
  margin:0 4px 0 0 !important;
}


#pay-now{
  background-color: #328093 ;
}




/* =========================
   ABOUT PAGE – SINGLE COLUMN + COLOR
   ========================= */

main.layout.page-main.about-page {
  display: block;
  padding: 15px;
}

.about-page {
  padding-bottom: 72px;
  position: relative;
}

/* Soft background blobs behind the content */
.about-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(106,174,176,0.25) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(242,110,140,0.22) 0%, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(255,211,77,0.2) 0%, transparent 55%);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
  border-radius: 11px;
}

/* Center column feel */
.about-page .page-hero,
.about-page .page-section,
.about-page .page-grid {
  max-width: 760px;
  margin: 0 auto 32px;
}

/* Make all page-grid areas single column */
.about-page .page-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* HERO – give it a colorful banner look */
.about-page .page-hero {
  padding: 28px 24px 2px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(106,174,176,0.16), rgba(242,110,140,0.16)),
    linear-gradient(145deg, #0d1422, #080b15);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

.about-page .page-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,211,77,0.4), transparent 60%);
  top: -80px;
  right: -60px;
  opacity: 0.7;
  pointer-events: none;
}

.about-page .page-hero h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

.about-page .page-hero .hero-subtitle {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 540px;
}

/* Hero badges / pills */
.about-page .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 24px;
}

.about-page .pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(242,110,140,0.35), rgba(255,211,77,0.18));
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* Give cards more life */
.about-page .card.soft.prose {
  position: relative;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  background:
    linear-gradient(140deg, rgba(10,15,24,0.98), rgba(13,20,34,0.98));
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}

.about-page .card.soft.prose::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(106,174,176,0.12), transparent 55%);
  opacity: 0.7;
  pointer-events: none;
}

/* Inner content sits above the gradient overlay */
.about-page .card.soft.prose > * {
  position: relative;
}

/* Heading accent bar */
.about-page h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  position: relative;
  padding-left: 12px;
}

.about-page h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bg3), var(--bg2));
}

/* Better spacing for paragraphs/lists */
.about-page p {
  line-height: 1.55;
}

/* Colored bullets */
.about-page ul {
  padding-left: 1.2rem;
}
.about-page ul li::marker {
  color: var(--bg3);
}

/* Step list styling */
.about-page .steps-list {
  padding-left: 1.2rem;
  margin-bottom: 0.75rem;
}
.about-page .steps-list li + li {
  margin-top: 0.4rem;
}

/* Testimonials: stacked with tinted backgrounds */
.about-page .testimonials-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-page .testimonial {
  background:
    linear-gradient(135deg, rgba(242,110,140,0.25), rgba(106,174,176,0.2));
  border: 1px solid rgba(255,255,255,0.16);
}

.about-page .testimonial-quote {
  font-style: italic;
}

.about-page .testimonial-meta {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.about-page .testimonial-name {
  font-weight: 600;
}

.about-page .stars {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
}

/* Section header text */
.about-page .section-header {
  margin-bottom: 16px;
}
.about-page .section-header p {
  margin-top: 4px;
  color: var(--muted);
}

/* CTA card pops a bit more */
.about-page .page-section:last-of-type .card.soft.prose {
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255,211,77,0.25), rgba(242,110,140,0.25)),
    linear-gradient(145deg, #0d1422, #080b15);
}

/* =========================
   ABOUT – TESTIMONIALS POP
   ========================= */

.about-page .testimonials-section {
  position: relative;
  padding: 28px 24px 24px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(242,110,140,0.28), rgba(106,174,176,0.24)),
    linear-gradient(145deg, #0d1422, #080b15);
  box-shadow: 0 26px 60px rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  overflow: hidden;
}

/* subtle glow stripe */
.about-page .testimonials-section::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 0% 0%, rgba(255,211,77,0.55), transparent 55%);
  opacity: 0.4;
  pointer-events: none;
}

/* tiny label chip above the heading */
.about-page .testimonials-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(8,11,21,0.7);
  border: 1px solid rgba(255,255,255,0.3);
}

/* grid: stacked on mobile, 2-up on desktop */
.about-page .testimonials-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
}

@media (min-width: 900px) {
  .about-page .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* individual cards get depth + hover */
.about-page .testimonial {
  background: rgba(8,11,21,0.96);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 14px 35px rgba(0,0,0,0.6);
  transform: translateY(0) scale(1);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out;
}

/* slight stagger so it feels more “alive” */
.about-page .testimonial:nth-child(2n) {
  transform: translateY(4px);
}

.about-page .testimonial:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px rgba(0,0,0,0.75);
  border-color: rgba(255,211,77,0.9);
}

/* big quotation mark accent */
.about-page .testimonial-quote {
  position: relative;
  font-style: italic;
  padding-left: 20px;
}

.about-page .testimonial-quote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 32px;
  line-height: 1;
  color: var(--bg3);
  opacity: 0.9;
}

/* meta stays, but a touch tighter */
.about-page .testimonial-meta {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.about-page .testimonial-name {
  font-weight: 600;
}

.about-page .stars {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
}

/* =========================
   CTA Link Button
   ========================= */

.about-page .cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  margin-top: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  color: #0a0f18;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 18px rgba(255,211,77,0.35);
}

.about-page .cta-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,211,77,0.47);
}

.about-page .cta-link:active {
  transform: translateY(0);
}


/* ===== Privacy page – reuse About shell but calmer ===== */

.privacy-page {
  display: block;
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 64px;
}

/* Hero: similar structure to About but less loud */
.privacy-page .page-hero {
  border-radius: 22px;
  padding: 22px 20px 18px;
  background:
    linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.98));
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

.privacy-page .page-hero h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 5vw, 30px);
}

.privacy-page .hero-subtitle {
  margin: 0 0 10px;
  color: var(--muted);
  max-width: 560px;
}

.privacy-page .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.privacy-page .hero-meta .pill {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Cards tighten up a bit so it feels like a policy doc */
.privacy-page .card.soft.prose {
  border-radius: 18px;
}

/* Section headings with the same left accent used on About */
.privacy-page h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  position: relative;
  padding-left: 12px;
}

.privacy-page h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bg3), var(--bg2));
}

/* Lists spaced for readability on mobile */
.privacy-page .prose ul {
  margin-top: 6px;
  padding-left: 1.25rem;
}
.privacy-page .prose li + li {
  margin-top: 4px;
}


/* === PRIVACY PAGE – MORE LIFE & VARIETY === */

/* Use single-column layout, not the 2-col .layout grid */
main.layout.page-main.privacy-page {
  display: block;
  padding: 16px 0 64px;
}

/* Stack cards with a vertical “timeline” spine on the left */
.privacy-page .privacy-body {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding-left: 16px; /* room for the spine on desktop */
}

/* Vertical line behind the cards */
.privacy-page .privacy-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(106,174,176,.55),
    rgba(242,110,140,.32)
  );
  opacity: .75;
}

/* Base card styling inside the privacy body */
.privacy-page .privacy-body .card.soft.prose {
  position: relative;
  padding-left: 18px; /* room for timeline dot on desktop */
  border-radius: 18px;
}

/* Timeline dots */
.privacy-page .privacy-body .card.soft.prose::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 18px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: radial-gradient(circle, #ffffff 0, #ffd34d 55%, #0b102000 60%);
    box-shadow: 0 0 0 3px rgb(7 11 20 / 0%), 0 0 18px rgba(255, 211, 77, .5);
}

/* Alternating background treatments so sections don’t all feel the same */
.privacy-page .privacy-body .card.soft.prose:nth-of-type(odd) {
  background:
    radial-gradient(circle at 0 0, rgba(106,174,176,.20), transparent 60%),
    rgba(13,19,36,.98);
  border: 1px solid rgba(148,163,184,.5);
}

.privacy-page .privacy-body .card.soft.prose:nth-of-type(even) {
  background:
    radial-gradient(circle at 100% 0, rgba(242,110,140,.22), transparent 60%),
    rgba(10,15,27,.98);
  border: 1px solid rgba(148,163,184,.45);
}

/* Small label chip before each H2, using data-label text */
.privacy-page .privacy-body .card.soft.prose h2 {
  margin-top: 2px;
  margin-bottom: 6px;
  padding-left: 0; /* we already have the left accent in the chip */
  position: relative;
}

.privacy-page .privacy-body .card.soft.prose h2::before {
 display: none;
}


/* Keep your original left accent bar but soften it so it doesn’t fight the chip */
.privacy-page h2::before {
  opacity: .5;
}

/* Lists & text spacing for readability */
.privacy-page .prose ul {
  margin-top: 6px;
  padding-left: 1.25rem;
}
.privacy-page .prose li + li {
  margin-top: 3px;
}
.privacy-page .prose p {
  line-height: 1.65;
}

/* Last card (“Your choices & rights”) gets a CTA treatment */
.privacy-page .privacy-body .privacy-cta {
  border: 1px solid rgba(52,211,153,.75);
  background:
    linear-gradient(135deg, rgba(52,211,153,.38), rgba(15,23,42,.98)),
    rgba(11,16,30,1);
  box-shadow: 0 24px 60px rgba(0,0,0,.8);
}

.privacy-page .privacy-body .privacy-cta h2::before {
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  color: #0a0f18;
  border-color: rgba(15,23,42,.8);
}

.privacy-page .privacy-body .privacy-cta .page-actions {
  margin-top: 14px;
}

/* Mobile: remove left gap + timeline so it feels clean and centered */
@media (max-width: 640px) {
  .privacy-page .privacy-body {
    padding-left: 0;          /* 🔥 remove left indent */
    margin-top: 8px;
    gap: 12px;
  }

  /* hide the vertical spine on mobile */
  .privacy-page .privacy-body::before {
    display: none;
  }

  /* normal card padding, no extra left offset */
  .privacy-page .privacy-body .card.soft.prose {
    padding-left: 14px;
  }

  /* hide the dots on mobile too */
  .privacy-page .privacy-body .card.soft.prose::after {
    display: none;
  }

  .privacy-page .privacy-body .card.soft.prose h2::before {
    font-size: 10.5px;
    padding: 2px 7px;
  }
}


a {
  color: rgb(209, 209, 209);
  font-style: italic;
}