/* Hallmark · macrostructure: JMF tools mockup, LG calculator pattern (inputs card + sticky dark results), JMF tokens */
:root{--red:#c8102e;--red-d:#a30d25;--ink:#0a0a0a;--cream:#faf9f7;--sand:#ece8e0;--line:#e3ded5;--mut:#5f5a52;--white:#fff;--ok:#1d7a3e}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:16px/1.6 Roboto,system-ui,-apple-system,Segoe UI,sans-serif}
a{color:inherit}
.mock{background:#111;color:#bbb;font-size:12px;text-align:center;padding:6px 16px;letter-spacing:.02em}
.mock b{color:#fff}
header.nav{border-bottom:1px solid var(--line);background:#fff}
.nav .in{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:28px}
.logo{font-weight:800;letter-spacing:-.02em;font-size:20px;text-decoration:none}
.logo span{color:var(--red)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500}
.nav ul a{text-decoration:none;color:#333}
.nav ul a.on{color:var(--red);box-shadow:inset 0 -2px 0 var(--red);padding-bottom:4px}
.nav .cta{margin-left:auto;background:var(--red);color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:10px 16px;border-radius:4px;white-space:nowrap}
@media(max-width:860px){.nav ul{display:none}}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.eyebrow{color:var(--red);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
h1{font-size:clamp(32px,4.4vw,50px);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px;font-weight:800}
h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.01em;margin:0 0 14px;font-weight:800}
h3{font-size:18px;margin:0 0 6px;font-weight:700}
.lede{font-size:18px;color:#3a3630;max-width:640px;margin:0}
section{padding:56px 0}
.band{background:var(--cream)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:0;border-radius:4px;font:700 15px Roboto,sans-serif;padding:14px 20px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--red-d)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
footer{background:var(--ink);color:#bdb8b0;padding:40px 0;font-size:14px}
footer .in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
footer b{color:#fff}
@media(max-width:700px){footer .in{grid-template-columns:1fr}}
/* number field (pattern: 21st.dev coss.com/number-field) */
.nf{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:6px;background:#fff;overflow:hidden}
.nf:focus-within{border-color:var(--ink)}
.nf button{width:40px;border:0;background:var(--cream);font:600 18px Roboto,sans-serif;cursor:pointer;color:#333}
.nf button:hover{background:var(--sand)}
.nf input{flex:1;min-width:0;width:100%;border:0;text-align:center;font:600 18px Roboto,sans-serif;padding:10px 4px;font-variant-numeric:tabular-nums;outline:none}
.nf .u{align-self:center;padding:0 10px 0 0;color:var(--mut);font-size:13px}
label.l{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4a453e;margin:0 0 6px}
/* segmented control */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--cream);border:1.5px solid var(--line);border-radius:6px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;border-radius:4px;padding:10px 6px;font:600 14px Roboto,sans-serif;cursor:pointer;color:#4a453e}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}