:root{
  --g:#1B7A5E;--gd:#0F4F3C;--gm:#2DA87F;--gl:#E8F5F1;
  --ink:#111410;--mid:#3D3D38;--lt:#7A7A72;--cream:#F7F6F1;--white:#fff;
  --border:rgba(27,122,94,0.15);
  --w-content:880px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;overflow-x:hidden}

/* ── LOGO ── */
.logo{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:800;letter-spacing:-0.5px;text-decoration:none;display:inline-block}
.logo-site{color:var(--g)}
.logo-brief{color:var(--ink)}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;height:62px;background:rgba(247,246,241,0.97);backdrop-filter:blur(10px);border-bottom:3px solid var(--gm)}
nav::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,#2DA87F 0%,#1B7A5E 12%,#0F4F3C 25%,#1B7A5E 38%,#2DA87F 50%,#5BC4A0 62%,#2DA87F 75%,#1B7A5E 88%,#2DA87F 100%);background-size:300% 100%;animation:nav-shimmer 10s linear infinite;pointer-events:none}
@keyframes nav-shimmer{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@media (prefers-reduced-motion: reduce){nav::after{animation:none;background:var(--gm)}}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-link{font-size:13px;color:var(--mid);padding:5px 12px;border-radius:6px;border:none;background:none;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none}
.nav-link:hover{background:var(--gl);color:var(--g)}
.nav-cta{background:var(--g);color:#fff;border:none;padding:7px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s}
.nav-cta:hover{background:var(--gd)}

/* ── HERO ── */
.hero{padding:80px 28px 48px;text-align:center;max-width:var(--w-content);margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:var(--gl);border:0.5px solid rgba(27,122,94,0.25);border-radius:99px;padding:5px 14px;font-size:11px;color:var(--g);margin-bottom:20px;font-weight:500}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--gm)}
.hero h1{font-family:'DM Sans',sans-serif;font-size:clamp(30px,4vw,40px);font-weight:700;line-height:1.0;letter-spacing:-0.8px;margin-bottom:14px;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--g)}
.hero-sub{font-size:16px;color:var(--mid);line-height:1.6;max-width:540px;margin:0 auto 10px;font-weight:300}
.hero-note{font-size:12px;color:var(--lt);margin-bottom:32px}
.hero-note strong{color:var(--g);font-weight:500}
/* hero-q-bubble: index hero variant of pricing-q-cta — centred under the hero note */
.hero-q-bubble{margin:0 auto 32px;display:inline-flex}

/* ── BUBBLE FAMILY (s27) ──
   Two shared classes for the 800px bubble-family width — used sitewide so
   pages stay aligned without per-page CSS duplication.

   .bubble-zone — width-only layout container. Invisible. Use when a region
   contains MULTIPLE surfaces that need to align (e.g. structural's survey
   tool zone holding CTA strip + issue picker + voice callout). No visual
   styling of its own.

   .surface-bubble — full visual bubble shell. Use when the element IS a
   surface (e.g. renovate's .project-selector). Inherits the canonical
   family signature: white bg, 0.5px border, 14px radius, soft green halo
   shadow. Kin to .siteagent-box / .ai-box / .demo-box.

   Rule of thumb: does this element draw itself, or just organise children?
   Draws → .surface-bubble. Organises → .bubble-zone. */
.bubble-zone{
  max-width:800px;
  margin:0 auto;
}
.surface-bubble{
  max-width:800px;
  margin:0 auto;
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 40px rgba(27,122,94,0.08);
}

/* ── AI BOX ── */
.ai-box{background:var(--white);border:0.5px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 4px 40px rgba(27,122,94,0.08);max-width:800px;margin:0 auto 24px}
.ai-head{background:var(--gd);padding:12px 18px;display:flex;align-items:center;gap:8px}
.ai-dots{display:flex;gap:5px}
.ai-dot{width:7px;height:7px;border-radius:50%}
.ai-head-label{font-family:'DM Sans',sans-serif;font-size:12px;color:rgba(255,255,255,0.85);flex:1}
.uses-pill{font-size:10px;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.1);padding:3px 9px;border-radius:99px}
.type-tabs{display:flex;flex-direction:column;gap:6px;padding:12px 14px 12px;position:relative}
/* s40: separator that fades out at both ends (matches the deployed design) —
   a border-bottom can't fade, so use a gradient pseudo-element instead:
   transparent → green → transparent across the width. */
