:root{
  --green:#1B5E20; --green-mid:#439639; --pale:#EBF7E8; --orange:#EF6C00;
  --slate:#2D3A40; --ink:#1a1f22; --line:#d7e3d5; --ok:#2e7d32; --err:#c62828;
  --field:#ffffff; --muted:#6b776d;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--pale); color:var(--ink); line-height:1.5;
  min-height:100dvh; display:flex; align-items:flex-start; justify-content:center;
  padding:20px 14px 60px; -webkit-text-size-adjust:100%;
}
.card{
  width:100%; max-width:460px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:22px 20px; box-shadow:0 8px 30px rgba(27,94,32,.10);
}
.brand{border-bottom:3px solid var(--green); padding-bottom:10px; margin-bottom:14px}
.wordmark{font-size:1.45rem; font-weight:800; letter-spacing:.5px; color:var(--green)}
.sub{font-size:.9rem; color:var(--slate); font-weight:600; margin-top:2px}

.steps{display:flex; gap:6px; margin-bottom:14px}
.step{flex:1; font-size:.72rem; font-weight:700; color:var(--slate); text-align:center;
  padding:7px 4px 8px; border-radius:9px; background:#eef3ec; border:1px solid var(--line)}
.step.is-active{color:#fff; background:var(--green); border-color:var(--green)}
.step.is-done{color:var(--green); background:var(--pale); border-color:var(--green-mid)}

.assure{background:var(--pale); border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; margin:0 0 14px; font-size:.86rem; color:var(--slate)}

.panel{display:none}
.panel.is-active{display:block; animation:fade .18s ease}
@keyframes fade{from{opacity:.4}to{opacity:1}}

.intro{background:#fbfff9; border-left:3px solid var(--green-mid); padding:9px 12px;
  margin:0 0 12px; font-size:.92rem; border-radius:0 8px 8px 0}
.lead{font-size:.95rem; font-weight:600; color:var(--slate); margin:0 0 12px}
.muted{color:var(--muted)}

.terms{height:clamp(180px,42vh,360px); overflow-y:auto; border:1px solid var(--line);
  border-radius:10px; padding:14px; background:#fcfdfc; font-size:.86rem;
  -webkit-overflow-scrolling:touch}
.terms h3{font-size:.9rem; color:var(--green); margin:14px 0 5px}
.terms h3:first-child{margin-top:0}
.terms p{margin:0 0 9px}
.scrollhint{font-size:.8rem; color:var(--orange); font-weight:700; text-align:center; margin:9px 0}
.scrollhint.hidden{display:none}

.field{display:block; margin-bottom:12px}
.field.hidden{display:none}
.field span{display:block; font-size:.82rem; font-weight:700; color:var(--slate); margin-bottom:4px}
.field span em{font-weight:400; color:var(--muted); font-style:normal}
.field input,.field select{width:100%; padding:12px; border:1px solid var(--line);
  border-radius:10px; font-size:1rem; font-family:inherit; background:var(--field); color:var(--ink)}
.field input:focus,.field select:focus{outline:none; border-color:var(--green-mid);
  box-shadow:0 0 0 3px rgba(67,150,57,.18)}
.row{display:flex; gap:9px; flex-wrap:wrap}
.grow{flex:1 1 120px}
.state{flex:0 0 66px} .zip{flex:0 0 96px}

.zipwarn{font-size:.82rem; font-weight:700; color:var(--orange); margin:-4px 0 12px}
.zipwarn.hidden{display:none}

.tinblock{border:1px solid var(--green-mid); border-radius:10px; padding:12px; margin-bottom:14px;
  background:#fbfff9}
.tinlabel{display:block; font-size:.82rem; font-weight:700; color:var(--slate); margin-bottom:7px}
.tintoggle{display:flex; gap:0; margin-bottom:9px; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.tintab{flex:1; padding:9px; border:0; background:#eef3ec; font-weight:700; font-size:.86rem;
  color:var(--slate); cursor:pointer}
.tintab.is-active{background:var(--green); color:#fff}
.tinblock input{width:100%; padding:12px; border:1px solid var(--line); border-radius:9px;
  font-size:1.05rem; letter-spacing:1px; background:var(--field); color:var(--ink)}
.tinnote{font-size:.76rem; color:var(--muted); margin:8px 0 0}

.cert{background:var(--pale); border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  margin-bottom:14px; font-size:.86rem; color:var(--ink)}
.cert p{margin:0 0 5px}
.cert ul{margin:0; padding-left:18px}
.cert li{margin-bottom:4px}

.siglabel{display:block; font-size:.82rem; font-weight:700; color:var(--slate); margin-bottom:5px}
.sigwrap{position:relative; margin-bottom:12px}
#sigpad{width:100%; height:clamp(120px,22vh,160px); border:2px dashed var(--green-mid);
  border-radius:10px; background:#fff; touch-action:none; display:block}
.clearsig{position:absolute; top:7px; right:7px; border:1.5px solid var(--orange); background:transparent;
  border-radius:7px; padding:4px 10px; font-size:.76rem; font-weight:800; color:var(--orange); cursor:pointer}

.check{display:flex; gap:9px; align-items:flex-start; font-size:.88rem; margin-bottom:14px; cursor:pointer}
.check input{margin-top:3px; width:18px; height:18px; flex:none}

/* Buttons: orange, high-contrast in both themes. Primary = solid orange; secondary = orange outline. */
button.primary,button.ghost{padding:14px; border-radius:11px; font-size:1rem; font-weight:800;
  font-family:inherit; cursor:pointer}
button.primary{width:100%; color:#fff; background:var(--orange); border:2px solid var(--orange); letter-spacing:.3px}
button.primary:disabled{background:#d7ded8; border-color:#d7ded8; color:#8b968d; cursor:not-allowed}
button.primary:not(:disabled):active{transform:translateY(1px)}
button.ghost{background:transparent; color:var(--orange); border:2px solid var(--orange)}
button.ghost:active{transform:translateY(1px)}
.btnrow{display:flex; gap:10px}
.btnrow .ghost{flex:none; width:96px}
.btnrow .primary{flex:1; width:auto}

.status,.err{font-size:.9rem; font-weight:600; min-height:1.1em; margin:12px 0 0; text-align:center}
.status.working{color:var(--slate)} .status.ok{color:var(--ok)} .status.err,.err{color:var(--err)}

.success-box{text-align:center; padding:20px 8px}
.success-box .big{font-size:2.4rem}

.foot{margin-top:18px; padding-top:12px; border-top:1px solid var(--line);
  font-size:.78rem; color:#7c8a80; text-align:center}
.foot p{margin:2px 0}

/* Landscape: fill the wider screen instead of a narrow centered card. */
@media (orientation:landscape){
  .card{max-width:min(94vw,860px)}
  /* pair the single fields into two columns so the width is used, not stretched.
     Gated on .is-active so it never overrides the display:none that hides this step. */
  #panel-2.is-active{display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start}
  #panel-2 .lead,#panel-2 .tinblock,#panel-2 .btnrow,#panel-2 .zipwarn,
  #panel-2 .row{grid-column:1 / -1}
}
/* Short viewports (landscape phones): tighten so it fits and scrolls cleanly. */
@media (max-height:540px){
  body{padding:12px 14px 34px}
  .card{padding:16px 20px}
  .terms{height:58vh}
  #sigpad{height:104px}
}

@media (prefers-color-scheme:dark){
  :root{--pale:#12211a; --line:#2c3a30; --ink:#e8f0ea; --field:#0f1a14; --muted:#8a988c; --slate:#b8c6ba}
  body{background:#0c1510}
  .card{background:#14201a; border-color:#243228}
  .terms{background:#0f1a14} .intro,.tinblock{background:#0f1a14}
  .step{background:#182620; color:var(--ink)} .tintab{background:#0f1a14; color:var(--ink)}
  #sigpad{background:#0f1a14}
  .wordmark{color:#8ed08a}
  button.primary:disabled{background:#2a3830; border-color:#2a3830; color:#79867b}
}