:root{color-scheme:light;--ink:#193b36;--text:#344f4b;--green:#1c5a48;--soft:#eff5f0;--line:#d9e3dd;--amber:#f2e5bd;--orange:#775a14;--paper:#fffdf8;--red:#922f27}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--paper);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}header,main,footer{max-width:1220px;margin:auto}header{padding:24px 32px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}a{color:var(--green);text-underline-offset:3px}.brand{font-size:23px;font-weight:800;text-decoration:none;color:var(--ink)}.brand span{font-weight:450;margin-left:9px}nav{margin-left:auto;display:flex;gap:24px;font-size:14px}nav a{text-decoration:none}.prototype{font-size:12px;border:1px solid var(--line);border-radius:20px;padding:4px 10px}main{padding:0 32px}h1,h2,h3{color:var(--ink);line-height:1.15}h1{font-size:clamp(36px,4.5vw,58px);font-weight:650;letter-spacing:-2px;margin:12px 0 24px}h2{font-size:28px;letter-spacing:-.6px;margin:7px 0 18px}h3{font-size:18px;letter-spacing:-.2px}.intro{display:grid;grid-template-columns:1.5fr 1fr;gap:80px;padding:70px 0 60px;align-items:center}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin:0 0 10px}.lead{font-size:19px;max-width:590px}.example{background:var(--soft);border:1px solid var(--line);padding:32px;border-radius:12px}.example h2{font-size:27px}.badge{display:inline-block;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:650;background:#eee;color:#444;white-space:nowrap}.badge.partial,.badge.returned{background:var(--amber);color:var(--orange)}.badge.accepted,.badge.waived,.badge.ready{background:#dceee0;color:#225634}.badge.received,.badge.review{background:#e4eaf6;color:#334c76}.badge.missing{background:#f1e6df;color:#6d493a}.badge.late{background:#f7dfdb;color:var(--red)}button,.link-button{font:inherit;cursor:pointer;border:1px solid #c2d0c7;border-radius:6px;background:white;color:var(--ink);padding:8px 13px;font-size:14px;text-decoration:none;display:inline-block}button:hover,.link-button:hover{background:var(--soft)}button.primary,.link-button.primary{background:var(--green);color:white;border-color:var(--green)}button.primary:hover,.link-button.primary:hover{background:#124533}button:disabled{opacity:.55;cursor:default}button.danger{color:var(--red)}.link-button{margin:12px 0 0;padding:11px 18px}.link-button span{padding-left:18px}select,input{font:inherit;font-size:14px;padding:8px 10px;border-radius:6px;border:1px solid #bacbc1;background:white;color:var(--ink)}input[type=date]{max-width:155px}input[type=text]{width:100%;max-width:330px}label{font-size:13px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-top h2,.section-top h3{margin:0}.section-top.small{margin-top:27px;margin-bottom:13px}.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center}#workspace{scroll-margin-top:20px;border-top:1px solid var(--line);padding:35px 0 45px}.notice{font-size:13px;background:#f4f1e7;border-left:3px solid #bca96c;padding:11px 14px;border-radius:0 5px 5px 0}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:23px}.metric{border:1px solid var(--line);border-radius:8px;padding:17px;background:white}.metric strong{display:block;font-size:29px;line-height:1.1;color:var(--ink);font-weight:600}.metric span{font-size:12px}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}table{border-collapse:collapse;width:100%;min-width:720px;background:white;text-align:left}th{font-size:12px;padding:13px 18px;background:var(--soft);color:var(--ink)}td{padding:18px;border-top:1px solid var(--line);font-size:14px}td strong{color:var(--ink)}.muted{font-size:12px;color:#586e67;display:block}.selected td{background:#f8fbf8}.detail{margin-top:24px;padding:25px;border:1px solid var(--line);border-radius:10px;background:white}.detail-head{display:flex;align-items:start;justify-content:space-between;gap:18px}.detail h3{margin:0 0 8px}.detail .lead{font-size:15px}.items{display:grid;gap:12px;margin:20px 0}.item{border:1px solid var(--line);border-radius:8px;padding:17px}.item-top{display:flex;justify-content:space-between;gap:12px}.item strong{color:var(--ink)}.file-info{font-size:13px;overflow-wrap:anywhere;margin:8px 0}.item .toolbar{margin-top:12px}.reason{font-size:13px;margin:9px 0}.inline-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:12px}.config{border-top:1px solid var(--line);padding-top:15px}.preview{background:var(--soft);padding:16px;border:1px solid var(--line);border-radius:8px}.preview pre{white-space:pre-wrap;font:14px/1.6 system-ui,sans-serif}.message{font-size:14px;padding:10px 0;min-height:42px;color:var(--green)}.message.error{color:var(--red)}.audit{font-size:13px;border-top:1px solid var(--line);padding-top:13px}.audit ol{max-height:190px;overflow:auto;padding-left:20px}.offer{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;border-top:1px solid var(--line);padding:50px 0}.offer h2{font-size:34px}.price{border:1px solid var(--line);padding:27px;border-radius:10px;background:var(--soft)}.amount{font-size:45px;color:var(--ink);margin:12px 0}.amount span{font-size:15px;margin-left:4px}.price p{font-size:14px}.price .amount{font-size:45px}.validation{padding:40px 0;border-top:1px solid var(--line)}.columns{display:grid;grid-template-columns:1fr 1fr;gap:60px}footer{padding:24px 32px;border-top:1px solid var(--line);font-size:12px;display:flex;justify-content:space-between;gap:20px}:focus-visible{outline:3px solid #c08b34;outline-offset:3px}[hidden]{display:none!important}
@media(max-width:800px){header{padding:18px 20px;flex-wrap:wrap;gap:12px}.brand{font-size:21px}nav{order:3;margin-left:0;width:100%}.prototype{margin-left:auto}main{padding:0 20px}.intro{grid-template-columns:1fr;gap:30px;padding:35px 0}.example{padding:24px}h1{letter-spacing:-1.2px}.section-top,.detail-head{align-items:stretch;flex-direction:column;gap:14px}.metrics{grid-template-columns:repeat(2,1fr)}.detail{padding:17px}.item-top{align-items:start;flex-direction:column}.offer,.columns{grid-template-columns:1fr;gap:24px}.offer{padding:35px 0}.offer h2{font-size:29px}footer{padding:20px;flex-direction:column;gap:6px}.toolbar button{min-height:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Public sample: use the existing Topo green, with readable dark button text. */
:root{--ink:#19251b;--text:#344a38;--green:#35651d;--soft:#edf5e5;--line:#ccd8c7;--paper:#f8faf6}
.brand{display:flex;align-items:center}.brand::before{content:"";width:36px;height:36px;margin-right:10px;border-radius:9px;background:center/contain no-repeat url(https://toposoftware.co.za/topo-mouse-avatar.png)}
button.primary,.link-button.primary{background:#77bb3f;color:#16290b;border-color:#77bb3f;font-weight:700}button.primary:hover,.link-button.primary:hover{background:#8bce54}
button,.toolbar button,select,.link-button{min-height:44px}button,input,select{max-width:100%}.badge{white-space:normal}.intro{gap:40px;padding:48px 0}.example ol{padding-left:20px}.example li{margin:10px 0}
.skip{position:absolute;top:-100px;left:16px;padding:12px;background:white;z-index:2}.skip:focus{top:12px}
.validation{max-width:800px}.validation details{border-bottom:1px solid var(--line);padding:15px 0}.validation summary{cursor:pointer;font-weight:650;min-height:30px}.validation dt{font-weight:650;margin-top:14px}.validation dd{margin:4px 0 0}.message.error{padding:14px;background:#fff0ed;border-left:3px solid var(--red)}
#client-title{scroll-margin-top:24px}.price .amount{margin:12px 0}.muted a{color:inherit}a{overflow-wrap:anywhere}.item,.detail,.example{min-width:0}
@media(max-width:720px){.intro{padding:30px 0;gap:20px}.example{padding:20px}.table-wrap{border:0;overflow:visible}table,tbody{display:block;min-width:0}thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}tr{display:grid;grid-template-columns:1fr auto;border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:15px;gap:10px;background:white}td{display:block;border:0;padding:0}td:nth-child(2),td:nth-child(4){display:none}td:nth-child(3){grid-column:1;grid-row:2}td:last-child{grid-column:2;grid-row:1 / span 2;align-self:center}td:last-child button{max-width:120px}.selected td{background:transparent}.selected{border-color:var(--green)}.detail{padding:16px}.offer{gap:20px}.item-top{gap:8px}.brand{font-size:19px}.brand span{margin-left:6px}.section-top .toolbar{gap:8px}input[type=text]{font-size:16px}.metric{padding:13px}h1{font-size:clamp(34px,8vw,48px)}}
@media(max-width:360px){header{padding:16px}main{padding:0 16px}.prototype{font-size:11px;padding:3px 7px}.brand::before{width:28px;height:28px;margin-right:7px}.brand{font-size:17px}.detail,.item{padding:12px}.item .toolbar button{width:100%;text-align:left}td:last-child button{max-width:95px;font-size:13px}.metrics{gap:8px}.intro h1{font-size:34px}}