/* Clocked look (Nov 9 2026): off-white, charcoal, one calm teal, system fonts, lowercase wordmark.
   Sits on ../prep/prep.css for layout (wrap, card, stack, row, btn); everything visual is overridden here. */
:root{
  --bg:#FAFAF7;--card:#FFFFFF;--ink:#1D1D1F;--muted:#5E5E63;--rule:#E4E4DF;--tint:#F1F1EC;
  --teal:#0F766E;--teal-dk:#115E59;--teal-bg:#E7F2F0;
  --magenta:var(--teal);--signal:var(--teal);--lamp:var(--teal);
  --good:#0F766E;--goodbg:#E7F2F0;--bad:#A12C25;--badbg:#FBEDEB;--warnbg:#F3F3EE;--warn:#1D1D1F;
  --display:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink)}
a{color:var(--teal);font-weight:600;text-underline-offset:2px}
a:hover{color:var(--teal-dk)}
h1,h2,h3{font-family:var(--display);font-weight:650;letter-spacing:-.018em;line-height:1.15}
h1{font-size:clamp(2rem,6.4vw,2.75rem)}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
p,li{line-height:1.6}

/* header: hairline, light, sticky */
.top.pc-top{background:rgba(250,250,247,.88);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  color:var(--ink);border-bottom:1px solid var(--rule)}
.top.pc-top .wrap{justify-content:space-between;flex-wrap:wrap;gap:4px 14px;padding-block:8px;min-height:52px}
.pc-mark{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.pc-mark:hover{color:var(--ink)}
.pc-mark svg{width:22px;height:22px;flex:none}
.pc-mark .wm{font:650 1.3rem/1 var(--display);letter-spacing:-.03em;text-transform:lowercase}
.pc-by{color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:400}
.pc-by:hover{text-decoration:underline;color:var(--muted)}

/* cards and blocks */
.card{background:var(--card);border:1px solid var(--rule);border-radius:16px;box-shadow:none}
.lead{font-size:1.08rem;color:var(--muted);margin:0}
.hero{gap:12px;margin-bottom:20px}
ol.steps,ul.plain{padding-left:1.2em;margin:0}ol.steps li,ul.plain li{margin:0 0 8px}
ol.steps li::marker{color:var(--teal);font-weight:650}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.two{grid-template-columns:1fr}}
.can h3,.cant h3{font-size:1.1rem;margin-bottom:6px}
.cant{border-color:var(--rule)}
.warn{background:var(--warnbg);border:1px solid var(--rule);border-left:3px solid var(--ink);border-radius:12px;padding:12px 14px;color:var(--ink)}
.warn b{color:var(--ink)}
.card.warn{border-radius:16px}
.price{font:650 2.1rem/1 var(--display);letter-spacing:-.02em}
.pk{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk article{border:1px solid var(--rule);border-radius:14px;padding:14px;display:grid;gap:6px;align-content:start;background:#fff}
.pk article.best{border:1.5px solid var(--teal)}
@media (max-width:480px){.pk{grid-template-columns:1fr}}
details.faq{border-top:1px solid var(--rule);padding:12px 0}
details.faq summary{cursor:pointer;font-weight:600}
details.faq p{margin:8px 0 0;color:var(--ink)}

/* buttons */
.btn{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:0;border:1px solid var(--rule);border-radius:12px;
  background:#fff;color:var(--ink);min-height:46px;padding:10px 18px}
.btn:hover{border-color:#C9C9C3}
.btn.go{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.go:hover{background:var(--teal-dk);border-color:var(--teal-dk);color:#fff}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;border-color:var(--rule)}

/* forms */
label.f{display:grid;gap:4px;font-weight:600}
label.f span.h{font-weight:400;color:var(--muted);font-size:.9rem}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{
  font:inherit;color:var(--ink);background:#fff;border:1px solid #D6D6D0;border-radius:10px;padding:10px 12px;min-height:46px;width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(15,118,110,.28);outline-offset:1px;border-color:var(--teal)}
:focus-visible{outline:3px solid rgba(15,118,110,.35);outline-offset:2px}
input.plate-in{font:600 1.5rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--teal)}
.radio{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--rule);border-radius:12px;padding:12px;cursor:pointer;background:#fff}
.radio:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.radio input{width:20px;height:20px;accent-color:var(--teal);margin-top:3px;flex:none}
.err{color:var(--bad);font-weight:600;margin:0}
.ok{color:var(--good);font-weight:600;margin:0}
.auth{white-space:pre-wrap;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:12px;font-size:.93rem;max-height:280px;overflow:auto}
canvas.sig{width:100%;height:150px;background:#fff;border:1px dashed #BDBDB6;border-radius:10px;touch-action:none;display:block}
.drop{border:1px dashed #BDBDB6;border-radius:12px;padding:12px;background:#fff;display:grid;gap:6px}
.drop img{max-width:100%;max-height:160px;border-radius:8px;object-fit:contain}
.small{font-size:.9rem}
.pill{display:inline-block;border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:600;background:var(--tint);color:var(--ink)}
.pill.go{background:var(--teal-bg);color:var(--teal-dk)}.pill.done{background:var(--goodbg);color:var(--teal-dk)}.pill.bad{background:var(--badbg);color:var(--bad)}
.letter{white-space:pre-wrap;font:.85rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:12px;max-height:340px;overflow:auto}
.tl{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.tl li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:.93rem}
.tl time{color:var(--muted);white-space:nowrap}
footer.wrap{padding-block:20px 40px;color:var(--muted);font-size:.88rem;line-height:1.6}
.legal h2{font-size:1.2rem;margin-top:10px}
.legal p,.legal li{margin:0 0 8px}
.who dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.who dt{color:var(--muted)}.who dd{margin:0}

/* pull quotes on the homepage (Nov 8): big serif-free display line, small attribution, the push-back line in the signal color */
.pc-quote{margin:0;padding:18px 4px;text-align:center}
.pc-quote blockquote{margin:0;font:700 clamp(1.7rem,6vw,2.5rem)/1.1 var(--display);letter-spacing:.01em;color:var(--ink)}
.pc-quote figcaption{margin-top:6px;font-size:.9rem;color:var(--muted)}
.pc-quote p{margin:10px 0 0;font-weight:700;color:var(--signal)}

/* .wall-art (Nov 8, Brady: "scatter those on the page"): stencil street-art pieces sprayed across the homepage. Decoration only; the logo stays. */
.wall{position:relative}
.sa{display:block;height:auto;color:#141414}
.wall-orwell{display:grid;grid-template-columns:1fr minmax(160px,34%);align-items:center;gap:8px}
.wall-orwell .sa-cam{width:100%;max-width:260px;transform:rotate(3deg);justify-self:center}
.wall-eye{display:flex;justify-content:center;padding:6px 0}
.wall-eye .sa-eye{width:min(78%,340px);transform:rotate(-4deg)}
.wall-tag{display:flex;justify-content:center;padding:18px 0 4px}
.wall-tag .sa-tag{width:min(92%,420px);transform:rotate(-2deg)}
@media (max-width:600px){.wall-orwell{grid-template-columns:1fr}.wall-orwell .sa-cam{max-width:190px;transform:rotate(4deg)}}