.type-tabs::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;
  background:linear-gradient(to right, transparent, var(--gm) 20%, var(--gm) 80%, transparent);
}
.type-tab-row{display:grid;gap:6px}
.type-tab-row[data-cols="4"]{grid-template-columns:repeat(4, 1fr)}
.type-tab-row[data-cols="3"]{grid-template-columns:repeat(3, 1fr)}
.type-tab{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;padding:6px 12px;border-radius:8px;border:0.5px solid rgba(0,0,0,0.1);background:rgba(0,0,0,0.03);color:var(--mid);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .12s;min-width:0}
.type-tab:hover{border-color:var(--g);color:var(--g);background:var(--gl)}
.type-tab.on{border-color:var(--g);color:var(--gd);background:var(--gl)}
/* s31: type-tab icon + SOON pill + aria-disabled (greyed) state */
.type-tab-icon{width:14px;height:14px;flex-shrink:0}
.type-tab-soon{
  font-size:9px;font-weight:600;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--lt);
  background:var(--cream);
  padding:1px 6px;border-radius:99px;
  margin-left:3px;line-height:1.4;
}
.type-tab[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:0.65;
}
.type-tab[aria-disabled="true"]:hover{
  /* override the green hover — SOON tabs stay muted */
  border-color:rgba(0,0,0,0.1);
  color:var(--mid);
  background:rgba(0,0,0,0.03);
}
.sugs{padding:8px 14px 0;display:flex;gap:5px;flex-wrap:wrap}
.sug{font-size:11px;padding:3px 10px;border-radius:99px;border:0.5px solid rgba(0,0,0,0.1);background:rgba(0,0,0,0.03);color:var(--mid);cursor:pointer;transition:all .1s}
.sug:hover{border-color:var(--g);color:var(--g);background:var(--gl)}
.chat-area{padding:12px 14px;min-height:80px;display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto}
.msg{display:flex;gap:7px;align-items:flex-start}
.msg.user{flex-direction:row-reverse}
.av{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600}
.av.ai{background:var(--g);color:#fff;font-family:'DM Sans',sans-serif}
.av.user{background:#DBEAFE;color:#1E40AF}
.bubble{padding:8px 12px;border-radius:10px;font-size:13px;line-height:1.5;max-width:90%}
.bubble.ai{background:rgba(0,0,0,0.04);color:var(--ink);border-radius:3px 10px 10px 10px}
.bubble.user{background:var(--g);color:#fff;border-radius:10px 3px 10px 10px;margin-left:auto}
.result-card{margin:0 14px 6px;background:var(--gd);border-radius:10px;padding:14px;display:none}
.result-card.show{display:block}
.rc-label{font-size:10px;color:rgba(255,255,255,0.5);letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px;font-family:monospace}
.rc-title{font-size:14px;font-weight:500;color:#fff;margin-bottom:6px;font-family:'DM Sans',sans-serif}
.rc-body{font-size:12px;color:rgba(255,255,255,0.75);line-height:1.5;margin-bottom:8px}
.rc-layers{display:flex;flex-direction:column;gap:3px}
.rc-layer{display:flex;gap:7px;padding:5px 8px;background:rgba(255,255,255,0.07);border-radius:5px;font-size:11px}
.rl-num{color:var(--gm);font-weight:600;width:16px;flex-shrink:0}
.rl-text{color:rgba(255,255,255,0.8);flex:1}
.rl-dim{color:rgba(255,255,255,0.4);white-space:nowrap}
.input-row{padding:10px 14px 14px;border-top:0.5px solid rgba(0,0,0,0.08);display:flex;gap:8px;align-items:flex-end}
.ai-input{flex:1;padding:9px 13px;border:0.5px solid rgba(0,0,0,0.12);border-radius:9px;font-size:13px;font-family:'DM Sans',sans-serif;color:var(--ink);background:rgba(0,0,0,0.03);resize:none;min-height:40px;max-height:90px;outline:none;transition:border .15s}
.ai-input:focus{border-color:var(--g);background:#fff}
.send-btn{width:38px;height:38px;border-radius:9px;background:var(--g);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.send-btn:hover{background:var(--gd)}
.send-btn:disabled{opacity:.35;cursor:not-allowed}
.typing{display:flex;gap:3px;align-items:center;padding:6px 0}
.typing span{width:5px;height:5px;border-radius:50%;background:var(--gm);animation:bounce 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* ── SOCIAL PROOF ── */
.social-proof{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.sp-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--lt)}
.sp-dot{width:4px;height:4px;border-radius:50%;background:var(--gm)}

/* ── SECTION DIVIDER ── */
.divider{max-width:var(--w-content);margin:48px auto 0;height:0.5px;background:var(--border)}

/* ── FEATURES ── */
.features{max-width:var(--w-content);margin:0 auto;padding:48px 28px 64px}
.feat-hdr{text-align:center;margin-bottom:40px}
.feat-hdr h2{font-family:'DM Sans',sans-serif;font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-0.5px;margin-bottom:8px}
.feat-hdr p{font-size:14px;color:var(--lt)}
.feat-block{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px;align-items:start}
.feat-block.rev{direction:rtl}
.feat-block.rev>*{direction:ltr}
.feat-info{padding:4px 0}
.feat-num{font-size:10px;font-weight:600;color:var(--g);letter-spacing:.08em;text-transform:uppercase;font-family:monospace;margin-bottom:6px}
.feat-title{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:var(--ink);margin-bottom:10px;letter-spacing:-0.3px;line-height:1.25}
.feat-desc{font-size:13px;color:var(--mid);line-height:1.6;margin-bottom:14px}
.feat-pts{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.feat-pt{display:flex;gap:7px;font-size:12px;color:var(--mid);line-height:1.5}
.feat-pt-check{color:var(--g);flex-shrink:0;margin-top:1px}
.tier-pill{font-size:11px;padding:3px 10px;border-radius:99px;display:inline-block;margin-right:5px;font-weight:500}
.tp-free{background:var(--gl);color:var(--gd)}
.tp-pro{background:var(--gl);color:var(--g)}
.tp-adv{background:#FEF3C7;color:#92400E}
.tp-elite{background:#F3E8FF;color:#6B21A8}
/* ── DEMO BOX FAMILY (s27) ──
   Canonical shell for "here's a generated document" previews. Mirrors the
   .ai-box / .siteagent-box surface treatment: 14px radius, soft green halo
   shadow, 0.5px border. Inside: thin gradient strip (5px) flush across top,
   slim meta row labelling the doc type, then a paper-true .sheet rendering
   that mirrors action-*-sample.html structure exactly (head with proj block
   + sb-mark, title row, .sec blocks, foot disclaimer).

   Strip is Option A "flat top" — no side wrap. overflow:hidden on .demo-box
   masks the strip's ends so it tucks under the 14px radius cleanly. If a
   later session wants the wrap-down variant (s27 strip-lab Option C), only
   the .demo-strip rule needs reworking — markup stays identical.

   Used by: index.html F1/F2/F3 feat-blocks. Available sitewide. */
.demo-box{
  background:var(--white);
  border:0.5px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 40px rgba(27,122,94,0.08);
  position:relative;
}
.demo-strip{
  height:5px;
  background:linear-gradient(90deg,
    var(--gm) 0%,
    var(--g) 30%,
    var(--gd) 50%,
    var(--g) 70%,
    var(--gm) 100%);
}
.demo-meta{
  padding:9px 16px;
  display:flex;align-items:center;gap:8px;
  border-bottom:0.5px solid var(--border);
}
.demo-meta-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--gm);
  box-shadow:0 0 0 3px rgba(45,168,127,0.18);
}
.demo-meta-label{font-size:11px;color:var(--ink);font-weight:500}
.demo-meta-spacer{flex:1}
.demo-body{padding:18px}

/* Clickable demo-box variant (s28). The whole card is a hover target without
   looking like a hyperlink — no green border, no lift, no arrow. Just a
   subtle shadow deepen on hover. Keeps full keyboard accessibility via the
   focus ring. */
a.demo-box-link{
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:box-shadow .25s ease;
}
a.demo-box-link:hover{
  box-shadow:0 6px 44px rgba(27,122,94,0.11);
}
a.demo-box-link:focus-visible{
  outline:none;
  border-color:var(--g);
  box-shadow:0 0 0 3px rgba(45,168,127,0.25),0 4px 40px rgba(27,122,94,0.08);
}
/* .demo-meta-action retained as a class so the markup span doesn't crash;
   visually hidden so it reads as a regular card. Screen readers still get
   the action context — handy for keyboard users. */
.demo-meta-action{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

/* ── BRIEF FORM family (s28 soft-launch) ──
   Styles for the shared brief-form.js module. Both brief.html (full page)
   and index.html (inline expand inside AI box bubble) mount the same form
   markup which uses these classes. Tokens are sitewide so dark mode is
   automatic. */
.bf-error{
  background:rgba(220,38,38,0.06);
  border:0.5px solid rgba(220,38,38,0.25);
  border-radius:10px;
  padding:12px 14px;margin-bottom:14px;
  font-size:13px;color:#A32D2D;line-height:1.5;
}
.bf-error strong{color:#7F1D1D}

.bf-prefill-note{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;margin-bottom:18px;
  background:var(--gl);
  border-radius:8px;
  font-size:12px;color:var(--gd);line-height:1.4;
}
.bf-prefill-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--gm);
  box-shadow:0 0 0 3px rgba(45,168,127,0.18);
  flex-shrink:0;
}
.bf-prefill-note strong{font-weight:600}
.bf-prefill-clear{
  margin-left:auto;
  background:none;border:none;
  font-size:11px;color:var(--g);
  font-family:'DM Sans',sans-serif;
  cursor:pointer;text-decoration:underline;
  padding:0;
}
.bf-prefill-clear:hover{color:var(--gd)}

.bf-field{margin-bottom:18px}
.bf-label{
  display:block;
  font-size:11px;color:var(--g);font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:6px;
  /* s31: align with field (was inheriting centre from index.html STEP wrapper)
     + green-to-transparent fade underline mirroring .sec-label in doc-print.css,
     so the wizard reads as the same family as the document it generates. */
  text-align:left;
  padding-bottom:6px;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(
    to right,
    var(--gm) 0%,
    var(--gm) 30%,
    rgba(45,168,127,0.45) 65%,
    rgba(45,168,127,0) 100%
  ) 1;
}
.bf-input,.bf-textarea{
  width:100%;padding:11px 13px;
  border:0.5px solid var(--border);border-radius:8px;
  font-family:'DM Sans',sans-serif;font-size:14px;
  background:var(--white);color:var(--ink);
  box-sizing:border-box;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.bf-input:focus,.bf-textarea:focus{
  border-color:var(--g);
  box-shadow:0 0 0 3px rgba(45,168,127,0.18);
}
.bf-textarea{line-height:1.55;resize:vertical;min-height:80px}

/* s29: optional-field tag inside .bf-label, and hint line under the input.
   Used by Dimensions field (05) which is optional. Pattern reusable for
   any future optional fields. */
.bf-label-opt{
  display:inline-block;
  font-size:9px;
  font-weight:500;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--lt);
  background:var(--cream);
  padding:2px 6px;
  border-radius:99px;
  margin-left:6px;
  vertical-align:middle;
}
.bf-hint{
  font-size:11.5px;
  color:var(--mid);
  line-height:1.45;
  margin-top:5px;
  margin-bottom:0;
  font-style:italic;
  /* s31: align with the field above (was inheriting centre from index.html
     STEP wrapper). Mirrors the .verify-line treatment on the rendered brief. */
  text-align:left;
}

.bf-chips{display:flex;flex-wrap:wrap;gap:6px}
.bf-chip{
  font-size:12px;padding:7px 13px;
  border:0.5px solid var(--border);border-radius:99px;
  background:var(--white);color:var(--mid);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all .12s ease;user-select:none;
}
.bf-chip:hover{border-color:var(--gm);color:var(--ink)}
.bf-chip.on{
  border:1.5px solid var(--g);
  background:rgba(45,168,127,0.08);
  color:var(--gd);
  font-weight:500;
  padding:6px 12px;
}

/* s30: split-input row for Sender (name + role dropdown).
   Mobile collapses to a stacked column. */
.bf-sender-row{
  display:grid;grid-template-columns:1fr 160px;gap:8px;
}
@media (max-width: 540px){
  .bf-sender-row{grid-template-columns:1fr}
}
.bf-select{
  width:100%;padding:11px 13px;
  border:0.5px solid var(--border);border-radius:8px;
  font-family:'DM Sans',sans-serif;font-size:14px;
  background:var(--white);color:var(--ink);
  box-sizing:border-box;outline:none;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.bf-select:focus{
  border-color:var(--g);
  box-shadow:0 0 0 3px rgba(45,168,127,0.18);
}
/* s31: when the disabled placeholder ('Who are you?') is the current
   selection, mute the select text to read as a hint, not a value.
   :has() lights up only when option[value=""] is :checked — i.e. the
   placeholder. Once a real role is picked the rule stops matching and
   the text returns to var(--ink). Older browsers without :has() see
   full-strength text in both states (graceful — no broken layout). */
.bf-select:has(option[value=""]:checked){
  color:var(--lt);
}

/* s30: pulse to signal silent first-name strip on Sender input.
   Animates a soft green ring twice and releases. */
@keyframes bf-pulse-ring{
  0%   { box-shadow: 0 0 0 0 rgba(45,168,127,0.35); }
  50%  { box-shadow: 0 0 0 6px rgba(45,168,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,168,127,0); }
}
.bf-input.bf-pulse{
  animation: bf-pulse-ring 1s ease-out 0s 2;
  border-color: var(--g);
}
@media (prefers-reduced-motion: reduce){
  .bf-input.bf-pulse{animation:none}
}

/* s30: location row — short input + inline link as override affordance */
.bf-loc-row{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.bf-loc-row .bf-input{max-width:200px}
.bf-loc-row .bf-input.bf-loc-full{max-width:none;flex:1;min-width:200px}
.bf-loc-link{
  font-size:12px;color:var(--g);cursor:pointer;
  text-decoration:none;font-weight:500;
  white-space:nowrap;
}
.bf-loc-link:hover{text-decoration:underline}

/* s30: quick-pick chip rows. Two variants:
     .bf-pick       — REPLACE mode (Job title). Tap fills the input.
     .bf-pick-plus  — APPEND mode (Scope).      Tap appends a sentence.
   Both share row layout; both have "See more →" button at the end. */
.bf-pick-row{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:8px;
  align-items:center;
}
.bf-pick, .bf-pick-plus{
  font-size:11px;padding:4px 10px;
  border:0.5px solid var(--border);border-radius:99px;
  background:var(--white);color:var(--mid);
  cursor:pointer;
  transition:all .12s ease;
  font-family:'DM Sans',sans-serif;
  user-select:none;
}
.bf-pick:hover, .bf-pick-plus:hover{
  border-color:var(--gm);color:var(--ink);
}
.bf-pick.on{
  background:var(--gl);
  border-color:var(--gm);
  color:var(--g);
  font-weight:500;
}
.bf-pick-plus::before{
  content:"+ ";color:var(--gm);font-weight:600;
}
.bf-pick-plus.used{
  opacity:0.55;
  background:var(--gl);
  color:var(--mid);
}
.bf-pick-plus.used::before{
  content:"✓ ";color:var(--g);
}
.bf-pick-more{
  font-size:11px;padding:4px 10px;
  color:var(--g);cursor:pointer;font-weight:500;
  border:0;background:transparent;
  font-family:'DM Sans',sans-serif;
}
.bf-pick-more:hover{text-decoration:underline}

.bf-submit{
  width:100%;padding:14px;margin-top:8px;
  background:var(--g);color:#fff;
  border:none;border-radius:10px;
  font-size:15px;font-weight:500;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  transition:background .15s ease;
}
.bf-submit:hover{background:var(--gd)}

.bf-foot{font-size:11px;color:var(--lt);text-align:center;margin-top:10px;line-height:1.5}

/* RESULT — share banner + paper sheet + action row */
/* The share banner is the post-generation surface where the user composes
   the WhatsApp message before sending. Layout is vertical (not flex-row) —
   stacked sections: header → preset chips → textarea → tidy helper → actions.
   See brief-form.js renderResultPanel() for the matching HTML structure. */

.bf-share{
  display:block;
  padding:14px 16px;margin-bottom:14px;
  background:var(--gl);
  border:0.5px solid var(--gm);
  border-radius:10px;
}

/* Header row — green tick + title block, side-by-side */
.bf-share-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:12px;
}
.bf-share-icon{
  flex-shrink:0;
  width:28px;height:28px;border-radius:50%;
  background:var(--white);color:var(--gd);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
}
.bf-share-titleblock{flex:1;min-width:0}
.bf-share-title{
  font-size:13px;font-weight:600;color:var(--gd);
  margin-bottom:2px;
}
.bf-share-sub{
  font-size:11px;color:var(--mid);
  line-height:1.4;
}

/* Preset chips row — auto-wraps on narrow viewports */
.bf-preset-row{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:10px;
}
.bf-preset-chip{
  font-size:11px;padding:5px 11px;
  border:0.5px solid var(--border);border-radius:99px;
  background:var(--white);color:var(--mid);
  cursor:pointer;
  transition:all .12s ease;
  font-family:'DM Sans',sans-serif;
  user-select:none;
}
.bf-preset-chip:hover{border-color:var(--gm);color:var(--ink)}
.bf-preset-chip.on{
  background:var(--gm);color:#fff;
  border-color:var(--gm);font-weight:500;
}

/* Message textarea — full width, comfortable height */
.bf-share-label{
  display:block;
  font-size:11px;color:var(--mid);
  margin-bottom:5px;font-weight:500;
}
.bf-share-msg{
  width:100%;
  padding:10px 12px;
  background:var(--white);
  border:0.5px solid var(--border);border-radius:8px;
  font-size:12px;line-height:1.5;color:var(--ink);
  font-family:'DM Sans',sans-serif;
  resize:vertical;
  margin-bottom:8px;
  box-sizing:border-box;
}
.bf-share-msg:focus{
  outline:none;border-color:var(--gm);
  box-shadow:0 0 0 3px rgba(45,168,127,0.1);
}

/* Tidy-up row — hint + button on one line, wraps on narrow */
.bf-tidy-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-bottom:12px;
  padding:6px 0;
}
.bf-tidy-hint{
  font-size:11px;color:var(--lt);
  font-style:italic;
  flex:1;min-width:0;
}
.bf-tidy-btn{
  padding:6px 12px;
  background:var(--white);color:var(--gd);
  border:0.5px solid var(--gm);border-radius:99px;
  font-size:11px;font-weight:500;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  transition:all .12s ease;
  display:inline-flex;align-items:center;gap:4px;
  flex-shrink:0;
}
.bf-tidy-btn:hover{background:var(--gl);border-color:var(--gd)}
.bf-tidy-btn:disabled{opacity:0.6;cursor:not-allowed}
.bf-tidy-icon{color:var(--gm);font-weight:700}

/* Action row — three buttons in a flex row, wraps on narrow viewport */
.bf-share-actions{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-top:4px;
}
.bf-share-action{
  flex:1;min-width:120px;
  padding:10px 14px;
  background:var(--white);color:var(--ink);
  border:0.5px solid var(--border);border-radius:8px;
  font-size:12px;font-weight:500;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;text-decoration:none;
  text-align:center;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .12s ease;
}
.bf-share-action:hover{border-color:var(--gm);background:var(--gl)}
.bf-share-action.copied{
  background:var(--gm);color:#fff;border-color:var(--gm);
}
.bf-share-action-primary{
  background:var(--g);color:#fff;border-color:var(--g);
  font-weight:600;
}
.bf-share-action-primary:hover{
  background:var(--gd);border-color:var(--gd);color:#fff;
}

/* Hidden URL cache — not visible to user, used by copy + whatsapp logic */
.bf-share-url-hidden{
  display:none;
}

/* Legacy compatibility — keep old .bf-share-url / .bf-share-btn / .bf-share-body
   selectors valid in case anything still references them. Harmless if unused. */
.bf-share-body{flex:1;min-width:0}
.bf-share-url{
  font-size:11px;color:var(--mid);
  font-family:monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bf-share-btn{
  flex-shrink:0;
  padding:8px 14px;
  background:var(--g);color:#fff;
  border:none;border-radius:6px;
  font-size:12px;font-weight:500;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  transition:background .15s ease;
}
.bf-share-btn:hover{background:var(--gd)}
.bf-share-btn.copied{background:var(--gm)}

.bf-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.bf-act{
  flex:1;min-width:0;padding:11px;
  background:var(--white);color:var(--ink);
  border:0.5px solid var(--border);border-radius:8px;
  font-size:12px;font-weight:500;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:all .15s ease;
}
.bf-act:hover{border-color:var(--gm);background:var(--gl)}
.bf-act-primary{
  background:var(--g);color:#fff;border-color:var(--g);
}
.bf-act-primary:hover{background:var(--gd);border-color:var(--gd);color:#fff}

/* Mobile tweaks */
@media (max-width:600px){
  .bf-actions{flex-direction:column}
  .bf-act{width:100%}
  .bf-share-actions{flex-direction:column}
  .bf-share-action{width:100%}
  .bf-tidy-row{flex-direction:column;align-items:stretch}
  .bf-tidy-btn{align-self:flex-start}
}

/* Mount panel used INSIDE index.html's AI Document Assistant bubble.
   When user picks 'Work brief' type + a trade, the form expands here. */
.bf-mount-wrap{
  margin:14px;
  padding:18px;
  background:var(--white);
  border:0.5px solid var(--gm);
  border-radius:12px;
  box-shadow:0 4px 30px rgba(27,122,94,0.10);
  text-align:left; /* s40: reset .hero's inherited text-align:center — the
                      mount panel hosts left-aligned form/wizard content */
}
.bf-mount-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:0.5px solid var(--border);
}
.bf-mount-eyebrow{
  font-size:11px;color:var(--g);font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
}
.bf-mount-close{
  background:none;border:none;
  font-size:11px;color:var(--mid);
  font-family:'DM Sans',sans-serif;
  cursor:pointer;padding:4px 8px;
  border-radius:6px;
  transition:all .15s ease;
}
.bf-mount-close:hover{background:var(--gl);color:var(--gd)}

/* Coming soon overlay for non-brief types */
.bf-coming-soon{
  margin:14px;
  padding:28px 24px;
  background:var(--gl);
  border:0.5px solid var(--gm);
  border-radius:12px;
  text-align:center;
}
.bf-cs-icon{font-size:26px;margin-bottom:8px;opacity:0.7}
.bf-cs-title{
  font-family:'DM Sans',sans-serif;
  font-size:16px;font-weight:600;color:var(--ink);
  margin-bottom:8px;
}
.bf-cs-body{
  font-size:13px;color:var(--mid);
  line-height:1.55;max-width:380px;margin:0 auto 14px;
}
.bf-cs-back{
  padding:8px 16px;
  background:var(--g);color:#fff;
  border:none;border-radius:8px;
  font-size:12px;font-weight:500;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
}
.bf-cs-back:hover{background:var(--gd)}

/* ── APP HEADER family (s28) ──
   Sitewide bubble header for "app surface" cards — the project planner on
   renovate.html, the structural survey on structural.html, the report form
   on reports.html. Replaces the old per-page thick saturated green banners
   (.ps-head / .survey-head / .rf-head — all retired). Pattern: a 5px gradient
   strip across the top + a thin meta row with label (left) and reference text
   (right), separated from the body by a 1px var(--gm) underline that ties the
   header into a green frame matching the strip.

   Shape mirrors .demo-strip/.demo-meta but tuned for "this is an app shell"
   rather than "this is a paper preview". No traffic-light dots — those were
   skeuomorphic OS-window chrome; the strip alone communicates "surface". */
.app-strip{
  height:5px;
  background:linear-gradient(90deg,
    var(--gm) 0%,
    var(--g) 30%,
    var(--gd) 50%,
    var(--g) 70%,
    var(--gm) 100%);
}
.app-meta{
  padding:11px 18px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--gm);
}
.app-meta-label{font-size:12px;color:var(--ink);font-weight:500;letter-spacing:-0.1px}
.app-meta-ref{font-size:10px;color:var(--lt);font-family:monospace}
.app-meta-spacer{flex:1}

/* ── PAPER SHEET (s27) ──
   Inside the .demo-box .demo-body. Stays white in BOTH light and dark mode —
   it is paper, not chrome. Mirrors action-*-sample.html structure verbatim
   so the homepage preview and the real generated doc look identical.

   Three doc types use the same sheet structure: work brief (.sec blocks),
   material estimate (+ .mtable for line items), payment schedule (+ .stable
   for stages). All share the same head/title-row/foot scaffolding. */
.sheet{
  background:#fff;
  border:0.5px solid rgba(0,0,0,0.08);
  border-radius:4px;
  padding:18px 20px 16px;
  color:#1a1a1a;
  font-family:'DM Sans',sans-serif;
  box-shadow:0 2px 14px rgba(0,0,0,0.06);
  position:relative;
  /* s31: anchor to left — the in-wizard preview was inheriting centre from
     the index.html STEP wrapper, breaking body prose alignment. Sheet is the
     document boundary; nothing outside should bleed alignment past it. */
  text-align:left;
}
.sheet-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;align-items:start;
  padding-bottom:10px;margin-bottom:0;
  /* s31: border-bottom removed — the .sb-stamp below owns the 3px rule
     and the SiteBrief pill that straddles it. */
}
.user-logo{
  font-size:8.5px;color:#a0a098;
  font-family:monospace;letter-spacing:0.04em;
  border:1px dashed rgba(0,0,0,0.18);
  padding:8px 10px;border-radius:3px;
  align-self:start;line-height:1;
  text-align:center;
}
.proj{display:flex;flex-direction:column;gap:1px;align-items:flex-start}
.proj-name{
  font-size:13px;font-weight:600;color:#1a1a1a;
  margin-bottom:3px;letter-spacing:-0.1px;
}
.proj-meta{
  font-size:9.5px;color:#5a5a52;line-height:1.45;
}
.proj-meta span:first-child{
  color:#9a9a92;font-family:monospace;text-transform:uppercase;
  letter-spacing:0.04em;font-size:8.5px;margin-right:4px;
}
.sb-mark{align-self:start}
.sb-mark img{height:18px;width:auto;display:block}
.sb-mark-fallback{
  font-size:9px;font-weight:700;color:#1B7A5E;
  letter-spacing:0.1em;text-transform:uppercase;
  padding-top:3px;
}

/* s31: SiteBrief stamp — 3px green horizontal rule with the SiteBrief pill
   centred and straddling it (half above, half below). Replaces the .sheet-head
   border-bottom + top-right .sb-mark. The rule extends full-width of .sheet's
   content box; the pill sits on top centred via position:absolute. */
.sb-stamp{
  position:relative;
  height:2px;
  background:#1B7A5E;
  margin:0 0 18px;
}
.sb-stamp-pill{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  background:#fff;
  /* s31: border stripped — white bg alone makes the pill punch through the
     green rule. No outline frame. Padding tuned proportionally to the 14px
     logo height (~30% horizontal, ~15% vertical) for a clean halo. */
  padding:2px 5px;
  line-height:1;
  display:inline-flex;align-items:center;
  white-space:nowrap;
}
.sb-stamp-pill img{height:14px;width:auto;display:block}

.sheet-title-row{
  margin-bottom:14px;
}
.doc-title{
  font-size:14px;font-weight:700;color:#1a1a1a;
  letter-spacing:-0.2px;line-height:1.25;
  text-align:left;
}
/* s41: wizards render <h1 class="doc-title"> (work brief uses <div>).
   The assistant box lives INSIDE .hero, so `.hero h1` (clamp 30–40px)
   was hitting the doc title — and a DUPLICATE `.hero h1` later in this
   file re-won over a bare `h1.doc-title` at equal specificity, forcing
   the title to 40px. Scope to `.sheet h1.doc-title` (specificity 0,2,1)
   so it beats `.hero h1` (0,1,1) regardless of source order. */
h1.doc-title,
.hero .sheet h1.doc-title,
.sheet h1.doc-title{font-size:14px !important;font-weight:700 !important;margin:0;text-align:left;line-height:1.25;letter-spacing:-0.2px;font-family:inherit;color:#1a1a1a !important;opacity:1 !important;-webkit-text-fill-color:#1a1a1a !important}
.sheet .title-row .doc-title,
.sheet .doc-title{color:#1a1a1a;opacity:1}
.doc-sub{
  font-size:10px;color:#6a6a62;
  margin-top:3px;letter-spacing:0.01em;
  text-align:left;
}
/* s41: doc strapline (SEO/reference line on payment, budget, snagging
   docs). Was UNDEFINED here → rendered as raw black browser-default text
   in the on-screen index demo (the "messy title" reported). Styled to
   match doc-print.css .doc-strap: small italic muted dateline under the
   title. Work brief has no strap, so this never touches it. */
.doc-strap{
  font-size:10px;color:#6a6a62;font-style:italic;font-weight:400;
  margin:2px 0 0;letter-spacing:0.1px;line-height:1.35;
  text-align:left;
}
/* s41: spec band pill (Material/Budget estimate — "Mid-range" etc.).
   Mirror of doc-print.css .spec-pill. Was only defined in doc-print
   (not loaded on index) → "Mid-range" rendered as raw inline text run
   onto the title in the index demo. */
.spec-pill{
  display:inline-block;
  font-size:8.5px;font-weight:500;
  letter-spacing:.4px;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;
  background:var(--gm);color:#fff;
  vertical-align:middle;margin-left:6px;
}
.qr-block{
  display:flex;flex-direction:column;
  align-items:center;gap:4px;flex-shrink:0;
  /* s31: stripped padding/background/border/radius — QR sits naked in the
     header now, no pill frame. */
}
.qr-img{
  width:64px;height:64px;
  background:#fff url('images/qrcode-sample.svg') center/contain no-repeat;
  border-radius:2px;
}
.qr-label{font-size:8px;color:#6a6a62;font-family:monospace;letter-spacing:0.04em;text-transform:uppercase}

/* ─────────────────────────────────────────────────────────────
   s46: DEMO-CARD v2 HEADER (index + index-mobile demo cards only)
   Spec (IB reference): QR top-left with the domain stacked under it,
   meta block right-aligned, then the .sb-stamp green rule with the
   centred SiteBrief pill, then the title. Scoped to .demo-body so it
   never touches the live doc viewer (#bf-mount-inner) or the wizard
   generators. Pairs with .sheet-head.v2 markup.
   ───────────────────────────────────────────────────────────── */
.demo-body .sheet-head.v2{
  grid-template-columns:auto 1fr;   /* QR | meta — no third logo column */
  align-items:start;
}
.demo-body .sheet-head.v2 .proj.proj-right{
  align-items:flex-end;text-align:right;
}
.demo-body .sheet-head.v2 .proj.proj-right .proj-meta span:first-child{
  margin-right:0;margin-left:0;     /* label sits inline, right-aligned */
}
.demo-body .qr-dom{
  font-size:8.5px;font-weight:600;color:#1B7A5E;
  font-family:monospace;letter-spacing:0.02em;
  text-align:center;line-height:1;margin-top:1px;
}

/* Sec blocks — green monospace label heads + body */
.sec{margin-bottom:10px;text-align:left}
.sec-label{
  display:block;
  font-size:9px;color:#1B7A5E;
  font-family:monospace;letter-spacing:0.06em;
  text-transform:uppercase;font-weight:600;
  margin-bottom:4px;
  /* s31: green-to-transparent fade underline so the in-wizard preview matches
     the paper render (doc-print.css) and the .bf-label wizard heading. Same
     gradient calibration across all three for visual family consistency. */
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(
    to right,
    var(--gm) 0%,
    var(--gm) 30%,
    rgba(45,168,127,0.45) 65%,
    rgba(45,168,127,0) 100%
  ) 1;
  text-align:left;
}
.sec p{font-size:11px;color:#1a1a1a;line-height:1.5;margin-bottom:3px;text-align:left}
.sec p.verify{
  font-size:9px;color:#9a9a92;font-style:italic;
  margin-top:3px;line-height:1.4;
  text-align:left;
}

/* s33: scope-chip selections.
   Rendered between body prose and the verify line. Pill family uses the
   brief's green accent at its softest tint so they sit subordinate to
   the body text — selected, but not shouting. Caption above the row
   reads "Also selected by client" in tiny uppercase grey, mirrors the
   .sec-label tone register but lighter. Tick mark inside each pill
   reinforces "this was a deliberate selection" not "this is a tag". */
.sec-chips{
  margin:8px 0 4px;
}
.sec-chips-caption{
  display:block;
  font-size:8.5px;color:#888780;
  font-family:monospace;letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:5px;
}
.sec-chips-row{
  display:flex;flex-wrap:wrap;gap:4px;
}
.sec-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;line-height:1.2;
  background:#E1F5EE;color:#0F6E56;
  padding:3px 8px 3px 6px;
  border-radius:99px;
  font-weight:500;
  font-family:'DM Sans',sans-serif;
  letter-spacing:0;text-transform:none;
}
.sec-chip-tick{
  width:9px;height:9px;
  flex-shrink:0;
  color:#0F6E56;
}

/* Data grid — label/value pairs with green left border */
.data{
  display:grid;grid-template-columns:auto 1fr;
  gap:2px 12px;
  background:rgba(27,122,94,0.04);
  border-left:2px solid #1B7A5E;
  padding:6px 10px;border-radius:0 3px 3px 0;
  margin:4px 0;
}
.lbl{font-size:9.5px;color:#5a5a52;font-family:monospace;letter-spacing:0.02em}
.val{font-size:10.5px;color:#1a1a1a;font-weight:600;text-align:right}

/* Materials table — used by estimate */
.mtable{
  width:100%;font-size:10px;
  border-collapse:collapse;margin-top:3px;
}
.mtable thead th{
  font-size:8.5px;color:#9a9a92;
  font-family:monospace;letter-spacing:0.05em;
  text-transform:uppercase;text-align:left;
  padding:3px 6px;border-bottom:0.5px solid rgba(0,0,0,0.15);
  font-weight:600;
}
.mtable thead th.num{text-align:right}
.mtable tbody td{
  padding:4px 6px;border-bottom:0.5px solid rgba(0,0,0,0.06);
  font-size:10px;color:#1a1a1a;
}
.mtable tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
.mtable tbody td.note{color:#6a6a62;font-style:italic;font-size:9px}
.mtable tbody td.mat{font-weight:500}
.mtable tbody td.cost{color:#1B7A5E;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.mtable tfoot td{
  padding:6px 6px 0;font-size:11px;font-weight:700;
  border-top:0.5px solid rgba(0,0,0,0.15);
}
.mtable tfoot td.num{text-align:right;color:#1B7A5E}

/* Blur-price variant for sample-doc gating (NOT used on index F2 mockup —
   homepage shows real prices to sell the goods; sample docs use blur). */
.blur-price{
  filter:blur(2.5px);
  background:rgba(45,168,127,0.05);
  color:#1B7A5E;user-select:none;
}

/* Stages table — used by payment schedule */
.stable{
  width:100%;font-size:10px;
  border-collapse:collapse;margin-top:3px;
}
.stable thead th{
  font-size:8.5px;color:#9a9a92;
  font-family:monospace;letter-spacing:0.05em;
  text-transform:uppercase;text-align:left;
  padding:3px 5px;border-bottom:0.5px solid rgba(0,0,0,0.15);
  font-weight:600;
}
.stable thead th.num{text-align:right}
.stable tbody td{
  padding:3.5px 5px;border-bottom:0.5px solid rgba(0,0,0,0.06);
  font-size:10px;color:#1a1a1a;
}
.stable tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.stage-no{
  color:#1B7A5E;font-weight:700;
  font-family:monospace;text-align:center;width:18px;
}
.milestone{font-weight:500}
.stable tfoot td{
  padding:6px 5px 0;font-size:10.5px;font-weight:700;
  border-top:0.5px solid rgba(0,0,0,0.15);
}
.stable tfoot td.num{text-align:right}

/* Sheet foot — disclaimer left, page mark right */
.sheet-foot{
  margin-top:12px;padding-top:9px;
  border-top:0.5px solid rgba(0,0,0,0.1);
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;
}
.foot-left{font-size:8.5px;color:#6a6a62;line-height:1.4}
.foot-disc{font-style:italic;margin-bottom:2px}
.foot-meta{font-family:monospace;letter-spacing:0.02em}
.foot-right{
  font-size:8.5px;color:#6a6a62;
  text-align:right;line-height:1.4;
}
.foot-mark{color:#1B7A5E;font-weight:700;letter-spacing:0.08em;font-size:9px}
.vis-upload{background:rgba(0,0,0,0.03);border:0.5px dashed rgba(0,0,0,0.15);border-radius:8px;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:14px;cursor:pointer;transition:all .15s}
.vis-upload:hover{border-color:var(--g);background:var(--gl)}
.vis-opts{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.vis-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;background:rgba(0,0,0,0.03);border-radius:6px;border:0.5px solid rgba(0,0,0,0.08);font-size:12px;cursor:pointer;transition:all .1s}
.vis-opt:hover{border-color:var(--g);background:var(--gl)}
.vis-num{width:18px;height:18px;border-radius:50%;background:var(--g);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── SIGNUP GATE ── */
.gate-overlay{position:fixed;inset:0;z-index:200;background:rgba(17,20,16,0.72);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px)}
.gate-overlay.open{opacity:1;pointer-events:all}
.gate-card{background:#fff;border-radius:20px;padding:36px 32px;max-width:400px;width:100%;box-shadow:0 24px 80px rgba(0,0,0,0.2);transform:translateY(20px);transition:transform .3s}
.gate-overlay.open .gate-card{transform:translateY(0)}
.gate-icon{width:48px;height:48px;border-radius:12px;background:var(--gl);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:22px}
.gate-h{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:800;color:var(--ink);margin-bottom:6px;letter-spacing:-0.3px}
.gate-p{font-size:13px;color:var(--mid);line-height:1.5;margin-bottom:20px}
.gate-p strong{color:var(--g)}
.gate-preview{background:var(--gl);border:0.5px solid rgba(27,122,94,0.2);border-radius:8px;padding:9px 12px;margin-bottom:18px;font-size:12px;color:var(--gd)}
.gate-preview strong{display:block;font-weight:600;margin-bottom:2px}
.gate-field{margin-bottom:11px}
.gate-field label{display:block;font-size:11px;font-weight:500;color:var(--mid);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.gate-field input,.gate-field select{width:100%;padding:10px 13px;border:0.5px solid rgba(0,0,0,0.15);border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;color:var(--ink);outline:none;background:rgba(0,0,0,0.02);transition:border .15s}
.gate-field input:focus,.gate-field select:focus{border-color:var(--g);background:#fff}
.gate-submit{width:100%;padding:13px;border-radius:10px;background:var(--g);color:#fff;border:none;font-size:15px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;margin-top:4px;transition:background .15s;letter-spacing:-0.2px}
.gate-submit:hover{background:var(--gd)}
.gate-terms{font-size:11px;color:var(--lt);text-align:center;margin-top:10px}
.gate-terms a{color:var(--g);cursor:pointer}

/* ── FOOTER CTA ── */
.footer-cta{background:var(--white);border-top:0.5px solid var(--border);padding:56px 28px;text-align:center}
.footer-cta h2{font-family:'DM Sans',sans-serif;font-size:26px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-0.3px}
.footer-logo .site{color:var(--ink)}
.footer-logo .brief{color:var(--g)}
.footer-cta p{font-size:14px;color:var(--lt);margin-bottom:24px}
.footer-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.footer-btns button{padding:11px 24px;border-radius:8px;font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500}
.btn-primary{background:var(--g);color:#fff;border:none;transition:opacity .15s}
.btn-primary:hover{opacity:.85}
.btn-outline{background:transparent;color:var(--mid);border:0.5px solid var(--border);transition:all .15s}
.btn-outline:hover{background:var(--gl);color:var(--g);border-color:var(--g)}
.footer-fine{margin-top:24px;font-size:11px;color:var(--lt)}

@media(max-width:600px){
  .feat-block,.feat-block.rev{grid-template-columns:1fr;direction:ltr}
  nav{padding:0 16px}
  .hero{padding:72px 16px 36px}
  .features{padding:36px 16px 48px}
}

/* ── RENDER CARD ── */
.render-card{margin:0 14px 6px;border-radius:10px;overflow:hidden;display:none;border:0.5px solid var(--border)}
.render-card.show{display:block}
.render-head{background:var(--gd);padding:8px 14px;display:flex;align-items:center;justify-content:space-between}
.render-head span{font-size:11px;color:rgba(255,255,255,0.7);font-family:monospace}
.render-head em{font-size:10px;color:rgba(255,255,255,0.4);font-style:normal}
.render-img{width:100%;display:block;max-height:260px;object-fit:cover}
.render-loading{min-height:160px;background:var(--gd);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.render-loading span{font-size:12px;color:rgba(255,255,255,0.6)}
.render-spinner{width:28px;height:28px;border:2px solid rgba(255,255,255,0.2);border-top-color:var(--gm);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.render-caveat{padding:6px 12px;background:#FEF2F2;font-size:11px;color:#7F1D1D;border-top:0.5px solid #FCA5A5}

/* ── TRACKER PREVIEW SECTION ── */
.tracker-section{max-width:var(--w-content);margin:0 auto;padding:0 28px 64px}
.tracker-hdr{text-align:center;margin-bottom:32px}
.tracker-hdr h2{font-family:'DM Sans',sans-serif;font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-0.5px;margin-bottom:8px}
.tracker-hdr p{font-size:14px;color:var(--lt)}
.tracker-elite{display:inline-flex;align-items:center;gap:5px;background:var(--gl);border:0.5px solid rgba(27,122,94,0.25);border-radius:99px;padding:4px 12px;font-size:11px;color:var(--g);font-weight:500;margin-bottom:14px}
.sp-tier-strip{display:flex;justify-content:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.sp-tier-pill{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;background:#fff;border:0.5px solid var(--border);border-radius:10px;min-width:160px;transition:all .15s}
.sp-tier-pill .sp-tier-name{font-size:12.5px;font-weight:500;color:var(--ink);font-family:'DM Sans',sans-serif}
.sp-tier-pill .sp-tier-who{font-size:10.5px;color:var(--lt)}
.sp-tier-pill.active{background:var(--g);border-color:var(--g)}
.sp-tier-pill.active .sp-tier-name{color:#fff}
.sp-tier-pill.active .sp-tier-who{color:rgba(255,255,255,0.8)}
.tracker-chrome{background:#fff;border:0.5px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 4px 32px rgba(0,0,0,0.06)}
.tc-topbar{background:var(--gd);padding:10px 16px;display:flex;align-items:center;gap:8px}
.tc-dots{display:flex;gap:4px}
.tc-dot{width:6px;height:6px;border-radius:50%}
.tc-label{font-size:11px;color:rgba(255,255,255,0.6);flex:1;font-family:monospace}
.tc-pill{font-size:10px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.7)}
.tc-tabs{background:#f8f8f5;border-bottom:0.5px solid var(--border);display:flex;gap:2px;padding:8px 12px}
.tc-tab{font-size:11px;padding:4px 10px;border-radius:6px;border:none;background:none;cursor:pointer;color:var(--lt);font-family:'DM Sans',sans-serif}
.tc-tab.on{background:var(--gl);color:var(--g);font-weight:500}
.tc-body{padding:14px;display:none}
.tc-body.on{display:block}
.mini-kanban{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.mk-col{flex-shrink:0;width:160px;background:#f4f4f0;border-radius:8px;overflow:hidden}
.mk-head{padding:7px 10px;display:flex;align-items:center;gap:5px}
.mk-title{font-size:11px;font-weight:600}
.mk-count{font-size:9px;padding:1px 5px;border-radius:99px;font-weight:600}
.mk-cards{padding:6px;display:flex;flex-direction:column;gap:5px}
.mk-card{background:#fff;border-radius:6px;padding:8px 9px;border:0.5px solid var(--border);cursor:pointer;border-left-width:3px}
.mk-card:hover{box-shadow:0 1px 8px rgba(0,0,0,0.08)}
.mk-card-title{font-size:11px;font-weight:500;color:var(--ink);margin-bottom:3px;line-height:1.3}
.mk-card-meta{font-size:10px;color:var(--lt)}
.mk-card-due{font-size:10px;font-family:monospace;margin-top:4px}

/* s40 · mobile reflow for the mini-kanban. On phones the 4-col scroll feels
   cramped (only 2 cols visible, rest off-screen). Switch to a 2-wide grid so
   every column is visible without horizontal scrolling — applies to both the
   Elite and Pro boards. The forecast strip keeps its scroll (a week of days
   reads fine swiped). */
@media (max-width:600px){
  .mini-kanban{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-x:visible}
  .mk-col{width:auto;flex-shrink:1}
  .wx-day{min-width:54px;padding:7px 4px}
  .wx-actions .wx-act{font-size:10.5px}
}
.mini-scheduled{display:flex;flex-direction:column;gap:6px}
.ms-banner{background:var(--ambl);border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--amber);margin-bottom:8px}
.ms-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f4f4f0;border-radius:7px;font-size:12px}
.ms-trigger{font-size:10px;padding:2px 7px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.ms-trigger.date{background:var(--bluel);color:var(--blue)}
.ms-trigger.dep{background:var(--ambl);color:var(--amber)}
.ms-trigger.ai{background:#F3E8FF;color:#6B21A8}
.ms-title{flex:1;font-weight:500;color:var(--ink)}
.ms-date{font-size:10px;font-family:monospace;color:var(--lt)}
.ms-btn{font-size:10px;padding:3px 8px;border-radius:5px;background:var(--g);color:#fff;border:none;cursor:pointer;font-family:'DM Sans',sans-serif}
.tracker-cta{text-align:center;margin-top:16px}
.tracker-cta p{font-size:12px;color:var(--lt);margin-top:6px}

/* ── SITEPLANNER PRO · weather-aware components (s40) ──────────────────
   Live inside .tracker-chrome (white device frame, same in both themes).
   Forecast strip + warning banner + per-card flags. */
.wx-strip{display:flex;gap:6px;padding:12px 14px 0;overflow-x:auto}
.wx-day{
  flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 6px;border-radius:8px;background:#f4f4f0;border:0.5px solid var(--border);
}
.wx-day.wx-warn{background:var(--ambl);border-color:var(--amber)}
.wx-dow{font-size:9px;font-weight:600;letter-spacing:0.08em;color:var(--lt);font-family:monospace}
.wx-day.wx-warn .wx-dow{color:var(--amber)}
.wx-ico{font-size:18px;line-height:1}
.wx-temp{font-size:13px;font-weight:600;color:var(--ink)}
.wx-rain{font-size:9px;color:var(--lt);font-family:monospace;white-space:nowrap}
.wx-day.wx-warn .wx-rain{color:var(--amber);font-weight:600}

.wx-banner{
  display:flex;gap:10px;align-items:flex-start;
  margin:12px 14px 0;padding:11px 13px;border-radius:9px;
  background:var(--ambl);border:0.5px solid var(--amber);
}
.wx-banner-ico{font-size:16px;line-height:1.2;flex-shrink:0}
.wx-banner-body{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink)}
.wx-banner-body strong{color:#92400E}
.wx-banner-sub{color:var(--mid,#555);font-size:11.5px}
.wx-actions{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.wx-act{font-size:11px;padding:5px 9px;border-radius:6px;line-height:1.4}
.wx-act.secure{background:var(--redl);color:#991B1B}
.wx-act.divert{background:var(--gl);color:var(--gd)}

/* per-card weather flag — sits in .mk-card-due slot */
.mk-wx{font-size:9.5px;padding:2px 6px;border-radius:99px;white-space:nowrap;font-family:'DM Sans',sans-serif}
.mk-wx.risk{background:var(--ambl);color:#92400E}
.mk-wx.safe{background:var(--gl);color:var(--gd)}

/* s40 · standalone weather banner preview (marketing reference, no full board).
   The .wx-banner inside sits on the page directly rather than in a device
   frame, so give it a max width + centring to match the section rhythm. */
.wx-preview{max-width:720px;margin:0 auto}
.wx-preview .wx-banner{margin:0}
.wx-preview-note{text-align:center;font-size:12px;color:var(--lt);margin-top:10px;font-family:'DM Sans',sans-serif}


/* weather impact summary line — Elite-style density, between banner & board */
.wx-summary{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:12px 14px 0;padding:8px 12px;border-radius:8px;
  background:#f4f4f0;border:0.5px solid var(--border);
  font-size:11px;color:var(--ink);font-family:'DM Sans',sans-serif;
}
.wx-sum-item{display:flex;align-items:center;gap:6px;font-weight:500}
.wx-sum-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.wx-sum-dot.exposed{background:var(--blueprint,#1E40AF)}
.wx-sum-dot.risk{background:var(--amber)}
.wx-sum-dot.safe{background:var(--g)}
.wx-sum-spacer{flex:1;min-width:8px}
.wx-sum-note{font-size:10px;color:var(--lt);font-family:monospace}
@media (max-width:600px){.wx-sum-spacer{display:none}.wx-summary{gap:10px}}



/* ── TAB ROW DIVIDER ── */
.tabs-divider{height:0.5px;background:rgba(0,0,0,0.08);margin:10px 14px 0}
.sugs{padding:12px 14px 0;display:flex;gap:5px;flex-wrap:wrap}

/* ── SITE REPORT FORM ── */
.sr-form{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.sr-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sr-field label{display:block;font-size:10px;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.05em;font-family:monospace;margin-bottom:3px}
.sr-input{width:100%;padding:7px 10px;border:0.5px solid rgba(0,0,0,0.12);border-radius:7px;font-size:12px;font-family:'DM Sans',sans-serif;color:var(--ink);background:rgba(0,0,0,0.02);outline:none;transition:border .15s}
.sr-input:focus{border-color:var(--g);background:#fff}
.sr-textarea{width:100%;padding:7px 10px;border:0.5px solid rgba(0,0,0,0.12);border-radius:7px;font-size:12px;font-family:'DM Sans',sans-serif;color:var(--ink);background:rgba(0,0,0,0.02);outline:none;resize:none;min-height:52px;transition:border .15s;line-height:1.4}
.sr-textarea:focus{border-color:var(--g);background:#fff}
.sr-checkboxes{display:flex;gap:6px;flex-wrap:wrap}
.sr-check{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--mid);cursor:pointer}
.sr-check input{accent-color:var(--g);cursor:pointer}
.sr-weather{display:flex;gap:5px;flex-wrap:wrap}
.sr-weather-btn{font-size:11px;padding:4px 9px;border-radius:6px;border:0.5px solid rgba(0,0,0,0.1);background:rgba(0,0,0,0.02);color:var(--mid);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .1s}
.sr-weather-btn.on{background:var(--gl);border-color:var(--g);color:var(--gd)}
.sr-generate{width:100%;padding:10px;border-radius:9px;background:var(--g);color:#fff;border:none;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s;margin-top:2px}
.sr-generate:hover{background:var(--gd)}
.sr-generate:disabled{opacity:.4;cursor:not-allowed}

/* ── SITE REPORT RESULT ── */
.sr-result{margin:0 14px 10px;background:var(--gd);border-radius:10px;overflow:hidden;display:none}
.sr-result.show{display:block}
.sr-res-head{padding:10px 14px;display:flex;align-items:center;justify-content:space-between}
.sr-res-title{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:#fff}
.sr-res-ref{font-size:10px;color:rgba(255,255,255,0.45);font-family:monospace}
.sr-res-body{background:#fff;margin:0 10px 10px;border-radius:7px;overflow:hidden}
.sr-section{padding:10px 12px;border-bottom:0.5px solid rgba(0,0,0,0.06)}
.sr-section:last-child{border-bottom:none}
.sr-sec-label{font-size:9px;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.07em;font-family:monospace;margin-bottom:4px}
.sr-sec-text{font-size:12px;color:var(--ink);line-height:1.5}
.sr-meta-row{display:flex;gap:12px;flex-wrap:wrap}
.sr-meta-item{font-size:11px;color:var(--mid);display:flex;align-items:center;gap:4px}
.sr-flag{display:flex;align-items:flex-start;gap:5px;padding:5px 8px;background:#FEF2F2;border-radius:5px;font-size:11px;color:#7F1D1D;margin-bottom:3px}
.sr-flag:last-child{margin-bottom:0}
.sr-link-row{padding:10px 14px;display:flex;gap:6px;align-items:center}
.sr-link-box{flex:1;padding:6px 10px;background:rgba(255,255,255,0.1);border-radius:6px;font-size:11px;color:rgba(255,255,255,0.7);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-link-btn{font-size:11px;padding:6px 12px;border-radius:6px;background:var(--gm);color:#fff;border:none;cursor:pointer;font-weight:500;white-space:nowrap;font-family:'DM Sans',sans-serif}
.sr-dl-btn{font-size:11px;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.8);border:none;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap}


/* ── SHARE DROPDOWN ── */
.share-wrap{position:relative;display:inline-block}
.share-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:var(--g);color:#fff;border:none;cursor:pointer;font-size:12px;font-weight:500;font-family:'DM Sans',sans-serif;transition:background .15s}
.share-btn:hover{background:var(--gd)}
.share-dropdown{display:none;position:absolute;bottom:calc(100% + 6px);left:0;background:#fff;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,0.12);border:0.5px solid var(--border);overflow:hidden;min-width:190px;z-index:50}
.share-dropdown.open{display:block}
.share-option{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--ink);cursor:pointer;transition:background .1s;border-bottom:0.5px solid var(--border);text-decoration:none;font-family:'DM Sans',sans-serif}
.share-option:last-child{border-bottom:none}
.share-option:hover{background:var(--gl)}
.share-option-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.share-option-label{flex:1}
.share-option-sub{font-size:10px;color:var(--lt);display:block;margin-top:1px}


.nav-left{display:flex;align-items:center}
.nav-right{display:flex;align-items:center;justify-content:flex-end}
.nav-dd-wrap{position:relative}
.nav-dd-btn{font-size:13.5px;color:var(--g);font-weight:500;cursor:pointer;padding:7px 14px;border-radius:8px;display:flex;align-items:center;gap:6px;background:var(--gl);border:1px solid var(--g);font-family:'DM Sans',sans-serif;transition:background .15s,border-color .15s,border-width .15s,padding .15s,color .15s}
.nav-dd-btn:hover{background:#D6EDE3}
.nav-dd-btn .chev{font-size:10px;opacity:0.7;margin-left:2px;transition:transform .15s}
.nav-dd-btn.open{background:#BFE0D2;border:2px solid var(--gd);color:var(--gd);padding:6px 13px}
.nav-dd-btn.open .chev{transform:rotate(180deg);opacity:1}
.nav-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;background:var(--white);border:0.5px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.08);padding:6px;min-width:200px;z-index:200}
.nav-dd-wrap.right .nav-dropdown{left:auto;right:0}
.nav-dropdown.show{display:block}
.nav-dd-item{display:block;padding:8px 12px;font-size:13px;color:var(--ink);text-decoration:none;border-radius:6px;font-family:'DM Sans',sans-serif;font-weight:500;white-space:nowrap}
.nav-dd-item:hover{background:var(--gl);color:var(--g)}
.nav-logo-img{height:44px;width:auto;display:block}
.nav-dd-divider{height:1px;background:var(--border);margin:6px 4px}
.nav-dd-sub{padding-left:30px !important;font-size:12.5px !important;color:var(--mid) !important;position:relative}
.nav-dd-sub:hover{color:var(--g) !important}
.nav-dd-branch{position:absolute;left:14px;top:14px;width:8px;height:8px;border-left:1px solid var(--mid);border-bottom:1px solid var(--mid);border-bottom-left-radius:2px}
.nav-dd-sub:hover .nav-dd-branch{border-color:var(--g)}
.hero h1{font-family:'DM Sans',sans-serif;font-size:clamp(30px,4vw,40px);font-weight:700;line-height:1.0;letter-spacing:-0.8px;margin-bottom:14px;color:var(--ink)}
.hero-sub-main{font-size:18px;color:var(--ink);line-height:1.4;max-width:540px;margin:0 auto 6px;font-weight:500}
.hero-sub-desc{font-size:15px;color:var(--lt);line-height:1.6;max-width:540px;margin:0 auto;font-weight:300}
.tabs-row1{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px;padding:12px 12px 0}
.tabs-row2{display:flex;justify-content:center;gap:6px;padding:0 12px}
.tabs-row2 .type-tab{flex:0 1 calc(25% - 3px)}
.ai-gen-pill{background:rgba(255,255,255,0.15);border:0.5px solid rgba(255,255,255,0.25);border-radius:99px;padding:3px 10px;font-size:11px;color:rgba(255,255,255,0.85);white-space:nowrap}
.trade-sec-label{font-size:10px;font-weight:600;color:var(--lt);letter-spacing:0.07em;text-transform:uppercase;margin-bottom:7px;padding:0 14px}
.trade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 14px 10px}
.sender-row{padding:10px 14px 0}
.sender-label{font-size:10px;font-weight:600;color:var(--lt);letter-spacing:0.07em;text-transform:uppercase;margin-bottom:7px}
.sender-wrap{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sender-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:12px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .12s}
.sender-chip.set{background:#fff;border:0.5px solid rgba(27,122,94,0.3);color:var(--g)}
.sender-chip.set:hover{background:var(--gl);border-color:var(--g)}
.sender-chip.unset{background:#fff;border:0.5px dashed rgba(0,0,0,0.25);color:var(--lt);font-style:italic}
.sender-chip.unset:hover{border-color:var(--g);color:var(--g)}
.sender-dot{width:6px;height:6px;border-radius:50%;background:var(--gm)}
.sender-dot.dim{background:#ccc}
.sender-chev{font-size:9px;opacity:0.6;margin-left:2px}
.sender-helper{font-size:10.5px;color:var(--lt);font-style:italic}
.sender-picker{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:0.5px solid rgba(0,0,0,0.12);border-radius:10px;padding:8px;width:300px;box-shadow:0 6px 20px rgba(0,0,0,0.08);z-index:50;max-height:320px;overflow:hidden;display:flex;flex-direction:column}
.sender-search{width:100%;padding:7px 10px;border:0.5px solid rgba(0,0,0,0.12);border-radius:6px;font-size:11.5px;font-family:'DM Sans',sans-serif;margin-bottom:6px;box-sizing:border-box;background:#fff;color:#111410}
.sender-search:focus{outline:none;border-color:var(--g)}
.sender-list{overflow-y:auto;flex:1}
.sender-group{font-size:9.5px;color:#999;letter-spacing:1px;padding:6px 8px 4px;font-weight:500;text-transform:uppercase}
.sender-item{padding:6px 10px;font-size:12px;color:#111410;border-radius:5px;cursor:pointer;font-family:'DM Sans',sans-serif}
.sender-item:hover{background:var(--gl);color:var(--g)}
.sender-item.active{background:var(--gl);color:var(--gd);font-weight:500}
.sender-divider{height:1px;background:rgba(0,0,0,0.1);margin:14px 14px 12px}
.cat-row{padding:10px 14px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cat-row-label{font-size:10px;font-weight:600;color:var(--lt);letter-spacing:0.07em;text-transform:uppercase}
.cat-pills{display:flex;flex-wrap:wrap;gap:6px}
.cat-pill{padding:5px 12px;background:#fff;border:0.5px solid rgba(0,0,0,0.15);border-radius:99px;font-size:11px;color:var(--mid);cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;transition:all .12s}
.cat-pill:hover{border-color:var(--g);color:var(--g)}
.cat-pill.active{background:var(--g);border-color:var(--g);color:#fff}

/* s30: promoted family pill row — first-class peer tabs, full width, icons inside.
   Used by index.html's AI box. Standalone .cat-pills now (no .cat-row wrapper),
   so the row gets its own padding + a small icon affordance per pill. */
.ai-box #brief-rolepicker > .cat-pills{
  padding:4px 14px 0;
  gap:4px;
}
.ai-box #brief-rolepicker > .cat-pills .cat-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;
  font-size:12px;
}
.cat-pill-icon{
  width:13px;height:13px;flex-shrink:0;
}
.ai-fam-intro{
  font-size:10px;font-weight:600;
  color:var(--lt);letter-spacing:0.07em;text-transform:uppercase;
  /* s31: text-align: left to cancel inherited centre from index STEP wrapper.
     Padding mirrors .trade-sec-label below it (14px L/R, 7px bottom) so the
     label rhythm matches the "PICK THE ROLE YOU'RE BRIEFING" line. 14px top
     gives breathing room from the type-tabs row above. */
  padding:14px 14px 7px;margin:0;
  text-align:left;
}

.trade-btn{padding:7px 10px;border-radius:8px;border:0.5px solid rgba(0,0,0,0.1);background:#fff;cursor:pointer;font-size:12.5px;font-weight:500;font-family:'DM Sans',sans-serif;text-align:center;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .12s;width:100%;color:#111410}
.trade-btn:hover{border-color:var(--g);background:var(--gl);color:var(--gd)}
.trade-btn.active{border-color:var(--g);background:var(--g);color:#fff;border-width:0.5px}
.trade-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.trade-example{background:#F7F6F1;border:0.5px solid var(--border);border-radius:8px;padding:8px 10px;font-size:11.5px;color:var(--lt);margin:0 14px 8px;font-style:italic;line-height:1.5;min-height:36px}
.trade-chips{display:flex;flex-wrap:wrap;gap:4px;padding:6px 14px 0;justify-content:center}
.trade-chip{font-size:11px;padding:3px 9px;border-radius:99px;border:0.5px solid #BDC4CE;background:#fff;color:#111410;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600}
.trade-chip:hover{border-color:var(--g);color:var(--g);background:var(--gl)}
</style>

/* ═══════════════════════════════════════════════════════════════════════════
   SITEPLANNER — project planning workspace
   Self-contained styles for tracker.html. Original styles above untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Extra tokens used by SitePlanner */
:root{
  --amber:#D97706;--ambl:#FEF3C7;
  --red:#DC2626;--redl:#FEE2E2;
  --blue:#1E40AF;--bluel:#DBEAFE;
  --purple:#6B21A8;--purpl:#F3E8FF;
  --grey:#F4F4F0;
}

body.sp-body{padding-top:62px}

/* Project context bar */
.sp-projbar{background:var(--gd);height:44px;display:flex;align-items:center;gap:14px;padding:0 24px;color:#fff;font-family:'DM Sans',sans-serif}
.sp-projbar-wordmark{font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0.4px;color:rgba(255,255,255,0.7);text-transform:uppercase}
.sp-projbar-name{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:0;color:#fff}
.sp-projbar-divider{width:0.5px;height:18px;background:rgba(255,255,255,0.2)}
.sp-projbar-meta{font-size:12px;color:rgba(255,255,255,0.65);font-family:monospace}
.sp-projbar-spacer{flex:1}
.sp-projbar-pill{font-size:11px;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.85);font-weight:500}
.sp-projbar-pill.live{background:rgba(45,168,127,0.2);color:var(--gm)}
.sp-projbar-pill.live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gm);margin-right:6px;vertical-align:middle;animation:sp-pulse 1.6s ease-in-out infinite}
@keyframes sp-pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* Tour banner — Free-tier sample-project framing */
.sp-tour-banner{background:#FFF8E6;border-bottom:0.5px solid #E8D89A;padding:10px 24px;display:flex;align-items:center;gap:14px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--ink)}
.sp-tour-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;color:#9A7A1F;background:rgba(154,122,31,0.12);padding:3px 8px;border-radius:99px}
.sp-tour-text{flex:1;color:var(--mid);font-weight:300}
.sp-tour-cta{font-size:12.5px;font-weight:500;color:var(--g);text-decoration:none;white-space:nowrap}
.sp-tour-cta:hover{text-decoration:underline}

/* Dev tier toggle — bottom-right, only on ?dev=1 or localhost */
.sp-dev-toggle{position:fixed;bottom:18px;right:18px;display:flex;align-items:center;gap:6px;background:var(--gd);padding:6px 8px;border-radius:99px;box-shadow:0 4px 16px rgba(0,0,0,0.18);z-index:9999;font-family:'DM Sans',sans-serif}
.sp-dev-label{font-size:10.5px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;color:rgba(255,255,255,0.6);padding:0 6px 0 4px}
.sp-dev-btn{background:transparent;border:none;color:rgba(255,255,255,0.75);font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:99px;cursor:pointer;transition:all .15s}
.sp-dev-btn:hover{background:rgba(255,255,255,0.08);color:#fff}
.sp-dev-btn.on{background:var(--gm);color:#fff}

/* ═══════════════ PROGRAMME IMPACT BAR (sitewide, Elite full / Pro teaser) ═══════════════ */
.sp-impactbar{background:#fff;border-bottom:0.5px solid var(--border)}
.sp-impactbar-inner{max-width:1800px;margin:0 auto;padding:9px 32px;display:flex;align-items:center;gap:14px;font-family:'DM Sans',sans-serif;font-size:13px}
.sp-impactbar-glyph{font-size:14px;flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.sp-impactbar-headline{font-weight:600;color:var(--ink);font-size:13px}
.sp-impactbar-sub{color:var(--mid);font-size:12.5px;font-weight:400}
.sp-impactbar-spacer{flex:1}
.sp-impactbar-cta{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;background:var(--ink);color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;transition:background .15s;white-space:nowrap}
.sp-impactbar-cta:hover{background:var(--gd)}
/* Severity backgrounds + glyph circles — uses the card-colour palette */
.sp-impactbar-inner.major{background:rgba(220,38,38,0.06)}
.sp-impactbar-inner.major .sp-impactbar-glyph{background:rgba(220,38,38,0.15);color:var(--red)}
.sp-impactbar-inner.minor{background:rgba(217,119,6,0.06)}
.sp-impactbar-inner.minor .sp-impactbar-glyph{background:rgba(217,119,6,0.15);color:#B45309}
.sp-impactbar-inner.complete{background:rgba(45,168,127,0.05)}
.sp-impactbar-inner.complete .sp-impactbar-glyph{background:rgba(45,168,127,0.15);color:var(--gm)}

/* Pro teaser variant */
.sp-impactbar.teaser{background:linear-gradient(to right,var(--cream),#fff)}
.sp-impactbar.teaser .sp-impactbar-inner{background:none}
.sp-impactbar-lock{font-size:14px;flex-shrink:0;opacity:0.6}
.sp-impactbar-tease-headline{font-weight:600;color:var(--ink);font-size:13px}
.sp-impactbar-tease-sub{color:var(--lt);font-size:12.5px;font-weight:400}
.sp-impactbar-upgrade{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;background:var(--g);color:#fff;text-decoration:none;padding:6px 12px;border-radius:6px;transition:background .15s;white-space:nowrap}
.sp-impactbar-upgrade:hover{background:var(--gd)}

/* ═══════════════ AUTO-CHASE QUEUE (Overview module) ═══════════════ */
.sp-chase{background:var(--white);border:0.5px solid var(--border);border-radius:12px;margin-bottom:18px;overflow:hidden;box-shadow:0 4px 32px rgba(27,122,94,0.05)}
.sp-chase-head{padding:14px 18px;border-bottom:0.5px solid var(--border);background:linear-gradient(to bottom,var(--cream),var(--white));display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-chase-title{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.2px;display:flex;align-items:center;gap:8px}
.sp-chase-title::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,0.15);animation:sp-pulse 1.6s ease-in-out infinite}
.sp-chase-meta{font-size:11.5px;color:var(--lt);font-family:monospace}
.sp-chase-empty{padding:24px 18px;text-align:center;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--mid)}
.sp-chase-rows{display:flex;flex-direction:column}
.sp-chase-row{display:grid;grid-template-columns:14px 1.4fr 2fr 90px 130px;gap:14px;align-items:center;padding:12px 18px;border-bottom:0.5px solid var(--border);cursor:pointer;transition:background .12s;font-family:'DM Sans',sans-serif}
.sp-chase-row:last-child{border-bottom:none}
.sp-chase-row:hover{background:var(--cream)}
.sp-chase-row.major{border-left:3px solid var(--red)}
.sp-chase-row.minor{border-left:3px solid #D97706}
.sp-chase-pip{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sp-chase-pip.major{background:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,0.15)}
.sp-chase-pip.minor{background:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,0.15)}
.sp-chase-pip.complete{background:var(--gm)}
.sp-chase-row-main{min-width:0}
.sp-chase-row-title{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.sp-chase-row-meta{font-size:11.5px;color:var(--lt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-chase-row-impact{font-size:12.5px;color:var(--mid);font-weight:400;line-height:1.4}
.sp-chase-row-slack{font-family:monospace;font-size:11.5px;font-weight:600;text-align:right}
.sp-chase-row-slack.major{color:var(--red)}
.sp-chase-row-slack.minor{color:#B45309}
.sp-chase-row-slack.complete{color:var(--gm)}
.sp-chase-row-status{font-size:10.5px;font-family:monospace;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;padding:5px 10px;border-radius:99px;text-align:center;white-space:nowrap}
.sp-chase-row-status.status-pending{background:var(--grey);color:var(--lt)}
.sp-chase-row-status.status-queued{background:rgba(91,127,181,0.12);color:#3B5A87}
.sp-chase-row-status.status-sent{background:rgba(217,119,6,0.14);color:#B45309}
.sp-chase-row-status.status-escalated{background:rgba(220,38,38,0.14);color:var(--red)}

/* Pro teaser variant — locked module */
.sp-chase.teaser{background:linear-gradient(135deg,var(--white),var(--cream));border-style:dashed}
.sp-chase-tease{padding:24px 28px;display:grid;grid-template-columns:48px 1fr auto;gap:18px;align-items:center}
.sp-chase-tease-icon{font-size:28px;text-align:center;opacity:0.7}
.sp-chase-tease-title{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.2px;margin-bottom:4px}
.sp-chase-tease-sub{font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--mid);font-weight:400;line-height:1.5;max-width:640px;margin-bottom:14px}
.sp-chase-tease-rows{display:flex;flex-direction:column;gap:6px}
.sp-chase-tease-row{display:flex;align-items:center;gap:10px;font-family:'DM Sans',sans-serif;font-size:12.5px}
.sp-chase-tease-pip{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sp-chase-tease-pip.major{background:var(--red)}
.sp-chase-tease-pip.minor{background:#D97706}
.sp-chase-tease-pip.complete{background:var(--gm)}
.sp-chase-tease-label{color:var(--mid);font-weight:500}
.sp-chase-tease-blur{color:var(--lt);font-family:monospace;letter-spacing:0.1em;filter:blur(1.5px);user-select:none}
.sp-chase-tease-cta{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;background:var(--g);color:#fff;text-decoration:none;padding:10px 18px;border-radius:8px;transition:background .15s;white-space:nowrap;align-self:start}
.sp-chase-tease-cta:hover{background:var(--gd)}

/* Brief-card impact pip — Elite only, top-right corner of Week cards */
.sp-wk-card{position:relative}
.sp-wk-card-impact{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;z-index:1}
.sp-wk-card-impact.major{background:var(--red);box-shadow:0 0 0 2px rgba(220,38,38,0.18)}
.sp-wk-card-impact.minor{background:#D97706;box-shadow:0 0 0 2px rgba(217,119,6,0.18)}

/* Toolbar */
.sp-toolbar{background:var(--white);border-bottom:0.5px solid var(--border);padding:0 24px;display:flex;align-items:center;gap:10px;height:52px;position:sticky;top:62px;z-index:50}
.sp-vtabs{display:flex;gap:2px}
.sp-vtab{display:flex;align-items:center;gap:6px;font-size:13px;padding:7px 14px;border-radius:7px;border:none;background:none;cursor:pointer;color:var(--lt);font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:-0.1px;transition:all .14s}
.sp-vtab:hover{background:var(--grey);color:var(--ink)}
.sp-vtab.on{background:var(--gl);color:var(--gd);font-weight:600}
.sp-vtab-glyph{font-size:12px;opacity:0.7}
.sp-vtab.on .sp-vtab-glyph{opacity:1}
.sp-tb-divider{width:0.5px;height:22px;background:var(--border);margin:0 4px}

/* Filter dropdowns */
.sp-filt-wrap{position:relative}
.sp-filt-btn{font-size:12px;padding:6px 11px;padding-right:24px;border-radius:7px;border:0.5px solid var(--border);background:var(--grey);color:var(--mid);cursor:pointer;font-family:'DM Sans',sans-serif;position:relative;font-weight:500}
.sp-filt-btn::after{content:'▾';position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:9px;opacity:0.5}
.sp-filt-btn.active{background:var(--gl);border-color:var(--g);color:var(--g)}
.sp-filt-btn:hover{border-color:var(--g)}
.sp-filt-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;background:var(--white);border:0.5px solid var(--border);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.1);padding:6px;min-width:240px;max-height:380px;overflow-y:auto;z-index:60}
.sp-filt-menu.open{display:block}
.sp-filt-item{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12px;color:var(--ink);cursor:pointer;border-radius:6px;font-family:'DM Sans',sans-serif}
.sp-filt-item:hover{background:var(--gl)}
.sp-filt-item.on{background:var(--gl);color:var(--g);font-weight:500}
.sp-filt-item.on::before{content:'✓';color:var(--g);margin-right:2px}
.sp-filt-grouphead{font-size:10px;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.06em;font-family:monospace;padding:8px 10px 4px}
.sp-filt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}

.sp-tb-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.sp-tb-search{font-size:12px;padding:6px 12px;border:0.5px solid var(--border);border-radius:7px;background:var(--grey);color:var(--ink);font-family:'DM Sans',sans-serif;width:180px;outline:none;transition:all .15s}
.sp-tb-search:focus{border-color:var(--g);background:var(--white);width:220px}
.sp-tb-add{display:flex;align-items:center;gap:6px;font-size:13px;padding:7px 16px;border-radius:7px;background:var(--g);color:#fff;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;transition:background .15s}
.sp-tb-add:hover{background:var(--gd)}

/* Generic view container */
.sp-view{display:none;padding:24px 32px}
.sp-view.on{display:block}
.sp-view-inner{max-width:1800px;margin:0 auto}

/* ═══════════════ OVERVIEW VIEW ═══════════════ */
.sp-ov-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.sp-ov-h{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:700;letter-spacing:-0.3px;color:var(--ink);margin-bottom:4px}
.sp-ov-sub{font-size:13px;color:var(--lt);max-width:560px;line-height:1.5}
.sp-ov-keyline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--lt)}
.sp-ov-keyline-line{width:32px;height:0;border-top:1.5px dashed var(--red)}

/* PROJECT BANNER — horizontal, big % + stage label */
.sp-ov-banner{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:18px 24px;margin-bottom:18px;display:flex;align-items:center;gap:24px;box-shadow:0 4px 32px rgba(27,122,94,0.05);position:relative;overflow:hidden}
.sp-ov-banner-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(45,168,127,0.12) 0%,rgba(27,122,94,0.06) 100%);border-right:1px solid rgba(45,168,127,0.25);z-index:0;pointer-events:none}
.sp-ov-banner-content{position:relative;z-index:1;display:flex;align-items:center;gap:24px;width:100%;flex-wrap:wrap}
.sp-ov-banner-pct{font-family:'DM Sans',sans-serif;font-size:56px;font-weight:700;color:var(--g);letter-spacing:-1.5px;line-height:1;display:flex;align-items:baseline;gap:2px}
.sp-ov-banner-pct small{font-size:22px;font-weight:600;color:var(--gm);margin-left:4px}
.sp-ov-banner-info{flex:1;min-width:240px}
.sp-ov-banner-eyebrow{font-family:monospace;font-size:10px;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.sp-ov-banner-stage{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.2px;line-height:1.2;margin-bottom:4px}
.sp-ov-banner-stage strong{color:var(--g)}
.sp-ov-banner-detail{font-size:12px;color:var(--mid);line-height:1.5}
.sp-ov-banner-stats{display:flex;gap:18px;border-left:0.5px solid var(--border);padding-left:24px}
.sp-ov-banner-stat{text-align:left}
.sp-ov-banner-stat-val{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.2px;line-height:1}
.sp-ov-banner-stat-val.alert{color:var(--red)}
.sp-ov-banner-stat-label{font-size:10px;color:var(--lt);font-family:monospace;text-transform:uppercase;letter-spacing:.06em;margin-top:3px;font-weight:600}

/* Stack layout — 2-col grid; each meter+group pair occupies the same row, locked by grid */
.sp-ov-layout{display:grid;grid-template-columns:54px 1fr;gap:0;align-items:stretch;position:relative;background:var(--white);border:0.5px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 4px 32px rgba(27,122,94,0.05)}

/* Meter cell — column 1; height stretches to match its row's group on column 2 */
.sp-ov-bat-cell{display:flex;align-items:stretch;justify-content:center;padding:8px 0;border-bottom:0.5px solid var(--border);background:linear-gradient(to right,var(--cream),var(--white))}
.sp-ov-bat-cell:last-of-type{border-bottom:none}
.sp-ov-meter{position:relative;width:100%;display:grid;grid-template-columns:6px 1fr;gap:6px;align-items:stretch;padding:6px 6px 6px 12px;min-height:50px}
.sp-ov-meter-track{position:relative;background:rgba(27,122,94,0.06);border-radius:99px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.sp-ov-meter-fill{transition:height .5s cubic-bezier(0.32,0.72,0,1),background .3s ease;border-radius:99px;background:var(--gl)}
.sp-ov-meter-fill.b0{background:#F0F4F1}
.sp-ov-meter-fill.b1{background:#E0EFE6}
.sp-ov-meter-fill.b2{background:#CDE7D6}
.sp-ov-meter-fill.b3{background:#B6DCC2}
.sp-ov-meter-fill.b4{background:#9FD0AE}
.sp-ov-meter-fill.b5{background:#86C297}
.sp-ov-meter-fill.b6{background:#6DB382}
.sp-ov-meter-fill.b7{background:#56A36F}
.sp-ov-meter-fill.b8{background:#42945F}
.sp-ov-meter-fill.b9{background:#2F8650}
.sp-ov-meter-fill.b10{background:#1B7A5E}
.sp-ov-meter-num{display:flex;align-items:center;justify-content:flex-start;font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.3px;line-height:1;font-variant-numeric:tabular-nums}
.sp-ov-meter-num small{font-size:10px;font-weight:600;letter-spacing:0;margin-left:1px;color:var(--lt)}
.sp-ov-meter.dim{opacity:0.45}
.sp-ov-meter.dim .sp-ov-meter-fill{background:var(--lt)}
.sp-ov-meter.dim .sp-ov-meter-num{color:var(--lt)}

/* "We are here" line — runs vertically through the layout grid, spanning all rows */
.sp-ov-here{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--red);z-index:5;pointer-events:none}
.sp-ov-here-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;letter-spacing:0.04em;padding:2px 7px;border-radius:99px;white-space:nowrap;text-transform:uppercase;box-shadow:0 2px 8px rgba(220,38,38,0.3);z-index:6}
.sp-ov-here-date{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);background:var(--white);border:0.5px solid var(--red);color:var(--red);font-size:9px;font-weight:600;font-family:monospace;padding:1px 6px;border-radius:99px;white-space:nowrap;z-index:6}

/* RIBA Plan of Work lifecycle strip */
.sp-ov-riba{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:18px 22px 16px;margin-bottom:18px;box-shadow:0 4px 32px rgba(27,122,94,0.05)}
.sp-ov-riba-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:14px;flex-wrap:wrap}
.sp-ov-riba-eyebrow{font-family:monospace;font-size:10px;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.08em}
.sp-ov-riba-title{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0}
.sp-ov-riba-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:0;border-top:0.5px solid var(--border);border-left:0.5px solid var(--border);border-radius:8px;overflow:hidden}
.sp-ov-riba-cell{position:relative;padding:14px 12px 12px;border-right:0.5px solid var(--border);border-bottom:0.5px solid var(--border);display:flex;flex-direction:column;gap:8px;background:var(--white);transition:background .15s}
.sp-ov-riba-cell.past{background:linear-gradient(180deg,rgba(45,168,127,0.08),rgba(27,122,94,0.04))}
.sp-ov-riba-cell.future{opacity:0.5}
.sp-ov-riba-cell.active{background:linear-gradient(180deg,var(--white),rgba(45,168,127,0.06));box-shadow:inset 0 -3px 0 var(--g)}
.sp-ov-riba-here{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;letter-spacing:0.04em;padding:2px 8px;border-radius:99px;white-space:nowrap;text-transform:uppercase;box-shadow:0 2px 8px rgba(220,38,38,0.3);z-index:2}
.sp-ov-riba-num{font-family:'DM Sans',sans-serif;font-size:32px;font-weight:700;color:var(--ink);letter-spacing:-1.5px;line-height:0.9;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;gap:5px}
.sp-ov-riba-num-label{font-family:monospace;font-size:8px;font-weight:600;color:var(--lt);letter-spacing:0.08em;margin-top:5px;text-transform:uppercase}
.sp-ov-riba-cell.active .sp-ov-riba-num{color:var(--g)}
.sp-ov-riba-cell.past .sp-ov-riba-num{color:var(--gd)}
.sp-ov-riba-name{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:0;min-height:28px}
.sp-ov-riba-cell.future .sp-ov-riba-name{color:var(--lt);font-weight:500}
.sp-ov-riba-pct{display:flex;align-items:center;gap:6px;margin-top:auto}
.sp-ov-riba-pct-bar{flex:1;height:4px;background:rgba(27,122,94,0.08);border-radius:99px;overflow:hidden}
.sp-ov-riba-pct-fill{height:100%;border-radius:99px;transition:width .5s cubic-bezier(0.32,0.72,0,1)}
.sp-ov-riba-pct-fill.b0{background:#F0F4F1}
.sp-ov-riba-pct-fill.b1{background:#E0EFE6}
.sp-ov-riba-pct-fill.b2{background:#CDE7D6}
.sp-ov-riba-pct-fill.b3{background:#B6DCC2}
.sp-ov-riba-pct-fill.b4{background:#9FD0AE}
.sp-ov-riba-pct-fill.b5{background:#86C297}
.sp-ov-riba-pct-fill.b6{background:#6DB382}
.sp-ov-riba-pct-fill.b7{background:#56A36F}
.sp-ov-riba-pct-fill.b8{background:#42945F}
.sp-ov-riba-pct-fill.b9{background:#2F8650}
.sp-ov-riba-pct-fill.b10{background:#1B7A5E}
.sp-ov-riba-pct-val{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;color:var(--mid);letter-spacing:0;font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
.sp-ov-riba-pct-val small{font-size:8px;font-weight:500;color:var(--lt);margin-left:1px}
.sp-ov-riba-cell.future .sp-ov-riba-pct-val{color:var(--lt)}

/* Active stage detail panel — narrative + substages breadcrumb */
.sp-ov-detail{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:18px 22px;margin-bottom:18px;box-shadow:0 4px 32px rgba(27,122,94,0.05)}
.sp-ov-detail-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.sp-ov-detail-eyebrow{font-family:monospace;font-size:10px;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.08em}
.sp-ov-detail-meta{font-size:11px;color:var(--lt);font-family:monospace;letter-spacing:0.04em}
.sp-ov-detail-headline{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:700;letter-spacing:-0.3px;color:var(--ink);line-height:1.3;margin-bottom:8px}
.sp-ov-detail-active{color:var(--g)}
.sp-ov-detail-text{font-size:13px;color:var(--mid);line-height:1.6;margin-bottom:18px}
.sp-ov-detail-subs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;border-top:0.5px solid var(--border);padding-top:14px}
.sp-ov-detail-sub{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:6px;transition:all .15s}
.sp-ov-detail-sub.headline{background:rgba(45,168,127,0.06);box-shadow:0 0 0 1px rgba(27,122,94,0.18);margin:-6px}
.sp-ov-detail-sub-head{display:flex;align-items:center;gap:6px}
.sp-ov-detail-sub-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}
.sp-ov-detail-sub-dot.done{background:var(--g);color:#fff}
.sp-ov-detail-sub-dot.active{background:var(--white);border:1.5px solid var(--g);box-shadow:0 0 0 3px rgba(27,122,94,0.15)}
.sp-ov-detail-sub-dot.future{background:var(--white);border:0.5px solid rgba(0,0,0,0.15)}
.sp-ov-detail-sub-name{font-size:11px;font-weight:600;color:var(--ink)}
.sp-ov-detail-sub.done .sp-ov-detail-sub-name{color:var(--gd)}
.sp-ov-detail-sub.headline .sp-ov-detail-sub-name{color:var(--g);font-weight:700}
.sp-ov-detail-sub.notyet .sp-ov-detail-sub-name,
.sp-ov-detail-sub.pending .sp-ov-detail-sub-name{color:var(--lt);font-weight:500}
.sp-ov-detail-sub-bar{height:3px;background:rgba(27,122,94,0.08);border-radius:99px;overflow:hidden}
.sp-ov-detail-sub-fill{height:100%;border-radius:99px;transition:width .5s cubic-bezier(0.32,0.72,0,1)}
.sp-ov-detail-sub-fill.b0{background:#F0F4F1}
.sp-ov-detail-sub-fill.b1{background:#E0EFE6}
.sp-ov-detail-sub-fill.b2{background:#CDE7D6}
.sp-ov-detail-sub-fill.b3{background:#B6DCC2}
.sp-ov-detail-sub-fill.b4{background:#9FD0AE}
.sp-ov-detail-sub-fill.b5{background:#86C297}
.sp-ov-detail-sub-fill.b6{background:#6DB382}
.sp-ov-detail-sub-fill.b7{background:#56A36F}
.sp-ov-detail-sub-fill.b8{background:#42945F}
.sp-ov-detail-sub-fill.b9{background:#2F8650}
.sp-ov-detail-sub-fill.b10{background:#1B7A5E}
.sp-ov-detail-sub-meta{font-size:9px;color:var(--lt);font-family:monospace;letter-spacing:.04em;font-weight:500}
.sp-ov-detail-sub.headline .sp-ov-detail-sub-meta{color:var(--g);font-weight:600}
.sp-ov-detail-sub.done .sp-ov-detail-sub-meta{color:var(--gd)}

/* Each group */
.sp-ov-group{display:grid;grid-template-columns:220px 1fr;border-bottom:0.5px solid var(--border);transition:background .15s;align-items:stretch}
.sp-ov-group:last-child{border-bottom:none}
.sp-ov-group.dim{opacity:0.55}
.sp-ov-group.collapsed .sp-ov-roles{display:none}
.sp-ov-group-side{padding:14px 18px;border-right:0.5px solid var(--border);background:linear-gradient(to right,var(--cream),var(--white));position:relative;cursor:pointer;display:flex;flex-direction:column;justify-content:center}
.sp-ov-group-num{position:absolute;top:14px;right:18px;font-family:monospace;font-size:10px;color:var(--lt);font-weight:600}
.sp-ov-group-name{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:0;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.sp-ov-group-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sp-ov-group-status-dot.active{background:var(--g);box-shadow:0 0 0 3px rgba(27,122,94,0.15)}
.sp-ov-group-status-dot.done{background:var(--gm);opacity:0.7}
.sp-ov-group-status-dot.notyet{background:var(--lt);opacity:0.4}
.sp-ov-group-status-dot.alert{background:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,0.15)}
.sp-ov-group-chev{font-size:9px;color:var(--lt);transition:transform .15s;margin-left:auto}
.sp-ov-group.collapsed .sp-ov-group-chev{transform:rotate(-90deg)}
.sp-ov-group-meta{font-size:11px;color:var(--lt);line-height:1.5}
.sp-ov-group-meta-issue{color:var(--red);font-weight:600}
.sp-ov-roles{padding:6px 0;background:var(--cream);position:relative}
.sp-ov-role{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center;padding:7px 18px;font-size:12px;border-bottom:0.5px dashed rgba(0,0,0,0.04)}
.sp-ov-role:last-child{border-bottom:none}
.sp-ov-role:hover{background:var(--white);cursor:pointer}
.sp-ov-role-co{font-weight:500;color:var(--ink);display:flex;align-items:center;gap:8px}
.sp-ov-role-co-logo{width:22px;height:22px;border-radius:5px;background:var(--gl);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--g);font-family:'DM Sans',sans-serif;border:0.5px solid var(--border);flex-shrink:0}
.sp-ov-role-co-info{display:flex;flex-direction:column;gap:0px;line-height:1.3}
.sp-ov-role-trade{font-size:10px;color:var(--lt);font-weight:400}
.sp-ov-role-dates{font-size:10px;color:var(--lt);font-family:monospace;white-space:nowrap}
.sp-ov-role-pct{font-size:11px;font-family:monospace;font-weight:600;color:var(--mid);min-width:32px;text-align:right}
.sp-ov-role-status{display:flex;align-items:center;gap:6px}
.sp-ov-role-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sp-ov-role-dot.active{background:var(--g);box-shadow:0 0 0 3px rgba(27,122,94,0.15)}
.sp-ov-role-dot.pending{background:var(--amber)}
.sp-ov-role-dot.notyet{background:var(--lt);opacity:0.5}
.sp-ov-role-dot.blocked{background:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,0.15)}
.sp-ov-role-dot.done{background:var(--gm);opacity:0.7}

/* ═══════════════ YEAR / GANTT ═══════════════ */
.sp-yr-wrap{background:var(--white);border:0.5px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 4px 32px rgba(27,122,94,0.05)}
.sp-yr-head-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:0.5px solid var(--border);background:linear-gradient(to bottom,var(--cream),var(--white))}
.sp-yr-title{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.2px}
.sp-yr-nav{display:flex;align-items:center;gap:0}
.sp-yr-scroll{overflow-x:auto}
.sp-yr-grid{min-width:980px}
.sp-yr-head{display:grid;grid-template-columns:200px 1fr;border-bottom:0.5px solid var(--border);background:linear-gradient(to bottom,var(--cream),var(--white));position:sticky;top:0;z-index:3}
.sp-yr-head-side{padding:12px 16px;border-right:0.5px solid var(--border);font-family:monospace;font-size:10px;color:var(--lt);text-transform:uppercase;letter-spacing:.07em;font-weight:600;display:flex;align-items:center}
.sp-yr-months{display:grid;grid-template-columns:repeat(12,1fr)}
.sp-yr-month{padding:10px 6px;text-align:center;font-size:11px;color:var(--mid);border-right:0.5px solid var(--border);font-weight:500;font-family:'DM Sans',sans-serif}
.sp-yr-month:last-child{border-right:none}
.sp-yr-month strong{display:block;font-size:10px;color:var(--lt);font-weight:400;font-family:monospace;margin-top:1px}
.sp-yr-month.active{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}

.sp-yr-group{border-bottom:0.5px solid var(--border)}
.sp-yr-group:last-child{border-bottom:none}
.sp-yr-group-head{display:grid;grid-template-columns:200px 1fr;background:var(--cream);cursor:pointer;transition:background .12s}
.sp-yr-group-head:hover{background:var(--grey)}
.sp-yr-group-name{padding:9px 16px;border-right:0.5px solid var(--border);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;letter-spacing:-0.1px}
.sp-yr-group-count{margin-left:auto;font-family:monospace;font-size:10px;font-weight:600;color:var(--lt);background:var(--white);border:0.5px solid var(--border);padding:1px 7px;border-radius:99px;min-width:22px;text-align:center;line-height:1.4}
.sp-yr-group-chev{font-size:9px;color:var(--lt);transition:transform .15s}
.sp-yr-group.collapsed .sp-yr-group-chev{transform:rotate(-90deg)}
.sp-yr-group-track{position:relative;height:30px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 0.5px),var(--border) calc(100%/12 - 0.5px),var(--border) calc(100%/12))}
.sp-yr-group-bar{position:absolute;top:6px;bottom:6px;border-radius:5px;display:flex;align-items:center;padding:0 8px;font-size:10px;color:#fff;font-weight:500;font-family:'DM Sans',sans-serif;letter-spacing:-0.1px;white-space:nowrap;overflow:hidden;opacity:0.9;background:var(--g)}
.sp-yr-group-bar.complete{background:var(--gm)}
.sp-yr-group-bar.minor{background:#FBE89F;color:#5C4500}
.sp-yr-group-bar.watch{background:#F19842;color:#3F2003}
.sp-yr-group-bar.major{background:#D85A4A;color:#fff}
.sp-yr-group-bar.pending{background:var(--lt);opacity:0.5}

.sp-yr-rows{display:none}
.sp-yr-group:not(.collapsed) .sp-yr-rows{display:block}
.sp-yr-row{display:grid;grid-template-columns:200px 1fr;border-top:0.5px dashed rgba(0,0,0,0.05)}
.sp-yr-row:hover{background:var(--cream)}
.sp-yr-row-name{padding:8px 16px 8px 30px;border-right:0.5px solid var(--border);font-size:12px;color:var(--mid);display:flex;align-items:center;gap:7px;line-height:1.3;background:var(--white)}
.sp-yr-row-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--g)}
.sp-yr-track{position:relative;height:32px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 0.5px),var(--border) calc(100%/12 - 0.5px),var(--border) calc(100%/12))}
.sp-yr-bar{position:absolute;top:6px;bottom:6px;border-radius:5px;display:flex;align-items:center;padding:0 8px;font-size:10px;color:#fff;font-weight:500;cursor:pointer;transition:transform .15s, box-shadow .15s;white-space:nowrap;overflow:hidden;letter-spacing:-0.1px;min-width:30px;background:var(--g)}
.sp-yr-bar.complete{background:var(--gm)}
.sp-yr-bar.minor{background:#FBE89F;color:#5C4500}
.sp-yr-bar.watch{background:#F19842;color:#3F2003}
.sp-yr-bar.major{background:#D85A4A;color:#fff}
.sp-yr-bar.pending{background:var(--lt);opacity:0.5}
/* legacy classes — kept for any non-severity callers */
.sp-yr-bar.done{background:var(--gm);opacity:0.6}
.sp-yr-bar.notyet{background:var(--lt);opacity:0.5}
.sp-yr-bar.blocked{background:var(--red)}
.sp-yr-bar:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:2}

.sp-yr-today{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--red);z-index:4;pointer-events:none}
.sp-yr-today-tag{position:absolute;top:0;left:50%;transform:translate(-50%,-100%);background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;white-space:nowrap;font-family:monospace;text-transform:uppercase;letter-spacing:0.04em;box-shadow:0 2px 6px rgba(220,38,38,0.25)}

/* ═══════════════ MONTH ═══════════════ */
.sp-mo-wrap{background:var(--white);border:0.5px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 4px 32px rgba(27,122,94,0.05)}
.sp-mo-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:0.5px solid var(--border);background:linear-gradient(to bottom,var(--cream),var(--white))}
.sp-mo-title{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.2px}
.sp-mo-nav{display:flex;gap:4px;align-items:center}
.sp-mo-nav-btn{width:28px;height:28px;border-radius:6px;border:0.5px solid var(--border);background:var(--white);color:var(--mid);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .12s}
.sp-mo-nav-btn:hover{border-color:var(--g);color:var(--g);background:var(--gl)}
.sp-mo-nav-today{font-size:11px;padding:0 12px;height:28px;border-radius:6px;border:0.5px solid var(--border);background:var(--white);color:var(--mid);cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;margin-right:6px}
.sp-mo-nav-today:hover{background:var(--gl);border-color:var(--g);color:var(--g)}
.sp-mo-dow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:0.5px solid var(--border)}
.sp-mo-dow-cell{padding:9px 10px;font-size:10px;font-family:monospace;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.07em;border-right:0.5px solid var(--border)}
.sp-mo-dow-cell:last-child{border-right:none}
.sp-mo-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(112px,1fr)}
.sp-mo-cell{border-right:0.5px solid var(--border);border-bottom:0.5px solid var(--border);padding:6px 8px;position:relative;cursor:pointer;transition:background .12s;display:flex;flex-direction:column}
.sp-mo-cell:hover{background:var(--cream)}
.sp-mo-cell:nth-child(7n){border-right:none}
.sp-mo-cell.other-month{background:var(--cream);opacity:0.55}
.sp-mo-cell.today{box-shadow:inset 3px 0 0 var(--gm)}
.sp-mo-date{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:5px;font-family:'DM Sans',sans-serif}
.sp-mo-cell.today .sp-mo-date{background:var(--g);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.sp-mo-cell.weekend .sp-mo-date{color:var(--lt)}
.sp-mo-pills{display:flex;flex-direction:column;gap:2px;flex:1;overflow:hidden}
.sp-mo-pill{font-size:10px;padding:3px 7px;border-radius:5px;color:var(--ink);display:flex;align-items:center;gap:4px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-weight:500;background:var(--white);border:0.5px solid var(--border)}
.sp-mo-pill.complete{background:rgba(45,168,127,0.16);border-color:rgba(27,122,94,0.25)}
.sp-mo-pill.minor{background:rgba(251,232,159,0.55);border-color:rgba(180,135,0,0.3)}
.sp-mo-pill.watch{background:rgba(241,152,66,0.20);border-color:rgba(186,117,23,0.4)}
.sp-mo-pill.major{background:rgba(216,90,74,0.18);border-color:rgba(153,60,29,0.45)}
.sp-mo-pill.pending{background:var(--white);border-color:var(--border)}
.sp-mo-pill-more{font-size:10px;color:var(--lt);font-family:monospace;font-weight:600;padding:1px 4px;cursor:pointer}
.sp-mo-pill-more:hover{color:var(--g)}

/* ═══════════════ WEEK (DEFAULT) ═══════════════ */
.sp-wk-summary{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:24px;margin-bottom:18px;flex-wrap:wrap;box-shadow:0 2px 16px rgba(27,122,94,0.04)}
.sp-wk-summary-block{display:flex;flex-direction:column;gap:2px}
.sp-wk-summary-label{font-size:10px;font-family:monospace;color:var(--lt);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.sp-wk-summary-value{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:0}
.sp-wk-summary-value.alert{color:var(--red)}
.sp-wk-summary-value.muted{color:var(--lt);font-weight:500}
.sp-wk-summary-divider{width:0.5px;height:34px;background:var(--border)}
.sp-wk-summary-spacer{flex:1}
.sp-wk-summary-actions{display:flex;gap:8px}
.sp-wk-pill-btn{font-size:11px;padding:5px 11px;border-radius:6px;border:0.5px solid var(--border);background:var(--grey);color:var(--mid);cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;transition:all .12s}
.sp-wk-pill-btn:hover{border-color:var(--g);color:var(--g);background:var(--gl)}
.sp-wk-pill-btn.alert{background:var(--redl);color:var(--red);border-color:rgba(220,38,38,0.2)}

/* Legend strip — explains the four card colours */
.sp-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;background:var(--white);border:0.5px solid var(--border);border-radius:8px}
.sp-legend-label{font-family:monospace;font-size:10px;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.07em;padding-right:4px;border-right:0.5px solid var(--border);margin-right:4px;padding-right:14px}
.sp-legend-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mid);font-weight:500}
.sp-legend-swatch{width:16px;height:16px;border-radius:4px;flex-shrink:0;border:0.5px solid var(--border)}
.sp-legend-swatch.complete{background:rgba(45,168,127,0.16);border-color:rgba(27,122,94,0.25)}
.sp-legend-swatch.minor{background:#FBE89F;border-color:rgba(180,135,0,0.3)}
.sp-legend-swatch.watch{background:#F19842;border-color:rgba(186,117,23,0.4)}
.sp-legend-swatch.major{background:#D85A4A;border-color:rgba(153,60,29,0.4)}
.sp-legend-swatch.pending{background:var(--white);border-color:var(--border)}

.sp-wk-wrap{background:var(--white);border:0.5px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 4px 32px rgba(27,122,94,0.05)}
.sp-wk-scroll{overflow-x:auto}
.sp-wk-grid{min-width:1100px}
.sp-wk-days{display:grid;grid-template-columns:160px repeat(7,1fr);border-bottom:0.5px solid var(--border);background:linear-gradient(to bottom,var(--cream),var(--white));position:sticky;top:0;z-index:3}
.sp-wk-days-corner{padding:14px 18px;border-right:0.5px solid var(--border);font-family:monospace;font-size:10px;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center}
.sp-wk-day{padding:12px 14px;border-right:0.5px solid var(--border);text-align:center;display:flex;flex-direction:column;gap:2px}
.sp-wk-day:last-child{border-right:none}
.sp-wk-day-dow{font-size:10px;font-family:monospace;color:var(--lt);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.sp-wk-day-num{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.3px;line-height:1}
.sp-wk-day.today{box-shadow:inset 0 -3px 0 var(--gm)}
.sp-wk-day.today .sp-wk-day-dow{color:var(--g);font-weight:700}
.sp-wk-day.today .sp-wk-day-num{color:var(--g);font-weight:800}
.sp-wk-day.weekend .sp-wk-day-num{color:var(--lt)}

.sp-wk-statusrow{display:grid;grid-template-columns:160px repeat(7,1fr);border-bottom:0.5px solid var(--border);min-height:96px}
.sp-wk-statusrow:last-child{border-bottom:none}
.sp-wk-statusrow-label{padding:16px 18px;border-right:0.5px solid var(--border);background:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:4px}
.sp-wk-statusrow-name{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0;display:flex;align-items:center;gap:7px}
.sp-wk-statusrow-pip{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sp-wk-statusrow-count{font-size:10.5px;color:var(--lt);font-family:monospace}
.sp-wk-cell{border-right:0.5px solid var(--border);padding:9px 8px;display:flex;flex-direction:column;gap:6px;min-height:96px;cursor:pointer;transition:background .12s}
.sp-wk-cell:last-child{border-right:none}
.sp-wk-cell:hover{background:var(--cream)}
.sp-wk-cell.today{box-shadow:inset 0 3px 0 var(--gm)}
.sp-wk-cell.today:hover{background:var(--cream)}
.sp-wk-cell.weekend{background:var(--cream)}

.sp-wk-card{background:var(--white);border-radius:6px;padding:8px 11px;border:0.5px solid var(--border);cursor:pointer;transition:all .14s;font-family:'DM Sans',sans-serif;position:relative}
.sp-wk-card.complete{background:rgba(45,168,127,0.16);border-color:rgba(27,122,94,0.25)}
.sp-wk-card.minor{background:rgba(251,232,159,0.55);border-color:rgba(180,135,0,0.3)}
.sp-wk-card.watch{background:rgba(241,152,66,0.20);border-color:rgba(186,117,23,0.4)}
.sp-wk-card.major{background:rgba(216,90,74,0.18);border-color:rgba(153,60,29,0.45)}
.sp-wk-card.pending{background:var(--white);border-color:var(--border)}
.sp-wk-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);transform:translateY(-1px);z-index:2;position:relative}
.sp-wk-card-title{font-size:11.5px;font-weight:500;color:var(--ink);line-height:1.35;margin-bottom:4px}
.sp-wk-card-meta{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--lt);font-variant-numeric:tabular-nums}
.sp-wk-card-meta-trade{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-wk-card-brief{display:flex;align-items:center;gap:3px;font-size:9px;font-family:monospace;font-weight:600;padding:1px 5px;border-radius:99px}
.sp-wk-card-brief.sent{background:var(--gl);color:var(--g)}
.sp-wk-card-brief.returned{background:var(--gl);color:var(--g)}
.sp-wk-card-brief.issue{background:var(--redl);color:var(--red)}
.sp-wk-card-brief.pending{background:var(--ambl);color:var(--amber)}

/* ═══════════════ DAY ═══════════════ */
.sp-d-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:14px}
.sp-d-title{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-0.2px}
.sp-d-title strong{color:var(--g)}
.sp-d-nav{display:flex;gap:4px;align-items:center}

.sp-d-wrap{background:var(--white);border:0.5px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 4px 32px rgba(27,122,94,0.05);position:relative}
.sp-d-scroll{overflow:auto;max-height:78vh}
.sp-d-grid{min-width:auto}

/* Single-column calendar layout (Outlook/Gmail style) */
.sp-d-cal-body{display:grid;grid-template-columns:72px 1fr;position:relative}
.sp-d-cal-hours{position:relative;border-right:0.5px solid var(--border);background:linear-gradient(to right,var(--cream),var(--white))}
.sp-d-cal-hourlabel{position:absolute;left:0;right:0;padding:0 12px;font-family:monospace;font-size:11px;color:var(--lt);font-weight:600;text-align:right;transform:translateY(-50%)}
.sp-d-cal-events{position:relative;background:var(--white)}
.sp-d-cal-gridline{position:absolute;left:0;right:0;height:0;border-top:0.5px solid rgba(0,0,0,0.08);pointer-events:none}
.sp-d-cal-gridline.half{border-top:0.5px dashed rgba(0,0,0,0.04)}

/* Event blocks — coloured left border by group, soft tinted background */
.sp-d-cal-event{position:absolute;border-radius:6px;padding:6px 10px;cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif;overflow:hidden;background:color-mix(in srgb, var(--evt-colour) 12%, var(--white));border-left:3px solid var(--evt-colour);box-shadow:0 1px 2px rgba(0,0,0,0.04);min-height:28px}
.sp-d-cal-event:hover{box-shadow:0 4px 12px rgba(0,0,0,0.12);transform:translateY(-1px);background:color-mix(in srgb, var(--evt-colour) 18%, var(--white));z-index:2}
.sp-d-cal-event-time{font-family:monospace;font-size:10px;color:var(--mid);font-weight:500;margin-bottom:2px}
.sp-d-cal-event-title{font-size:12px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-d-cal-event-meta{font-size:10.5px;color:var(--mid);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Status modifiers */
.sp-d-cal-event.state-returned{opacity:0.7}
.sp-d-cal-event.state-returned::after{content:'✓';position:absolute;top:5px;right:7px;font-size:10px;color:var(--gm);font-weight:700}
.sp-d-cal-event.state-blocked{background:var(--redl);border-left-color:var(--red)}
.sp-d-cal-event.state-blocked .sp-d-cal-event-time{color:var(--red)}
.sp-d-cal-event.state-scheduled{background:repeating-linear-gradient(45deg,var(--white),var(--white) 6px,color-mix(in srgb, var(--evt-colour) 10%, var(--white)) 6px,color-mix(in srgb, var(--evt-colour) 10%, var(--white)) 12px)}

/* Now line */
.sp-d-cal-now{position:absolute;left:-72px;right:0;height:0;z-index:3;pointer-events:none;display:flex;align-items:center}
.sp-d-cal-now-dot{width:10px;height:10px;border-radius:50%;background:var(--red);margin-left:62px;flex-shrink:0;box-shadow:0 0 0 3px rgba(220,38,38,0.18)}
.sp-d-cal-now-line{flex:1;height:0;border-top:1.5px solid var(--red);margin-left:-1px}
.sp-d-cal-now-tag{position:absolute;left:0;top:-8px;background:var(--red);color:#fff;font-family:monospace;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:99px;white-space:nowrap;letter-spacing:0.04em;box-shadow:0 2px 4px rgba(220,38,38,0.25)}

/* Empty state */
.sp-d-cal-empty{padding:60px 40px;text-align:center;font-family:'DM Sans',sans-serif}
.sp-d-cal-empty-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.sp-d-cal-empty-sub{font-size:12.5px;color:var(--lt);font-weight:300}

/* ═══════════════ COMPANY CARD PANEL ═══════════════ */
.sp-panel-overlay{position:fixed;inset:0;z-index:300;background:rgba(17,20,16,0.5);display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .22s;backdrop-filter:blur(3px)}
.sp-panel-overlay.open{opacity:1;pointer-events:all}
.sp-panel{width:460px;max-width:96vw;background:var(--cream);height:100%;overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(0.32,0.72,0,1);box-shadow:-8px 0 48px rgba(0,0,0,0.15)}
.sp-panel-overlay.open .sp-panel{transform:translateX(0)}

.sp-panel-head{background:var(--gd);padding:22px 24px 20px;color:#fff;position:relative}
.sp-panel-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,0.1);border:none;color:rgba(255,255,255,0.75);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .14s}
.sp-panel-close:hover{background:rgba(255,255,255,0.2);color:#fff}
.sp-panel-eyebrow{font-family:monospace;font-size:10px;font-weight:600;color:rgba(255,255,255,0.5);letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.sp-panel-co{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.sp-panel-logo{width:48px;height:48px;border-radius:9px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.sp-panel-name{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:700;color:#fff;letter-spacing:-0.2px;line-height:1.1;margin-bottom:3px}
.sp-panel-trade{font-size:12px;color:rgba(255,255,255,0.65)}
.sp-panel-chips{display:flex;gap:6px;flex-wrap:wrap}
.sp-panel-chip{font-size:11px;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.85);font-weight:500}
.sp-panel-chip.alive{background:rgba(45,168,127,0.25);color:var(--gm)}
.sp-panel-chip.alive::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gm);margin-right:5px;vertical-align:middle}

.sp-panel-body{padding:20px 24px 32px}
.sp-panel-section{margin-bottom:22px}
.sp-panel-section-label{font-family:monospace;font-size:10px;font-weight:600;color:var(--lt);letter-spacing:.07em;text-transform:uppercase;margin-bottom:9px}

.sp-panel-row{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:6px 0;font-size:13px;border-bottom:0.5px solid var(--border)}
.sp-panel-row:last-child{border-bottom:none}
.sp-panel-row-key{color:var(--lt);font-size:12px}
.sp-panel-row-val{color:var(--ink);font-weight:500}
.sp-panel-row-val a{color:var(--g);text-decoration:none}
.sp-panel-row-val a:hover{text-decoration:underline}

.sp-panel-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-panel-stat{background:var(--white);border:0.5px solid var(--border);border-radius:9px;padding:11px 14px}
.sp-panel-stat-val{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-0.3px;line-height:1}
.sp-panel-stat-val small{font-size:13px;color:var(--lt);font-weight:500;margin-left:2px}
.sp-panel-stat-label{font-size:10px;color:var(--lt);font-family:monospace;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:4px}

.sp-panel-progress{display:flex;align-items:center;gap:10px;background:var(--white);border:0.5px solid var(--border);border-radius:9px;padding:12px 14px}
.sp-panel-progress-info{flex:1}
.sp-panel-progress-label{font-size:11px;color:var(--lt);margin-bottom:5px}
.sp-panel-progress-bar{height:6px;background:var(--grey);border-radius:99px;overflow:hidden}
.sp-panel-progress-fill{height:100%;background:linear-gradient(90deg,var(--gm),var(--g));border-radius:99px}
.sp-panel-progress-pct{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:var(--g);letter-spacing:-0.2px;min-width:50px;text-align:right}

.sp-panel-issue{background:var(--redl);border:0.5px solid rgba(220,38,38,0.18);border-radius:8px;padding:11px 13px;display:flex;gap:11px;align-items:flex-start;font-size:12px;color:#7F1D1D;line-height:1.45}
.sp-panel-issue.minor{background:var(--ambl);border-color:rgba(217,119,6,0.22);color:#78350F}
.sp-panel-issue.major{background:var(--redl);border-color:rgba(220,38,38,0.22);color:#7F1D1D}
.sp-panel-issue-icon{font-size:18px;flex-shrink:0;line-height:1.1}
.sp-panel-issue-cat{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:inherit;display:flex;align-items:center;gap:8px;margin-bottom:4px;letter-spacing:-0.1px}
.sp-panel-issue-sev{font-family:monospace;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:99px;background:rgba(255,255,255,0.6);border:0.5px solid currentColor}
.sp-panel-issue-text{font-size:12px;line-height:1.5;color:inherit;opacity:0.92}
.sp-panel-issue-ref{margin-top:6px;font-family:monospace;font-size:10px;color:inherit;opacity:0.65;letter-spacing:0.02em}

.sp-panel-log{display:flex;flex-direction:column;gap:0}
.sp-panel-log-item{display:flex;gap:11px;padding:9px 0;border-bottom:0.5px solid var(--border);font-size:12px}
.sp-panel-log-item:last-child{border-bottom:none}
.sp-panel-log-time{color:var(--lt);font-family:monospace;font-size:11px;min-width:80px;flex-shrink:0;line-height:1.5}
.sp-panel-log-text{flex:1;color:var(--mid);line-height:1.5}
.sp-panel-log-text strong{color:var(--ink);font-weight:600}

.sp-panel-actions{display:flex;flex-direction:column;gap:8px}
.sp-panel-action{padding:11px 14px;border-radius:9px;border:none;font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;letter-spacing:-0.1px}
.sp-panel-action.primary{background:var(--g);color:#fff}
.sp-panel-action.primary:hover{background:var(--gd)}
.sp-panel-action.secondary{background:var(--white);color:var(--ink);border:0.5px solid var(--border)}
.sp-panel-action.secondary:hover{border-color:var(--g);color:var(--g);background:var(--gl)}
.sp-panel-action.whatsapp{background:var(--g);color:#fff}
.sp-panel-action.whatsapp:hover{background:var(--gd)}

/* Mobile */
@media(max-width:780px){
  .sp-legend{gap:10px;padding:8px 12px;font-size:11px}
  .sp-legend-label{display:none}
  .sp-legend-item{font-size:11px;gap:5px}
  .sp-legend-swatch{width:14px;height:14px}
  .sp-toolbar{height:auto;padding:8px 14px;flex-wrap:wrap;gap:6px}
  .sp-vtab{padding:6px 10px;font-size:12px}
  .sp-tb-search{width:130px}
  .sp-tb-search:focus{width:140px}
  .sp-view{padding:14px}
  .sp-projbar{padding:0 14px;gap:8px;height:40px}
  .sp-projbar-meta{display:none}
  .sp-ov-banner{padding:14px 16px;gap:14px}
  .sp-ov-banner-pct{font-size:42px}
  .sp-ov-banner-stats{padding-left:14px;gap:10px}
  .sp-ov-layout{grid-template-columns:46px 1fr;gap:6px}
  .sp-ov-meter{padding:10px 0;grid-template-columns:5px 1fr;gap:5px}
  .sp-ov-meter-num{font-size:14px}
  .sp-ov-riba{padding:14px 14px 12px}
  .sp-ov-riba-grid{grid-template-columns:repeat(4,1fr)}
  .sp-ov-riba-num{font-size:24px;letter-spacing:-1px}
  .sp-ov-riba-name{font-size:10px;min-height:24px}
  .sp-ov-detail{padding:14px 16px}
  .sp-ov-detail-headline{font-size:16px;letter-spacing:-0.2px}
  .sp-ov-detail-text{font-size:12px}
  .sp-ov-detail-subs{grid-template-columns:repeat(2,1fr);gap:10px}
  .sp-ov-detail-sub-name{font-size:11px}
  .sp-ov-group{grid-template-columns:140px 1fr}
  .sp-ov-group-side{padding:10px 12px}
  .sp-ov-group-name{font-size:12px}
  .sp-ov-role{grid-template-columns:1fr auto;padding:6px 12px}
  .sp-ov-role-dates{display:none}
  .sp-yr-head,.sp-yr-group-head,.sp-yr-row{grid-template-columns:140px 1fr}
  .sp-yr-row-name{padding-left:18px}
  .sp-wk-days,.sp-wk-statusrow{grid-template-columns:90px repeat(7,1fr)}
  .sp-wk-day{padding:8px 6px}
  .sp-wk-day-num{font-size:14px}
  .sp-wk-statusrow-label{padding:10px}
  .sp-wk-statusrow-name{font-size:11px}
  .sp-mo-grid{grid-auto-rows:minmax(80px,1fr)}
  .sp-mo-pill{font-size:9px}
  .sp-panel{width:100%}
}

/* ── SITEWIDE FOOTER ── */
footer{background:var(--white);border-top:3px solid var(--gm);padding:32px 28px;text-align:center}
.foot-logo-img{height:44px;width:auto;display:inline-block;vertical-align:middle;margin-bottom:10px}
.foot-legal{font-size:11px;color:var(--lt);letter-spacing:0.2px}
.foot-tagline{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--g);font-weight:500;letter-spacing:0.1em;text-transform:uppercase;margin:8px 0;text-align:center}
.foot-fine{font-size:11px;color:var(--lt);letter-spacing:0.2px;margin-top:6px}

/* ===== Tier-recommender questionnaire modal (sitewide; markup injected by tier-q.js) ===== */
.tier-q-overlay{position:fixed;inset:0;background:rgba(17,20,16,0.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;overflow-y:auto}
.tier-q-overlay.open{display:flex}
.tier-q-modal{background:var(--cream);border-radius:14px;max-width:560px;width:100%;padding:28px;position:relative;font-family:'DM Sans',sans-serif;max-height:calc(100vh - 40px);overflow-y:auto;margin:auto}
.tier-q-close{position:absolute;top:12px;right:12px;background:transparent;border:none;cursor:pointer;color:var(--lt);font-size:18px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
.tier-q-close:hover{background:var(--grey);color:var(--ink)}
.tier-q-progress{display:flex;gap:4px;margin-bottom:20px;padding-right:32px}
.tier-q-progress-seg{flex:1;height:3px;border-radius:2px;background:var(--border)}
.tier-q-progress-seg.done{background:var(--g)}
.tier-q-progress-seg.current{background:var(--g)}
.tier-q-step{display:none}
.tier-q-step.on{display:block}
.tier-q-stepnum{font-size:11px;color:var(--lt);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-family:monospace;margin-bottom:8px}
.tier-q-h{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.25;letter-spacing:-0.3px}
.tier-q-sub{font-size:12px;color:var(--mid);margin-bottom:18px;line-height:1.5}
.tier-q-options{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.tier-q-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:0.5px solid var(--border);border-radius:10px;background:var(--white);cursor:pointer;font-size:13px;color:var(--ink);text-align:left;font-family:'DM Sans',sans-serif;transition:border-color .15s,background .15s,box-shadow .15s;line-height:1.4}
.tier-q-opt:hover{border-color:var(--g);background:var(--gl)}
.tier-q-opt.selected{border-color:var(--g);background:var(--gl);box-shadow:0 0 0 1px var(--g) inset}
.tier-q-opt-tick{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;transition:background .15s,border-color .15s}
.tier-q-opt.selected .tier-q-opt-tick{background:var(--g);border-color:var(--g)}
.tier-q-opt-tick i{display:none}
.tier-q-opt.selected .tier-q-opt-tick i{display:block}
.tier-q-opt-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.tier-q-opt.selected .tier-q-opt-radio{border-color:var(--g)}
.tier-q-opt-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--g);transform:scale(0);transition:transform .15s}
.tier-q-opt.selected .tier-q-opt-radio::after{transform:scale(1)}
.tier-q-multi-hint{font-size:11px;color:var(--lt);margin-bottom:10px;font-style:italic}
.tier-q-nav{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:6px}
.tier-q-back{background:transparent;border:none;color:var(--mid);font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;padding:8px 4px;display:flex;align-items:center;gap:4px}
.tier-q-back:hover{color:var(--ink)}
.tier-q-back[disabled]{visibility:hidden}
.tier-q-next{padding:11px 20px;border-radius:8px;background:var(--g);color:#fff;border:none;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s;display:inline-flex;align-items:center;gap:6px}
.tier-q-next:hover{background:var(--gd)}
.tier-q-next[disabled]{background:var(--grey);color:var(--lt);cursor:not-allowed}
.tier-q-result{display:none}
.tier-q-result.on{display:block}
.tier-q-result-eyebrow{font-size:11px;color:var(--g);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-family:monospace;margin-bottom:10px}
.tier-q-result-summary{background:var(--white);border:0.5px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:18px;font-size:13px;color:var(--mid);line-height:1.55}
.tier-q-result-summary strong{color:var(--ink);font-weight:600}
.tier-q-result-card{border:1.5px solid var(--g);background:var(--gl);border-radius:12px;padding:20px;margin-bottom:18px;position:relative;box-shadow:0 0 0 4px rgba(27,122,94,0.08)}
.tier-q-result-card-pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:monospace;color:#fff;background:var(--g);padding:3px 10px;border-radius:99px;margin-bottom:10px}
.tier-q-result-card-name{font-size:24px;font-weight:700;color:var(--gd);margin-bottom:4px;letter-spacing:-0.4px;line-height:1.1}
.tier-q-result-card-price{font-size:18px;color:var(--ink);font-weight:600;margin-bottom:12px}
.tier-q-result-card-price .tq-pmo{font-size:13px;color:var(--mid);font-weight:400}
.tier-q-result-why{font-size:13px;color:var(--ink);font-weight:600;margin-bottom:8px;letter-spacing:-0.1px}
.tier-q-result-bullets{list-style:none;padding:0;margin:0 0 4px 0}
.tier-q-result-bullets li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--mid);line-height:1.5;padding:4px 0}
.tier-q-result-bullets li i{color:var(--g);font-size:14px;flex-shrink:0;margin-top:2px}
.tier-q-result-aside{font-size:12px;color:var(--lt);margin-top:12px;padding-top:12px;border-top:0.5px solid var(--border);line-height:1.5}
.tier-q-result-aside strong{color:var(--mid);font-weight:600}
.tier-q-result-ctas{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.tier-q-cta-primary{padding:12px 20px;border-radius:8px;background:var(--g);color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.tier-q-cta-primary:hover{background:var(--gd)}
.tier-q-cta-secondary{padding:11px 20px;border-radius:8px;background:transparent;color:var(--g);border:0.5px solid var(--g);font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tier-q-cta-secondary:hover{background:var(--gl)}
.tier-q-cta-tertiary{padding:8px;background:transparent;color:var(--mid);border:none;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:underline;text-underline-offset:3px}
.tier-q-cta-tertiary:hover{color:var(--ink)}
.tier-q-email{display:none;margin-top:10px;padding:14px;background:var(--white);border:0.5px solid var(--border);border-radius:10px}
.tier-q-email.on{display:block}
.tier-q-email-input{width:100%;padding:10px 12px;border:0.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;background:var(--cream);color:var(--ink);margin-bottom:8px;box-sizing:border-box}
.tier-q-email-input:focus{outline:none;border-color:var(--g)}
.tier-q-email-row{display:flex;gap:8px}
.tier-q-email-submit{flex:1;padding:10px;border-radius:8px;background:var(--g);color:#fff;border:none;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif}
.tier-q-email-cancel{padding:10px 14px;background:transparent;border:0.5px solid var(--border);color:var(--mid);border-radius:8px;font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif}
.tier-q-email-thanks{display:none;text-align:center;font-size:13px;color:var(--g);padding:6px 0}
.tier-q-email-thanks.on{display:block}
.tier-q-email-thanks i{font-size:18px;vertical-align:middle;margin-right:4px}
@media(max-width:540px){
  .tier-q-modal{padding:22px 18px}
  .tier-q-h{font-size:18px}
  .tier-q-result-card-name{font-size:21px}
  .tier-q-opt{font-size:13px;padding:11px 12px}
}

/* Tier card pulse — applied after questionnaire recommendation, removed after 2.4s */
@keyframes tier-pulse-anim{
  0%   {box-shadow:0 0 0 0 rgba(27,122,94,0.55), 0 0 0 0 rgba(27,122,94,0.30)}
  50%  {box-shadow:0 0 0 12px rgba(27,122,94,0.18), 0 0 0 22px rgba(27,122,94,0.08)}
  100% {box-shadow:0 0 0 0 rgba(27,122,94,0), 0 0 0 0 rgba(27,122,94,0)}
}
.tier-card.tier-pulse{animation:tier-pulse-anim 1.2s ease-out 2;border-color:var(--g)!important}

/* Sitewide questionnaire CTA hooks */
.pricing-q-cta{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0.5px solid rgba(27,122,94,0.4);color:var(--g);padding:9px 18px;border-radius:99px;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s,border-color .15s;margin-bottom:24px}
.pricing-q-cta:hover{background:var(--gl);border-color:var(--g)}
.pricing-q-cta i{font-size:14px}

/* ===== Tier section headers (Individuals / Teams split on pricing.html) ===== */
.tier-section-head{max-width:760px;margin:0 auto 28px;padding:0 28px;text-align:center}
.tier-section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-family:monospace;color:var(--g);margin-bottom:10px}
.tier-section-h{font-family:'DM Sans',sans-serif;font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-0.5px;line-height:1.15;margin-bottom:10px}
.tier-section-sub{font-size:14px;color:var(--mid);line-height:1.55;max-width:600px;margin:0 auto}
.tier-section-divider{max-width:1100px;margin:24px auto 48px;padding:0 28px;border-top:0.5px solid var(--border)}
@media(max-width:740px){
  .tier-section-h{font-size:22px}
  .tier-section-sub{font-size:13px}
}

/* Teams grid — 2-up (Sitewide + placeholder for Consultants/Engineers Teams) */
.teams-grid{max-width:780px;margin:0 auto;padding:0 28px 48px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}
@media(max-width:740px){
  .teams-grid{grid-template-columns:1fr;max-width:380px}
}
/* Teams cards inherit tier-card styling, with these modifiers */
.tier-card.tier-teams{position:relative}
.tier-card.tier-teams.featured{border-color:var(--g);background:linear-gradient(180deg,var(--gl) 0%,var(--cream) 100%)}
.tier-card.tier-teams .tier-name{color:var(--gd)}
.tier-card.placeholder{opacity:0.55;border-style:dashed}
.tier-card.placeholder:hover{opacity:0.75}
.tier-card.placeholder .tier-cta{background:var(--grey);color:var(--lt);cursor:default}
.tier-card.placeholder .tier-cta:hover{background:var(--grey);color:var(--lt)}

/* Capacity callout — used on Pro/Elite/Sitewide to surface dependent caps */
.tier-capacity{display:flex;align-items:center;gap:8px;background:var(--gl);border:0.5px solid rgba(27,122,94,0.3);border-radius:8px;padding:8px 12px;margin:8px 0 14px;font-size:12px;color:var(--gd);font-weight:600}
.tier-capacity i{font-size:14px;color:var(--g)}
.tier-capacity .cap-num{font-weight:700;font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════════════════════════
   SITEAGENT + AGENT LINEUP  ·  added s20  ·  index.html (and roadmap pages)
   Tokens reused from sitewide :root. No existing rule modified or deleted
   in this section — additions only. Naming prefixes (.sa-* / .siteagent-*
   / .lineup-* / .or-divider) chosen for non-collision with anything earlier
   in this file (verified s20).

   TODO · cleanup audit (deferred):
   - Once SiteAgent ships on pricing.html "Meet your agents", verify all
     selectors here still serve. Promote any one-offs into shared utilities
     if needed.
   - The .ai-head 26px banner trim used to live as an inline override on
     index.html. It's now scoped under .ai-box .ai-head below so it doesn't
     touch the historical .ai-head rule (line 38). Worth a future pass to
     decide whether the legacy .ai-head{padding:12px 18px;display:flex;...}
     rule still has any callers; if not, the override below can become the
     canonical rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SiteAgent bubble ─────────────────────────────────────────────────────── */
.siteagent-wrap{max-width:800px;margin:0 auto 16px;padding:0;box-sizing:border-box}
.siteagent-box{background:var(--white);border:0.5px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 4px 40px rgba(27,122,94,0.08);position:relative}
.sa-head{background:var(--gd);height:26px}
.sa-body{padding:18px 20px}

.sa-identity{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sa-avatar{width:40px;height:40px;border-radius:50%;background:var(--gd);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.sa-avatar svg{width:26px;height:26px;color:#fff}
.sa-avatar::after{content:'';position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background:var(--gm);border:1.5px solid var(--white)}
.sa-name-block{flex:1;text-align:left;line-height:1.2}
.sa-name{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.15px}
.sa-status{font-size:11px;color:var(--lt);margin-top:1px}
.sa-status .dot-online{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gm);margin-right:4px;vertical-align:1px}
.sa-tag-row{display:flex;gap:5px}
.sa-tag{font-size:9.5px;font-weight:600;color:var(--gd);background:var(--gl);padding:3px 8px;border-radius:99px;letter-spacing:.04em;text-transform:uppercase}
.sa-tag.beta{background:rgba(217,119,6,.1);color:var(--amber,#D97706)}

/* Input row with rotating fake-placeholder span */
.sa-input-row{display:flex;align-items:center;background:rgba(0,0,0,.025);border:0.5px solid rgba(0,0,0,.08);border-radius:14px;padding:4px 4px 4px 16px;transition:all .15s;margin-bottom:14px}
.sa-input-row:focus-within{border-color:var(--gm);background:var(--white);box-shadow:0 0 0 3px rgba(45,168,127,.1)}
.sa-input-wrap{flex:1;position:relative;display:flex;align-items:center}
.sa-input{flex:1;border:none;background:transparent;outline:none;font-family:inherit;font-size:14px;color:var(--ink);padding:12px 0;line-height:1.4;position:relative;z-index:2}
.sa-placeholder{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:14px;color:var(--lt);font-weight:400;pointer-events:none;transition:opacity .35s ease;z-index:1;line-height:1.4;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sa-placeholder.fading,.sa-placeholder.hidden{opacity:0}
@media (prefers-reduced-motion: reduce){.sa-placeholder{transition:none}}
.sa-send{width:38px;height:38px;border-radius:10px;border:none;background:var(--g);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s;flex-shrink:0}
.sa-send:hover{background:var(--gd)}
.sa-send svg{width:16px;height:16px}

/* Chip grid · 2-col, 6 chips, one funnel per row */
.sa-chips-label{font-size:11px;color:var(--lt);margin-bottom:8px;text-align:left;display:flex;align-items:center;gap:6px}
.sa-chips-label::before{content:'';width:14px;height:0.5px;background:var(--border)}
.sa-chips-label::after{content:'';flex:1;height:0.5px;background:var(--border)}
.sa-chips{display:flex;gap:6px;flex-wrap:nowrap;padding-bottom:2px}
.sa-chips > .sa-chip{flex:1 1 0;justify-content:center;text-align:center}
.sa-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:7px 12px;border-radius:99px;border:0.5px solid var(--border);background:rgba(232,245,241,.4);color:var(--gd);cursor:pointer;font-family:inherit;font-weight:500;transition:all .15s;text-align:left;line-height:1.3}
.sa-chip:hover{background:var(--gl);border-color:var(--gm);transform:translateY(-1px)}
.sa-chip svg{width:13px;height:13px;flex-shrink:0;opacity:.7}
.sa-chip.funnel{background:rgba(45,168,127,.08);border-color:var(--gm)}
.sa-chip.funnel:hover{background:var(--gl)}
@media (max-width:480px){.sa-chips{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   SiteAgent "See more" expand (s24). Inline expand below the
   rotating chip row. Click reveals ~20 curated funnel prompts,
   each wired to a bank entry. Order is funnel-priority with
   light scatter (money/SE first, safety+regs interleaved).
   ═══════════════════════════════════════════════════════════ */
.sa-seemore-row{display:flex;justify-content:flex-end;margin-top:8px}
.sa-seemore-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:11.5px;color:var(--g);font-weight:500;padding:4px 8px;border-radius:6px;transition:color .12s,background .12s}
.sa-seemore-btn:hover{color:var(--gd);background:var(--gl)}
.sa-seemore-btn .sa-seemore-icon{width:11px;height:11px;transition:transform .2s ease}
.sa-seemore-btn.is-open .sa-seemore-icon{transform:rotate(180deg)}

/* See more attention pulse (s27) — draws the eye on land, then quiets down.
   Runs 3 cycles automatically, then stops. Re-triggers once after 22s idle
   if user still hasn't clicked. Permanently off after first click (localStorage
   flag 'sb-seemore-seen'). Honours prefers-reduced-motion: reduce. */
.sa-seemore-btn.is-pulsing{
  animation: sb-seemore-pulse 2.2s ease-in-out 3;
}
@keyframes sb-seemore-pulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(45,168,127,0);
    color:var(--g);
  }
  50%{
    box-shadow:0 0 0 6px rgba(45,168,127,.14);
    color:var(--gd);
  }
}
@media (prefers-reduced-motion: reduce){
  .sa-seemore-btn.is-pulsing{
    animation:none;
    color:var(--gd);
    font-weight:600;
  }
}

.sa-seemore-panel{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .2s ease,margin-top .25s ease}
.sa-seemore-panel.open{max-height:400px;opacity:1}
.sa-seemore-panel[hidden]{display:none}
.sa-seemore-chip{display:inline-flex;align-items:center;font-size:11.5px;padding:6px 11px;border-radius:99px;border:0.5px solid var(--border);background:rgba(232,245,241,.3);color:var(--gd);cursor:pointer;font-family:inherit;font-weight:500;transition:all .12s;line-height:1.3;white-space:nowrap}
.sa-seemore-chip:hover{background:var(--gl);border-color:var(--gm);transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════════════
   SiteAgent conversation surface (s23). Sits below the chip row,
   empty by default, grows downward as the conversation builds.
   Each turn = .sa-q (user) above .sa-a (agent). Optional CTA pill
   below the agent answer. Gate renders inline after budget hit.
   ═══════════════════════════════════════════════════════════ */
.sa-conversation{margin-top:14px;display:flex;flex-direction:column;gap:10px;
  max-height:360px;overflow-y:auto;
  /* Fade-out mask at the bottom so the third card visibly trails off rather
     than being hard-clipped. Top has no fade so the latest answer is fully
     crisp. mask repeated under -webkit- for older Safari. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 56px),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 56px),transparent 100%);
  /* Pad bottom so content has room to fade into without clipping mid-text */
  padding-bottom:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,0.15) transparent;
}
.sa-conversation::-webkit-scrollbar{width:6px}
.sa-conversation::-webkit-scrollbar-track{background:transparent}
.sa-conversation::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:3px}
.sa-conversation::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.25)}
.sa-conversation:empty{margin-top:0;-webkit-mask-image:none;mask-image:none}

.sa-turn{display:flex;flex-direction:column;gap:6px;animation:saSlideIn .35s ease;position:relative;flex-shrink:0}
@keyframes saSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.sa-q{font-size:12px;color:var(--lt);padding:0 2px;display:flex;align-items:center;gap:6px;font-weight:500;cursor:pointer;transition:color .12s;position:relative;padding-right:24px}
.sa-q:hover{color:var(--mid)}
.sa-q-icon{color:var(--gm);font-weight:700;font-size:14px;line-height:1;flex-shrink:0}
.sa-q-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-q-toggle{font-size:9px;color:var(--lt);transition:transform .2s ease;flex-shrink:0;margin-left:4px;opacity:0}
.sa-turn:not(.sa-thinking) .sa-q-toggle{opacity:.6}
.sa-turn.sa-collapsed .sa-q-toggle{transform:rotate(-90deg)}

/* Dismiss × — absolutely positioned to top-right of the Q row, low-opacity
   until hover, never intercepts the row's click-to-toggle. */
.sa-q-close{position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;border:none;background:transparent;
  color:var(--lt);font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:.4;transition:opacity .15s,background .15s,color .15s;
  font-family:inherit;padding:0}
.sa-q-close:hover{opacity:1;background:rgba(0,0,0,0.06);color:var(--ink)}
.sa-turn:hover .sa-q-close{opacity:.7}

.sa-a{background:rgba(45,168,127,.06);border-left:2px solid var(--gm);border-radius:6px;padding:12px 14px;font-size:13px;color:var(--ink);line-height:1.55;
  max-height:600px;overflow:hidden;transition:max-height .3s ease,opacity .2s ease,padding .3s ease,margin .3s ease}
.sa-a p{margin:0 0 10px}
.sa-a p:last-child{margin-bottom:0}
.sa-a strong{color:var(--gd);font-weight:600}
.sa-a em{font-style:italic;color:var(--mid)}

/* Collapsed state — answer body hidden, Q line acts as a button. Older turns
   read as a list of "previously asked" items below the latest answer. */
.sa-turn.sa-collapsed .sa-a{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-left-width:0;margin-top:-4px}
.sa-turn.sa-collapsed{gap:0}
.sa-turn.sa-collapsed .sa-q{padding:4px 28px 4px 8px;background:rgba(45,168,127,.04);border-radius:6px;border:0.5px solid var(--border)}
.sa-turn.sa-collapsed .sa-q:hover{background:rgba(45,168,127,.08);border-color:var(--gm)}
.sa-turn.sa-collapsed .sa-q-close{right:6px}

.sa-cta-row{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.sa-cta{font-size:12px;font-weight:500;padding:6px 12px;border-radius:99px;background:var(--g);color:#fff;border:none;cursor:pointer;font-family:inherit;transition:background .12s}
.sa-cta:hover{background:var(--gd)}

/* Auto-appended liability disclaimer (s23). Renders at the foot of every
   answer; not authored per-entry. Stronger variant for hard-stop entries
   (asbestos, gas, beam sizing) gets an amber accent so it reads as a
   warning, not just boilerplate. */
.sa-disclaimer{margin-top:12px;padding-top:8px;border-top:0.5px solid rgba(0,0,0,0.06);
  font-size:10.5px;color:var(--lt);font-style:italic;line-height:1.5}
.sa-disclaimer-strong{color:var(--mid);font-style:normal;
  border-top-color:rgba(217,119,6,0.25);
  background:rgba(217,119,6,0.04);
  margin:12px -14px -12px;padding:8px 14px;border-radius:0 0 6px 6px}
.sa-disclaimer-strong strong{color:#B45309;font-weight:600}

/* Typing indicator while API in flight */
.sa-typing{display:inline-flex;align-items:center;gap:4px;padding:4px 0}
.sa-typing span{width:6px;height:6px;border-radius:50%;background:var(--gm);animation:saBlink 1.2s infinite}
.sa-typing span:nth-child(2){animation-delay:.15s}
.sa-typing span:nth-child(3){animation-delay:.3s}
@keyframes saBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* Inline gate after budget exhausted */
.sa-gate{background:linear-gradient(135deg,rgba(45,168,127,.08),rgba(45,168,127,.03));border:0.5px solid var(--gm);border-radius:10px;padding:14px 36px 14px 16px;display:flex;flex-direction:column;gap:10px;animation:saSlideIn .35s ease;position:relative;flex-shrink:0}
.sa-gate-close{position:absolute;top:8px;right:8px;transform:none}
.sa-gate-title{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.1px}
.sa-gate-sub{font-size:12px;color:var(--mid);line-height:1.5}
.sa-gate-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sa-gate-btn{font-size:12px;font-weight:500;padding:7px 14px;border-radius:8px;cursor:pointer;font-family:inherit;border:0.5px solid transparent;transition:all .12s}
.sa-gate-btn.primary{background:var(--g);color:#fff}
.sa-gate-btn.primary:hover{background:var(--gd)}
.sa-gate-btn.secondary{background:transparent;color:var(--lt);border-color:var(--border);font-size:11px}
.sa-gate-btn.secondary:hover{color:var(--mid);border-color:var(--mid)}

/* "Or generate a document" divider — sits between SiteAgent and the Assistant */
.or-divider{max-width:640px;margin:0 auto 22px;padding:0 16px;display:flex;align-items:center;gap:14px;text-align:center}
.or-divider::before,.or-divider::after{content:'';flex:1;height:0.5px;background:var(--border)}
.or-divider-text{font-size:11px;color:var(--lt);font-style:italic;letter-spacing:.03em}

/* Trim the existing .ai-head from its old padded form to a 26px banner —
   scoped under .ai-box to avoid touching any .ai-head used elsewhere on the site. */
.ai-box .ai-head{height:26px;padding:0;display:block}

/* ── Agent lineup ─────────────────────────────────────────────────────────── */
.lineup-wrap{max-width:1080px;margin:0 auto;padding:48px 24px 12px}
.lineup-label{text-align:center;font-size:11px;font-weight:600;color:var(--lt);text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:10px}
.lineup-label::before,.lineup-label::after{content:'';height:0.5px;flex:1;max-width:80px;background:var(--border)}
.lineup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:880px;margin:0 auto}
.lineup-card{background:var(--white);border:0.5px solid var(--border);border-radius:14px;padding:18px 14px;text-align:center}
.lineup-card.live{border-color:var(--gm)}
.lineup-card.soon{opacity:.62}
.lineup-icon{width:36px;height:36px;margin:0 auto 10px;border-radius:50%;background:var(--gl);display:flex;align-items:center;justify-content:center;color:var(--g)}
.lineup-icon svg{width:18px;height:18px}
.lineup-card.soon .lineup-icon{background:rgba(0,0,0,.04);color:var(--lt)}
.lineup-name{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-0.15px;margin-bottom:4px}
.lineup-role{font-size:11.5px;color:var(--lt);line-height:1.4;margin-bottom:10px}
.lineup-status{display:inline-block;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:99px}
.lineup-status.live{background:var(--gl);color:var(--gd)}
.lineup-status.soon{background:rgba(0,0,0,.04);color:var(--lt)}
@media (max-width:720px){
  .lineup-grid{grid-template-columns:repeat(2,1fr)}
  .lineup-wrap{padding:36px 16px 8px}
}

/* ═══════════════════════════════════════════════════════════
   s21 ADDITIONS · spine pillars + bubble-banner suppression.
   Additions-only; no original rules modified (locked s20).
   ═══════════════════════════════════════════════════════════ */

/* Hide the dead 26px green banners on both bubbles.
   .sa-identity inside SiteAgent now carries avatar+name+status+Beta;
   .ai-head was empty on the Assistant box. Saves 26px each. */
.siteagent-box .sa-head{display:none}
.ai-box .ai-head{display:none}

/* SPINE STANZA · Brief · Plan · Execute — Option B layout (640px, inline head) */
.spine-wrap{max-width:800px;margin:28px auto 16px;padding:0;box-sizing:border-box}
.spine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.spine-card{display:block;text-decoration:none;background:var(--white);border:0.5px solid var(--border);border-radius:14px;padding:14px;transition:all .15s ease;color:inherit}
.spine-card:hover{border-color:var(--gm);transform:translateY(-1px);box-shadow:0 4px 16px rgba(27,122,94,0.08)}
.spine-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.spine-icon{width:26px;height:26px;border-radius:7px;background:var(--gl);color:var(--gd);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.spine-icon svg{width:15px;height:15px}
.spine-text{min-width:0}
.spine-eyebrow{font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:600;color:var(--g);letter-spacing:.12em;text-transform:uppercase;line-height:1.1}
.spine-title{font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-0.15px;line-height:1.2;margin-top:2px}
.spine-body{font-size:11.5px;color:var(--mid);line-height:1.5}

@media(max-width:720px){
  .spine-grid{grid-template-columns:1fr;gap:8px}
  .spine-wrap{margin:22px auto 20px;padding:0 16px}
  .spine-card{padding:12px 14px}
}

/* ─── s21 follow-up · audience trust row + chip softening ─── */

/* AUDIENCE TRUST ROW · sits below H1, above SiteAgent bubble.
   Bulletproofed s21 follow-up — !important + box-sizing on the row,
   nowrap + white-space on children, so it can't be stacked by
   upstream rules or cache-merged conflicts. */
.audience-row{
  max-width:800px;
  margin:0 auto 18px;
  padding:10px 16px;
  border-top:0.5px solid rgba(27,122,94,0.18);
  border-bottom:0.5px solid rgba(27,122,94,0.18);
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
  font-family:'DM Sans',sans-serif;
  box-sizing:border-box
}
.audience-label{font-size:10px;color:var(--lt);letter-spacing:.1em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.audience-node{font-size:12px;color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.audience-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gm);flex-shrink:0}

@media(max-width:560px){
  .audience-row{gap:10px 14px;padding:8px 14px;flex-wrap:wrap !important;margin-left:16px;margin-right:16px}
  .audience-node{font-size:11.5px}
  .audience-label{flex-basis:100%;text-align:center;margin-bottom:2px}
  /* Mobile padding restoration: outer surfaces need horizontal breathing room */
  .siteagent-wrap{padding:0 16px}
  .spine-wrap{padding:0 16px}
  .ai-box{margin-left:16px;margin-right:16px}
}

/* TABLET/NARROW · re-enable horizontal scroll on chips when 4 won't fit comfortably.
   Above 720px the flex:1 distribution works; below, scroll fallback prevents squashing. */
@media(max-width:720px){
  .sa-chips{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .sa-chips::-webkit-scrollbar{height:4px}
  .sa-chips::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:99px}
  .sa-chips > .sa-chip{flex:0 0 auto;justify-content:flex-start;text-align:left}
}

/* CHIP SOFTENING + ONE-LINE LAYOUT · drop the funnel saturation, force nowrap.
   Chips are now uniform — white fill, hairline border, neutral text,
   brand-green icon accent. Single horizontal row, scrolls on overflow.
   Overrides the s20 .sa-chip / .sa-chip.funnel rules. */
.sa-chip{background:#fff;border:0.5px solid rgba(0,0,0,0.1);color:var(--ink);font-weight:500;padding:6px 11px;font-size:11.5px;gap:5px;white-space:nowrap;flex-shrink:0}
.sa-chip svg{width:12px;height:12px;opacity:1;color:var(--gd);flex-shrink:0}
.sa-chip:hover{background:#fafafa;border-color:rgba(27,122,94,0.35);transform:translateY(-1px)}
.sa-chip.funnel{background:#fff;border-color:rgba(0,0,0,0.1)}
.sa-chip.funnel:hover{background:#fafafa;border-color:rgba(27,122,94,0.35)}

/* ─── s21 batch · or-strap + typewriter cursor ─── */

/* OR-STRAP · sits between SiteAgent bubble and Assistant box.
   Restored from earlier .or-divider concept; "first one's on us"
   is the free-tier hook, emphasised in green. */
.or-strap{max-width:800px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;color:var(--lt);font-style:italic;box-sizing:border-box}
.or-strap .or-rule{flex:0 0 40px;height:0.5px;background:rgba(0,0,0,0.15);display:inline-block}
.or-strap .or-text{white-space:nowrap}
.or-strap .or-text strong{color:var(--gd);font-style:normal;font-weight:600}
.or-strap .or-arrow{width:12px;height:12px;color:var(--gd);flex-shrink:0}

@media(max-width:560px){
  .or-strap{padding:0 16px;font-size:11px;flex-wrap:wrap}
  .or-strap .or-rule{flex:0 0 28px}
  .or-strap .or-text{white-space:normal;text-align:center}
}

/* TYPEWRITER CURSOR · blinking caret after the placeholder text. */
.sa-placeholder.typewriter::after{
  content:'|';
  display:inline-block;
  margin-left:1px;
  color:var(--gd);
  font-weight:300;
  animation:tw-blink 0.9s steps(2,start) infinite;
}
.sa-placeholder.typewriter.hidden::after{display:none}
@keyframes tw-blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .sa-placeholder.typewriter::after{animation:none;opacity:0.6}
}

/* SPINE positional tweak — when spine sits below ai-box now, give it extra top margin
   to separate from the Assistant. (Previously spine had margin:28px auto 16px). */
.spine-wrap{margin-top:32px}


/* ═══════════════════════════════════════════════════════════════════
   s42 · WIZARD DOC STYLING — ported from doc-print.css, scoped to the
   wizard mount (#bf-mount-inner) so the rendered .sheet matches the
   standalone action-*.html paper docs EXACTLY (which load doc-print.css).
   Root cause fixed: index loads style.css only; the wizard emits the
   same markup as the paper sample but had no doc rules to render against.
   ── Scoping guarantees:
      • Only #bf-mount-inner .sheet output is affected.
      • Static .sheet-head index demos (outside the mount) untouched.
      • doc-print's global/print/@page/toggle rules deliberately EXCLUDED.
   ── Tokens: doc-print's paper values redeclared on the scope so the
      document renders paper-white in BOTH light and dark (LOCKED: paper
      docs are white in dark mode — no token inheritance from dark theme).
   ═══════════════════════════════════════════════════════════════════ */
#bf-mount-inner .sheet{
  --gm:#2DA87F; --gd:#1A6B4F; --ink:#1A1A1A; --body:#333;
  --mute:#666; --hint:#888; --faint:#aaa; --rule:#E5E5E5;
}
#bf-mount-inner .sheet{
  background:#fff;color:var(--body);
  margin:0 auto;position:relative;box-sizing:border-box;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  border-radius:2px;overflow:hidden;
}
/* Real-mm dimensions so print → correct page size automatically */
#bf-mount-inner .sheet.a5{width:148mm;min-height:210mm;padding:14mm 14mm 22mm}
#bf-mount-inner .sheet.a4{width:210mm;min-height:297mm;padding:18mm 20mm 28mm}

/* No top green strip — the 3px sub-header line under .head is the
   single green accent per page (s25 reframing). Keeps user's logo
   as the dominant top-of-page mark; SiteBrief signs off in footer. */
/* ─── Header: QR + project block + SiteBrief pill ──────────────
   s34 · Template v2.
   The header is now QR-left, project-right; the QR is the most
   *functional* element on the page (scan → live doc) so it earns
   the dominant slot. SiteBrief mark stays centred on the 3px green
   sub-header line — quiet signature, doesn't dominate.
   Pro/Elite tier later: company logo drops in above the QR via a
   .user-logo block (kept in the file but only rendered when present).
   "Your logo" placeholder retired — Reno/Free renders just QR+proj. */
#bf-mount-inner .head{
  position:relative;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;padding-bottom:8mm;margin-bottom:8mm;
  border-bottom:3px solid var(--gm);  /* nav-style green sub-header */
}
#bf-mount-inner .sheet.a4 .head{padding-bottom:9mm;margin-bottom:9mm}

/* SiteBrief wordmark — sits on the green line, centred horizontally.
   Real logo PNG (white pill on green border). Bottom anchored to .head's
   border, nudged down 50% of own height so the pill straddles the line.
   Logo is small here — a quiet signature, not a banner. */
#bf-mount-inner .sb-mark{
  position:absolute;
  left:50%;bottom:0;
  transform:translate(-50%,50%);
  height:4mm;width:auto;
  z-index:2;
  display:inline-block;
}
#bf-mount-inner .sheet.a4 .sb-mark{height:5mm}
#bf-mount-inner .sb-mark img{display:block;height:100%;width:auto}

/* QR-in-header block (s34 · v2).
   Sits left in the header. Same .qr-img + .qr-label pattern as before,
   just relocated from the title-row. Slightly larger label since it's
   carrying more weight in this slot. */
#bf-mount-inner .head .qr-block{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:2.5px;
}

/* User logo slot — Pro/Elite users upload a company logo → appears
   above the QR. Hidden on Reno/Free (no .user-logo element rendered).
   Max-height in mm so print scale stays predictable. */
#bf-mount-inner .user-logo{
  display:inline-flex;align-items:center;
  height:10mm;max-width:38mm;
  margin-bottom:2mm;
  flex-shrink:0;
}
#bf-mount-inner .sheet.a4 .user-logo{height:12mm;max-width:50mm;margin-bottom:3mm}
#bf-mount-inner .user-logo img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;object-position:left center}

#bf-mount-inner .proj{
  text-align:right;
  font-size:10px;line-height:1.5;
  color:var(--mute);
}
#bf-mount-inner .sheet.a4 .proj{font-size:11.5px}
#bf-mount-inner .proj-name{
  font-size:13.5px;color:var(--ink);font-weight:500;
  margin:0 0 3px;letter-spacing:-.2px;
}
#bf-mount-inner .sheet.a4 .proj-name{font-size:16px}
#bf-mount-inner .proj-meta{display:block}
#bf-mount-inner .proj-meta span{color:var(--hint)}

/* ─── Document title (s41 · reconciled with style.css) ────────
   Was 16px/500 on screen, 21px/500 on A4 — which rendered as an
   oversized pale heading, NOT matching the work brief's tight
   14px/700 treatment in style.css. The two stylesheets disagreed,
   so any page loading doc-print.css got the big title. Aligned
   here to the work-brief look. Also zero the <h1> UA margins +
   force size/weight, since the payment/material/snagging wizards
   use <h1 class="doc-title"> (work brief uses <div>). */
#bf-mount-inner .doc-title{
  font-size:14px;font-weight:700;
  margin:0 0 4px;letter-spacing:-.2px;color:var(--ink);
  line-height:1.25;
}
#bf-mount-inner h1.doc-title{font-size:14px;font-weight:700;margin:0 0 4px}
#bf-mount-inner .sheet.a4 .doc-title,
#bf-mount-inner .sheet.a4 h1.doc-title{font-size:16px;font-weight:700;margin-bottom:6px}
#bf-mount-inner .doc-sub{
  font-size:10.5px;color:var(--hint);
  margin:0 0 7mm;letter-spacing:.4px;text-transform:uppercase;
}
#bf-mount-inner .sheet.a4 .doc-sub{font-size:12px}

/* ─── Doc strapline (s41) ───────────────────────────────────────
   The SEO/reference line under the title on payment, budget &
   snagging docs (e.g. "Typical UK kitchen renovation cost · 2026
   reference"). Was previously UNDEFINED — rendered as raw black
   browser-default text, which is the "messy title block" reported.
   Styled here as a small italic muted line so it sits quietly under
   the title like a dateline. Work brief has no strap (uses doc-sub
   only) so this never affects it. Sits BETWEEN title and doc-sub. */
#bf-mount-inner .doc-strap{
  font-size:10px;color:var(--hint);font-style:italic;
  margin:0 0 5px;letter-spacing:.1px;line-height:1.35;font-weight:400;
}
#bf-mount-inner .sheet.a4 .doc-strap{font-size:11.5px;margin-bottom:6px}

/* ─── Section + fade-underline label ────────────────────────── */
#bf-mount-inner .sec{margin-bottom:6mm;font-size:10.5px;line-height:1.55;color:var(--body)}
#bf-mount-inner .sheet.a4 .sec{margin-bottom:8mm;font-size:12px;line-height:1.65}

#bf-mount-inner .sec-label{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--gm);font-weight:500;
  margin:0 0 5px;padding-bottom:6px;
  background-image:linear-gradient(to right,
    var(--gm) 0%, var(--gm) 78%, rgba(45,168,127,0) 100%);
  background-repeat:no-repeat;
  background-position:bottom left;
  background-size:62% 0.5px;
  display:block;
}
#bf-mount-inner .sheet.a4 .sec-label{font-size:10.5px;padding-bottom:7px;background-size:55% 0.5px}

#bf-mount-inner .sec p{margin:0 0 3px}
#bf-mount-inner .sec p:last-child{margin-bottom:0}
/* s33: verify pushed further back — body dominates, verify whispers.
   Was #a8a8a0 / 8.5px (s31). Now #c4c2b8 / 8px on A5, 9px on A4 (was 9.5px). */
#bf-mount-inner .verify{color:#c4c2b8;font-style:italic;font-size:8px;line-height:1.45}
#bf-mount-inner .sheet.a4 .verify{font-size:9px}

/* s33: scope-chip pills — print equivalents of .sec-chips in style.css.
   Same paper/cream palette discipline: soft green tint that doesn't
   compete with body text. Caption uses monospace tone register to match
   .sec-label family. Sized one notch down from on-screen to suit the
   tighter line-height of print stock. */
#bf-mount-inner .sec-chips{margin:6px 0 3px}
#bf-mount-inner .sec-chips-caption{
  display:block;
  font-size:7.5px;color:#888780;
  font-family:'Courier New',monospace;letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:4px;
}
#bf-mount-inner .sheet.a4 .sec-chips-caption{font-size:8.5px}
#bf-mount-inner .sec-chips-row{display:flex;flex-wrap:wrap;gap:3px}
#bf-mount-inner .sec-chip{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9px;line-height:1.2;
  background:#E1F5EE;color:#0F6E56;
  padding:2px 7px 2px 5px;
  border-radius:99px;
  font-weight:500;
}
#bf-mount-inner .sheet.a4 .sec-chip{font-size:10px;padding:3px 8px 3px 6px}
#bf-mount-inner .sec-chip-tick{width:8px;height:8px;flex-shrink:0;color:#0F6E56}
#bf-mount-inner .sheet.a4 .sec-chip-tick{width:9px;height:9px}

/* ─── Doc-title row (s34 · v2 · simplified) ─────────────────── */
/* Previously held the QR alongside .doc-title. QR is now in .head.
   Title row becomes a simple full-width title + sub block — same
   visual hierarchy, less competing furniture. */
#bf-mount-inner .title-row{
  margin-bottom:7mm;
}
#bf-mount-inner .sheet.a4 .title-row{margin-bottom:9mm}
#bf-mount-inner .title-row .doc-title{margin-bottom:4px}
#bf-mount-inner .title-row .doc-sub{margin-bottom:0}

/* QR block — shared between header (.head .qr-block) and (legacy)
   title-row. Real QR rendered into .qr-img by qrcode.js. Label sits
   below in muted hint colour.
   IMPORTANT: qrcode.js injects an inline-styled <canvas> at the size
   passed to its constructor. We override with CSS using !important so
   the QR always renders at the mm size we want, regardless of the
   render-resolution we passed for crispness. */
#bf-mount-inner .qr-block{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;gap:2.5px;
}
#bf-mount-inner .qr-img{
  width:16mm;height:16mm;
  background:#fff;
  border:0.5px solid var(--rule);
  border-radius:2px;
  padding:0.5mm;
  box-sizing:border-box;
  overflow:hidden;
}
#bf-mount-inner .sheet.a4 .qr-img{width:19mm;height:19mm;padding:0.7mm}
/* Force the qrcode.js-injected canvas/img to fill our box.
   !important because the lib sets explicit inline width/height attrs. */
#bf-mount-inner .qr-img canvas,
#bf-mount-inner .qr-img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
}
#bf-mount-inner .qr-label{
  font-size:7.5px;
  color:var(--hint);
  letter-spacing:.4px;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}
#bf-mount-inner .sheet.a4 .qr-label{font-size:9px}
/* s42 · domain under the QR — functional fallback for the scan */
#bf-mount-inner .qr-url{
  display:block;
  font-size:7px;color:var(--gm);font-weight:500;
  letter-spacing:.2px;line-height:1;margin-top:1px;
  white-space:nowrap;
}
#bf-mount-inner .sheet.a4 .qr-url{font-size:8.5px}

/* ─── Two-column data grid (calculated values) ──────────────── */
#bf-mount-inner .data{
  display:grid;grid-template-columns:1fr auto;
  gap:3px 14px;font-variant-numeric:tabular-nums;margin:2px 0;
}
#bf-mount-inner .data .lbl{color:var(--mute)}
#bf-mount-inner .data .val{color:var(--ink);font-weight:500}

/* ─── Tables (.mtable used by Material estimate; .stable by
       Payment schedule). Same column system, slightly different
       weight to suit content. ─────────────────────────────────── */
#bf-mount-inner .mtable,
#bf-mount-inner .stable{
  width:100%;border-collapse:collapse;
  font-size:9.5px;font-variant-numeric:tabular-nums;
  margin:3px 0 0;
}
#bf-mount-inner .sheet.a4 .mtable,
#bf-mount-inner .sheet.a4 .stable{font-size:11px}

#bf-mount-inner .mtable thead th,
#bf-mount-inner .stable thead th{
  text-align:left;font-weight:500;
  color:var(--gm);text-transform:uppercase;letter-spacing:.6px;
  font-size:8px;padding:0 0 4px;
  border-bottom:0.5px solid var(--rule);
}
#bf-mount-inner .sheet.a4 .mtable thead th,
#bf-mount-inner .sheet.a4 .stable thead th{font-size:9px;padding-bottom:5px}
#bf-mount-inner .mtable thead th.num,
#bf-mount-inner .stable thead th.num{text-align:right}

#bf-mount-inner .mtable tbody td,
#bf-mount-inner .stable tbody td{
  padding:4px 6px 4px 0;
  border-bottom:0.5px solid #F2F2F2;
  vertical-align:top;color:var(--ink);
}
#bf-mount-inner .stable tbody td{padding:5px 6px 5px 0}
#bf-mount-inner .sheet.a4 .mtable tbody td{padding:5px 8px 5px 0}
#bf-mount-inner .sheet.a4 .stable tbody td{padding:6px 8px 6px 0}

#bf-mount-inner .mtable tbody td.num,
#bf-mount-inner .stable tbody td.num{
  text-align:right;font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:500;
}
#bf-mount-inner .mtable tbody td.mat,
#bf-mount-inner .stable tbody td.milestone{font-weight:500;color:var(--ink)}
#bf-mount-inner .mtable tbody td.note,
#bf-mount-inner .stable tbody td.trigger{
  color:var(--mute);font-size:9px;
}
#bf-mount-inner .sheet.a4 .mtable tbody td.note,
#bf-mount-inner .sheet.a4 .stable tbody td.trigger{font-size:10px}
#bf-mount-inner .mtable tbody td.note{padding-left:0}

#bf-mount-inner .stable tbody td.stage-no{color:var(--gm);font-weight:500;width:20px}

#bf-mount-inner .mtable tbody tr:last-child td,
#bf-mount-inner .stable tbody tr:last-child td{border-bottom:none}

/* ─── Blurred price column (paid-tier feature gate) ─────────────
   Cells render the placeholder "£888.88" (or 3/5 — see API wire-up).
   2px blur + 5% gm tint = locked-but-unlockable visual signal.
   When a Reno+ user is detected, JS swaps the cell text to the real
   price and toggles `.unlocked` on the cell to remove blur/tint.
   user-select:none stops users copy-pasting the placeholder. */
#bf-mount-inner .blur-price{
  background:rgba(45,168,127,0.05) !important;
  color:var(--ink);
  filter:blur(2px);
  user-select:none;
  -webkit-user-select:none;
}
#bf-mount-inner .blur-price.unlocked{
  filter:none;
  user-select:auto;
  -webkit-user-select:auto;
}

/* ─── Upsell row (gate for locked features) ─────────────────────
   Reusable across doc types. Soft gm-tint band, 2px gm left border,
   matches the .sa-a treatment from style.css line 1252. */
#bf-mount-inner .upsell-row{
  margin-top:4mm;
  padding:5px 9px;
  background:rgba(45,168,127,0.06);
  border-left:2px solid var(--gm);
  font-size:9.5px;
  line-height:1.45;
  color:var(--ink);
}
#bf-mount-inner .sheet.a4 .upsell-row{margin-top:5mm;padding:7px 11px;font-size:11px}
#bf-mount-inner .upsell-row .upsell-title{font-weight:500;display:block}
#bf-mount-inner .upsell-row .upsell-cta{color:var(--gd);text-decoration:none;display:inline-block;margin-top:1px}
#bf-mount-inner .upsell-row .upsell-cta:hover{text-decoration:underline}

#bf-mount-inner .stable tfoot td{
  padding:6px 6px 0 0;font-weight:500;color:var(--ink);
  border-top:0.5px solid var(--ink);
}
#bf-mount-inner .sheet.a4 .stable tfoot td{padding:8px 8px 0 0}
#bf-mount-inner .stable tfoot td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ─── Snagging items ────────────────────────────────────────── */
#bf-mount-inner .snag{
  display:grid;
  grid-template-columns:auto 14px 1fr auto;
  gap:6px 8px;padding:6px 0;
  border-bottom:0.5px solid #F2F2F2;align-items:start;
}
#bf-mount-inner .sheet.a4 .snag{
  grid-template-columns:auto 16px 1fr 60mm auto;
  gap:8px 12px;padding:8px 0;
}
#bf-mount-inner .snag:last-of-type{border-bottom:none}

#bf-mount-inner .snag-ref{
  font-size:8.5px;color:var(--hint);
  font-variant-numeric:tabular-nums;letter-spacing:.4px;
  padding-top:1px;white-space:nowrap;
}
#bf-mount-inner .sheet.a4 .snag-ref{font-size:10px}

#bf-mount-inner .snag-box{
  width:11px;height:11px;
  border:1px solid var(--ink);border-radius:2px;
  margin-top:2px;background:#fff;
}
#bf-mount-inner .sheet.a4 .snag-box{width:13px;height:13px;margin-top:3px}

#bf-mount-inner .snag-body{font-size:9.5px;line-height:1.5;color:var(--ink)}
#bf-mount-inner .sheet.a4 .snag-body{font-size:11px;line-height:1.55}
#bf-mount-inner .snag-desc{display:block;font-weight:500}
#bf-mount-inner .snag-loc{display:block;color:var(--mute);font-size:8.5px;margin-top:2px}
#bf-mount-inner .sheet.a4 .snag-loc{font-size:10px;margin-top:3px}
#bf-mount-inner .snag-trade{
  display:block;color:var(--gm);
  font-size:8.5px;margin-top:2px;
  letter-spacing:.3px;text-transform:uppercase;
}
#bf-mount-inner .sheet.a4 .snag-trade{font-size:9.5px;margin-top:3px}

/* Photo placeholder — A4 only (would crowd A5) */
#bf-mount-inner .snag-photo{display:none}
#bf-mount-inner .sheet.a4 .snag-photo{
  display:flex;align-items:center;justify-content:center;
  width:60mm;height:38mm;
  background:#FAFAFA;border:0.5px dashed #D0D0D0;border-radius:2px;
  font-size:9px;color:var(--faint);
  letter-spacing:.4px;text-transform:uppercase;
}

#bf-mount-inner .snag-prio{
  font-size:7.5px;letter-spacing:.5px;text-transform:uppercase;
  font-weight:500;padding:2px 6px;border-radius:99px;
  background:#F4F4F4;color:#1F2937;
  white-space:nowrap;margin-top:1px;
}
#bf-mount-inner .sheet.a4 .snag-prio{font-size:8.5px;padding:3px 8px}
#bf-mount-inner .snag-prio.hi{background:#FEF3E2;color:#B45309}
#bf-mount-inner .snag-prio.md{background:#F4F4F4;color:#1F2937}
#bf-mount-inner .snag-prio.lo{background:#F9F9F9;color:#6B7280}

/* ─── Summary chips (counts row) ────────────────────────────── */
#bf-mount-inner .sum-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
#bf-mount-inner .sum-chip{
  font-size:9px;padding:3px 9px;border-radius:99px;
  background:#F4F4F4;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
#bf-mount-inner .sheet.a4 .sum-chip{font-size:10px;padding:4px 11px}
#bf-mount-inner .sum-chip strong{font-weight:500;color:var(--gm)}

/* ─── Footer — LOCKED s24 disclaimer block ────────────────────
   s42: in the wizard the .sheet has NO fixed page height (it's screen,
   content-height — no .a4/.a5), so doc-print's absolute bottom-pinned
   footer floats up and overlaps the content above it (the "HOW TO USE
   THIS" block). Override to normal flow here; the paper docs keep their
   absolute pinning (they load doc-print.css, not this scoped block). */
#bf-mount-inner .foot{
  position:static;margin-top:20px;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:14px;padding-top:5px;
  border-top:0.5px solid var(--rule);
  font-size:8px;color:var(--faint);line-height:1.45;
}
#bf-mount-inner .sheet.a4 .foot{font-size:9px}
#bf-mount-inner .foot-left{max-width:78%}
#bf-mount-inner .foot-disc{color:var(--mute);margin:0 0 2px}
#bf-mount-inner .foot-meta{color:var(--faint);margin:0}
#bf-mount-inner .foot-right{text-align:right;flex-shrink:0}
#bf-mount-inner .foot-mark{color:var(--gm);font-weight:500}
#bf-mount-inner .foot-url{color:var(--gm);font-weight:500}

/* ─── Print: kill toolbar, page chrome, set page size ───────── */
/* ═════════════════════════════════════════════════════════════
   s34 · Additions for Material estimate v2, Payment schedule v2,
   Snagging list v2. Doc-specific components only — none of these
   replace existing classes, they extend the system.
   ═════════════════════════════════════════════════════════════ */
/* ─── .framing-band — top-of-doc context strip ─────────────────
   Used by Payment schedule (Construction Act citation) and any other
   doc that needs to set legal/regulatory framing before the body.
   Sits inside .sec, just above the first .sec-label. Subtle, doesn't
   compete with the title row. */
#bf-mount-inner .framing-band{
  padding:6px 9px;
  background:rgba(45,168,127,0.05);
  border-left:2px solid var(--gm);
  font-size:9px;line-height:1.45;color:var(--mute);
  margin-bottom:6mm;
}
#bf-mount-inner .sheet.a4 .framing-band{font-size:10.5px;padding:8px 11px;margin-bottom:7mm}
#bf-mount-inner .framing-band strong{color:var(--ink);font-weight:500}

/* ─── .red-flag — inline callout for risk signals ──────────────
   Payment schedule: "deposit above 10% is unusual" etc.
   Snagging: "out-of-tolerance" notices.
   Amber by default (cautionary, not alarming). One per section maximum
   or the page noise floor gets too high. */
#bf-mount-inner .red-flag{
  display:flex;gap:5px;align-items:flex-start;
  padding:5px 8px;margin-top:4px;
  background:#FFF7E6;border-left:2px solid #D97706;
  font-size:8.5px;line-height:1.5;color:#854F0B;
}
#bf-mount-inner .sheet.a4 .red-flag{font-size:10px;padding:6px 10px}
#bf-mount-inner .red-flag-icon{flex-shrink:0;font-weight:600;font-size:9px}
#bf-mount-inner .sheet.a4 .red-flag-icon{font-size:10.5px}

/* ─── .benchmark — per-m² band readout for Material estimate ───
   "Your build = £1,940/m². UK mid-spec = £1,600–£2,000".
   Lives below the .mtable, above the .verify line. Two-row block:
   user's number on top, comparator band underneath. */
#bf-mount-inner .benchmark{
  margin:4px 0 0;
  padding:6px 10px;
  background:rgba(45,168,127,0.05);
  border-radius:2px;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
  font-size:9.5px;
}
#bf-mount-inner .sheet.a4 .benchmark{font-size:11px;padding:8px 12px}
#bf-mount-inner .benchmark-yours{color:var(--ink);font-weight:500}
#bf-mount-inner .benchmark-band{color:var(--mute);font-variant-numeric:tabular-nums}
#bf-mount-inner .benchmark-band strong{color:var(--gd);font-weight:500}

/* ─── Snagging additions (s34) ────────────────────────────────── */
/* NHBC functional/aesthetic tag — sits next to .snag-prio.
   Two states: functional (does-it-work, weightier) and aesthetic
   (does-it-look-right, lighter). Different palette to .snag-prio so
   readers parse them as separate axes, not one combined label. */
#bf-mount-inner .snag-cat{
  font-size:7px;letter-spacing:.5px;text-transform:uppercase;
  font-weight:500;padding:2px 6px;border-radius:99px;
  white-space:nowrap;margin-top:1px;
  background:#EEF2FF;color:#3730A3;
}
#bf-mount-inner .sheet.a4 .snag-cat{font-size:8px;padding:3px 8px}
#bf-mount-inner .snag-cat.fn{background:#EEF2FF;color:#3730A3}    /* Functional */
#bf-mount-inner .snag-cat.ae{background:#FCF4FF;color:#86198F}    /* Aesthetic */
/* Snag priority — reframe to NHBC ladder.
   .hi → "Defect" (must fix, fails warranty)
   .md → "Snag"   (should fix, within warranty)
   .lo → "Obs"    (note for reference)
   Keep existing background colors; the label text changes in the
   sample HTML and wizard render, not here. */
/* Sign-off block — homeowner + builder signature lines for snagging.
   Two side-by-side fields at the foot of the doc, just above .foot.
   Pure paper convention — a "We both agree this is the list" gesture. */
#bf-mount-inner .signoff{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px;margin-top:5mm;padding-top:5mm;
  border-top:0.5px solid var(--rule);
}
#bf-mount-inner .sheet.a4 .signoff{gap:24px;margin-top:6mm;padding-top:6mm}
#bf-mount-inner .signoff-field{display:flex;flex-direction:column;gap:1mm}
#bf-mount-inner .signoff-label{
  font-size:7.5px;color:var(--gm);
  letter-spacing:.7px;text-transform:uppercase;font-weight:500;
}
#bf-mount-inner .sheet.a4 .signoff-label{font-size:8.5px}
#bf-mount-inner .signoff-line{
  border-bottom:0.5px solid var(--ink);
  height:8mm;
}
#bf-mount-inner .sheet.a4 .signoff-line{height:10mm}
#bf-mount-inner .signoff-hint{
  font-size:7.5px;color:var(--hint);
  letter-spacing:.3px;
  display:flex;justify-content:space-between;
}
#bf-mount-inner .sheet.a4 .signoff-hint{font-size:9px}

/* ─── Stage trigger pill — Payment schedule v2 ─────────────────
   Each stage in .stable can carry a small pill in the trigger column
   that flags how the trigger is verified (BC sign-off, photo,
   weathertight, etc). Different from .snag-cat semantically — this is
   a verification marker, not a category. */
#bf-mount-inner .trigger-pill{
  display:inline-block;
  font-size:7.5px;letter-spacing:.4px;text-transform:uppercase;
  padding:1px 6px;border-radius:99px;
  background:#F1FBF7;color:var(--gd);font-weight:500;
  margin-right:4px;
}
#bf-mount-inner .sheet.a4 .trigger-pill{font-size:8.5px;padding:2px 7px}

/* ─── Checklist block — "before you sign" / "how to use" ────── */
#bf-mount-inner .checklist{
  list-style:none;padding:0;margin:3px 0 0;
}
#bf-mount-inner .checklist li{
  position:relative;padding:0 0 4px 16px;
  font-size:9.5px;line-height:1.5;color:var(--body);
}
#bf-mount-inner .sheet.a4 .checklist li{font-size:11px;padding-left:18px;padding-bottom:5px}
#bf-mount-inner .checklist li::before{
  content:'';
  position:absolute;left:0;top:4px;
  width:9px;height:9px;
  border:0.5px solid var(--gm);border-radius:2px;background:#fff;
}
#bf-mount-inner .sheet.a4 .checklist li::before{width:11px;height:11px;top:5px}
#bf-mount-inner .checklist li:last-child{padding-bottom:0}

/* ─── Spec band marker — Material estimate ─────────────────────
   Small inline pill next to .doc-title showing which spec band the
   estimate is calculated against (Standard/Good/Excellent). Gives
   the reader an instant context for the numbers below. */
#bf-mount-inner .spec-pill{
  display:inline-block;
  font-size:8.5px;font-weight:500;
  letter-spacing:.4px;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;
  background:var(--gm);color:#fff;
  vertical-align:middle;margin-left:6px;
}
#bf-mount-inner .sheet.a4 .spec-pill{font-size:10px;padding:3px 10px;margin-left:8px}



/* ── DARK MODE (s22) ──
   Applied via `data-theme="dark"` on <html>. Toggle JS lives per-page for now;
   sitewide rollout = phase 2. All page-level colours route through these vars,
   so any page using style.css inherits dark mode the moment the attribute flips.

   Approach: override the existing :root tokens. No new var names. Pages that
   hardcode hex values bypass this — those need targeted overrides below or
   page-local audit. Known offenders in index.html: tc-* demo cards, mk-*
   markup cards, sr-* site report demo, the red error ribbon at top of page. */

:root[data-theme="dark"]{
  --g:#3FB890;          /* primary green — lifted for contrast on dark */
  --gd:#5BC4A0;         /* darker green role flips to brighter on dark */
  --gm:#2DA87F;         /* mid-green stays — works in both modes */
  --gl:#1F3B33;         /* light-green tint becomes deep mossy panel bg */
  --ink:#F2F0E8;        /* body text */
  --mid:#B8B7B0;        /* secondary text */
  --lt:#82827C;         /* tertiary text — slightly lifted from light mode */
  --cream:#15171A;      /* page background */
  --white:#1F2225;      /* card / surface background */
  --grey:#2A2D31;       /* chip / tab / pill tint — sits just above --white */
  --border:rgba(91,196,160,0.18);
}

/* ── AMBIENT POOLS (s22 · "Variant D · 17% · 20s") ──
   Three radial gradients fixed to the viewport, drifting on a 20s loop.
   Two mossy greens (top-left, bottom-centre) anchor to brand; one warm
   earth/amber (bottom-right) gives the dark canvas a "construction site
   golden hour" quality. The pools are fixed-position so they persist as
   atmospheric light through scroll rather than scrolling away with content.
   Honours prefers-reduced-motion. Light mode is untouched.

   Locked after A/B/C lab session: 14% felt subliminal, 20% washed text;
   17% sits in the "feels alive, doesn't compromise legibility" zone.

   The ::before pseudo on body keeps the pool layer on z-index:-1 so all
   page content paints over it without needing isolation/stacking changes
   anywhere else. pointer-events:none ensures it never intercepts clicks. */
:root[data-theme="dark"] body{position:relative}
:root[data-theme="dark"] body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(ellipse 900px 600px at 15% 10%,rgba(45,168,127,0.17),transparent 60%),
    radial-gradient(ellipse 800px 500px at 90% 70%,rgba(140,100,55,0.19),transparent 55%),
    radial-gradient(ellipse 700px 400px at 50% 100%,rgba(45,168,127,0.18),transparent 65%);
  animation:sb-ambient-drift 20s ease-in-out infinite;
  will-change:background-position;
}
@keyframes sb-ambient-drift{
  0%,100%{background-position:0% 0%,100% 100%,50% 100%}
  25%{background-position:8% -4%,92% 96%,56% 104%}
  50%{background-position:4% 6%,96% 88%,44% 96%}
  75%{background-position:-2% 2%,88% 100%,52% 100%}
}
@media (prefers-reduced-motion: reduce){
  :root[data-theme="dark"] body::before{animation:none}
}

/* Nav background needs to follow the page bg, not stay translucent-cream */
:root[data-theme="dark"] nav{background:rgba(21,23,26,0.92)}

/* Shimmer gradient already uses greens that work in both modes — no change. */

/* Logo on dark — keep the original asset (white rounded background + green/black
   wordmark). The PNG has its own contrast container baked in, so it pops on
   dark just as well as on light. Previously we filter:invert()'d this to
   "match" the dark canvas, but that washed it out and made it disappear.
   Decision LOCKED s24: footer treatment wins, nav matches footer. */
:root[data-theme="dark"] .nav-logo-img{filter:none}

/* Inputs / textareas / shadow-bg surfaces — anything that hardcoded #fafaf8 etc.
   should be normalised here over time. Catch-all that helps most form fields.
   EXCLUDES .sa-input (SiteAgent search) — that input sits on z-index:2 above
   a positioned .sa-placeholder span at z-index:1 and MUST stay transparent in
   dark mode, otherwise the typewriter text behind it is hidden by a solid
   #262A2E box. .sa-input-row provides the visible background for that field. */
:root[data-theme="dark"] input[type="text"]:not(.sa-input),
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{
  background:#262A2E;color:var(--ink);border-color:rgba(255,255,255,0.1)
}

/* Theme toggle button itself */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;border:0.5px solid rgba(0,0,0,0.1);
  background:transparent;cursor:pointer;color:var(--mid);
  transition:background .15s,color .15s,border-color .15s;
  margin-right:6px;
}
.theme-toggle:hover{background:var(--gl);color:var(--g);border-color:var(--g)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .icon-moon{display:inline-block}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle{border-color:rgba(255,255,255,0.12)}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:inline-block}

/* Index-specific dark-mode patches for hardcoded-colour blocks (s22).
   Demo card chip bg + text — lift them so they don't glow against dark panels. */
:root[data-theme="dark"] [style*="background:#DBEAFE"]{background:#1E3A5F !important;color:#93C5FD !important}
:root[data-theme="dark"] [style*="background:#FEF3C7"]{background:#4A3A0F !important;color:#FCD34D !important}
:root[data-theme="dark"] [style*="background:#f0f0ec"]{background:#2A2D31 !important;color:var(--mid) !important}
:root[data-theme="dark"] [style*="color:#1E40AF"]{color:#93C5FD !important}
:root[data-theme="dark"] [style*="color:#D97706"]{color:#FCD34D !important}
:root[data-theme="dark"] [style*="color:#7F1D1D"]{color:#FCA5A5 !important}
:root[data-theme="dark"] [style*="color:#991B1B"]{color:#FCA5A5 !important}
:root[data-theme="dark"] [style*="background:#FEF2F2"]{background:#3A1F1F !important;color:#FCA5A5 !important}
:root[data-theme="dark"] [style*="border-left-color:#1E40AF"]{border-left-color:#93C5FD !important}
:root[data-theme="dark"] [style*="border-top:2px solid #FCA5A5"]{border-top-color:#7F1D1D !important}

/* Structural.html dark-mode patches (s22 sweep). Status colour tokens
   (--amber/--blue/--red + their *l pale variants) are overridden in-page
   via [data-theme="dark"] :root tokens — so anything consuming those vars
   adapts automatically. These rules catch the remaining inline-styled demo
   cards that hardcode background:#fff with the green-tinted box-shadow,
   plus the listing-URL input that hardcodes background:#fff. The shadow
   spec uniquely identifies the demo cards so this won't catch random #fff
   elements elsewhere on the page. */
:root[data-theme="dark"] [style*="background:#fff"][style*="box-shadow:0 2px 20px rgba(27,122,94,0.06)"]{
  background:var(--white) !important
}
:root[data-theme="dark"] input[type="text"][style*="background:#fff"]{
  background:#262A2E !important;color:var(--ink) !important
}
/* Listing-gate overlay's white card — caught by .gate-card{var(--white)}
   change in structural.html itself, no rule needed here. */

/* SiteAgent dark-mode patches (s22 follow-up). The s20 production chip
   override at line 1295 hardcodes #fff / #fafafa / var(--ink) — invisible
   on dark surfaces. Same story for sa-input-row's rgba(0,0,0,.025) bg
   which becomes near-transparent on dark canvas. Override here. */

:root[data-theme="dark"] .sa-input-row{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.1)
}
:root[data-theme="dark"] .sa-input-row:focus-within{
  background:rgba(255,255,255,0.06);
  border-color:var(--gm);
  box-shadow:0 0 0 3px rgba(63,184,144,0.18)
}
:root[data-theme="dark"] .sa-placeholder{
  color:#C2C0B6  /* bumped from #9A9994 — typewriter text needs to read clearly */
}
/* Caret already uses var(--gd) which flips to #5BC4A0 (brighter green) in dark
   — no override needed; it pops nicely against dark input bg. */

/* Chips — invert the s20 hardcoded whites */
:root[data-theme="dark"] .sa-chip{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.1);
  color:var(--ink)
}
:root[data-theme="dark"] .sa-chip:hover{
  background:rgba(63,184,144,0.12);
  border-color:var(--gm)
}
:root[data-theme="dark"] .sa-chip.funnel{
  background:rgba(63,184,144,0.08);
  border-color:rgba(63,184,144,0.3)
}
:root[data-theme="dark"] .sa-chip svg{
  color:var(--g);opacity:1
}

/* See more button + chips on dark — match resting green (s27) */
:root[data-theme="dark"] .sa-seemore-btn{
  color:var(--g)
}
:root[data-theme="dark"] .sa-seemore-btn:hover{
  color:var(--gd);
  background:rgba(63,184,144,0.10)
}
:root[data-theme="dark"] .sa-seemore-btn.is-pulsing{
  animation-name:sb-seemore-pulse-dark
}
@keyframes sb-seemore-pulse-dark{
  0%,100%{
    box-shadow:0 0 0 0 rgba(91,196,160,0);
    color:var(--g);
  }
  50%{
    box-shadow:0 0 0 6px rgba(91,196,160,.20);
    color:var(--gd);
  }
}
:root[data-theme="dark"] .sa-seemore-chip{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.1);
  color:var(--ink)
}
:root[data-theme="dark"] .sa-seemore-chip:hover{
  background:rgba(63,184,144,0.12);
  border-color:var(--gm);
  color:var(--gd)
}

/* "Try asking" label — uses var(--lt) which is intentionally muted.
   On dark it slips below readable contrast. Lift it. */
:root[data-theme="dark"] .sa-chips-label{
  color:#9A9994
}
:root[data-theme="dark"] .sa-chips-label::before,
:root[data-theme="dark"] .sa-chips-label::after{
  background:rgba(255,255,255,0.12)
}

/* Conversation surface dark mode (s23) — invert answer bubble bg, lift Q label,
   adjust gate gradient since linear-gradients with rgba green look weak on dark. */
:root[data-theme="dark"] .sa-q{color:#9A9994}
:root[data-theme="dark"] .sa-q:hover{color:#D8D6CC}
:root[data-theme="dark"] .sa-turn.sa-collapsed .sa-q{
  background:rgba(63,184,144,0.06);
  border-color:rgba(255,255,255,0.08)
}
:root[data-theme="dark"] .sa-turn.sa-collapsed .sa-q:hover{
  background:rgba(63,184,144,0.12);
  border-color:rgba(63,184,144,0.4)
}
:root[data-theme="dark"] .sa-q-close{color:#82827C}
:root[data-theme="dark"] .sa-q-close:hover{
  background:rgba(255,255,255,0.08);
  color:#D8D6CC
}
:root[data-theme="dark"] .sa-conversation{
  scrollbar-color:rgba(255,255,255,0.15) transparent
}
:root[data-theme="dark"] .sa-conversation::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.15)
}
:root[data-theme="dark"] .sa-conversation::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.25)
}
:root[data-theme="dark"] .sa-disclaimer{
  border-top-color:rgba(255,255,255,0.08);
  color:#82827C
}
:root[data-theme="dark"] .sa-disclaimer-strong{
  background:rgba(217,119,6,0.08);
  border-top-color:rgba(217,119,6,0.35);
  color:#D8D6CC
}
:root[data-theme="dark"] .sa-disclaimer-strong strong{color:#FBBF24}
:root[data-theme="dark"] .sa-a{
  background:rgba(63,184,144,0.08);
  border-left-color:var(--gm);
  color:var(--ink)
}
:root[data-theme="dark"] .sa-a strong{color:#5BC4A0}
:root[data-theme="dark"] .sa-a em{color:#C2C0B6}
:root[data-theme="dark"] .sa-gate{
  background:rgba(63,184,144,0.06);
  border-color:rgba(63,184,144,0.3)
}
:root[data-theme="dark"] .sa-gate-sub{color:#C2C0B6}
:root[data-theme="dark"] .sa-gate-btn.secondary{
  border-color:rgba(255,255,255,0.12);
  color:#9A9994
}
:root[data-theme="dark"] .sa-gate-btn.secondary:hover{
  border-color:rgba(255,255,255,0.25);
  color:#D8D6CC
}

/* AUDIENCE TRUST ROW — "Renovators & homeowners", "Builders & trades" etc.
   Label uses muted grey, nodes likely use --ink which is already lifted in dark.
   Lift the "Built for" label so it doesn't fade out. */
:root[data-theme="dark"] .audience-label{
  color:#9A9994
}
:root[data-theme="dark"] .audience-node{
  color:var(--ink)
}

/* === DOCUMENT ASSISTANT — DARK MODE PATCHES (s22 round 3) ===
   Trade-btn / sender-chip / cat-pill / trade-example all hardcode #fff or
   #F7F6F1 with #111410 text. They glow against dark canvas. Match them to
   the doc assistant tab treatment instead (subtle bg, light text, green hover).
   Also dial down padding/font-weight so they don't dominate. */

:root[data-theme="dark"] .trade-btn{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.1);
  color:var(--ink)
}
:root[data-theme="dark"] .trade-btn:hover{
  border-color:var(--g);
  background:rgba(63,184,144,0.1);
  color:var(--gd)
}
:root[data-theme="dark"] .trade-btn.active{
  background:var(--g);
  border-color:var(--g);
  color:#fff
}

:root[data-theme="dark"] .sender-chip.set,
:root[data-theme="dark"] .sender-chip.unset{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.15)
}
:root[data-theme="dark"] .sender-chip.set{color:var(--gd)}
:root[data-theme="dark"] .sender-chip.unset{color:#9A9994}
:root[data-theme="dark"] .sender-chip.set:hover,
:root[data-theme="dark"] .sender-chip.unset:hover{
  background:rgba(63,184,144,0.12);
  border-color:var(--g);
  color:var(--gd)
}

/* Trade chips (example pills under trade-grid) — match trade-btn treatment */
:root[data-theme="dark"] .trade-chip{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.1);
  color:var(--ink)
}
:root[data-theme="dark"] .trade-chip:hover{
  background:rgba(63,184,144,0.12);
  border-color:var(--g);
  color:var(--gd)
}

:root[data-theme="dark"] .cat-pill{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.12);
  color:var(--mid)
}
:root[data-theme="dark"] .cat-pill:hover{
  border-color:var(--g);
  color:var(--gd)
}
:root[data-theme="dark"] .cat-pill.active{
  background:var(--g);
  border-color:var(--g);
  color:#fff
}

:root[data-theme="dark"] .sender-picker{
  background:#1F2225;
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 6px 20px rgba(0,0,0,0.4)
}

:root[data-theme="dark"] .trade-example{
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.08);
  color:#9A9994
}

/* Also catch the sender-helper italic note text */
:root[data-theme="dark"] .sender-helper{
  color:#82827C
}

/* TYPEWRITER — make sure the rolling text actually shows.
   Belt-and-braces: explicit !important on color AND opacity to defeat any
   inline or cascade quirk. The .hidden/.fading classes still override
   opacity via their own !important — see below. */
:root[data-theme="dark"] .sa-placeholder{
  color:#D8D6CC !important
}
:root[data-theme="dark"] .sa-placeholder:not(.hidden):not(.fading){
  opacity:1 !important;
  visibility:visible !important
}

/* trade-example bar — hide entirely when empty (no role picked yet).
   Element stays in DOM so per-role example prompts can populate it later. */
.trade-example.empty{display:none}

/* Dark mode: lift inactive document-assistant tabs above container bg.
   Previously rgba(0,0,0,0.03) sat them BELOW the panel = invisible edges.
   Match the SiteAgent chip treatment above (white-tint, same density). */
:root[data-theme="dark"] .type-tab{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.1);
  color:var(--mid)
}
:root[data-theme="dark"] .type-tab:hover{
  background:rgba(63,184,144,0.12);
  border-color:var(--gm);
  color:var(--gd)
}
:root[data-theme="dark"] .type-tab.on{
  background:rgba(63,184,144,0.15);
  border-color:var(--g);
  color:var(--gd)
}

/* === SA-CHIP FLIP MECHANIC (s22 — H1: flip with mid-flip scramble) ===
   Each rotating chip has a 3D-flipping inner. Front/back faces are absolutely
   positioned, both styled like a chip (bg, border, padding, layout). The
   outer .sa-chip retains only perspective + hover lift + click target role.
   Pairs with the rotation IIFE that toggles .sa-flipping every wave. */

/* Reset the outer chip for rotation variant — strip bg/border/padding so it
   becomes a perspective container; faces take over the visual styling. */
.sa-chip.sa-chip-rot{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  perspective:800px;
  position:relative;
  height:30px;
  overflow:visible;
  font-size:11px;
}
.sa-chip.sa-chip-rot:hover{
  background:transparent !important;
  border:none !important;
  transform:none;
}

/* The element that physically rotates */
.sa-chip-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 0.57s cubic-bezier(0.5, 0.02, 0.5, 1);
}
.sa-chip-inner.sa-flipping{
  transform:rotateX(180deg);
}
/* Used to reset rotation instantly after landing without a backflip animation */
.sa-chip-inner.sa-no-transition{
  transition:none !important;
}

/* Each face — both styled like a chip */
.sa-chip-face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 11px;
  background:#fff;
  border:0.5px solid rgba(0,0,0,0.1);
  color:var(--ink);
  border-radius:99px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.sa-chip-face svg{
  width:12px;
  height:12px;
  color:var(--gd);
  flex-shrink:0;
}
.sa-chip-face .sa-chip-text{
  overflow:hidden;
  text-overflow:ellipsis;
}
.sa-chip-back{
  transform:rotateX(180deg);
}

/* Hover lift on the outer chip moves the inner — keeps the flip rotation
   centred while still giving the cursor-feedback bump */
.sa-chip.sa-chip-rot:hover .sa-chip-inner:not(.sa-flipping){
  transform:translateY(-1px);
}
.sa-chip.sa-chip-rot:hover .sa-chip-face{
  background:#fafafa;
  border-color:rgba(27,122,94,0.35);
}

/* Dark mode — both faces follow the dark chip treatment from s22 round 1 */
:root[data-theme="dark"] .sa-chip-face{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.1);
  color:var(--ink);
}
:root[data-theme="dark"] .sa-chip-face svg{
  color:var(--g);
}
:root[data-theme="dark"] .sa-chip.sa-chip-rot:hover .sa-chip-face{
  background:rgba(63,184,144,0.12);
  border-color:var(--gm);
}

/* Reduced motion — no flip, just show front face */
@media (prefers-reduced-motion: reduce){
  .sa-chip-inner{transition:none}
  .sa-chip-inner.sa-flipping{transform:none}
}

/* ── DEMO BOX FAMILY · dark-mode patches (s27) ──
   The .demo-box shell flips with tokens (var(--white), var(--border), var(--ink))
   so it inherits dark mode automatically. The .sheet INSIDE stays paper-white
   in both modes — it's literally paper, not chrome. Only the chrome flips.

   Tier pills use --gl/--g which already flip via the dark token block. No
   per-pill override needed for tp-free/tp-pro. Amber and purple tp-adv/tp-elite
   keep their fixed colours (they signal tier escalation, not brand state). */
:root[data-theme="dark"] .demo-meta-label{color:var(--ink)}
:root[data-theme="dark"] .demo-meta-dot{
  background:var(--gm);
  box-shadow:0 0 0 3px rgba(63,184,144,0.22);
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV SHRINK · roadmap Day 1 · 18 May 2026
   ──────────────────────────────────────────────────────────────────
   Scoped under @media (max-width:720px) only. Desktop nav (62px /
   logo 44px / 3px --gm border) is canonical and untouched.

   ~25% reduction across the board:
     • nav height       62px → 46px
     • nav side-padding 24px → 14px
     • logo height      44px → 33px
     • dd button        13.5px/7-14 → 11px/5-10
     • dropdown panel   200px min / 13px items → 160px / 11.5px
     • theme toggle     34px → 26px

   Affects: pricing, structural, renovate, siteplanner, brief, reports,
   requests, details, AND index.html when forced via ?desktop=1.
   index-mobile.html has its own layout — unaffected.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* Bar itself — height + side-padding only. 3px --gm border untouched
     (canonical) and the ::after shimmer scales with the bar automatically. */
  nav {
    height: 46px;
    padding: 0 14px;
  }

  /* Logo */
  .nav-logo-img {
    height: 33px;
  }

  /* Dropdown trigger buttons (left + right). Preserve the open-state
     padding/border compensation (desktop is 7-14 → 6-13 to absorb the
     extra 1px border; mobile mirrors that with 5-10 → 4-9). */
  .nav-dd-btn {
    font-size: 11px;
    padding: 5px 10px;
    gap: 4px;
    border-radius: 7px;
  }
  .nav-dd-btn .chev {
    font-size: 8.5px;
  }
  .nav-dd-btn.open {
    padding: 4px 9px;
  }

  /* Dropdown panel */
  .nav-dropdown {
    min-width: 160px;
    padding: 5px;
    border-radius: 8px;
    top: calc(100% + 4px);
  }
  .nav-dd-item {
    padding: 6px 10px;
    font-size: 11.5px;
  }
  .nav-dd-sub {
    padding-left: 24px !important;
    font-size: 10.5px !important;
  }
  .nav-dd-branch {
    left: 11px;
    top: 11px;
    width: 6px;
    height: 6px;
  }
  .nav-dd-divider {
    margin: 4px 3px;
  }

  /* Theme toggle */
  .theme-toggle {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    margin-right: 4px;
  }
  .theme-toggle svg {
    width: 13px;
    height: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SITEPLANNER · MOBILE LINK STRIP · day 3 wiring · 18 May 2026
   ──────────────────────────────────────────────────────────────────
   Tier-conditional strip on siteplanner.html that points users to
   siteplanner-mobile.html. Only visible when body[data-tier="reno"]
   — Free has no mobile build, Pro/Elite ship later.

   Desktop (>720px): left text + right QR.
   Mobile (≤720px):  text only, link is the affordance (tap to open).
                     QR is hidden — phone users don't scan their own screen.
   ═══════════════════════════════════════════════════════════════════ */

/* Default state: hidden. Only flips visible for Reno. */
.sp-mobile-strip { display: none; }
body[data-tier="reno"] .sp-mobile-strip { display: block; }

.sp-mobile-strip-inner {
  max-width: var(--w-content, 1200px);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(27,122,94,0.04);
  border-bottom: 0.5px solid rgba(27,122,94,0.18);
}
.sp-mobile-strip-text { min-width: 0; flex: 1 }
.sp-mobile-strip-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 600;
  color: var(--g);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 2px;
}
.sp-mobile-strip-line {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; color: var(--mid);
  line-height: 1.4;
}
.sp-mobile-strip-link {
  color: var(--g);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.sp-mobile-strip-link:hover { border-bottom-color: var(--g); }

.sp-mobile-strip-qr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 6px;
  transition: background .15s;
}
.sp-mobile-strip-qr:hover { background: rgba(27,122,94,0.07); }
.sp-mobile-strip-qr img {
  width: 64px; height: 64px;
  display: block;
  border-radius: 4px;
  background: #fff;
  padding: 2px;
  border: 0.5px solid var(--border);
}
.sp-mobile-strip-qr-cap {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px;
  color: var(--lt);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Dark mode — keep the QR readable. The QR SVG is black-on-transparent;
   we wrap it in a white plate (above), so it stays scannable in dark. */
:root[data-theme="dark"] .sp-mobile-strip-inner {
  background: rgba(63,184,144,0.06);
  border-bottom-color: rgba(63,184,144,0.18);
}

/* Phone viewport: drop the QR, simplify. Tap the link directly.
   Sits under the existing 720px breakpoint family (see mobile nav block). */
@media (max-width: 720px) {
  .sp-mobile-strip-inner {
    padding: 8px 14px;
    gap: 8px;
  }
  .sp-mobile-strip-qr { display: none; }
  .sp-mobile-strip-eyebrow { font-size: 9px; }
  .sp-mobile-strip-line { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   s38 · QS Agent wizard additions
   ───────────────────────────────────────────────────────────────────────
   Sub-type picker (.bf-subtype-*) for the Estimate parent doc-type and
   the request-access stub panel (.bf-stub-*) for Quote sense-check.
   All selectors scoped under .bf-* — no collisions with prior rules.
   Posture chips use existing .bf-chip styling, no new rules needed.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── SUB-TYPE CARD GRID ────────────────────────────────────────────
   Step 0 of the Material-estimate wizard. 2×2 grid; collapses to 1-col
   on narrow viewports. */
.bf-subtype-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px;
}
@media (max-width:540px){
  .bf-subtype-grid{ grid-template-columns:1fr; }
}


/* ─── SUB-TYPE CARD ─────────────────────────────────────────────────
   Each card represents one Estimate sub-type (Budget / Cost / Material /
   Quote sense-check). Active state = green border + soft-green wash.
   Disabled state (Quote sense-check stub) = reduced opacity. */
.bf-subtype-card{
  padding:14px 16px;
  border:1.5px solid rgba(0,0,0,0.08);
  border-radius:10px;
  background:var(--bg,#ffffff);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
  font-family:'DM Sans',sans-serif;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bf-subtype-card:hover{
  border-color:var(--gm,#2DA87F);
  transform:translateY(-1px);
}
.bf-subtype-card.on{
  border-color:var(--gm,#2DA87F);
  background:var(--gl,#E8F5EF);
  box-shadow:0 0 0 2px rgba(45,168,127,0.12);
}
.bf-subtype-card-disabled{
  opacity:0.55;
}
.bf-subtype-card-disabled:hover{
  /* Disabled card still responds to hover — clicking reveals the stub */
  border-color:var(--lt,#7A7A72);
  transform:translateY(-1px);
}


/* ─── CARD HEAD ROW + TYPOGRAPHY ────────────────────────────────── */
.bf-subtype-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.bf-subtype-label{
  font-size:14px;
  font-weight:600;
  color:var(--gd,#1A1A1A);
}
.bf-subtype-eyebrow{
  font-size:10px;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--lt,#7A7A72);
  margin-top:-2px;
}
.bf-subtype-blurb{
  font-size:12px;
  line-height:1.45;
  color:var(--mid,#4F4F47);
  margin:4px 0 0;
}


/* ─── BADGES — accuracy (live) / soon (disabled) ──────────────────── */
.bf-subtype-accuracy{
  font-size:10px;
  font-weight:600;
  padding:2px 8px;
  border-radius:99px;
  background:var(--gl,#E8F5EF);
  color:var(--gd,#1A1A1A);
  font-family:'DM Sans',sans-serif;
  white-space:nowrap;
}
.bf-subtype-soon{
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:99px;
  background:var(--lt,#7A7A72);
  color:#ffffff;
  font-family:'DM Sans',sans-serif;
  letter-spacing:0.04em;
  white-space:nowrap;
}


/* ─── STUB PANEL — Quote sense-check "request access" ──────────────── */
.bf-stub{
  padding:16px 18px;
  border:1.5px dashed var(--gm,#2DA87F);
  border-radius:10px;
  background:var(--gl,#E8F5EF);
  font-family:'DM Sans',sans-serif;
}
.bf-stub-title{
  font-size:14px;
  font-weight:600;
  color:var(--gd,#1A1A1A);
  margin-bottom:6px;
}
.bf-stub-body{
  font-size:12px;
  line-height:1.5;
  color:var(--mid,#4F4F47);
  margin:0 0 12px;
}
.bf-stub-row{
  display:flex;
  gap:8px;
  align-items:center;
}
@media (max-width:540px){
  .bf-stub-row{
    flex-direction:column;
    align-items:stretch;
  }
  .bf-stub-row .bf-submit{ width:100%; }
}


/* ─── DARK-MODE SAFETY ─────────────────────────────────────────────── */
[data-theme="dark"] .bf-subtype-card{
  background:var(--bg,#1A1A1A);
  border-color:rgba(255,255,255,0.12);
}
[data-theme="dark"] .bf-subtype-card.on{
  background:rgba(45,168,127,0.15);
  border-color:var(--gm,#2DA87F);
}
[data-theme="dark"] .bf-subtype-soon{
  background:rgba(255,255,255,0.2);
  color:#ffffff;
}
[data-theme="dark"] .bf-stub{
  background:rgba(45,168,127,0.1);
}


/* ═══════════════════════════════════════════════════════════════════════
   s38-live · QS consultancy review CTA
   ───────────────────────────────────────────────────────────────────────
   Two-rung ladder upsell below the estimate result — automated estimate is
   free/subscription, optional fixed-fee human QS review is the premium
   layer. Same disclosed-fee model as the SE network. Scoped .mf-consult-*.
   ═══════════════════════════════════════════════════════════════════════ */
.mf-consult{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
  padding:16px 18px;
  border:1.5px solid var(--gm,#2DA87F);
  border-radius:12px;
  background:var(--gl,#E8F5EF);
  font-family:'DM Sans',sans-serif;
}
.mf-consult-icon{
  flex-shrink:0;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gd,#1A7A5E);
}
.mf-consult-icon svg{width:24px;height:24px}
.mf-consult-body{flex:1;min-width:0}
.mf-consult-title{
  font-size:14px;font-weight:600;color:var(--gd,#1A1A1A);margin-bottom:2px;
}
.mf-consult-blurb{
  font-size:12px;line-height:1.45;color:var(--mid,#4F4F47);margin:0;
}
.mf-consult-btn{
  flex-shrink:0;
  padding:10px 16px;
  border:none;border-radius:8px;
  background:var(--gm,#2DA87F);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:background .15s ease;
}
.mf-consult-btn:hover{background:var(--gd,#1A7A5E)}
.mf-consult-done{
  margin-top:14px;padding:14px 18px;
  border-radius:12px;
  background:var(--gl,#E8F5EF);
  border:1px solid var(--gm,#2DA87F);
  font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.5;
  color:var(--mid,#4F4F47);
}
.mf-consult-done strong{color:var(--gd,#1A1A1A)}
@media (max-width:540px){
  .mf-consult{flex-direction:column;align-items:flex-start;gap:10px}
  .mf-consult-btn{width:100%}
}
[data-theme="dark"] .mf-consult,
[data-theme="dark"] .mf-consult-done{
  background:rgba(45,168,127,0.12);
}