/* ──────────────────────────────────────────────────────────────────────────
   DSIS client portal — components.

   Ported from the dsis-landing design system. Carries the brand's reusable
   pieces (wordmark, pill buttons, cards, form fields, eyebrows/section
   headers, the shared nav + footer) and a small set of app-shell helpers the
   portal needs (centered auth layout, company pill, status chips). Landing-only
   decorative blocks (hero credential composition, coverage map, recruiting
   band, pricing trio, FAQ) are intentionally NOT ported — the portal doesn't
   use them.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Wordmark (locked brand asset, its own Inter typeface) ──────────────── */
.brand{display:inline-flex;align-items:center}
/* Metric-matched fallback for the Inter wordmark. The page-loader paints from
   static index.html before Inter downloads; without this the wordmark would render
   in the system sans-serif then snap to Inter (a visible reflow / FOUT). This face
   scales/overrides a local Arial so the pre-Inter box matches Inter's — the swap-in
   then causes no shift. (size-adjust tuned empirically against the wordmark.) */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');ascent-override:90%;descent-override:22.43%;line-gap-override:0%;size-adjust:104.6%}
.wordmark{display:inline-flex;align-items:baseline;gap:6px;font-family:'Inter','Inter Fallback',sans-serif;line-height:1;white-space:nowrap;color:var(--ink)}
.wordmark .wm-bold{font-weight:900;letter-spacing:-.01em}
.wordmark .wm-reg{font-weight:400}
.wordmark .wm-it{font-weight:300;font-style:italic;margin-left:-3px;color:var(--green)}
.wordmark--lg .wm-bold{font-size:26px}
.wordmark--lg .wm-reg,.wordmark--lg .wm-it{font-size:22px}
.wordmark--md .wm-bold{font-size:20px}
.wordmark--md .wm-reg,.wordmark--md .wm-it{font-size:17px}
/* on dark surfaces (footer) the lockup goes light with a lime accent */
.wordmark--on-dark{color:#fff}
.wordmark--on-dark .wm-it{color:#a4e375}
@media (max-width:640px){.wordmark--lg .wm-bold{font-size:20px}.wordmark--lg .wm-reg,.wordmark--lg .wm-it{font-size:17px}}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-weight:600;font-size:15px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .18s,background .2s,box-shadow .2s,border-color .2s,color .2s;white-space:nowrap;text-align:center}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.btn svg{transition:transform .2s}
.btn-primary{background:var(--green);color:#fff;padding:13px 24px;box-shadow:0 8px 22px -10px rgba(61,122,31,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover:not(:disabled){background:var(--green-deep);transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(61,122,31,.75)}
.btn-primary:hover:not(:disabled) svg{transform:translateX(3px)}
.btn-sm{padding:10px 20px;font-size:14.5px}
.btn-outline{background:#fff;color:var(--ink);padding:12px 22px;border-color:var(--line);box-shadow:0 1px 2px rgba(22,34,27,.04)}
.btn-outline:hover:not(:disabled){border-color:#cdd5c8;transform:translateY(-1px);background:#fcfdfb}
.btn-dark{background:var(--ink);color:#fff;padding:13px 24px}
.btn-dark:hover:not(:disabled){background:#0f1813;transform:translateY(-1px)}
.btn-dark:hover:not(:disabled) svg{transform:translateX(3px)}
.btn-white{background:#fff;color:var(--green-deep);padding:13px 24px;box-shadow:0 10px 30px -12px rgba(0,0,0,.4)}
.btn-white:hover:not(:disabled){transform:translateY(-1px);background:#f4f8ef}
.btn-block{width:100%}
.btn-text{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--ink);padding:12px 4px;background:none;border:none;cursor:pointer;font-family:var(--body)}
.btn-text u{text-decoration:none;background-image:linear-gradient(var(--green),var(--green));background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s;padding-bottom:2px}
.btn-text:hover u{background-size:100% 1.5px}
.btn-text svg{color:var(--green);transition:transform .2s}
.btn-text:hover svg{transform:translateX(3px)}

/* ── Section scaffold + headers ─────────────────────────────────────────── */
.section{padding:72px 0;position:relative}
.section--sage{background:var(--bg-2)}
.sec-head{max-width:740px;margin-bottom:40px}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--green);margin-bottom:18px}
/* STANDING RULE: no leading dash/line prefix on eyebrow labels anywhere in the portal —
   eyebrow text only. .tick is kept neutralized so a stray <span class="tick"> never re-adds the dash. */
.eyebrow .tick{display:none}
.sec-title{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sec-title .accent{color:var(--green)}
.sec-lead{font-size:17px;line-height:1.62;color:var(--ink-2);margin-top:16px;max-width:60ch}

/* ── Reveal on scroll (optional, used by content pages) ─────────────────── */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.ab-pdot::after{animation:none}.page-loader,.page-loader.is-active{transition-duration:.01ms}.pl-bar::after{animation:none;width:100%}#page-loader .wordmark{transition-duration:.01ms}}

/* ── Global page-transition loader overlay (the single transition system) ─────────
   Static in index.html so it paints pre-JS; lib/loader.js fades it in/out. Light,
   matches the login: brand wordmark + a thin indeterminate green bar on --bg-2.
   pointer-events:none always — purely visual, never blocks input or traps focus. */
.page-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg-2);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
.page-loader.is-active{opacity:1;visibility:visible;transition:opacity .22s ease}
.page-loader::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(61,122,31,.08) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(120% 80% at 50% 44%,#000 0%,transparent 70%);mask-image:radial-gradient(120% 80% at 50% 44%,#000 0%,transparent 70%)}
.pl-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px}
/* Wordmark stays hidden until Inter's real glyphs load (loader.js adds .fonts-ready)
   so the Arial fallback face never flashes on a cold load; the bar shows meanwhile. */
#page-loader .wordmark{opacity:0;transition:opacity .12s ease}
#page-loader.fonts-ready .wordmark{opacity:1}
.pl-bar{position:relative;width:148px;height:3px;border-radius:3px;background:var(--green-line);overflow:hidden}
.pl-bar::after{content:"";position:absolute;top:0;left:0;height:100%;width:42%;border-radius:3px;background:var(--green);animation:plSlide 1.05s ease-in-out infinite}
@keyframes plSlide{0%{transform:translateX(-120%)}100%{transform:translateX(330%)}}

/* ── Cards (the shared #fff + hairline + shadow language) ───────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow-card)}
.card--pad-lg{padding:30px}
.card-h{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.card-sub{font-size:14px;line-height:1.55;color:var(--ink-2)}

/* ── Form fields ────────────────────────────────────────────────────────── */
.form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow-card)}
.form h3{font-family:var(--display);font-weight:700;font-size:21px;margin-bottom:22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column}
/* `.field{display:flex}` (author) otherwise beats the UA `[hidden]{display:none}` (author origin
   wins), so a hidden .field stayed visible — this restores the hidden attribute for conditional
   fields (e.g. the Contact page's Inspection-ID / Phone reveals, the Request vehicle-location addr). */
.field[hidden]{display:none}
.field.col-2{grid-column:1/-1}
/* City / State / Zip three-up on one row: a full-width sub-grid inside .form-grid
   (City widest, State + Zip short) so the address row fills evenly with no empty cell. */
.addr-row{grid-column:1/-1;display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field label .req{color:var(--green);margin-left:2px}
.field input,.field select,.field textarea{font-family:var(--body);font-size:14.5px;color:var(--ink);background:#fcfdfb;border:1px solid var(--line);border-radius:11px;padding:12px 14px;transition:border-color .18s,box-shadow .18s,background .18s;width:100%}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#d3d9cc}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-ring);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{border-color:#d99;box-shadow:0 0 0 3px rgba(180,60,50,.10)}
.field-err{font-size:11.5px;color:#a4453c;margin-top:6px;font-weight:600;min-height:0}
/* request-form radio pair (e.g. Inspection type) — custom selectable chips. Selecting
   changes COLOR ONLY, so a click can never move/resize/reflow the chip or its neighbors:
   - the native <input type=radio> is VISUALLY HIDDEN (kept focusable) so its real-browser
     focus-ring + accent-color checked rendering can never nudge the flex row;
   - the radio dot is a constant-size ::before whose fill changes color only;
   - border WIDTH, padding, margin and font-weight are identical in both states;
   - only color properties transition (NO box-shadow/transform/size animation), so there
     is no inset-ring "grow" shudder on toggle;
   - NO focus/box-shadow ring on the chip at all (a focus ring popped in on click in
     testing) — the chip changes on :checked only. For a radio group the green selected
     state is the focus indicator (arrow keys move selection, which moves the green). */
.field .radio-row{display:flex;flex-wrap:wrap;gap:10px}
.field .radio-opt{position:relative;display:flex;align-items:center;gap:11px;flex:1 1 130px;font-size:14px;font-weight:500;color:var(--ink);background:#fcfdfb;border:1px solid var(--line);border-radius:11px;padding:11px 14px;cursor:pointer;transition:border-color .15s,background-color .15s}
.field .radio-opt input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.field .radio-opt::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-3);background:#fff;box-shadow:inset 0 0 0 4px #fff;transition:border-color .15s,background-color .15s}
.field .radio-opt:hover{border-color:#d3d9cc}
.field .radio-opt:has(input:checked){border-color:var(--green);background:#fff}
.field .radio-opt:has(input:checked)::before{border-color:var(--green);background:var(--green)}
/* select: native chrome stripped, custom chevron, muted until chosen (.unset toggled by initSelects) */
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%238a948c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.field select.unset{color:var(--ink-3)}
.field textarea{min-height:110px;resize:vertical}
.form-foot{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.form-foot .note{font-size:12px;color:var(--ink-3)}

/* error / success banners (ported from the landing Formspree wiring) */
.form-error{margin-top:18px;display:flex;gap:10px;align-items:flex-start;background:#fdf1f0;border:1px solid #f0d4cf;color:#9c3b32;border-radius:12px;padding:13px 15px;font-size:13px;line-height:1.5}
.form-error[hidden]{display:none}
.form-error a{font-weight:700;text-decoration:underline;color:inherit}
.form-error svg{flex:none;margin-top:1px}
.form-note-ok{margin-top:18px;display:flex;gap:10px;align-items:flex-start;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-deep);border-radius:12px;padding:13px 15px;font-size:13px;line-height:1.5}
.form-note-ok[hidden]{display:none}
/* Amber informational notice — same box as .form-note-ok/.form-error, recolored with the
   .chip-amber inks. A friendlier, less-alarming alternative to the red .form-error. */
.form-note-warn{margin-top:18px;display:flex;gap:10px;align-items:flex-start;background:#faf4e3;border:1px solid #ecdfba;color:#8a6210;border-radius:12px;padding:13px 15px;font-size:13px;line-height:1.5}
.form-note-warn[hidden]{display:none}
.form-success{display:flex;gap:16px;align-items:flex-start}
.form-success[hidden]{display:none}
.fs-check{flex:none;width:44px;height:44px;border-radius:999px;background:var(--green-soft);border:1px solid var(--green-line);display:grid;place-items:center;color:var(--green)}
.fs-ey{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.form-success h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--ink);line-height:1.25;margin-bottom:10px}
.form-success p{font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ── Status chips (portal — for tracking/dashboard states) ──────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.01em;padding:4px 11px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip-green{background:var(--green-soft);color:var(--green-deep);border-color:var(--green-line)}
.chip-amber{background:#faf4e3;color:#8a6210;border-color:#ecdfba}
.chip-red{background:#faf0ee;color:#a4453c;border-color:#eed7d2}
.chip-neutral{background:#f1f3ee;color:var(--ink-2);border-color:var(--line)}

/* company pill (authed nav badge — green dot + company name) */
.co-pill{display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);border:1px solid var(--green-line);padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--green-deep);max-width:240px}
.co-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.co-pill .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Nav (shared shell — ported from landing, adapted for the portal) ───── */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.nav.scrolled{border-color:var(--line);box-shadow:0 1px 0 rgba(22,34,27,.02)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-link{position:relative;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .18s;cursor:pointer}
.nav-link:hover{color:var(--ink)}
/* active page: ink + weight + a contained green underline accent (corporate cue) */
.nav-link.is-active{color:var(--ink);font-weight:600}
.nav-link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--green)}
.nav-div{width:1px;height:18px;background:var(--line)}
.nav-right{display:flex;align-items:center;gap:14px}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.mobile-menu{display:none;border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}
.mobile-menu.open{display:block}
.mobile-menu a,.mobile-menu button{display:block;width:100%;text-align:left;padding:13px 28px;font-size:15px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;font-family:var(--body)}
@media (max-width:860px){.nav-links{display:none}.menu-btn{display:flex}.nav-right .co-pill{display:none}}

/* ── App shell layout ───────────────────────────────────────────────────── */
/* sized so short pages still push the SLIM footer to the viewport bottom (nav ~60 + slim footer ~110) */
.app-main{min-height:calc(100vh - 170px)}
.pagepad{padding:56px 0}
/* centered single-card layouts (login, change-password) */
.auth-wrap{min-height:calc(100vh - 320px);display:flex;align-items:center;justify-content:center;padding:56px 28px}
.auth-card{width:100%;max-width:440px}
.auth-head{text-align:center;margin-bottom:26px}
.auth-head .eyebrow{justify-content:center}
/* segmented toggle (Team access | Manager login) */
.seg{display:flex;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px;margin-bottom:22px}
.seg-btn{flex:1;border:none;background:none;font-family:var(--body);font-weight:600;font-size:13.5px;color:var(--ink-2);padding:9px 10px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.seg-btn.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-card)}
.pane[hidden]{display:none}

/* ── Login split-screen (full viewport; light corporate; no shared nav/footer) ──
   LEFT = brand/welcome on a light tinted panel (green is accent + structure, not a
   slab). RIGHT = the login on white. The two selector cards ARE #segTeam / #segMgr,
   so mount()'s showPane() toggles their .active state with no JS change. */
.auth-split{width:100%;min-height:100dvh;display:flex}

/* LEFT — brand panel */
.auth-brand{flex:0 0 54%;min-width:380px;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:52px 60px;background:var(--bg-2);border-right:1px solid var(--line)}
/* dot-grid texture, masked toward the top-left */
.auth-brand::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(61,122,31,.10) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(120% 90% at 16% 10%,#000 0%,transparent 60%);mask-image:radial-gradient(120% 90% at 16% 10%,#000 0%,transparent 60%)}
/* soft radial glow top-right */
.auth-brand::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 48% at 94% 2%,rgba(61,122,31,.07),transparent 60%)}
/* organic green curve anchoring the bottom-left corner (fill set in CSS so var() resolves) */
/* The brand panel's primary visual mass: a defined two-tone green sweep filling the
   lower-left and climbing, with a crisp leading edge. Feature cards sit on it. */
.ab-curve{position:absolute;inset:0;z-index:1;pointer-events:none}
.ab-curve svg{display:block;width:100%;height:100%}
.ab-curve .c1{fill:var(--green-soft)}
.ab-curve .c2{fill:var(--green-line)}
.ab-curve .c3{fill:none;stroke:var(--green);stroke-width:2;opacity:.26}
.ab-inner{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}

.ab-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.ab-lockup{display:flex;align-items:center}
.ab-tag{margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ab-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--green-line);border-radius:999px;padding:6px 13px 6px 11px;font-size:11.5px;font-weight:600;color:var(--green-deep);box-shadow:0 1px 2px rgba(22,34,27,.04);white-space:nowrap}
.ab-pdot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--green)}
.ab-pdot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--green);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.6);opacity:0}}

.ab-welcome{margin-top:46px;max-width:560px}
.ab-welcome .eyebrow{margin-bottom:0}
.ab-head{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.6vw,46px);line-height:1.04;letter-spacing:-.022em;color:var(--ink);margin:16px 0 0;text-wrap:balance}
.ab-kw{color:var(--green-deep);font-weight:900}
.ab-sub{margin-top:18px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:480px}

