/* Denial Decoder.
   Dedupe declaration lives in runs/2026-08-18b/design-thesis.md — this palette, skeleton and
   motion language are deliberately unlike EPR Radar's (no amber, no map, no scan, no split hero).
   Baseline rule as of 2026-08-18: zero rotated elements, zero infinite animations. */
:root{
  --paper:#FBFCFD;      /* clinical white */
  --ink:#12243A;        /* ink blue */
  --ink-soft:#48607C;
  --line:#DFE6EE;
  --signal:#C2410C;     /* the single signal colour: denial */
  --ok:#0F6E4F;
  --grid:rgba(18,36,58,.045);
  --radius:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;
}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 28px}

/* ── head ───────────────────────────────────────────── */
.top{border-bottom:1px solid var(--line);background:rgba(251,252,253,.9);
     backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.top .wrap{display:flex;align-items:center;gap:16px;height:60px}
.mark{font-weight:700;letter-spacing:-.02em}
.mark span{color:var(--signal)}
.spacer{flex:1}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.langs button{border:0;background:transparent;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink-soft)}
.langs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.top a.signin{font-size:14px;text-decoration:none;color:var(--ink-soft)}
.top a.signin:hover{color:var(--ink)}

/* ── hero: before / after, not tool-as-hero ───────────
   Craft floor is https://tools.tjnovaltd.com/api-bill-shield/ — a display headline with real
   presence, one typeface, generous vertical rhythm. The first version of this page read like a
   form: 52px left-aligned heading, 64px of air, everything the same size. */
.hero{padding:clamp(72px,11vh,132px) 0 clamp(48px,7vh,72px);text-align:center}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);font-weight:700}
h1{font-size:clamp(46px,8.4vw,104px);line-height:.99;letter-spacing:-.042em;font-weight:620;
   margin:20px auto 26px;max-width:15ch}
.lede{font-size:clamp(17px,1.5vw,21px);color:var(--ink-soft);max-width:62ch;margin:0 auto;line-height:1.55}

/* the before/after is the proof, so it gets the width and the weight */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,34px);align-items:stretch;
  margin:clamp(38px,6vh,64px) 0 0;text-align:left}
.slip{border:1px solid var(--line);border-radius:14px;background:#fff;padding:22px 24px;
  box-shadow:0 1px 0 rgba(18,36,58,.03),0 12px 32px -18px rgba(18,36,58,.22)}
.slip.before{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;line-height:2.1;
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.slip.after strong{display:block;font-size:15px;font-weight:600;margin-bottom:10px;line-height:1.45}
.slip.after strong:last-child{margin-bottom:0}
.slip.after em{font-style:normal;color:var(--signal);font-weight:700}
.arrow{color:var(--line);font-size:26px;display:flex;align-items:center}
.honesty{font-size:13px;color:var(--ink-soft);margin-top:22px;text-align:center}

/* ── tool ───────────────────────────────────────────── */
.tool{border:1px solid var(--line);border-radius:14px;background:#fff;padding:22px;margin:14px 0 8px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field small{display:block;color:var(--ink-soft);font-size:12px;margin-top:5px}
input,textarea,select{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink)}
textarea{resize:vertical;min-height:78px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:inherit;
  font-weight:600;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink)}
.btn+.btn{margin-left:8px}

/* the clock is the one thing that costs real money, so it is set at display size */
.deadline{border:1px solid #CFE4DA;background:#F3F8F6;padding:20px 24px;border-radius:12px;
  font-size:clamp(18px,2.2vw,26px);line-height:1.3;letter-spacing:-.02em;font-weight:620;margin:0 0 20px}
.deadline.urgent{border-color:#F3D6C6;background:#FDF3EE;color:var(--signal)}
.summary{font-size:13px;color:var(--ink-soft);margin:0 0 14px}

/* motion language: lines settling in, one after another. No loops, no rotation. */
@keyframes settle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.code-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px 18px;
  margin-bottom:12px;animation:settle .34s ease-out both}
@media(prefers-reduced-motion:reduce){.code-card{animation:none}}
.code-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.code-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:15px}
.kind{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft)}
.k-appeal{background:#FDF3EE;color:var(--signal);border-color:#F3D6C6}
.k-correct{background:#EEF4FB;color:#1D4E89;border-color:#CFE0F2}
.k-patient{background:#F2F6F4;color:var(--ok);border-color:#CFE4DA}
.k-unknown{background:#F6F7F9}
.code-meaning{margin:0 0 8px}
.code-fix{margin:0;font-size:14px;color:var(--ink-soft)}
.fix-label{display:inline-block;font-weight:700;color:var(--ink);margin-right:6px}

/* ── sections ───────────────────────────────────────── */
section.band{padding:clamp(64px,9vh,104px) 0;border-top:1px solid var(--line)}
.sec-index{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:700;display:block;margin-bottom:14px}
h2{font-size:clamp(28px,4.2vw,46px);line-height:1.06;letter-spacing:-.032em;font-weight:620;
   margin:0 0 20px;max-width:20ch}
h3{font-size:17px;font-weight:650;margin:0 0 8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,54px)}
/* the four numbers are the argument, so they are set at display size, not caption size */
.fact{border-top:1px solid var(--line);padding-top:16px;margin-bottom:26px}
.fact strong{display:block;font-size:clamp(34px,4.4vw,52px);line-height:1;letter-spacing:-.035em;
  font-weight:620;margin-bottom:8px}
.fact span{font-size:14px;color:var(--ink-soft);line-height:1.5;display:block;max-width:40ch}
.cannot li{margin-bottom:8px}
.price{border:1px solid var(--line);border-radius:14px;background:#fff;padding:22px;max-width:520px}
.price .amount{font-size:34px;font-weight:700;letter-spacing:-.02em}
.src{font-size:13px;color:var(--ink-soft)}
.src a{color:var(--ink)}
footer.site{border-top:1px solid var(--line);padding:28px 0;font-size:13px;color:var(--ink-soft)}

@media(max-width:720px){
  .compare{grid-template-columns:1fr;gap:10px}
  .arrow{transform:none;text-align:center}
  .row,.two{grid-template-columns:1fr}
  .hero{padding:40px 0 28px}
}

/* Grok 以买家身份走完一遍后加的三块（2026-08-18）：
   信任要在动手之前给到，粘贴规则要在输入框之前给到，主体身份要在正文里能读到。 */
.tool-badge{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--ok);margin:0 0 14px}
.paste-rule{font-size:13px;color:var(--ink-soft);background:#F6F8FA;border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;margin:0 0 10px;line-height:1.5}
.who{font-size:14px;color:var(--ink-soft);max-width:70ch;margin:0 0 22px;line-height:1.6}