/* Long-form pages (legal, guides, systems, deployment, sample report…): the .l-hero / .l-doc layout plus the
   components those pages share. Loaded after tokens.css, styles.css and start.css. Was legal.css until 10/16. */
.start .nav .cta{gap:18px}
.l-hero{background:var(--ink);color:var(--white);padding:132px 0 56px}
.l-hero h1{color:var(--white);font-size:clamp(34px,4.6vw,54px);margin:14px 0 12px}
.l-hero p{color:var(--slate-400);font-size:17px;max-width:640px}
.l-doc{padding:56px 0 96px}
.l-doc .narrow{width:min(780px,100% - 48px);margin-inline:auto}
.l-doc h2{font-size:24px;margin:40px 0 12px;letter-spacing:-.02em}
.l-doc h3{font-size:18px;margin:22px 0 8px}
.l-doc p,.l-doc li{font-size:16.5px;color:var(--text)}
.l-doc p{margin:0 0 14px}
.l-doc ul{margin:0 0 16px;padding-left:22px;display:grid;gap:6px}
.l-doc a{color:var(--teal-text);text-decoration:underline;text-underline-offset:3px}
.l-doc a.btn{text-decoration:none}
.l-doc a.btn-mint{color:var(--on-mint)}.l-doc a.btn-line{color:var(--ink)}
.l-doc .meta{font-size:14.5px;color:var(--mut);margin-bottom:28px}
.l-doc .ph{background:var(--amber-100);border-radius:var(--r-2xs);padding:0 4px}
.l-doc table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 18px}
.l-doc th,.l-doc td{border-bottom:1px solid var(--line);text-align:left;padding:10px 10px 10px 0;vertical-align:top}
.l-doc th{font-family:var(--ff-d);color:var(--ink);font-size:14px}
@media (max-width:640px){.l-hero{padding:112px 0 44px}.l-doc .narrow{width:min(780px,100% - 36px)}.start .nav .cta .back{display:none}}

/* ---------- shared long-form components (moved here 10/16 from 15 pages' copy-pasted <style> blocks).
   rs-* = guide/resource bits, sy-* = systems pages. A page's own <style> may override, never re-declare. */
.l-doc ul.rs-check{list-style:none;padding-left:0;gap:10px}
.l-doc ul.rs-check li{position:relative;padding-left:32px}
.l-doc ul.rs-check li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border:2px solid var(--mint);border-radius:var(--r-xs)}
.rs-cta{margin-top:44px;padding:28px 28px 30px;border-radius:var(--r);background:var(--ink)}
.l-doc .rs-cta h2{color:var(--white);margin-top:0}
.l-doc .rs-cta p{color:var(--slate-300)}
.rs-cta .btn{margin-top:6px}
.rs-more{border-top:1px solid var(--line);margin-top:48px;padding-top:24px}
.l-doc .rs-more h2{font-size:18px;margin-top:0}
.l-hero p.rs-meta{margin-top:18px;font-size:14px;color:var(--slate-400)}
.rs-table{overflow-x:auto;margin:0 0 18px}
.l-doc ol.rs-steps{margin:0 0 16px;padding-left:22px;display:grid;gap:6px}
.l-doc p.sy-systems{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.l-doc p.sy-tm{font-size:13.5px;color:var(--mut);margin-top:28px}

/* /book: the on-brand booking picker (10/17, replaces the Google appointment iframe). Day chips -> time grid -> a short
   form -> confirmation, all in the site's own type and colors; the Worker's /api/slots + /api/book feed it. */
.bk{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 60px -30px color-mix(in srgb,var(--ink) 35%,transparent);padding:24px;display:grid;gap:16px;margin:0 0 14px}
.bk-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.l-doc .bk h2{margin:0;font-size:21px}
.bk-tz{font-size:13px;color:var(--mut)}
.bk-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.bk-day{flex:none;scroll-snap-align:start;display:grid;gap:1px;justify-items:center;min-width:74px;padding:10px 8px 9px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper);cursor:pointer;font:600 12px var(--ff);color:var(--mut);text-transform:uppercase;letter-spacing:.06em;transition:border-color .15s ease,background .15s ease}
.bk-day b{font:700 22px/1.1 var(--ff-d);color:var(--ink);letter-spacing:-.02em}
.bk-day small{font:500 11.5px var(--ff);color:var(--mut);text-transform:none;letter-spacing:0}
.bk-day:hover{border-color:var(--mint)}
.bk-day[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--slate-300)}
.bk-day[aria-pressed=true] b{color:var(--mint-hi)}.bk-day[aria-pressed=true] small{color:var(--slate-400)}
.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.bk-time{padding:12px 8px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--white);font:600 15px var(--ff);color:var(--ink);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.bk-time:hover{border-color:var(--mint);background:var(--mint-50)}
.bk-time[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:var(--on-mint)}
.bk-form{display:grid;gap:12px}
.bk-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bk-form label{display:grid;gap:6px;font:600 13.5px var(--ff);color:var(--ink)}
.bk-form label small{font-weight:500;color:var(--mut)}
.bk-form input,.bk-form textarea{font:500 16px var(--ff);padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);width:100%}
.bk-form input:focus,.bk-form textarea:focus{outline:2px solid var(--mint);outline-offset:0;border-color:var(--mint)}
.bk-form textarea{resize:vertical;min-height:64px}
.bk-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-pick{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--mint) 12%,transparent);font:600 15px var(--ff);color:var(--ink)}
.bk-pick .ico{color:var(--teal-text);flex:none}
.bk-pick span{flex:1}
.bk-change{font:600 13px var(--ff);color:var(--teal-text);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.bk-form .btn{justify-self:start}
.l-doc .bk .meta{font-size:13px;color:var(--mut);margin:0}
.bk-err{color:var(--red-700);font-size:14px;margin:0}
.bk-done,.bk-fail{display:grid;gap:8px;padding:6px 0}
.l-doc .bk-done .big{font:700 22px var(--ff-d);color:var(--ink);margin:0;letter-spacing:-.02em}
.l-doc .bk-done p,.l-doc .bk-fail p{margin:0}
.bk [hidden]{display:none !important}
.bk[data-step=form] .bk-head,.bk[data-step=done] .bk-head{display:none}
@media (max-width:640px){.bk{padding:16px}.bk-form .row{grid-template-columns:1fr}.bk-times{grid-template-columns:repeat(3,1fr)}}
/* /book: the intake questions after the time pick (10/17 pm) */
.bk-sub{margin:10px 0 -2px;font:700 15px var(--ff-d);color:var(--ink);letter-spacing:-.01em;display:flex;align-items:baseline;gap:8px}
.bk-sub small{font:500 13px var(--ff);color:var(--mut)}
.bk .grp{font:600 12px var(--ff);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:4px 0 -4px}
.bk-form select{font:500 16px var(--ff);padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);width:100%}
.bk-form .agree{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:13.5px;color:var(--mut)}
.bk-form .agree input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--mint)}