.ab-features{margin-top:38px;display:flex;flex-direction:column;gap:12px;max-width:520px}
.ab-feature{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 18px;box-shadow:0 1px 2px rgba(22,34,27,.05),0 10px 22px -14px rgba(22,34,27,.17)}
.ab-fbadge{width:42px;height:42px;border-radius:50%;background:var(--green-soft);border:1px solid var(--green-line);display:flex;align-items:center;justify-content:center;color:var(--green);flex:none}
.ab-ftitle{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.ab-fdesc{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}

.ab-foot{margin-top:auto;padding-top:34px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);font-weight:500}
.ab-foot .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.55;flex:none}
.ab-foot strong{color:var(--ink-2);font-weight:600}

/* RIGHT — login on white */
.auth-form-col{flex:1;position:relative;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:48px 56px}
.auth-form-col::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 38% at 88% 0%,rgba(61,122,31,.05),transparent 60%)}
.auth-form-inner{position:relative;z-index:1;width:100%;max-width:432px}
/* Autofill detection: Chrome/Safari fire this no-op animation when :-webkit-autofill
   applies, letting mount() re-enable the submit button for browser-filled creds. */
@keyframes onAutoFill{from{}to{}}
.auth-form-inner input:-webkit-autofill{animation-name:onAutoFill;animation-duration:.001s}

