:root { --paper:#f4f7f5; --white:#fff; --ink:#153638; --muted:#46625f; --line:#d4e1dd; --accent:#12574f; --accent-dark:#083f39; --light:#e6f2ed; --warm:#ffefd1; --warm-ink:#714813; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 system-ui,sans-serif; }
.shell { width:min(880px, calc(100% - 40px)); margin-inline:auto; }
.masthead { background:var(--white); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); text-decoration:none; line-height:1.2; }
.brand small { display:block; margin-top:4px; font-size:.68rem; color:var(--muted); letter-spacing:.1em; }
.monogram { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--accent-dark); color:white; font-size:1.2rem; }
.demo-badge { background:var(--warm); color:var(--warm-ink); border-radius:999px; padding:4px 11px; font-size:.82rem; font-weight:700; white-space:nowrap; }
.page-heading { margin:48px 0 22px; }
.eyebrow { margin:0 0 6px; color:var(--accent); font-size:.76rem; letter-spacing:.12em; font-weight:800; }
h1,h2,h3 { line-height:1.16; margin:0 0 10px; letter-spacing:-.02em; }
h1 { font-size:clamp(2.15rem, 6vw, 3.4rem); }
h2 { font-size:clamp(1.45rem, 4vw, 1.95rem); }
h3 { font-size:1.05rem; }
p { margin:0 0 13px; }
.lede,.muted { color:var(--muted); }
.lede { font-size:1.12rem; }
.muted { font-size:.91rem; }
.demo-note { border:1px solid #e4cda5; background:#fff8eb; color:var(--warm-ink); padding:12px 16px; margin-bottom:17px; border-radius:9px; }
.panel { background:var(--white); border:1px solid var(--line); padding:clamp(18px, 4vw, 32px); border-radius:17px; }
label,.item-label { display:block; font-weight:700; margin:0 0 4px; }
input:not([type=radio]) { min-width:0; width:100%; padding:10px 12px; border:1px solid #8ba5a0; border-radius:7px; background:var(--white); color:var(--ink); font:inherit; }
.form-row,.inbox-code,.office-actions,.panel-heading { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.form-row input { flex:1 1 230px; }
button { background:var(--accent); color:var(--white); border:1px solid transparent; border-radius:7px; font:700 .92rem/1.2 system-ui,sans-serif; padding:12px 15px; min-height:44px; cursor:pointer; }
button:hover { background:var(--accent-dark); }
button:disabled { opacity:.58; cursor:default; }
.secondary,.text-button { background:var(--light); color:var(--accent-dark); }
.secondary:hover,.text-button:hover { background:#d1e7df; }
.text-button { margin-top:14px; }
:focus-visible { outline:3px solid #965914; outline-offset:3px; }
a { color:var(--accent-dark); font-weight:700; }
.inbox { margin:20px 0; padding:16px; background:var(--paper); border:1px solid var(--line); border-radius:10px; }
.inbox-code { margin-top:16px; justify-content:space-between; }
output { display:block; font-size:1.45rem; letter-spacing:.11em; font-variant-numeric:tabular-nums; }
.panel-heading { justify-content:space-between; }
progress { width:100%; height:10px; accent-color:var(--accent); }
.checklist { list-style:none; padding:0; margin:13px 0 0; }
.checklist li { border-top:1px solid var(--line); padding:14px 0; }
.item-heading { display:flex; justify-content:space-between; gap:12px; }
.item-state { color:var(--muted); font-size:.86rem; font-weight:700; white-space:nowrap; }
.item-state.received { color:var(--accent); }
.item-body { margin:6px 0 0; }
.item-body p { margin-bottom:9px; }
.choice { display:inline-flex; gap:5px; margin-right:14px; font-weight:500; }
.status { min-height:1.55em; margin:12px 0; font-weight:650; }
.status.error { color:#922a20; }
footer { color:var(--muted); font-size:.84rem; padding:14px 0 35px; }
footer span { margin-inline:6px; }
@media(max-width:520px) { .shell { width:calc(100% - 28px); } .page-heading { margin-top:32px; } .form-row button { flex:1 1 auto; } }