/* ============================================================
   XBills.ai Design System  ·  calm-medical, trust-first, mobile-first
   Grounded in the working baseline tokens (teal #0e7c86 / navy #0f1e2e).
   Production-ready. Accessible: visible focus, 44px touch targets,
   prefers-reduced-motion, AA contrast.
   ============================================================ */

:root{
  /* brand */
  --ink:#0f1e2e;          /* navy  ·  primary text */
  --ink-2:#23394b;        /* softer navy */
  --mut:#5b7186;          /* muted slate  ·  secondary text */
  --teal:#0e7c86;         /* primary action */
  --teal-2:#0a5f67;       /* hover / pressed */
  --teal-soft:#f0fbfc;    /* tinted fill / dropzone-over */
  --teal-line:#b7d4d8;    /* dashed dropzone border */
  --gold:#C4912A;         /* sparing accent (badges, wins emphasis) */

  /* semantic */
  --green:#16a34a; --green-bg:#f0fdf4; --green-line:#bbf7d0; --green-ink:#166534;
  --amber:#b45309; --amber-bg:#fff7ed; --amber-line:#fed7aa; --amber-ink:#92400e;
  --red:#dc2626;   --red-bg:#fef2f2;   --red-line:#fecaca;

  /* surface */
  --bg:#f3f7f8;           /* app background */
  --card:#ffffff;
  --line:#e3eced;         /* hairlines / borders */
  --line-2:#d4e1e4;

  /* type scale (1.25 minor-third, 16px base) */
  --fs-1:11.5px; --fs-2:12.5px; --fs-3:13.5px; --fs-4:14px;
  --fs-5:16px; --fs-6:19px; --fs-7:22px; --fs-8:28px; --fs-9:34px;
  --ff:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --ff-letter:Georgia,"Times New Roman",serif; /* the appeal letter reads as a document */

  /* spacing (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:32px; --s7:48px;

  /* radius */
  --r1:8px; --r2:10px; --r3:14px; --r4:18px; --r-pill:999px;

  /* elevation  ·  soft teal-tinted, never harsh */
  --sh-1:0 4px 16px rgba(10,95,103,.05);
  --sh-2:0 6px 20px rgba(10,95,103,.08);
  --sh-3:0 14px 40px rgba(10,30,46,.16);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.15s; --t:.22s;
  --touch:44px; /* minimum interactive size */
}

*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff); color:var(--ink); background:var(--bg);
  line-height:1.5; font-size:var(--fs-5);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--teal); text-underline-offset:2px}
img{max-width:100%}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:6px}

/* layout primitives ---------------------------------------- */
.wrap{max-width:1080px; margin:0 auto; padding:var(--s4)}
.stack>*+*{margin-top:var(--s4)}
.muted{color:var(--mut); font-size:var(--fs-2)}
.center{text-align:center}

/* top bar  ·  persistent, minimal ---------------------------- */
.top{background:linear-gradient(120deg,var(--teal-2),var(--teal)); color:#fff}
.top .wrap{display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--s3); padding-bottom:var(--s3)}
.brand{font-size:var(--fs-7); font-weight:900; letter-spacing:-.4px; color:#fff;
  text-decoration:none; display:inline-flex; flex-direction:column}
.brand small{font-weight:600; opacity:.85; font-size:var(--fs-1); letter-spacing:0}
.top-right{display:flex; align-items:center; gap:var(--s3)}
.trust{font-size:var(--fs-1); opacity:.92; max-width:340px; text-align:right}
.btn-quiet{background:rgba(255,255,255,.16); color:#fff;
  border:1px solid rgba(255,255,255,.4); border-radius:var(--r1);
  padding:var(--s2) var(--s3); font-size:var(--fs-2); font-weight:700;
  cursor:pointer; white-space:nowrap; min-height:var(--touch)}
.btn-quiet:hover{background:rgba(255,255,255,.26)}

/* buttons -------------------------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--teal); color:#fff; border:none; border-radius:var(--r2);
  padding:12px 18px; font-size:var(--fs-4); font-weight:700; line-height:1.1;
  cursor:pointer; min-height:var(--touch); transition:background var(--t-fast) var(--ease),
  transform var(--t-fast) var(--ease); text-decoration:none}
.btn:hover{background:var(--teal-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:wait}
.btn.lg{padding:15px 26px; font-size:var(--fs-5); border-radius:var(--r3)}
.btn.block{width:100%}
.btn.sec{background:#fff; color:var(--teal); border:1px solid var(--teal)}
.btn.sec:hover{background:var(--teal-soft)}
.btn.ghost{background:#eef5f6; color:var(--ink); font-weight:600}
.btn.ghost:hover{background:#e2edee}
.btn.soon{background:#e3eced; color:var(--mut); cursor:default}

/* cards ---------------------------------------------------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s4) var(--s5); box-shadow:var(--sh-1)}
.card+.card{margin-top:var(--s4)}
.card h2{font-size:var(--fs-5); margin:0 0 var(--s3); color:var(--ink)}
.card h3{font-size:var(--fs-3); text-transform:uppercase; letter-spacing:.5px;
  color:var(--mut); margin:0 0 var(--s2); font-weight:700}
.card.collapsed > :not(h2):not(.card-head){display:none} /* progressive disclosure */
.card-head{display:flex; justify-content:space-between; align-items:center; cursor:pointer}