.lf-head{display:flex;align-items:center}
.lf-eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}
.lf-title{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.018em;color:var(--ink);margin-top:2px}
.lf-sub{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

.lf-divider{display:flex;align-items:center;gap:14px;margin:22px 0 16px}
.lf-divider::before,.lf-divider::after{content:"";height:1px;background:var(--line);flex:1}
.lf-divider span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* account-type selector cards */
.selectors{display:flex;flex-direction:column;gap:11px}
.sel{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;background:#fcfdfb;border:1.5px solid var(--line);border-radius:13px;padding:13px 15px;font-family:var(--body);transition:border-color .15s,box-shadow .15s,background .15s}
.sel:hover{border-color:var(--green-line);background:#fff}
.sel-ico{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex:none;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.sel-body{flex:1;min-width:0}
.sel-title{display:block;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.sel-desc{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.sel-check{width:21px;height:21px;border-radius:50%;flex:none;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .15s,border-color .15s}
.sel-check svg{opacity:0;transition:opacity .12s}
.sel.active{border-color:var(--green);background:var(--green-soft);box-shadow:0 0 0 3px var(--green-ring)}
.sel.active .sel-ico{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 6px 14px -7px rgba(61,122,31,.7)}
.sel.active .sel-check{background:var(--green);border-color:var(--green)}
.sel.active .sel-check svg{opacity:1}

/* password Show/Hide toggle (the #clEye / #mgrEye buttons) */
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green);padding:6px 9px;border-radius:8px;transition:background .12s}
.pw-toggle:hover{background:var(--green-soft)}

.field-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.field-foot .hint{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3)}
.field-foot .hint svg{flex:none;color:var(--green);opacity:.85}
.flink{font-size:12px;font-weight:600;color:var(--green);white-space:nowrap}
.flink:hover{color:var(--green-deep);text-decoration:underline}

.secure-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;font-size:11.5px;color:var(--ink-3);font-weight:500}
.secure-note svg{color:var(--green);opacity:.8}

.lf-footer{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.lf-footer a{color:var(--ink-2);font-weight:500}
.lf-footer a:hover{color:var(--green)}
.lf-footer .sep{opacity:.5}

/* 2FA code step swap-in: when enterTwoFactor() replaces the manager form inside
   .auth-form-inner, the new step fades + slides in (in-pane content swap, fast +
   subtle) instead of a hard cut. JS adds .tfa-in on the next frame. */
.auth-form-inner.tfa-leaving{opacity:0;transition:opacity .14s ease}
.tfa-step{opacity:0;transform:translateY(11px);transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1)}
.tfa-step.tfa-in{opacity:1;transform:none}
/* 2FA error box: balanced gap above/below so it isn't crammed on the Verify button
   (the base .form-error has only margin-top; scoped here so login errors are unchanged).
   The base flex + align-items:flex-start + line-height keep the long lockout text wrapping
   cleanly with the icon top-aligned. */
.tfa-step .form-error{margin:14px 0}

/* ── First-login set-password (single focused form; carries the login DNA) ───────
   Light tinted page + subtle dot-grid + a green corner curve, with a centered white
   card (the login's field/button finish). Tokens only. */
.auth-solo{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:48px 20px;background:var(--bg-2);position:relative;overflow:hidden}
.auth-solo::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(61,122,31,.08) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(120% 75% at 50% 28%,#000 0%,transparent 64%);mask-image:radial-gradient(120% 75% at 50% 28%,#000 0%,transparent 64%)}
.as-curve{position:absolute;left:-130px;bottom:-150px;width:480px;height:480px;z-index:0;pointer-events:none}
.as-curve svg{display:block;width:100%;height:100%}
.as-curve .c1{fill:var(--green-soft)}
.as-curve .c2{fill:var(--green-line)}
.as-curve .c3{fill:none;stroke:var(--green);stroke-width:2;opacity:.26}
.as-card{position:relative;z-index:1;width:100%;max-width:440px}
.as-brand{display:flex;justify-content:center;margin-bottom:22px}
.auth-solo .eyebrow{margin-bottom:8px}
.as-title{font-size:26px;margin-top:0}
.as-legal{justify-content:center;margin-top:24px}
/* balanced error-box spacing (same scoped fix as the login/2FA boxes) */
.auth-solo .form-error{margin:14px 0}
/* reduced-motion: show the step instantly, no slide (placed AFTER the base rule so
   it wins the cascade). */
@media (prefers-reduced-motion:reduce){.tfa-step{opacity:1;transform:none;transition:none}}

@media (max-width:820px){
  .auth-split{flex-direction:column}
  .auth-brand{flex:none;min-width:0;padding:30px 28px 30px;border-right:none;border-bottom:1px solid var(--line)}
  .auth-brand .ab-features,.auth-brand .ab-foot,.ab-curve{display:none}
  .ab-top{flex-direction:column;gap:14px}
  .ab-welcome{margin-top:22px;padding-top:0}
  .ab-head{font-size:clamp(27px,7vw,34px)}
  .auth-form-col{padding:32px 24px 48px}
}

/* ── Footer (charcoal, shares the landing's depth glow) ─────────────────── */
.footer{background:var(--foot);color:#fff;padding:64px 0 28px;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 60% at 12% 0%,rgba(164,227,117,.07),transparent 60%),radial-gradient(50% 50% at 100% 0%,rgba(255,255,255,.05),transparent 55%),linear-gradient(168deg,rgba(255,255,255,.03) 0%,transparent 30%,rgba(0,0,0,.18) 100%)}
.footer .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1.15fr;gap:44px;margin-bottom:44px}
.foot-about{font-size:14px;line-height:1.65;color:rgba(255,255,255,.72);max-width:40ch;margin:16px 0 0}
.foot-h{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(164,227,117,.9);margin-bottom:17px}
.foot-col ul{list-style:none;display:grid;gap:13px}
.foot-col a,.foot-col li{font-size:14px;color:rgba(255,255,255,.78);transition:color .15s;cursor:pointer}
.foot-col a:hover{color:#a4e375}
.foot-bar{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.55)}
.foot-bar a{color:rgba(255,255,255,.55)}
.foot-bar a:hover{color:#a4e375}
.foot-bar .legal{display:flex;flex-wrap:wrap;align-items:center}
.foot-bar .legal > * + *::before{content:"·";margin:0 9px;color:rgba(255,255,255,.3)}

/* ── Session-expiry modal (brand-styled) ───────────────────────────────── */
.sess-modal{position:fixed;inset:0;z-index:99999;background:rgba(2,7,5,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;animation:sessFade .2s ease}
@keyframes sessFade{from{opacity:0}to{opacity:1}}
.sess-card{background:#fff;border-radius:22px;padding:30px 28px 24px;max-width:380px;width:100%;text-align:center;box-shadow:0 28px 70px rgba(0,0,0,.3)}
.sess-ic{width:52px;height:52px;border-radius:14px;margin:0 auto 16px;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-deep);display:grid;place-items:center}
.sess-card h2{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em}
.sess-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-bottom:14px}
.sess-cd{font-family:var(--display);font-size:34px;font-weight:800;color:var(--green-deep);margin-bottom:20px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.sess-row{display:flex;flex-direction:column;gap:10px}

/* ── KPI cards + data table (manager SLA dashboard) ─────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;box-shadow:var(--shadow-card)}
.kpi .lbl{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.kpi .big{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.kpi .big .u{font-size:15px;color:var(--ink-3);font-weight:700;margin-left:3px}
.kpi .sub{font-size:12px;color:var(--ink-2);margin-top:7px;line-height:1.4}
.kpi--accent{border-color:var(--green-line);background:linear-gradient(180deg,#f6faf0,#fff 60%)}
.kpi--accent .big{color:var(--green-deep)}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
/* Phones: a wide (5–8 col) table is a cramped in-card scroll at 375px. Stack each
   row into a labeled card using the per-cell data-label. Cells without a data-label
   (none today) would simply show no label. */
@media (max-width:600px){
  .tbl, .tbl thead, .tbl tbody, .tbl tr, .tbl td{display:block}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{border:1px solid var(--line);border-radius:11px;margin-bottom:12px;padding:6px 13px}
  .tbl tr:last-child{margin-bottom:0}
  .tbl td{border:none;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 0;text-align:right}
  .tbl td:last-child{border-bottom:none}
  .tbl td::before{content:attr(data-label);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left}
}

/* ── Manager dashboard ────────────────────────────────────────────────────────
   Carries the login design DNA into the authed dashboard: a tinted --bg-2 hero
   band (dot-grid + top-right glow) with WHITE floating metric
   cards (an on-time ring leading, supporting stat cards beside it), then white
   content cards and a slim legal footer. Tokens only (+ #fff and the established
   chip-amber/chip-red inks reused for the traffic-light ring). */
/* hero stays full sand (--bg-2) behind the title + metric cards, then a fade band
   pinned to the bottom melts beige→white. Its height === the metrics' bottom padding
   (--dash-fade), so the fade always STARTS exactly at the cards' bottom edge and
   finishes white at the body seam — no hard divider, no fading through the charts. */
.dash-hero{--dash-fade:88px;background:linear-gradient(180deg,transparent 0,var(--bg) 100%) no-repeat left bottom / 100% var(--dash-fade), var(--bg-2);position:relative;overflow:hidden}
/* dot-grid — same pattern as .auth-brand::before, masked from top-left */
.dash-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(61,122,31,.09) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(130% 90% at 14% 8%,#000 0%,transparent 62%);mask-image:radial-gradient(130% 90% at 14% 8%,#000 0%,transparent 62%)}
/* subtle top-right green glow — same as .auth-brand::after */
.dash-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(56% 50% at 97% 2%,rgba(61,122,31,.07),transparent 60%)}
/* keep the wrap content above the dot-grid/glow pseudo-layers */
.dash-hero .wrap{position:relative;z-index:1}
/* title row: eyebrow + heading + lead on the left, live-pill on the right */
.dash-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;padding:46px 0 26px}

/* metric row: leading on-time RING (hero) + 2×2 supporting stat cards */
.dash-metrics{display:grid;grid-template-columns:minmax(258px,330px) 1fr;gap:18px;align-items:stretch;padding-bottom:var(--dash-fade,88px)}
/* hero on-time card: one centered cluster (eyebrow → big ring → caption) with
   balanced rhythm, sized to feel full in both the zero and populated states */
.dash-hero-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 24px}
.dash-hero-card .eyebrow{margin-bottom:22px}
.dash-ring{position:relative;width:204px;height:204px;display:grid;place-items:center}
.dash-ring-svg{width:204px;height:204px;display:block}
.dash-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.dash-ring-pct{font-family:var(--display);font-weight:800;font-size:50px;letter-spacing:-.03em;line-height:1}
.dash-ring-u{font-size:23px;font-weight:700;margin-left:1px}
.dash-ring-lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.dash-ring-ctx{margin-top:22px;font-size:13.5px;color:var(--ink-2);font-weight:500;line-height:1.45}

.dash-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dash-stat{padding:17px 20px 15px;display:flex;flex-direction:column}
.dash-stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px;min-height:34px}
.dash-ico{width:36px;height:36px;border-radius:10px;background:var(--green-soft);border:1px solid var(--green-line);display:flex;align-items:center;justify-content:center;color:var(--green);flex:none}
.dash-stat-lbl{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.dash-stat-big{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.022em;color:var(--ink);line-height:1}
.dash-stat-big .u{font-size:14px;color:var(--ink-3);font-weight:700;margin-left:2px}
.dash-stat-empty{color:var(--ink-3)}
.dash-stat-sub{font-size:12px;color:var(--ink-2);margin-top:7px;line-height:1.35}

/* Team-access code box renders dots-per-character when masked and the real code when
   revealed — same character count in the monospace box → identical width either way,
   so toggling never shifts the layout. fixed-width Reveal/Hide toggle: the two labels
   differ in width, so a min-width keeps the button (and the Copy button + "Set …"
   text beside it) from shifting. */
.ta-reveal{min-width:116px}

/* content body + a shared card-header pattern (icon badge + heading) */
.dash-body{padding:36px 0 8px;background:var(--bg)}
/* FIX 3: the dashboard hero KPI grid has an 88px bottom fade (.dash-metrics) and .dash-body adds
   36px on top, leaving a ~124px gap above the account-hold/trial banner. When the banner is
   present, pull it up out of that fade so it sits closer beneath the cards. Scoped to the
   dashboard slot + :not(:empty) so the no-banner team-card layout is unchanged. */
#acctHoldSlot:not(:empty){margin-top:-72px}
.dash-card-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dash-card-head .dash-ico{width:40px;height:40px;border-radius:11px}
.dash-card-head .eyebrow{margin-bottom:5px}
.dash-card-head-main{flex:1;min-width:0}
.dash-card-head-right{flex:none}
.dash-card-h{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.dash-count{display:inline-block;margin-left:8px;font-family:var(--body);font-weight:700;font-size:13px;color:var(--ink-3);vertical-align:middle}

/* clean empty states — no data is shown as a styled placeholder, never a bare dash.
   The EMPTY card is compact (.dash-card-empty): header + a tight centered cluster,
   not a giant box. The populated card keeps .card--pad-lg and grows with its table. */
.dash-card-empty{padding:20px 28px 22px}
.dash-card-empty .dash-card-head{margin-bottom:2px}
.dash-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:6px 20px 4px}
.dash-empty-ico{width:42px;height:42px;border-radius:12px;background:var(--green-soft);border:1px solid var(--green-line);display:flex;align-items:center;justify-content:center;color:var(--green);margin-bottom:7px}
.dash-empty-title{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.dash-empty-sub{font-size:12.5px;color:var(--ink-2);max-width:52ch;line-height:1.5}

/* slim footer — a logged-in dashboard doesn't need the full marketing footer */
.dash-foot{border-top:1px solid var(--line);background:var(--bg);margin-top:44px}
/* footer wordmark recedes: a single muted grey (incl. the normally-green "services")
   plus lowered opacity, so it reads as a quiet sign-off rather than a CTA */
.dash-foot .wordmark{color:var(--ink-3);opacity:.5}
.dash-foot .wordmark .wm-it{color:var(--ink-3)}
.dash-foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;padding-bottom:24px}
.dash-foot-legal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.dash-foot-legal a{color:var(--ink-2);font-weight:500}
.dash-foot-legal a:hover{color:var(--green)}
.dash-foot-legal .sep{opacity:.5}

@media(max-width:880px){.dash-metrics{grid-template-columns:1fr}.dash-hero-card{padding:24px 20px}}
@media(max-width:700px){.dash-hero-top{padding:34px 0 22px}}
@media(max-width:440px){.dash-stat-grid{grid-template-columns:1fr}}

/* ── Toggle switch + preference rows (manager settings panel) ───────────────── */
.switch{position:relative;display:inline-flex;align-items:center;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:42px;height:24px;border-radius:999px;background:var(--line);transition:background .18s;position:relative;flex:none}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(22,34,27,.25);transition:transform .18s}
.switch input:checked + .track{background:var(--green)}
.switch input:checked + .track::after{transform:translateX(18px)}
.switch input:focus-visible + .track{box-shadow:0 0 0 3px var(--green-ring)}
.switch input:disabled + .track{opacity:.5;cursor:not-allowed}
/* a preference row: label + description on the left, control on the right */
.pref-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.pref-row:first-of-type{border-top:none;padding-top:4px}
.pref-label{font-size:14px;font-weight:600;color:var(--ink)}
.pref-desc{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.45;max-width:52ch}
.pref-ctl{display:flex;align-items:center;gap:10px;flex:none}
.pref-saved{font-size:11.5px;color:var(--green-deep);font-weight:600;opacity:0;transition:opacity .2s;white-space:nowrap}
.pref-saved.show{opacity:1}
/* settings sub-sections (within combined Profile / Security cards) + form width */
.settings-div{border:none;border-top:1px solid var(--line);margin:24px 0}
.settings-sub-h{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.settings-form{max-width:460px}
/* settings: one shared container width so the header + cards align on the same left
   edge, wider than the default narrow column */
.settings-wrap{max-width:1080px}
/* Settings sand→white fade — DRAMATICALLY lower than the dashboard's short hero band.
   The sand can't fade inside the hero (it would finish above the first card), so the
   hero is SOLID sand and the long fade lives on the BODY: sand holds through the header
   + the body top, carries down into the upper portion of the Account Information card
   (visible in the gutters/above the card), then fades to white. Both scoped via the
   two-class selectors (.settings-hero / .settings-body) so the shared .dash-hero /
   .dash-body on the DASHBOARD are completely unaffected. */
.dash-hero.settings-hero{background:var(--bg-2)}
.dash-body.settings-body{background:linear-gradient(180deg,var(--bg-2) 0,var(--bg-2) 150px,var(--bg) 380px)}
/* read-only (disabled) fields read as display-only — click Change to edit */
.field input:disabled{background:var(--bg-2);color:var(--ink-2);-webkit-text-fill-color:var(--ink-2);opacity:1;cursor:not-allowed;border-color:var(--line)}

/* ── Legal page template (Privacy / Terms / Cookie / Data Retention) ─────────────
   Centered wide composition. A 2-col grid (slim TOC | wide document) is shared by the
   HERO and the BODY so the hero title aligns with the DOCUMENT's left edge (TOC sits in
   the left gutter). Reuses the .dash-hero/.settings-hero sand→white fade, scoped here. */
.legal-wrap{max-width:1180px}
/* shared 2-col grid — hero title (col 2) lines up exactly with the document (col 2) */
.legal-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:40px;align-items:start}
/* HERO (solid sand via .settings-hero); the long fade lives on .legal-body below */
.legal-hero-inner{grid-column:2;padding:46px 0 30px}
.legal-hero-inner .eyebrow{margin-bottom:14px}
.legal-title{margin:0}
.legal-sub{margin-top:12px;max-width:62ch}
.legal-dates{margin-top:14px;font-size:12.5px;font-weight:500;color:var(--ink-3)}
/* sand→white fade carrying past the header into the document's upper area (scoped) */
.legal-body{background:linear-gradient(180deg,var(--bg-2) 0,var(--bg-2) 120px,var(--bg) 360px);padding:14px 0 0}
/* slim sticky TOC rail in the left gutter */
.legal-toc{position:sticky;top:90px;align-self:start;padding-bottom:40px}
.legal-toc-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.legal-toc nav{display:flex;flex-direction:column;gap:1px}
.legal-toc-link{display:block;padding:7px 12px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--ink-2);line-height:1.35;transition:background .15s,color .15s}
.legal-toc-link:hover{color:var(--ink);background:#fff}
.legal-toc-link.active{background:var(--green-soft);color:var(--green-deep);font-weight:700}
/* the document — one wide white card */
.legal-doc{padding:34px 48px;margin-bottom:56px}
.legal-section{scroll-margin-top:88px}
.legal-h2{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink);line-height:1.3;margin:0 0 12px}
.legal-num{color:var(--green-deep);font-weight:800}
.legal-doc p{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin:0 0 14px}
.legal-doc p:last-child{margin-bottom:0}
.legal-doc a{color:var(--green-deep);font-weight:600}
.legal-doc a:hover{text-decoration:underline}
.legal-subhead{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.005em;margin:18px 0 8px}
.legal-list{list-style:none;margin:8px 0 14px;padding:0}
.legal-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:6px}
.legal-list li::before{content:"\203A";position:absolute;left:5px;top:-1px;color:var(--green);font-weight:800;font-size:15px}
/* Emphasized legal block (Limitation of Liability / Disclaimer all-caps text) — a soft
   bordered callout so the uppercase reads as legal, not jarring. */
