/* billfox design tokens — locked light, violet lead (from design/mockup_v1.html) */
:root{
  color-scheme:light only;
  --bg:#FCFCFD; --card:#FFFFFF; --ink:#2D2650; --mut:#7B76A0;
  --field:#F4F4F8; --chip:#EFEFF5; --line:#E8E8EF;
  --vio:#5B2EDD; --vio-2:#8B5CF6; --vio-soft:#F3EEFE; --vio-line:#E2D6FB;
  --rose:#E11D63; --rose-soft:#FDEBF2;
  --teal:#0796B4; --teal-soft:#E4F6FA;
  --amber:#D97D06; --amber-soft:#FCF1DE;
  --money:#059557; --money-soft:#E4F7EE; --money-deep:#046B3F;
  --shadow:0 14px 40px rgba(25,24,38,.09), 0 2px 8px rgba(25,24,38,.05);
  --shadow-sm:0 3px 14px rgba(25,24,38,.07);
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink); margin:0;
  font-family:"Avenir Next","Avenir",-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:15.5px; line-height:1.55;
}
.money{font-variant-numeric:tabular-nums}
.cap{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); font-weight:600}
a{color:var(--vio)}

header.site{
  background:
    radial-gradient(60% 120% at 90% -10%, var(--vio-soft) 0%, transparent 60%),
    radial-gradient(50% 100% at 0% 110%, var(--teal-soft) 0%, transparent 55%),
    var(--bg);
  border-bottom:1px solid var(--line);
  padding:34px 24px 40px;
}
header.site .inner{max-width:760px; margin:0 auto}
.topline{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.fox{
  width:36px; height:36px; border-radius:12px; background:#F1740F;
  display:flex; align-items:center; justify-content:center; flex:none;
  box-shadow:0 6px 16px rgba(241,116,15,.35);
}
.brand b{font-size:20px; font-weight:700}
.langs{display:flex; gap:2px}
.langs a{
  font-size:12px; font-weight:700; text-decoration:none; color:var(--mut);
  padding:5px 9px; border-radius:9px; text-transform:uppercase; letter-spacing:.05em;
}
.langs a.on{background:var(--vio); color:#fff}
.mainnav{display:flex; gap:4px; margin-bottom:22px; flex-wrap:wrap}
.mainnav a{
  font-size:13.5px; font-weight:600; text-decoration:none; color:var(--mut);
  padding:7px 14px; border-radius:999px;
}
.mainnav a.on{background:var(--vio-soft); color:var(--vio)}
.mainnav a:hover{color:var(--vio)}
.mainnav a.primary{background:linear-gradient(135deg,var(--vio),var(--vio-2)); color:#fff}
.mainnav a.primary.on, .mainnav a.primary:hover{color:#fff; opacity:.92}
.skiplink{
  background:none; border:0; color:var(--mut); font:inherit; font-size:13px;
  text-decoration:underline; cursor:pointer; margin-top:14px; padding:0;
}
.skiplink:hover{color:var(--vio)}
header.site h1{font-size:clamp(26px,4.5vw,38px); font-weight:700; letter-spacing:-.025em; margin:0 0 8px; text-wrap:balance}
header.site h1 em{font-style:normal; color:var(--vio)}
header.site p{margin:0; color:var(--mut); max-width:56ch}

main{max-width:760px; margin:0 auto; padding:28px 24px 40px; display:flex; flex-direction:column; gap:20px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-sm); padding:22px;
}

/* form */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){ .grid{grid-template-columns:1fr} }
.fieldset{display:flex; flex-direction:column; gap:6px}
.fieldset label{font-weight:600; font-size:14px}
.fieldset .hint{color:var(--mut); font-size:12.5px}
input[type=number], input[type=text], select{
  border:1.5px solid var(--line); background:var(--field); border-radius:13px;
  padding:12px 14px; font:inherit; font-weight:600; color:var(--ink); width:100%;
}
input:focus-visible, select:focus-visible, button:focus-visible{outline:2px solid var(--vio); outline-offset:2px}
.resolved{color:var(--money-deep); font-size:13px; font-weight:600; min-height:18px}
.resolved.err{color:var(--rose)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px;
  font:inherit; font-size:14px; font-weight:600; padding:8px 15px; cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--vio); border-color:var(--vio); color:#fff}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px}
.check input{width:18px; height:18px; margin-top:2px; accent-color:var(--vio)}
.btn{
  font:inherit; font-weight:700; font-size:16px; cursor:pointer; border:0;
  padding:15px 18px; border-radius:16px; width:100%;
  background:linear-gradient(135deg,var(--vio) 0%,var(--vio-2) 100%);
  color:#fff; box-shadow:0 8px 20px rgba(91,46,221,.30);
}
.btn:disabled{opacity:.5; cursor:default}
@media (prefers-reduced-motion: no-preference){
  .btn{transition:transform .12s ease}
  .btn:hover{transform:translateY(-1px)}
}

/* results */
.banner{
  background:linear-gradient(135deg,var(--vio-soft) 0%,#FBF9FF 70%);
  border:1.5px solid var(--vio-line); border-radius:20px; padding:18px 20px;
}
.banner .big{font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1.15; margin:2px 0}
.banner .big em{font-style:normal; color:var(--vio)}
.banner p{margin:2px 0 0; font-size:13px; color:var(--mut)}
.trust{display:flex; justify-content:space-between; font-size:12px; color:var(--mut); font-weight:600; padding:2px 4px}
.plans{display:flex; flex-direction:column; gap:10px}
.plan{
  background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  padding:13px 15px; display:flex; align-items:center; gap:12px;
}
.plan.best{border-color:var(--vio); box-shadow:var(--shadow-sm); position:relative}
.plan.best::before{
  content:attr(data-bestlabel); position:absolute; top:-9px; left:14px;
  font-size:9.5px; font-weight:800; letter-spacing:.08em; padding:2px 8px; border-radius:999px;
  background:linear-gradient(135deg,var(--vio),var(--vio-2)); color:#fff;
}
.medal{
  width:30px; height:30px; border-radius:10px; background:var(--field); color:var(--mut);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:none;
}
.plan.best .medal{background:linear-gradient(135deg,var(--vio),var(--vio-2)); color:#fff}
.plan .who{flex:1; min-width:0}
.plan .who b{display:block; font-weight:700; font-size:14.5px}
.plan .who span{font-size:12px; color:var(--mut)}
.pill{font-size:10.5px; font-weight:700; letter-spacing:.06em; border-radius:999px; padding:3px 9px; white-space:nowrap}
.pill.hmo{background:var(--teal-soft); color:var(--teal)}
.pill.gp{background:var(--vio-soft); color:var(--vio)}
.pill.telmed{background:var(--amber-soft); color:var(--amber)}
.pill.standard{background:var(--rose-soft); color:var(--rose)}
.plan .price{text-align:right}
.plan .price b{display:block; font-weight:700; font-size:15.5px}
.plan .price span{font-size:12px; color:var(--money-deep); font-weight:700}

/* franchise check */
.fr-note{font-size:13px; color:var(--mut); margin-top:10px}
.fr-flag{
  border-radius:14px; padding:12px 15px; font-size:14px; font-weight:600; margin-bottom:12px;
}
.fr-flag.better{background:var(--money-soft); color:var(--money-deep)}
.fr-flag.ok{background:var(--chip); color:var(--mut)}
table.fr{width:100%; border-collapse:collapse; font-size:14px}
table.fr th{text-align:left; color:var(--mut); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; padding:6px 8px; border-bottom:1px solid var(--line)}
table.fr td{padding:8px; border-bottom:1px solid var(--line)}
table.fr tr.best td{background:var(--money-soft); font-weight:700}
table.fr td:last-child, table.fr th:last-child{text-align:right}

/* cheat sheet */
.cheat{
  background:linear-gradient(135deg,var(--teal-soft) 0%,#F4FBFD 70%);
  border:1.5px solid #C8E9F1; border-radius:16px; padding:15px 17px; font-size:13.5px;
}
.cheat .cap{color:var(--teal); display:block; margin-bottom:8px}
.cheat dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 16px}
.cheat dt{color:var(--mut)} .cheat dd{margin:0; font-weight:700}

/* landing */
.btn.ghostlink{width:auto; display:inline-block; text-decoration:none; background:var(--card); color:var(--vio); border:1.5px solid var(--vio-line); box-shadow:none}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:12px}
.step-card{display:flex; flex-direction:column; gap:8px}
.step-card b{font-size:15.5px}
.step-card p{margin:0; color:var(--mut); font-size:13.5px}
.step-n{width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px}
.catlink{text-decoration:none; color:inherit}
.catlink:hover{border-color:var(--vio)}
.hue-vio-bg{background:var(--vio-soft); color:var(--vio)}
.hue-teal-bg{background:var(--teal-soft); color:var(--teal)}
.hue-money-bg{background:var(--money-soft); color:var(--money-deep)}

/* upload */
.upload{
  border:1.5px dashed var(--vio-line); background:var(--vio-soft); border-radius:16px;
  padding:14px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-bottom:16px;
}
.upload .tx{flex:1; min-width:200px}
.upload .tx b{font-size:14.5px; display:block}
.upload .tx span{font-size:12.5px; color:var(--mut)}
.upload input[type=file]{display:none}
.upload .btn{width:auto; padding:10px 16px; font-size:14px}
.upload .status{font-size:13px; font-weight:600; color:var(--vio); min-height:18px; width:100%}
.upload .status.err{color:var(--rose)}

footer.site{max-width:760px; margin:0 auto; padding:0 24px 56px; color:var(--mut); font-size:13px}
footer.site .cols{
  border-top:1px solid var(--line); padding-top:24px;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px;
}
@media (max-width:560px){ footer.site .cols{grid-template-columns:1fr} }
footer.site .col{display:flex; flex-direction:column; gap:8px}
footer.site .col a{color:var(--mut); text-decoration:none; font-size:13px}
footer.site .col a:hover{color:var(--vio)}
footer.site .brand.small{display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none}
footer.site .box{border-top:1px solid var(--line); padding-top:16px; display:flex; justify-content:space-between; gap:6px; flex-wrap:wrap}
.hidden{display:none}