/* service cards (hub) -------------------------------------- */
.svc{display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r4); padding:var(--s5);
  box-shadow:var(--sh-2); transition:transform var(--t) var(--ease),
  box-shadow var(--t) var(--ease)}
.svc:hover{transform:translateY(-3px); box-shadow:var(--sh-3)}
.svc .ic{font-size:34px; line-height:1}
.svc h3{font-size:var(--fs-6); margin:var(--s3) 0 var(--s1)}
.svc p{color:var(--mut); font-size:var(--fs-4); flex:1; margin:0 0 var(--s2)}
.svc.soon{opacity:.72}

/* inputs --------------------------------------------------- */
.field{display:block}
.field>label{display:block; font-size:var(--fs-2); font-weight:700;
  margin:var(--s3) 0 var(--s1); color:var(--ink-2)}
input,textarea,select{font-family:inherit; font-size:var(--fs-3); color:var(--ink);
  width:100%; border:1px solid var(--line); border-radius:var(--r1);
  padding:11px 12px; background:#fff; min-height:var(--touch)}
textarea{min-height:120px; line-height:1.5; resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(14,124,134,.15); outline:none}
input::placeholder,textarea::placeholder{color:#9fb2bf}
.chk{display:flex; gap:var(--s2); align-items:flex-start; margin:var(--s3) 0;
  font-size:var(--fs-2); color:var(--mut)}
.chk input{width:18px; height:18px; min-height:0; margin-top:2px; flex:0 0 auto;
  accent-color:var(--teal)}

/* dropzone  ·  the hero ------------------------------------- */
.dz{margin:var(--s4) auto; max-width:760px; background:#fff;
  border:2.5px dashed var(--teal-line); border-radius:var(--r4);
  padding:var(--s7) var(--s5); text-align:center; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),
  background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.dz:hover,.dz.over{border-color:var(--teal); background:var(--teal-soft);
  transform:translateY(-1px)}
.dz .ic{font-size:40px}
.dz h3{margin:var(--s3) 0 var(--s1); font-size:var(--fs-7)}
.dz p{color:var(--mut); font-size:var(--fs-3); margin:2px 0}
.dz .or{margin-top:var(--s3); font-size:var(--fs-2); color:var(--mut)}

/* pills ---------------------------------------------------- */
.pill{display:inline-block; font-size:var(--fs-1); font-weight:800;
  padding:3px 10px; border-radius:var(--r-pill); letter-spacing:.2px}
.pill.live{background:var(--green-bg); color:var(--green-ink)}
.pill.soon{background:#f1f5f9; color:#64748b}
.pill.have{background:var(--green-bg); color:var(--green-ink)}
.pill.miss{background:#fef3c7; color:var(--amber-ink)}
.pill.gold{background:#fdf6e7; color:var(--gold)}

/* status pathway  ·  the spine of the flow ------------------ */
.pathway{display:flex; flex-direction:column}
.step{display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s2) 0; border-bottom:1px dashed var(--line)}
.step:last-child{border:none}
.dot{width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; font-size:var(--fs-2);
  font-weight:800; color:#fff; background:#cbd5dd; transition:background var(--t)}
.dot.done{background:var(--green)}
.dot.now{background:var(--teal); animation:pulse 1.8s var(--ease) infinite}
.step .lab{font-size:var(--fs-3); font-weight:700; line-height:1.25}
.step .sub{font-size:var(--fs-1); color:var(--mut)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(14,124,134,.4)}
  50%{box-shadow:0 0 0 6px rgba(14,124,134,0)}}

/* deadline countdown -------------------------------------- */
.dl{background:var(--amber-bg); border:1px solid var(--amber-line);
  border-radius:var(--r2); padding:var(--s3); margin-top:var(--s3)}
.dl b{font-size:var(--fs-7); color:var(--amber); display:block; line-height:1.1}
.dl span{font-size:var(--fs-1); color:var(--mut); display:block}
.dl.urgent{background:var(--red-bg); border-color:var(--red-line)}
.dl.urgent b{color:var(--red)}

/* win / risk analysis ------------------------------------- */
.w{margin:var(--s2) 0; padding:var(--s3); border-left:3px solid var(--green);
  background:var(--green-bg); border-radius:var(--r1); font-size:var(--fs-3)}
.w.risk{border-color:var(--amber); background:var(--amber-bg)}
.w b{display:block; margin-bottom:2px}

/* the appeal letter reads as a real document -------------- */
.letter textarea{min-height:340px; font-family:var(--ff-letter);
  font-size:var(--fs-3); line-height:1.65; border-radius:var(--r2); padding:14px}

/* modals --------------------------------------------------- */
.modal{position:fixed; inset:0; background:rgba(10,30,46,.55);
  display:none; align-items:center; justify-content:center; z-index:50;
  padding:var(--s4); backdrop-filter:saturate(120%) blur(2px)}
.modal.on{display:flex; animation:fade var(--t) var(--ease)}
.modal .box{background:#fff; border-radius:var(--r4); max-width:520px; width:100%;
  padding:var(--s5); max-height:90vh; overflow:auto; box-shadow:var(--sh-3);
  animation:rise var(--t) var(--ease)}
.modal h2{margin-top:0}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* full-screen "thinking" overlay -------------------------- */
.overlay{position:fixed; inset:0; background:rgba(243,247,248,.92);
  display:none; align-items:center; justify-content:center; z-index:40;
  flex-direction:column; gap:var(--s4); text-align:center; padding:var(--s5)}
.overlay.on{display:flex}
.overlay .big{font-size:var(--fs-6); font-weight:800}
.overlay .sm{font-size:var(--fs-3); color:var(--mut); max-width:420px}

/* spinner -------------------------------------------------- */
.spin{display:inline-block; width:14px; height:14px; border:2px solid #cbd5dd;
  border-top-color:var(--teal); border-radius:50%; animation:sp .7s linear infinite;
  vertical-align:-2px}
.spin.lg{width:30px; height:30px; border-width:3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* toast ---------------------------------------------------- */
.toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:var(--r2);
  font-size:var(--fs-3); z-index:60; display:none; box-shadow:var(--sh-3);
  max-width:calc(100vw - 32px)}
.toast.on{display:block; animation:rise var(--t) var(--ease)}

/* responsive grids ---------------------------------------- */
.grid-svc{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:var(--s4)}
.app{display:grid; grid-template-columns:280px 1fr; gap:var(--s4)}
.side{position:sticky; top:var(--s4); align-self:start}
.sum{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s4)}
.sum .f label{display:block; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.4px; color:var(--mut)}
.sum .f b{font-weight:700; font-size:var(--fs-3)}

/* ----- MOBILE: the primary canvas ------------------------ */
@media(max-width:880px){
  .app{grid-template-columns:1fr}
  /* status rail moves to a compact horizontal strip on top,
     deadline stays prominent */
  .side{position:static}
  .sum{grid-template-columns:1fr}
  .top .trust{display:none}        /* keep the bar clean on phones */
  .hero h1{font-size:var(--fs-8)}
  .dz{padding:var(--s6) var(--s4)}
  /* sticky thumb-reachable primary action */
  .action-bar{position:sticky; bottom:0; background:linear-gradient(180deg,
    rgba(243,247,248,0),var(--bg) 40%); padding:var(--s3) 0; z-index:20}
  .action-bar .btn{width:100%}
  .modal{align-items:flex-end; padding:0}      /* bottom-sheet feel */
  .modal .box{max-width:none; border-radius:var(--r4) var(--r4) 0 0;
    max-height:92vh}
}

/* hero (shared by hub + flow + condition pages) ----------- */
.hero{text-align:center; padding:var(--s6) 0 var(--s1)}
.hero h1{font-size:var(--fs-9); font-weight:900; letter-spacing:-1px;
  margin:var(--s1) 0; color:var(--ink)}
.hero p{font-size:var(--fs-5); color:var(--mut); max-width:680px;
  margin:var(--s2) auto}
.stat{display:flex; gap:var(--s4); justify-content:center; flex-wrap:wrap;
  margin:var(--s4) 0}
.stat div{background:#fff; border:1px solid var(--line); border-radius:var(--r2);
  padding:var(--s2) var(--s4); font-size:var(--fs-2); color:var(--mut)}
.stat b{color:var(--ink); font-size:var(--fs-5); display:block}

/* footer  ·  legal, calm, always present -------------------- */
.foot{text-align:center; color:var(--mut); font-size:var(--fs-1);
  padding:var(--s6) var(--s4); max-width:760px; margin:0 auto; line-height:1.6}

/* accessibility: respect reduced motion ------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important; transition-duration:.001ms!important}
}