.legal-emphasis{font-size:12.5px;line-height:1.7;letter-spacing:.015em;color:var(--ink-2);font-weight:600;background:var(--bg-2);border:1px solid var(--green-line);border-left:3px solid var(--green);border-radius:10px;padding:14px 18px;margin:0 0 12px}
.legal-emphasis + .legal-emphasis{margin-top:0}
.legal-div{border:none;border-top:1px solid var(--green-line);margin:26px 0}
.legal-closing{margin-top:26px;padding-top:18px;border-top:1px solid var(--green-line);font-size:12.5px;line-height:1.65;color:var(--ink-3)}
/* mobile "Jump to section" dropdown — hidden on desktop */
.legal-jump{display:none}
.legal-jump-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.legal-jump-select{width:100%;font-family:var(--body);font-size:14.5px;color:var(--ink);background:#fcfdfb;border:1px solid var(--line);border-radius:11px;padding:11px 14px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%238a948c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

@media(max-width:880px){
  .legal-layout{grid-template-columns:1fr;gap:0}
  .legal-hero-inner{grid-column:1}
  .legal-toc{display:none}
  .legal-doc{padding:24px 22px}
  .legal-jump{display:block;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--green-line)}
}
@media(max-width:600px){
  .legal-doc{padding:22px 18px}
}

