:root{--ground:#f4efe9;--ground-2:#fbf8f4;--edge:#d8cdc0;--text:#2a1016;--text-dim:#6d565b;--slab:#5e1420;--chalk:#fdf6ee;--brass:#d9a327;--on-brass:#3a0b12;--mint:#2f7d52;--coral:#c02a22;--teal:#0c4458}
@media (prefers-color-scheme:dark){:root{--ground:#170a0d;--ground-2:#210f14;--edge:#3d2228;--text:#f7f0ea;--text-dim:#b7999e;--brass:#e6b334;--mint:#4fbd84;--coral:#ff6a5e;--teal:#5fb3cc}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font:1rem/1.55 "Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}
.top{display:flex;align-items:center;justify-content:space-between;padding:0.875rem max(1rem,4vw);border-bottom:1px solid var(--edge);background:var(--ground-2)}
.wm{font-weight:850;font-size:1.5rem;letter-spacing:-.02em;color:var(--text);text-decoration:none}
.wm span{color:var(--wm2,var(--brass))}
.wrap{max-width:61.25rem;margin:0 auto;padding:1.75rem 1rem 3.75rem}
h1{font-size:clamp(1.875rem,5vw,2.875rem);line-height:1.1;margin:.3em 0 .4em;letter-spacing:-.02em}
h2{font-size:1.625rem;margin:1.6em 0 .5em;letter-spacing:-.01em}
p{margin:.5em 0 1em;max-width:62ch}
.lede{font-size:1.188rem;color:var(--text-dim)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.25rem,1fr));gap:1rem;margin-top:1rem}
.card{background:var(--ground-2);border:1px solid var(--edge);border-radius:1rem;padding:1.25rem}
.card h3{margin:.1em 0 .3em;font-size:1.312rem}
.card p{color:var(--text-dim);margin-bottom:1em}
.btn{display:inline-block;padding:0.75rem 1.25rem;border-radius:0.75rem;border:2px solid var(--brass);background:transparent;color:var(--text);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--brass);color:var(--on-brass)}
.btn.solid{background:var(--brass);color:var(--on-brass)}
.btn.teal{border-color:var(--slab)}.btn.teal:hover{background:var(--slab);color:var(--chalk)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 0.875rem 2.875rem;max-width:62ch}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:2rem;height:2rem;border-radius:50%;background:var(--slab);color:var(--chalk);display:grid;place-items:center;font-weight:800}
form label{display:block;margin:0.875rem 0 0.25rem;font-weight:700}
form input[type=text],form input[type=email],form input[type=tel],form input[type=password],form select{width:100%;max-width:28.75rem;padding:0.75rem;font:inherit;border:1px solid var(--edge);border-radius:0.625rem;background:var(--ground-2);color:var(--text)}
form input:focus-visible,.btn:focus-visible,a:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.check{display:flex;gap:0.625rem;align-items:flex-start;margin:1rem 0;max-width:35rem}
.check input{margin-top:0.312rem;width:1.25rem;height:1.25rem}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.err{background:#c02a2222;border:1px solid var(--coral);padding:0.625rem 0.875rem;border-radius:0.625rem;max-width:35rem}
.ok{background:#2f7d5222;border:1px solid var(--mint);padding:0.625rem 0.875rem;border-radius:0.625rem;max-width:35rem}
.small{font-size:0.875rem;color:var(--text-dim)}
.foot{border-top:1px solid var(--edge);padding:1.125rem max(1rem,4vw);text-align:center;color:var(--text-dim);font-size:0.875rem}
table{border-collapse:collapse;width:100%;font-size:0.875rem}
th,td{border-bottom:1px solid var(--edge);padding:0.375rem 0.5rem;text-align:left;vertical-align:top}
.scroll{overflow-x:auto}
.foot p{max-width:none;margin:0}

/* ---- theme controls (the swatch cards mirror the apps' Colors sheet) ---- */
html{font-size:calc(16px*var(--tz,1.25))}
.top{flex-wrap:wrap;gap:.6rem}
.tools{margin-left:auto;display:flex;align-items:center;gap:.7rem}
.tzw{display:flex;align-items:center;gap:.35rem;color:var(--text-dim)}
.tzw input{width:6.5rem;accent-color:var(--brass)}
.btn.small{padding:.4rem .8rem;font-size:.9rem;border-width:2px}
#thDlg{border:1px solid var(--edge);border-radius:1rem;background:var(--ground-2);color:var(--text);padding:1.1rem 1.2rem;width:min(46rem,94vw);max-height:88vh;overflow:auto}
#thDlg::backdrop{background:rgba(0,0,0,.5)}
#thDlg h2{margin:0;font-size:1.3rem}#thDlg h3{margin:1.1rem 0 .5rem;font-size:1rem;color:var(--text-dim)}
.dlgHead{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.8rem}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:.7rem;overflow:hidden}
.seg button{font:inherit;font-size:.9rem;padding:.45rem .9rem;border:0;background:transparent;color:var(--text);cursor:pointer}
.seg button.on{background:var(--brass);color:var(--on-brass);font-weight:700}
.swGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.6rem}
.sw{font:inherit;text-align:left;border:2px solid var(--edge);border-radius:.7rem;background:var(--ground);color:var(--text);padding:.5rem;cursor:pointer;display:flex;flex-direction:column;gap:.35rem}
.sw.on{border-color:var(--text);box-shadow:0 0 0 2px var(--text) inset}
.sw b{font-size:.85rem}
.sw .chips{display:flex;gap:3px}.sw .chips i{flex:1;font-style:normal;font-size:.75rem;font-weight:800;text-align:center;border-radius:4px;padding:.15rem 0;min-height:1.3rem}
.sw .strip{display:flex;height:.6rem;border-radius:3px;overflow:hidden}.sw .strip i{flex:1}
#ppToast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:var(--text);color:var(--ground);padding:.6rem 1rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9999;font-size:.9rem}
#ppToast.on{opacity:1}
#bgLayer{position:fixed;inset:0;z-index:-1;pointer-events:none;}
html.hasbg{background:var(--ground)}
html.hasbg body{background:transparent!important}
.bgp-glow{background:radial-gradient(ellipse 110% 80% at 50% 120%,color-mix(in srgb,var(--brass) 80%,transparent),transparent 72%),radial-gradient(ellipse 70% 60% at 8% -8%,color-mix(in srgb,var(--slab) 42%,transparent),transparent 72%),var(--ground)!important}
.bgp-aurora{background:radial-gradient(circle at 20% 25%,color-mix(in srgb,var(--brass) 38%,transparent),transparent 42%),radial-gradient(circle at 80% 30%,color-mix(in srgb,var(--slab) 32%,transparent),transparent 45%),radial-gradient(circle at 55% 90%,color-mix(in srgb,var(--slab-edge) 34%,transparent),transparent 50%),var(--ground)!important}
.bgPick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.bgT{position:relative;height:64px;border:2px solid var(--edge);border-radius:10px;cursor:pointer;background-color:var(--ground-2);background-size:cover;background-position:center;color:var(--text);font:inherit;font-size:11.5px;display:flex;align-items:flex-end;justify-content:flex-start;padding:0;overflow:hidden;text-align:left}
.bgT>span{display:block;width:100%;padding:3px 6px;background:color-mix(in srgb,var(--ground) 80%,transparent);font-size:11.5px}
.bgT:hover{border-color:var(--text-dim)}
.bgT.on{border-color:var(--text);box-shadow:0 0 0 2px var(--text) inset}
.bgT.none,.bgT.up{align-items:center;justify-content:center;font-size:12.5px;text-align:center}
.bgT.up input{display:none}
.bgNote{margin:8px 0 0;font-size:12px;color:var(--text-dim);line-height:1.45}
.bgNote button{border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.bgT{font-size:.8rem}.bgPick{grid-template-columns:repeat(auto-fill,minmax(6rem,1fr))}
@media (max-width:560px){.top .tools{order:3;width:100%;margin-left:0;justify-content:space-between}.top .wm{margin-right:auto}}