:root { --fg:#111; --muted:#555; --accent:#0b5cad; --bg:#fff; --line:#d0d0d0; --soft:#f3f7fb; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font: 19px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:var(--fg); background:var(--bg); }
.bar { position:sticky; top:0; background:#1f2a36; color:#fff; padding:10px 16px; font-weight:600; z-index:5; }
.bar .muted { color:#c8d3de; font-weight:400; margin-left:6px; }
.progress { margin-top:8px; }
.progress-track { height:8px; background:#3a4a5c; border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; background:#6fb3ff; width:0; transition:width .25s; }
.p5{width:5%}.p10{width:10%}.p15{width:15%}.p20{width:20%}.p25{width:25%}.p30{width:30%}.p35{width:35%}.p40{width:40%}.p45{width:45%}.p50{width:50%}
.p55{width:55%}.p60{width:60%}.p65{width:65%}.p70{width:70%}.p75{width:75%}.p80{width:80%}.p85{width:85%}.p90{width:90%}.p95{width:95%}.p100{width:100%}
.progress-label { display:block; font-size:.85rem; font-weight:400; color:#dbe5ef; margin-top:4px; }
main { max-width: 720px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
h1 { font-size: 1.6rem; line-height:1.25; margin: .4em 0 .5em; }
.big { font-size: 1.15rem; }
.small { font-size: .95rem; color: var(--muted); }
.small code { word-break: break-all; }
.center { text-align:center; }
.muted { color: var(--muted); }
[hidden] { display:none !important; }
.screen { display:none; } .screen.active { display:block; }
.consent { white-space: pre-wrap; border:1px solid var(--line); border-radius:10px; padding:14px; max-height:45vh; overflow:auto; font-size:1rem; background:#fafafa; }
.check { display:flex; gap:14px; align-items:flex-start; margin:14px 0; font-size:1.08rem; cursor:pointer; }
.check input { width:32px; height:32px; flex:0 0 32px; margin-top:1px; accent-color: var(--accent); }
.check.card { border:2px solid var(--line); border-radius:12px; padding:14px; background:#fff; }
.check.card:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.check.wage { border-style: dashed; }
button, a.button { display:block; width:100%; min-height:56px; font-size:1.2rem; border-radius:12px; margin:12px 0; border:0; cursor:pointer; text-align:center; text-decoration:none; padding:14px; font-family:inherit; }
button.primary, a.button.primary { background:var(--accent); color:#fff; font-weight:700; }
button.primary:disabled { background:#9bb5d1; }
button.secondary, a.button.secondary { background:#eef2f6; color:var(--fg); border:1px solid var(--line); }
button.link { background:none; color:var(--accent); text-decoration:underline; min-height:48px; padding:8px; }
button.link.small-link { font-size:1rem; color:var(--muted); }
button.link.inline { display:inline-block; width:auto; margin:0; min-width:48px; }
.field-label { display:block; font-size:1.1rem; font-weight:600; margin-top:18px; }
input.text, input.code { width:100%; font-size:1.35rem; padding:14px; border:2px solid var(--line); border-radius:10px; margin:6px 0 4px; font-family:inherit; }
input.code { letter-spacing:.4em; text-align:center; font-size:1.8rem; }
input:focus { outline: 3px solid #8cc2ff; border-color: var(--accent); }
.intent { margin:16px 0; padding:14px; border-left:5px solid var(--accent); background:var(--soft); font-size:1.05rem; }
.msg { font-size:1.08rem; color:#a30000; min-height:1.5em; }
.msg.ok { color:#11632b; }
code { font-size:.85rem; }
/* the document itself */
.doc { font-size:1.05rem; line-height:1.6; }
.policy .doc-head { border-bottom:2px solid var(--line); margin-bottom:12px; }
.policy .org { margin:0; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.policy .doc-name { font-size:1.45rem; line-height:1.25; margin:.2em 0 .3em; }
.policy .meta { color:var(--muted); font-size:.95rem; margin:.2em 0 .8em; }
.policy .sec { margin: 0 0 18px; }
.policy h3 { font-size:1.2rem; margin: 1.1em 0 .35em; }
.policy p { margin:.45em 0; }
.policy ul, .policy ol { padding-left:1.4em; margin:.4em 0; }
.policy li { margin:.35em 0; }
.policy .sec.ack { border-top:3px solid var(--fg); padding-top:12px; margin-top:28px; }
.policy .part-title { font-size:1.3rem; line-height:1.3; margin:.2em 0; }
.policy .closing { font-style:italic; }
.policy .draft { font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); padding-top:8px; }
.doc-end { margin-top:20px; border-top:1px solid var(--line); padding-top:8px; }
/* signature */
.tabs { display:flex; gap:8px; }
.tab { flex:1; background:#eef2f6; border:2px solid var(--line); color:var(--fg); margin:8px 0; }
.tab.active { border-color:var(--accent); background:var(--soft); font-weight:700; }
.sig-pad { width:100%; aspect-ratio: 100 / 38; border:2px dashed #8a99a8; border-radius:12px; background:#fff; touch-action:none; display:block; }
.sig-row { display:flex; justify-content:space-between; align-items:center; }
.sig-typed-preview { font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive; font-size:2rem; min-height:1.4em; margin:.3em 0; }
.sig-img { max-width:100%; height:auto; border-bottom:1px solid var(--fg); }
.review dt { font-size:.9rem; color:var(--muted); margin-top:12px; }
.review dd { margin:2px 0 0; font-size:1.08rem; }
.review ul { padding-left:1.2em; margin:4px 0; }