/* ── Page header band (track / dashboard intro) ─────────────────────────── */
.page-head{padding:48px 0 8px}
.page-head .eyebrow{margin-bottom:14px}
.page-h1{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.page-sub{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:12px;max-width:64ch}

/* ── Tier cards (service select) ────────────────────────────────────────── */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px 22px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.tier:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(22,40,28,.34);border-color:var(--green-line)}
.tier:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.tier-name{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.015em;color:var(--ink);margin-bottom:4px}
.tier-turn{font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;margin-bottom:16px}
.tier-amt{font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:-.03em;color:var(--ink);line-height:1}
.tier-fee{font-size:12.5px;color:var(--green-deep);font-weight:600;margin-top:6px;min-height:18px}
.tier-cta{margin-top:auto;padding-top:18px}

/* ── Tracking pipeline ──────────────────────────────────────────────────── */
.track-search{max-width:520px}
.track-search .row{display:flex;gap:12px;align-items:flex-end}
.track-search .row .field{flex:1}
.pipeline{display:flex;gap:0;margin:28px 0;counter-reset:step}
.pl-step{flex:1;text-align:center;position:relative;padding-top:34px}
.pl-step::before{content:"";position:absolute;top:11px;left:0;right:0;height:2px;background:var(--line);z-index:0}
.pl-step:first-child::before{left:50%}
.pl-step:last-child::before{right:50%}
.pl-step.done::before,.pl-step.active::before{background:var(--green)}
.pl-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:999px;background:#fff;border:2px solid var(--line);z-index:1;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.pl-step.done .pl-dot{background:var(--green);border-color:var(--green)}
.pl-step.active .pl-dot{background:#fff;border-color:var(--green);color:var(--green);box-shadow:0 0 0 4px var(--green-ring)}
.pl-label{font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.pl-step.done .pl-label,.pl-step.active .pl-label{color:var(--ink)}
.pl-sub{font-size:11px;color:var(--ink-3);margin-top:3px;min-height:14px}

/* key/value detail rows */
.kv{display:grid;grid-template-columns:160px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:1px solid var(--line)}
.kv .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kv .v{color:var(--ink)}
@media (max-width:600px){.kv{grid-template-columns:1fr;gap:3px}.tier-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* simple modal (change request) */
.modal-bg{position:fixed;inset:0;z-index:99990;background:rgba(2,7,5,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}
.modal-bg[hidden]{display:none}
.modal{background:#fff;border-radius:20px;padding:28px;max-width:520px;width:100%;box-shadow:var(--shadow-panel)}
.modal h3{font-family:var(--display);font-weight:700;font-size:20px;margin-bottom:8px}
.modal p{font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:16px}

@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .tier-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
}
@media (max-width:600px){
  .section{padding:56px 0}
  .form-grid{grid-template-columns:1fr}
  /* phone: City full-width, then State + Zip share a row — never cramped 3-up */
  .addr-row{grid-template-columns:1fr 1fr}
  .addr-row>.field:first-child{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* iOS Safari auto-zooms on focus for inputs under 16px; bump to 16px on phones
     only (desktop keeps the tighter 14.5px from the base .field rule). */
  .field input,.field select,.field textarea{font-size:16px}
}

/* ── Manager inspection: 4-bucket status pills (shared: dashboard tables + detail) ──
   Submitted = pastel yellow · Assigned = green · Underway = blue ·
   Completed = green · Cancelled = red. Used with the base .chip. */
/* IN-PROGRESS (Submitted/Assigned/Underway) read as calm/ongoing: a NEUTRAL grey
   fill with a bright, saturated dot + text per status (the .dot inherits currentColor)
   — clean amber / green / blue chosen for crisp contrast on the #f1f3ee fill. */
.chip.st-submitted{background:#f1f3ee;color:#b45309;border-color:var(--line)}
.chip.st-assigned {background:#f1f3ee;color:#15803d;border-color:var(--line)}
.chip.st-underway {background:#f1f3ee;color:#1565c0;border-color:var(--line)}
/* TERMINAL outcomes stand out as FULL colored pills: Completed = green, Cancelled = red. */
.chip.st-completed{background:var(--green-soft);color:var(--green-deep);border-color:var(--green-line)}
.chip.st-cancelled{background:#faf0ee;color:#a4453c;border-color:#eed7d2}

/* Clickable dashboard rows → inspection detail */
.mi-row{cursor:pointer;transition:background .15s}
.mi-row:hover{background:var(--green-soft)}
@media(max-width:760px){.mi-row:hover{background:transparent}}

/* ── Manager Invoices — summary KPI row ──────────────────────────────────────────
   Three IDENTICAL stat cards (reuse the SLA dashboard's .dash-stat treatment), sat in
   the hero band. The green wash dissolves to white via a TALL, gradual --dash-fade band
   (no perceptible edge — same soft-blend spirit as the contact-page hero). The band is
   anchored to the hero bottom and the card padding is DECOUPLED (small, fixed) so the
   fade overlaps the cards and the green→white transition lands around their middle —
   not below them. Body top padding keeps the table close. Scoped via .mi-inv-* so the
   dashboard's own hero/body spacing is untouched. */
.mi-inv-hero{--dash-fade:170px}
.mi-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:14px}
.mi-inv-body{padding-top:16px}
@media(max-width:680px){.mi-kpis{grid-template-columns:1fr}}

/* ── Manager inspection detail view ──────────────────────────────────────────── */
/* A: solid sand hero + a long body fade that bleeds sand into the top third of the
   first (Status) card, then resolves to white — same technique as the settings page
   (scoped via .mi-hero/.mi-body so the dashboard's .dash-hero/.dash-body are untouched). */
.dash-hero.mi-hero{background:var(--bg-2)}
.dash-body.mi-body{background:linear-gradient(180deg,var(--bg-2) 0,var(--bg-2) 48px,var(--bg) 210px)}
.mi-hero .wrap{position:relative;z-index:1;padding-top:30px}          /* breathing room under the nav */
.mi-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-3);text-decoration:none}
.mi-back:hover{color:var(--green-deep)}
.mi-back svg{transition:transform .18s}
.mi-back:hover svg{transform:translateX(-2px)}
.mi-head{padding:22px 0 30px}                                         /* D: header block, flush-left */
.mi-eyebrow{margin-bottom:14px}                                        /* D: no .tick → eyebrow text aligns with the #ID title + cards */
.mi-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mi-sub{margin-top:10px}
.mi-status-pill{font-size:13px;padding:6px 13px}

/* Invoice detail — COMPACT hero (scoped via .mi-invd-*; the inspection detail + report
   viewer share .mi-hero/.mi-head/.mi-eyebrow/.mi-sub and stay untouched). Pulls the
   back link → eyebrow → title → subline → summary card tightly together. */
.mi-invd-hero .wrap{padding-top:18px}
.mi-invd-hero .mi-head{padding:10px 0 14px}
.mi-invd-hero .mi-eyebrow{margin-bottom:8px}
.mi-invd-hero .mi-sub{margin-top:6px}
.dash-body.mi-invd-body{padding-top:12px}

/* Status card */
.mi-status-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.mi-status-head-main{flex:1;min-width:0}
.mi-status-head .mi-status-pill{flex:none}

/* Slim, modern 4-step progress track: done = green + check, current = emphasized ring,
   future = muted; thin connectors. */
.mi-stepper{display:flex;margin:24px 0 6px}
.mi-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.mi-step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.mi-step:first-child::before{display:none}
.mi-step.done::before,.mi-step.active::before{background:var(--green)}
.mi-node{position:relative;z-index:1;width:26px;height:26px;border-radius:999px;background:#fff;border:2px solid var(--line);display:grid;place-items:center;color:var(--ink-3);font-weight:700;font-size:11px;transition:box-shadow .18s,background .18s,border-color .18s}
.mi-step.done .mi-node{background:var(--green);border-color:var(--green);color:#fff}
.mi-step.active .mi-node{background:#fff;border-color:var(--green);color:var(--green);box-shadow:0 0 0 3px var(--green-ring)}
.mi-step.todo .mi-node{opacity:.65}
.mi-step-label{margin-top:9px;font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.mi-step.done .mi-step-label,.mi-step.active .mi-step-label{color:var(--ink);font-weight:700}
.mi-step-date{font-size:10.5px;color:var(--ink-3);margin-top:3px;min-height:13px}

/* Cancelled banner (shown instead of the stepper) */
.mi-cancelled-banner{display:flex;align-items:center;gap:10px;margin:18px 0 4px;padding:14px 16px;border-radius:12px;background:#faf0ee;border:1px solid #eed7d2;color:#a4453c;font-weight:700;font-size:14px}

/* Status footer — assigned inspector, completed SLA summary, and a light cancel
   affordance (replaces the old heavy banner + outlined-button stack). */
.mi-assigned{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;color:var(--ink-2)}
.mi-assigned svg{color:var(--green);flex:none}
.mi-assigned b{color:var(--ink);font-weight:700}
.mi-sla{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.mi-sla-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.mi-sla-item svg{color:var(--green);flex:none}
.mi-sla-item b{color:var(--ink);font-weight:700}
.mi-sla-note{color:var(--ink-3);font-size:12.5px}
.mi-statusline{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--ink-2);line-height:1.5}
.mi-statusline svg{flex:none;color:var(--ink-3)}
/* align-items:center centers the hint text + Cancel button to each other; padding-top
   matches the card's 30px bottom padding so the pair is also centered in the strip
   (divider -> card bottom edge), not hugging the top. */
.mi-cancel-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:30px;border-top:1px solid var(--line)}
.mi-cancel-hint{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}
.mi-cancel-hint svg{color:var(--ink-3);flex:none}
.btn.mi-cancel-btn{background:#fff;color:#a4453c;border-color:#eed7d2;box-shadow:0 1px 2px rgba(22,34,27,.04)}
.btn.mi-cancel-btn:hover:not(:disabled){background:#faf0ee;border-color:#e3b7af;transform:translateY(-1px)}

/* Sectioned request details */
.mi-sec{margin-top:22px}
.mi-sec:first-of-type{margin-top:4px}
.mi-sec-title{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin-bottom:2px;padding-bottom:8px;border-bottom:1px solid var(--green-line)}
.mi-details-card .kv{grid-template-columns:180px 1fr}
.mi-details-card .kv-empty{color:var(--ink-3)}   /* full-form blank: muted "—" */
.mi-report-cta{margin-top:14px;text-decoration:none}
.mi-report-pending{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;color:var(--ink-2);line-height:1.5}
.mi-report-pending svg{flex:none;color:var(--ink-3)}
@media(max-width:600px){.mi-details-card .kv{grid-template-columns:1fr;gap:3px}}

/* ── Public report viewer (clients.dsisauto.com/report/:token) ──────────────────
   Layout matches the ORIGINAL portal report: branded masthead + summary strip, a
   sticky left sidebar rail (Inspection Overview / Requestor / Actions), and a main
   column of accordion sections with TWO-COLUMN label-over-value fields + green-bar
   headers. Reskinned to the clients design system (.card, eyebrows, green tokens,
   .chip, .btn, .tbl). The .rep-* layer is layout + accordion mechanism only. */
.kv-empty{color:var(--ink-3)}
.rep-hero .page-h1{margin-top:4px}

/* masthead / summary strip */
.rep-masthead{margin-bottom:18px}
.rep-mast-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rep-mast-pill{flex:none}
.rep-mast-meta{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.rep-meta .l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rep-meta .v{font-size:15px;font-weight:600;color:var(--ink);margin-top:2px}

/* page layout: sticky sidebar rail + main column */
.rep-layout{display:grid;grid-template-columns:282px minmax(0,1fr);gap:24px;align-items:start}
.rep-rail{position:sticky;top:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.rep-rail-card{padding:18px 20px}
.rep-rail-title{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green-deep);margin-bottom:12px}
.rep-rail-bar{flex:none;width:3px;height:14px;border-radius:2px;background:var(--green)}
.rep-rail-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.rep-rail-row:first-of-type{border-top:none}
.rep-rail-row .rl{color:var(--ink-3);font-weight:600;flex:none}
.rep-rail-row .rv{color:var(--ink);text-align:right;min-width:0;word-break:break-word}
.rep-rail-row .rv.accent{color:var(--green-deep);font-weight:700}
.rep-rail-actions{display:flex;flex-direction:column;gap:8px}
.rep-rail-actions .btn{width:100%}

/* main column accordions — softened header (thin accent, lighter title, more air) */
.rep-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.rep-sec{padding:0;overflow:hidden}
.rep-sec-head{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--body);padding:22px 28px;transition:background .14s}
.rep-sec-head:hover{background:var(--bg-2)}
.rep-sec-bar{flex:none;width:3px;height:18px;border-radius:2px;background:var(--green);opacity:.78;transition:opacity .18s,height .18s}
.rep-sec.is-open .rep-sec-bar{opacity:1;height:20px}
.rep-sec-title{flex:1;font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.005em;color:var(--ink-2);transition:color .18s}
.rep-sec.is-open .rep-sec-title{color:var(--ink)}
.rep-chev{flex:none;color:var(--ink-3);transition:transform .25s,color .18s}
.rep-sec.is-open .rep-chev{transform:rotate(180deg);color:var(--green-deep)}
.rep-sec.is-open .rep-sec-head{box-shadow:inset 0 -1px 0 var(--line)}
.rep-sec-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.rep-sec.is-open .rep-sec-body{max-height:18000px}
.rep-sec-inner{padding:22px 28px 28px}

/* kv-grid system — equal columns (minmax(0,1fr) stops a wide/unbreakable value from
   skewing column widths), uniform per-field vertical padding so grid rows AND standalone
   .rep-field share ONE even rhythm, top-aligned label/value baselines. */
.rep-grid,.rep-grid3{display:grid;column-gap:28px;row-gap:0;margin-top:8px;align-items:start}
.rep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rep-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rep-field{min-width:0;padding:9px 0}
.rep-field .rep-fl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.rep-field .rep-fv{font-size:14.5px;color:var(--ink);margin-top:4px;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
.rep-vin{margin-top:14px}
.rep-vin .rep-fv strong{font-weight:800;color:var(--green-deep)}
.rep-sub{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin:22px 0 2px;padding-bottom:8px;border-bottom:1px solid var(--green-line)}
.rep-sec-inner > .rep-sub:first-child{margin-top:0}
.rep-note-block{margin-top:16px}
.rep-note-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep)}
.rep-note{margin-top:6px;font-size:14px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap}
.rep-decl{padding:9px 0;border-top:1px solid var(--line)}
.rep-decl:first-of-type{border-top:none}
.rep-decl-head{display:flex;justify-content:space-between;gap:16px;align-items:center}
.rep-decl-label{font-size:13.5px;color:var(--ink-2);font-weight:600}
.rep-decl-right{flex:none;text-align:right}
/* "Yes + note" → clean left-aligned callout under the row (design-system note pattern) */
.rep-decl-note{margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.55;background:var(--green-soft);border:1px solid var(--green-line);border-left:3px solid var(--green);border-radius:8px;padding:9px 12px}
.rep-callout{margin-top:14px;background:var(--green-soft);border:1px solid var(--green-line);border-radius:12px;padding:14px 16px}
.rep-callout:first-child{margin-top:0}
.rep-callout-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep)}
.rep-callout-body{margin-top:6px;font-size:14px;color:var(--ink);line-height:1.6;white-space:pre-wrap}

/* media — click-through photo grid + per-photo label banner + metadata caption */
.rep-media-bar{display:flex;justify-content:flex-end;margin-bottom:14px}
.rep-media{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.rep-photo{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.rep-photo:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(22,40,28,.3);border-color:var(--green-line)}
.rep-photo-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.rep-photo-img img{width:100%;height:100%;object-fit:cover;display:block}
/* placeholder tile — when a photo has no backing image (seed/url-less): clean icon, no broken <img> */
.rep-photo-ph{cursor:default}
.rep-photo-ph:hover{transform:none;box-shadow:none;border-color:var(--line)}
.rep-photo-ph .rep-photo-img{display:flex;align-items:center;justify-content:center;background:var(--bg-2)}
.rep-photo-ph-ico{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink-3);opacity:.5;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.rep-photo-label{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 7px;background:linear-gradient(180deg,rgba(20,34,27,0),rgba(20,34,27,.82) 70%,rgba(20,34,27,.92));color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:center;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.rep-photo-cap{padding:7px 10px;font-size:11px;line-height:1.45;color:var(--ink-3);font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
.rep-cap-time{display:block;color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-cap-gps{display:block;font-size:10px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-cap-src{display:inline-block;margin-left:5px;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.rep-videos{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}

/* certification + footer */
.rep-cert{border-color:var(--green-line);background:linear-gradient(180deg,var(--green-soft),#fff 72px)}
.rep-cert-statement{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:10px 0 4px}
.rep-cert .rep-grid{margin-top:14px}
.rep-cert-sig{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.rep-sig-item{min-width:0}
.rep-sig-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.rep-sig-name{font-size:30px;line-height:1.05;color:var(--ink)}
.rep-sig-note{font-size:11px;color:var(--ink-3);font-style:italic;margin-top:4px}
.rep-sig-date{font-size:14.5px;font-weight:600;color:var(--ink);margin-top:6px}
.rep-sig-line{border-bottom:1px solid var(--ink-3);max-width:200px;height:1px;margin-top:20px;opacity:.55}
.rep-footer{font-size:11.5px;color:var(--ink-3);line-height:1.65;text-align:center;margin:6px 0 0}
@media(max-width:600px){.rep-cert-sig{grid-template-columns:1fr;gap:16px}}

@media(max-width:860px){
  .rep-layout{grid-template-columns:1fr;gap:16px}
  .rep-rail{position:static}
}
@media(max-width:600px){
  .rep-grid,.rep-grid3{grid-template-columns:1fr}
  .rep-sec-head,.rep-sec-inner{padding-left:18px;padding-right:18px}
  .rep-mast-meta{gap:12px 24px}
  .rep-media{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── Manager contact/support — two-column support layout (form + info rail) ───── */
.mc-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:22px;align-items:start}
.mc-rail{display:flex;flex-direction:column;gap:18px}
.mc-rail-card{padding:20px 22px}
.mc-rail-h{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.mc-rail-p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0 0 14px}

/* crisper form fields — scoped to this page so each input reads as a distinct box */
.mc-form .field input,.mc-form .field select,.mc-form .field textarea{background:#fff;border:1.5px solid #c4cfb6}
.mc-form .field input:hover,.mc-form .field select:hover,.mc-form .field textarea:hover{border-color:#a9bd93}
.mc-form .field input:focus,.mc-form .field select:focus,.mc-form .field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-ring)}

/* "From" identity block at the top of the form column */
.mc-from{background:var(--green-soft);border:1px solid var(--green-line);border-radius:14px;padding:15px 18px}
.mc-from-ey{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin-bottom:11px}
.mc-from-grid{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:14px}
.mc-from-grid .k{color:var(--ink-3);font-weight:600}
.mc-from-grid .v{color:var(--ink);min-width:0;word-break:break-word}
.mc-from-note{font-size:12px;color:var(--ink-3);margin:12px 0 0}

/* "What happens next" numbered steps */
.mc-steps{display:flex;flex-direction:column;gap:14px;margin-top:2px}
.mc-step{display:flex;gap:12px;align-items:flex-start}
.mc-step-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-deep);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.mc-step-t{font-size:14px;font-weight:700;color:var(--ink)}
.mc-step-s{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:2px}
.mc-resp{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* "Reach us directly" mail block */
.mc-mail{display:flex;align-items:center;gap:12px;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .15s,background .15s}
.mc-mail:hover{border-color:var(--green-line);background:var(--green-soft)}
.mc-mail-txt{display:flex;flex-direction:column;min-width:0}
.mc-mail-l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mc-mail-v{font-size:14.5px;font-weight:600;color:var(--green-deep);overflow:hidden;text-overflow:ellipsis}
.mc-mail + .mc-mail{margin-top:10px}

/* green-wash extent — keep the hero fully washed (no early bottom fade) and continue the
   wash into the body, fading to white ~1/3 into the "From" card. Scoped (.mc-hero/.mc-body)
   so other dash pages are unaffected. */
.dash-hero.mc-hero{--dash-fade:0px}
.dash-hero.mc-hero .dash-hero-top{padding-bottom:12px}
.dash-body.mc-body{padding-top:14px;background:linear-gradient(180deg,var(--bg-2) 0,var(--bg) 170px)}

@media(max-width:860px){.mc-layout{grid-template-columns:1fr;gap:16px}}