/* OpiFix prototype — design system */
:root {
  --bg: #f5f0e4;            /* cream (secondary) */
  --surface: #ffffff;
  --ink: #1f2a24;
  --ink-soft: #5f6b62;
  --line: #e6e0d2;          /* warm hairline to suit cream */
  --brand: #205a40;         /* OpiFix green (primary) */
  --brand-dark: #17402c;
  --brand-soft: #e7f0ea;    /* pale green tint */
  --accent: #205a40;        /* CTAs in brand green */
  --green: #1f9d57;
  --green-soft: #e3f6ec;
  --amber: #c77700;
  --amber-soft: #fdf2dc;
  --red: #d23b3b;
  --red-soft: #fbe6e6;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(20,30,50,.08), 0 6px 20px rgba(20,30,50,.05);
  --shadow-lg: 0 10px 40px rgba(20,30,50,.14);
  --maxw: 1120px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .4em; letter-spacing: -.011em; text-wrap: balance; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .8em; }
/* Design-system pass (item B): brand text selection, a visible keyboard-focus
   ring on interactive elements (accessibility), and reduced-motion support. */
::selection { background: var(--brand-soft); }
a:focus-visible, button:focus-visible, .btn:focus-visible,
[role="switch"]:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- top bar ---------- */
.topbar {
  background: var(--brand);
  border-bottom: 1px solid var(--brand-dark);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; height: 94px;
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 78px; width: auto; display: block; }
/* On narrow screens the slogan logo + nav can't share one row without
   overlapping, so stack them: logo centred on top, nav centred underneath.
   The logo also scales by viewport width so it never runs off the edge. */
@media (max-width: 600px) {
  .topbar { flex-direction: column; align-items: center; justify-content: center;
    height: auto; min-height: 0; padding: 8px 12px; gap: 4px; }
  .brand { justify-content: center; width: 100%; }
  .brand-logo { height: auto; max-height: 50px; max-width: 80vw; width: auto; object-fit: contain; }
  .topnav { width: 100%; justify-content: center; }
}
@media (max-width: 380px) { .brand-logo { max-height: 44px; } }
.topnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topnav .navlink { padding: 8px 12px; border-radius: 8px; color: rgba(245,240,228,.9); font-weight: 600; font-size: .9rem; }
.topnav .navlink:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.topnav .navlink.active { color: #fff; background: rgba(255,255,255,.2); }
.login-group { display: inline-flex; align-items: center; gap: 2px; }
.login-group .login-sep { color: rgba(245,240,228,.5); font-weight: 400; padding: 0 1px; }
.consent { display: grid; gap: 10px; margin: 4px 0 14px; }
.consent-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start;
  font-size: .82rem; color: var(--ink-soft); line-height: 1.45; cursor: pointer; }
.consent-row input { width: auto; margin: 2px 0 0; }
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { margin-bottom: 2px; }
.legal .updated { color: var(--ink-soft); font-size: .85rem; margin: 0 0 8px; }
.legal .lead { color: var(--ink-soft); font-size: 1.02rem; }
.legal h2 { font-size: 1.16rem; margin: 26px 0 8px; }
.legal p, .legal li { line-height: 1.62; }
.legal ul { margin: 8px 0 8px 20px; display: grid; gap: 6px; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .86rem; }
.legal th, .legal td { text-align: left; border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.legal th { background: var(--bg); }
.legal code { background: var(--bg); padding: 1px 5px; border-radius: 5px; font-size: .85em; }

/* Cookie consent banner (Manage consent) */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; justify-content: center; padding: 16px; pointer-events: none; }
.cookie-card { pointer-events: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg); max-width: 560px; width: 100%; padding: 18px 20px; }
.cookie-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cookie-head b { font-size: 1.05rem; }
.cookie-logo { width: 28px; height: 28px; border-radius: 6px; }
.cookie-intro { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 12px; }
.cookie-cat { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.cookie-cat-h { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 700; font-size: .92rem; }
.cookie-cat p { font-size: .8rem; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.45; }
.cookie-always { color: #1f8a4c; font-weight: 700; font-size: .82rem; white-space: nowrap; }
.cookie-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cookie-actions .btn { flex: 1; justify-content: center; min-width: 120px; }
.cookie-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.cookie-slider { position: absolute; inset: 0; cursor: pointer; background: #c4ccc7; border-radius: 999px; transition: .2s; }
.cookie-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s; }
.cookie-switch input:checked + .cookie-slider { background: #e8772e; }
.cookie-switch input:checked + .cookie-slider::before { transform: translateX(18px); }

/* Inline form error banner (shown at the top of a form box) */
.form-err { background: var(--red-soft); border: 1px solid #f1c4c4; color: #a32020;
  border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; font-size: .88rem; font-weight: 600; }
.form-err[hidden] { display: none; }

/* Modal dialog (forgot-password popup, etc.) */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,25,20,.45); z-index: 1100;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-card { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  max-width: 420px; width: 100%; padding: 20px 22px;
  /* Tall modals (e.g. the Freemium explainer) must scroll inside the viewport
     instead of overflowing a vertically-centred overlay and being clipped. */
  max-height: calc(100vh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-card h3 { margin-bottom: 4px; }
.role-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 6px 5px 12px; font-size: .85rem; }
.role-pill .who { font-weight: 700; }
/* Settings panel section headings */
.set-h { font-size: 1rem; font-weight: 700; margin: 20px 0 8px; color: var(--ink); }
.set-h:first-child { margin-top: 2px; }

/* ---------- layout ---------- */
.app { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 60px; }
.app.full { max-width: 100%; padding: 0; }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spread { justify-content: space-between; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.center { text-align: center; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.card.pad-lg { padding: 24px; }
/* Cloudflare Turnstile renders a fixed 300px widget; on very narrow phones (<=320px)
   that is wider than the card content box and would force the whole page to scroll
   sideways. Contain it to its own box so only the widget scrolls, never the page. */
.cf-turnstile { max-width: 100%; overflow-x: auto; }
.ts-failed { color: var(--amber); background: var(--amber-soft); border: 1px solid #e5cfa4;
  border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; line-height: 1.4; }
@media (max-width: 360px) { .card.pad-lg { padding: 16px; } }
.card.click { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.card.click:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9rem;
  padding: 9px 16px; border-radius: 9px; transition: background .12s, border-color .12s, transform .05s; }
.btn:hover { background: var(--bg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { filter: brightness(.95); }
.btn.success { background: var(--green); border-color: var(--green); color: #fff; }
.btn.success:hover { filter: brightness(.95); }
.btn.danger-outline { color: var(--red); border-color: #f1c4c4; }
.btn.danger-outline:hover { background: var(--red-soft); }
.btn.sm { padding: 6px 11px; font-size: .82rem; }
.btn.block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- badges / pills ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; text-transform: uppercase; }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.blue { background: var(--brand-soft); color: var(--brand); }
.badge.grey { background: var(--bg); color: var(--ink-soft); }
.badge.appr { background: var(--brand-soft); color: var(--brand-dark); }
/* Founder Guild image badge (first 100 founding trades) */
.founder-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800;
  color: var(--amber); letter-spacing: .02em; }
.founder-badge img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.founder-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--amber-soft); border: 1px solid rgba(0,0,0,.06); }
.founder-card .founder-badge img { width: 34px; height: 34px; }
/* "Open to apprentices" toggle in the company profile editor */
.appr-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--brand-soft); cursor: pointer; }
.appr-opt input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.appr-filter label.chip { margin-top: 2px; }
/* Careers page */
.careers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 12px 0 4px; }
.careers-route { display: flex; align-items: flex-start; gap: 12px; }
.careers-route .cr-ic { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
/* Apprentice worker-record */
.chip.appr { background: var(--brand-soft); border-color: var(--brand); }
.record-table td { vertical-align: top; }
.contact-list { display: flex; flex-direction: column; gap: 6px; }
.contact-list .ct-row { font-size: .95rem; }
/* Shared completion / inspection report (customer-facing) */
.report { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 4px 12px; margin-top: 8px; }
.report-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.report-row:last-of-type { border-bottom: 0; }
.report-k { flex: 0 0 132px; font-weight: 600; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; }
.report-v { flex: 1; font-size: .92rem; line-height: 1.45; min-width: 0; }
.report-disc { margin: 8px 0 4px; padding-top: 8px; border-top: 1px dashed var(--line); font-style: italic; }
/* HomeCare flagship band (homepage + explainer) */
.hc-hero { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #f5f0e4; border-radius: 16px; padding: 22px 24px; }
.hc-hero .hc-tag { display: inline-block; background: rgba(255,255,255,.16); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.hc-hero .hc-h { color: #fff; margin: .35em 0 .15em; font-size: 1.7rem; line-height: 1.15; }
.hc-hero .hc-p { color: #eaf2ec; max-width: 720px; margin: .2em 0 .9em; }
.hc-hero .hc-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hc-hero .hc-cta .btn { background: #fff; color: var(--brand-dark); border-color: #fff; font-weight: 700; }
.hc-hero .hc-cta .btn:hover { background: #f0ece0; }
.hc-hero .hc-cta .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.hc-hero .hc-cta .btn.ghost:hover { background: rgba(255,255,255,.12); }
.hc-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 18px; }
.hc-feat .hc-card { background: rgba(255,255,255,.12); border-radius: 12px; padding: 12px 14px; }
.hc-feat .hc-card .ic { font-size: 1.5rem; line-height: 1; }
.hc-feat .hc-card b { display: block; margin-top: 6px; color: #fff; }
.hc-feat .hc-card span { font-size: .82rem; color: #e4ede6; }
.hc-step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .8rem; }
/* HomeCare pricing (monthly-first) + value features */
.hc-price { font-size: 1.9rem; font-weight: 800; color: var(--brand); line-height: 1.05; }
.hc-price .hc-per { font-size: .95rem; font-weight: 600; color: var(--muted); }
.hc-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.hc-plan { padding: 16px 14px; position: relative; }
.hc-plan.pop { border: 2px solid var(--brand); }
.hc-poptag { position: absolute; top: -10px; right: 12px; }
.hc-welcome { background: var(--brand-soft); border-color: var(--brand); }
.btn.lg { padding: 12px 20px; font-size: 1.02rem; }
.hc-quickadd { padding: 12px 14px; }
.hc-quickadd .chip { cursor: pointer; }
.hc-quickadd .chip:hover { border-color: var(--brand); background: var(--brand-soft); }
.hc-locked { background: var(--bg); border-style: dashed; }
/* Homepage announcement banner (Owner campaigns) */
.annc-bar { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.annc-bar .annc-msg { flex: 1; font-weight: 600; font-size: .95rem; }
.annc-bar .annc-x { flex: none; background: rgba(255,255,255,.2); color: #fff; border: 0; border-radius: 999px; width: 26px; height: 26px; cursor: pointer; font-size: 1.15rem; line-height: 1; }
.annc-bar .annc-x:hover { background: rgba(255,255,255,.38); }
/* Trade request status tabs + stale nudge */
.req-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.req-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--muted); }
.req-tab:hover { border-color: var(--brand); }
.req-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.req-tab .req-n { background: rgba(0,0,0,.12); border-radius: 999px; padding: 0 7px; font-size: .78rem; }
.req-tab.active .req-n { background: rgba(255,255,255,.28); }
.req-tab.warn:not(.active) { border-color: #e0a23c; color: #9a6b16; }
.req-nudge { margin-top: 8px; font-size: .85rem; color: #9a6b16; background: #fbf3e2; border: 1px solid #f0d9a8; border-radius: 8px; padding: 6px 10px; }
.req-nudge.flag { color: #8a3d12; background: #fbe7df; border-color: #f0c4b0; }
/* Support mailbox (reported issues) */
.issue-bubble { cursor: pointer; user-select: none; transition: border-color .12s ease; }
.issue-bubble:hover { border-color: var(--brand); }
.issue-bubble .issue-title { font-size: 1rem; }
.issue-bubble.unread { border-left: 4px solid var(--brand); background: var(--brand-soft); }
.issue-bubble.unread .issue-title, .issue-bubble.unread .small { font-weight: 700; }
/* Compare-quotes (multi-trade enquiry) */
.cmp-row { margin: -6px 0 0 4px; }
.cmp-row .chip { cursor: pointer; }
.cmp-row .chip:hover { border-color: var(--brand); }
.cmp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 12px; padding: 10px 14px; position: sticky; top: 8px; z-index: 5; }
@media print {
  .topbar, .footer, .side, .no-print, #toast, .navlink { display: none !important; }
  .app, .app.full, .portal-main { padding: 0 !important; margin: 0 !important; }
  .portal { display: block !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
  a[href]:after { content: ""; }
}
.chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px; font-size: .8rem; color: var(--ink-soft); }
.verified { color: var(--green); font-weight: 700; }

.stars { color: #f5a623; letter-spacing: 1px; }
.rating-num { font-weight: 800; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: .85rem; margin: 0 0 5px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; color: var(--ink); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
textarea { min-height: 90px; resize: vertical; }
.field { margin-bottom: 14px; }
.help { font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }

/* ---------- hero / landing ---------- */
/* Free-to-list launch banner (trade recruitment). Warm orange->yellow so it pops
   against the cream page; dark text + green accents stay legible on the bright
   gradient (white text would wash out on the yellow end). */
.launch-banner { display: block; text-decoration: none; margin-bottom: 16px; border-radius: 16px;
  background: linear-gradient(120deg, #f5901f 0%, #ffd23f 100%); color: var(--ink);
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.launch-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
.launch-banner-in { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 16px 22px; }
.launch-banner-h { font-size: 1.2rem; font-weight: 800; line-height: 1.2; color: #1f2a24; }
.launch-banner-h .hl { color: #17402c; }
.launch-banner-sub { font-size: .92rem; margin-top: 4px; color: #4a3410; }
.launch-banner-cta { background: var(--brand); color: #fff; font-weight: 800; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* Free-to-list offer card (Explorer shown as FREE for 3 months). */
.hc-plan.free-offer { border: 2px solid var(--brand); box-shadow: 0 6px 18px rgba(32,90,64,.18); }
.hc-plan.free-offer .hc-price { color: var(--brand); }

.hero { background: linear-gradient(135deg, #205a40 0%, #17402c 100%); color: #fff;
  border-radius: 18px; padding: 48px 40px; margin-bottom: 28px; box-shadow: var(--shadow-lg); }
/* No artificial max-width: the heading/intro use the full hero width and only
   wrap when the viewport actually gets narrower (was clamped to 16ch/54ch,
   which forced a squashed multi-line column even on wide screens). */
.hero h1 { font-size: 2.4rem; color: #fff; max-width: none; }
.hero p { color: #dceae0; font-size: 1.05rem; max-width: none; }
.searchbar { background: #fff; border-radius: 14px; padding: 14px; display: grid; gap: 10px;
  grid-template-columns: 1.4fr 1fr .9fr .9fr auto; align-items: end; box-shadow: var(--shadow); }
.searchbar label { color: var(--ink-soft); }
@media (max-width: 860px) { .searchbar { grid-template-columns: 1fr; } }
.searchbar .svc-field { grid-column: 1 / -1; margin-bottom: 2px; }
/* Homepage search omits the Min-rating filter (kept on the results page),
   so it uses a tighter 3-column row: postcode · within · button. */
.searchbar-home { grid-template-columns: 1.6fr 1fr auto; }
@media (max-width: 860px) { .searchbar-home { grid-template-columns: 1fr; } }
/* Live postcode autocomplete */
.pc-ac { position: relative; }
.pc-ac-input { width: 100%; }
.pc-ac-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; }
.pc-ac-list[hidden] { display: none; }
.pc-ac-item { padding: 9px 12px; cursor: pointer; font-size: .9rem; color: var(--ink); }
.pc-ac-item:hover { background: var(--brand-soft); }
.svc-multi { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; overflow-y: auto; }
.svc-multi .svc-chip { cursor: pointer; background: var(--bg); color: var(--ink-soft); user-select: none; }
.svc-multi .svc-chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }
.stat-strip { display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; }
.stat-strip .s { color: #cfe0d5; }
.stat-strip .s b { display: block; color: #fff; font-size: 1.5rem; }

.svc-grid .svc { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; text-align: center; }
.svc .ic { font-size: 1.8rem; }
.svc .nm { font-weight: 600; font-size: .9rem; }
/* branded service badge icons */
.svc-img { width: 52px; height: 52px; object-fit: contain; display: block; }
.svc-ic { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; }

/* ---------- company cards ---------- */
.co-logo { width: 46px; height: 46px; border-radius: 11px; background: var(--brand-soft);
  display: grid; place-items: center; font-size: 1.4rem; flex: none; overflow: hidden; }
.co-logo.lg { width: 64px; height: 64px; font-size: 1.9rem; }
.co-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-logo.brandfill { background: var(--brand); }
.co-logo.brandfill img { object-fit: contain; padding: 22%; box-sizing: border-box; }
.logo-preview { width: 64px; height: 64px; border-radius: 11px; object-fit: cover;
  border: 1px solid var(--line); display: block; flex: none; }
span.logo-preview { display: grid; place-items: center; overflow: hidden; }
span.logo-preview.brandfill { background: var(--brand); }
span.logo-preview img { width: 60%; height: 60%; object-fit: contain; }
/* ---------- reliability score + achievements ---------- */
.rel { margin: 6px 0; }
.rel-score { font-weight: 800; font-size: 1.4rem; color: var(--brand); }
.ach-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ach { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface); }
.ach.on { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand-soft); }
.ach.off { opacity: .45; filter: grayscale(1); }
.ach-ic { font-size: 1rem; }
.list { display: flex; flex-direction: column; gap: 12px; }

/* ---------- portal shell ---------- */
.portal { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 88px); }
@media (max-width: 860px) { .portal { grid-template-columns: 1fr; } }
.side { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 12px; }
.side .who { padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: var(--bg); }
.side .who b { display: block; }
.side a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
  color: var(--ink-soft); font-weight: 600; font-size: .9rem; }
.side a:hover { background: var(--bg); text-decoration: none; }
.side a.active { background: var(--brand-soft); color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
/* Item A: text-led professional navigation — hide the decorative nav glyphs across
   all portal sidebars (trade, worker, viewer, admin) and the footer links. */
.side a .ic { display: none; }
.portal-main { padding: 24px; max-width: 1000px; }

.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi .n { font-size: 1.9rem; font-weight: 800; }
.kpi .l { color: var(--ink-soft); font-size: .85rem; }

/* ---------- tables ---------- */
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: .9rem; }
table.data th { color: var(--ink-soft); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
table.data tr:last-child td { border-bottom: none; }
/* Wrap a wide table so it scrolls WITHIN its card instead of spilling the whole
   page sideways (e.g. the owner Discount-codes table: many columns + a no-wrap
   actions cell). The table keeps a sensible minimum width and the wrapper takes
   the horizontal scroll. */
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table.data { min-width: 560px; }

/* ---------- calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal .day { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 92px; }
.cal .day .dow { font-size: .72rem; color: var(--ink-soft); text-transform: uppercase; font-weight: 700; }
.cal .day .dom { font-weight: 800; margin-bottom: 6px; }
.cal .day.today { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cal .ev { background: var(--brand-soft); color: var(--brand-dark); font-size: .74rem; font-weight: 600;
  padding: 3px 6px; border-radius: 6px; margin-bottom: 4px; }
@media (max-width: 860px) { .cal { grid-template-columns: 1fr; } .cal .day { min-height: auto; } }
/* month grid — planning calendar */
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { font-size: .7rem; color: var(--ink-soft); text-transform: uppercase; font-weight: 700; text-align: center; padding: 2px 0; }
.cal-cell { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 5px; min-height: 84px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.cal-cell.blank { background: transparent; border: none; cursor: default; }
.cal-cell:hover:not(.blank) { border-color: var(--brand); }
.cal-cell .cal-dom { font-weight: 700; font-size: .82rem; color: var(--ink-soft); margin-bottom: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cal-cell.today { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cal-cell.today .cal-dom { color: var(--brand-dark); }
.cal-cell.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.cal-cell.is-holiday { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 7px, #ecfeff 7px, #ecfeff 14px); }
.cal-hol { font-size: .7rem; line-height: 1; }
.cal-off { font-size: .6rem; color: #b91c1c; font-weight: 700; }
.cal-ev { background: var(--brand-soft); color: var(--brand-dark); font-size: .68rem; font-weight: 600;
  padding: 2px 5px; border-radius: 5px; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 3px solid var(--brand); }
.cal-more { font-size: .62rem; color: var(--ink-soft); font-weight: 600; }
.cal-dots { display: none; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--brand); flex: none; }
/* staff filter chips */
.cal-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.cal-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
/* Mobile: hide the text chips, show compact coloured dots; the tap-a-day panel
   carries the full detail so nothing is lost on a small screen. */
@media (max-width: 640px) {
  .cal-month { gap: 4px; }
  .cal-cell { min-height: 52px; padding: 3px; }
  .cal-cell .cal-dom { font-size: .74rem; margin-bottom: 1px; }
  .cal-evs { display: none; }
  .cal-dots { display: flex; }
}
@media (max-width: 380px) {
  .cal-cell { min-height: 44px; }
  .cal-dot { width: 6px; height: 6px; }
  .cal-chip { font-size: .72rem; padding: 3px 7px; }
}
/* ---------- calendar: view switcher + week / day / agenda ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-views { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.cal-vbtn { border: none; background: var(--surface); color: var(--ink); font-size: .8rem; font-weight: 600; padding: 7px 13px; min-height: 34px; cursor: pointer; }
.cal-vbtn + .cal-vbtn { border-left: 1px solid var(--line); }
.cal-vbtn.on { background: var(--brand); color: #fff; }
.cal-nav { display: inline-flex; gap: 4px; }
.cal-label { font-size: 1.02rem; margin-left: auto; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-wkcol { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 5px; min-height: 90px; display: flex; flex-direction: column; }
.cal-wkcol.today { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cal-wkhd { font-weight: 700; font-size: .8rem; color: var(--ink-soft); margin-bottom: 4px; cursor: pointer; }
.cal-wkcol.today .cal-wkhd { color: var(--brand-dark); }
.cal-wkbody { display: flex; flex-direction: column; gap: 4px; }
.cal-wkempty { text-align: center; opacity: .6; }
.cal-daylist, .cal-agday { display: flex; flex-direction: column; gap: 6px; }
.cal-agenda { display: flex; flex-direction: column; gap: 14px; }
.cal-aghd { font-weight: 700; font-size: .85rem; color: var(--brand-dark); border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 2px; }
.cal-jobrow { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: 7px; padding: 6px 9px; cursor: pointer; transition: border-color .12s; }
.cal-jobrow:hover { border-color: var(--brand); }
.cal-jrt { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .8rem; color: var(--ink-soft); flex: none; min-width: 42px; }
.cal-jrn { font-weight: 600; font-size: .85rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-jrw { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* UK bank-holiday placeholders (display-only, never block) */
.cal-bh { font-size: .72rem; line-height: 1; }
.cal-bhbanner { background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 8px;
  padding: 6px 10px; font-size: .82rem; margin: .45em 0; }
/* readability: a touch more room + clearer "today" on larger screens */
@media (min-width: 641px) {
  .cal-cell { min-height: 96px; padding: 6px; }
  .cal-ev { font-size: .72rem; padding: 2px 6px; }
  .cal-cell .cal-dom { font-size: .85rem; }
}
@media (max-width: 640px) {
  .cal-week { grid-template-columns: 1fr; }      /* stack days vertically on mobile */
  .cal-wkcol { min-height: 0; flex-direction: row; align-items: flex-start; gap: 8px; }
  .cal-wkhd { min-width: 64px; margin-bottom: 0; }
  .cal-wkbody { flex: 1; }
  .cal-label { margin-left: 0; flex-basis: 100%; }
  .cal-jrw { display: none; }
}

/* ---------- photos / thumbs ---------- */
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ---------- quote builder ---------- */
.qline { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.qline .rm { cursor: pointer; color: var(--red); border: none; background: none; font-size: 1.1rem; }
.qtotal { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Accounting presentation: amount cells already right-align inline — give every
   right-aligned figure tabular (monospaced) digits so pounds and pence stack in a
   column, and right-align the quote/invoice line-amount inputs to match. */
td[style*="text-align:right"], th[style*="text-align:right"] { font-variant-numeric: tabular-nums; }
.qline input[type="number"], input[data-qamount] { text-align: right; font-variant-numeric: tabular-nums; }
/* Price-list type-ahead on quote/invoice line descriptions. */
.ql-ac { position: relative; }
.ql-ac > input { width: 100%; }
.ql-ac-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg);
  max-height: 220px; overflow-y: auto; }
.ql-ac-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; cursor: pointer;
  font-size: .88rem; border-bottom: 1px solid var(--line-soft, var(--line)); }
.ql-ac-item:last-child { border-bottom: 0; }
.ql-ac-item:hover { background: var(--brand-soft); }
.ql-ac-item .p { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
/* Trade-side holiday warning under a booking-assignment date (never customer-facing). */
.hol-flag { display: none; flex-basis: 100%; margin: 6px 0 2px; padding: 8px 10px; border-radius: 8px;
  background: #fff6f0; border: 1px solid #f0c9a8; color: #8a4b1e; font-size: .85rem; line-height: 1.35; }
.hol-flag.on { display: block; }

/* ---------- empty states ---------- */
.empty { text-align: center; color: var(--ink-soft); padding: 40px 20px; }
.empty .ic { font-size: 2.2rem; display: block; margin-bottom: 8px; }

/* ---------- timeline ---------- */
.steps { display: flex; gap: 0; margin: 6px 0 4px; }
.steps .step { flex: 1; text-align: center; font-size: .72rem; color: var(--ink-soft); position: relative; padding-top: 18px; }
.steps .step::before { content: ''; position: absolute; top: 5px; left: 50%; width: 11px; height: 11px;
  border-radius: 50%; background: var(--line); transform: translateX(-50%); }
.steps .step::after { content: ''; position: absolute; top: 10px; left: 50%; width: 100%; height: 2px; background: var(--line); }
.steps .step:last-child::after { display: none; }
.steps .step.done::before { background: var(--green); }
.steps .step.done { color: var(--green); font-weight: 700; }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow-lg);
  font-size: .9rem; max-width: 320px; animation: slidein .2s ease; }
.toast.ok { background: #16331f; border-left: 4px solid var(--green); }
.toast.info { background: #14233f; border-left: 4px solid var(--brand); }
@keyframes slidein { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding: 34px 20px 24px;
  color: var(--ink-soft); font-size: .85rem; }
.footer-grid { max-width: var(--maxw); margin: 0 auto; display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 28px; }
.footer-col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink); margin: 0 0 10px; }
.footer-col a { display: block; color: var(--ink-soft); padding: 3px 0; }
.footer-col a:hover { color: var(--brand); text-decoration: none; }
.footer-brand .footer-word { font-weight: 800; font-size: 1.25rem; color: var(--brand); letter-spacing: -.01em; }
.footer-brand .footer-tag { margin: 8px 0 10px; max-width: 34ch; line-height: 1.5; }
.footer-brand .footer-contact { margin: 0; }
.footer-brand .footer-contact a { color: var(--brand); font-weight: 600; }
.footer-bottom { max-width: var(--maxw); margin: 24px auto 0; padding-top: 16px;
  border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: .8rem; line-height: 1.5; }
.footer-bottom .footer-legal-entity { color: var(--ink-soft); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- misc ---------- */
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.notice { background: var(--amber-soft); border: 1px solid #f0dca8; color: #6b4e00; padding: 10px 14px;
  border-radius: 9px; font-size: .85rem; }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- gamification ---------- */
.rank-pill { display:inline-flex; align-items:center; gap:6px; background:var(--brand-soft); color:var(--brand-dark);
  border:1px solid #cfe0d5; padding:4px 11px; border-radius:999px; font-weight:700; font-size:.8rem; }
.xpbar { height:8px; background:var(--line); border-radius:999px; overflow:hidden; margin:7px 0 4px; }
.xpbar > span { display:block; height:100%; background:var(--brand); border-radius:999px; transition:width .4s ease; }
.diff { display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:800; padding:2px 8px;
  border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.diff.bronze{ background:#f1e6d5; color:#8a6d3b; } .diff.silver{ background:#e9ecef; color:#5b6675; }
.diff.gold{ background:#fbf0cf; color:#9a7a0b; } .diff.platinum{ background:#dfeaf5; color:#2f5d99; }
.diff.mythic{ background:#efe1f5; color:#6f3aa0; }
.clan-card { background:linear-gradient(135deg,#205a40,#17402c); color:#fff; border-radius:14px; padding:20px; box-shadow:var(--shadow); }
.clan-card h2 { color:#fff; }
.clan-card .rank-pill { background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.28); }
.clan-card .xpbar { background:rgba(255,255,255,.22); } .clan-card .xpbar > span { background:#dceae0; }
.rank-ic { width:20px; height:20px; object-fit:contain; vertical-align:middle; flex:none; }
.clan-ic { width:40px; height:40px; object-fit:contain; flex:none; }
.diff-ic { width:14px; height:14px; object-fit:contain; }
.rank-pill img { width:18px; height:18px; object-fit:contain; }
/* level-up celebration */
.levelup-overlay { position:fixed; inset:0; background:rgba(23,40,30,.62); display:grid; place-items:center; z-index:200; animation:slidein .2s ease; padding:20px; }
.levelup-card { background:#fff; border-radius:18px; padding:28px 32px 24px; text-align:center; max-width:360px; box-shadow:var(--shadow-lg); }
.levelup-card .burst { font-size:1.7rem; letter-spacing:6px; }
.levelup-icon { width:130px; height:130px; object-fit:contain; margin:6px auto 2px; display:block; filter:drop-shadow(0 6px 14px rgba(20,30,50,.18)); }
.levelup-card h2 { color:var(--brand); margin:.25em 0 .1em; }

/* Quote comparison table (customer portal) */
.cmp-tbl-wrap { overflow-x: auto; }
.cmp-table { min-width: 520px; }
.cmp-table th:first-child { width: 130px; color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; vertical-align: top; }
.cmp-table thead th { font-size: .98rem; }
.cmp-table td, .cmp-table th { padding: 9px 10px; }
.cmp-table .cmp-await { opacity: .5; }
.cmp-table thead th.cmp-await { opacity: .65; }

/* ---- Pipeline / Status board (Fergus-inspired) ---- */
.pipe-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.pipe-col { flex: 0 0 250px; min-width: 250px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.pipe-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; margin-bottom: 8px; }
.pipe-count { margin-left: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: .78rem; color: var(--muted); }
.pipe-card { display: block; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; color: inherit; text-decoration: none; }
.pipe-card:hover { border-color: var(--brand); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.pipe-card.lv-urgent { border-left-color: var(--red); }
.pipe-card.lv-warn { border-left-color: var(--amber); }
.pipe-card.lv-ok { border-left-color: var(--green); }
.pipe-card b { font-weight: 650; font-size: .9rem; }
.pipe-right { white-space: nowrap; color: var(--muted); font-weight: 600; }
.pipe-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.pipe-dot.red { background: var(--red); }
.pipe-dot.amber { background: var(--amber); }
.pipe-dot.green { background: var(--green); }
.pipe-empty { padding: 10px 4px; text-align: center; }
.pipe-status { width: 100%; padding: 5px 8px; font-size: .82rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }

/* ---- On/Off toggle switch ---- */
.switch { position: relative; width: 50px; height: 28px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; padding: 0; transition: background .15s ease; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s ease; }
.switch.on { background: var(--green); border-color: var(--green); }
.switch.on .knob { left: 24px; }
.switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Sidebar group headers (Work / Finance / Business / Account) */
.side-grp { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); font-weight: 700; padding: 12px 12px 3px; opacity: .75; }
.side-grp:first-of-type { padding-top: 4px; }
/* Customer Overview quick-stat tiles (item A customer sidebar). */
.cust-tile { display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: inherit; }
.cust-tile .cust-n { font-size: 1.9rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
.cust-tile .cust-l { font-weight: 650; }
.cust-tile:hover { border-color: var(--brand); }
/* ---------- feature landing pages + homepage path chooser (item C) ---------- */
.lp-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--brand); }
.lp-hero { padding: 8px 0 6px; }
.lp-hero h1 { font-size: 2.1rem; margin: .18em 0 .15em; max-width: 22ch; }
.lp-lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 60ch; }
.lp-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.lp-sec { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.lp-sec > h2 { font-size: 1.5rem; margin: 0 0 .2em; }
.lp-sec .lp-eyebrow { display: block; margin-bottom: 2px; }
.lp-accent { background: var(--brand-soft); border-radius: 16px; padding: 22px; }
.lp-list { margin: 12px 0 0; padding-left: 18px; }
.lp-list li { margin: 6px 0; }
.lp-final { text-align: center; }
.lp-final .lp-cta { justify-content: center; }
.flowstrip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.flowstrip .fs-step { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-weight: 650; font-size: .88rem; }
.flowstrip .fs-arrow { color: var(--brand); font-weight: 800; }
.lp-accent .flowstrip .fs-step { background: #fff; border-color: var(--brand); }
.path-card { display: block; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.path-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.path-ic { font-size: 1.8rem; }
.path-go { display: inline-block; margin-top: 8px; color: var(--brand); font-weight: 650; font-size: .9rem; }

/* --- HomeCare sub-navigation + landlord UX (module 81 phase 1.1) --- */
.side a.sub { padding-left: 30px; font-size: .92em; opacity: .92; }
.prop-switch { max-width: 190px; padding: 5px 8px; font-size: .85rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.hc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.hc-dot.red { background: var(--red); }
.hc-dot.amber { background: #d9931f; }
.hc-dot.green { background: var(--brand); }
.hc-tabs .chip { text-decoration: none; }
.hc-ok-table td { vertical-align: middle; }
.hc-task-opts td { background: var(--brand-soft); border-bottom: 1px solid var(--line); }

/* --- "Needs your attention" panel (module 82 phase) --- */
.hc-attn { background: #16323b; color: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.hc-attn-head { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; opacity: .85; margin-bottom: 8px; }
.hc-attn-row { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
  padding: 8px 6px; border-radius: 8px; }
.hc-attn-row:hover { background: rgba(255,255,255,.08); }
.hc-attn-row + .hc-attn-row { border-top: 1px solid rgba(255,255,255,.12); }
.hc-attn-n { background: var(--red); color: #fff; font-weight: 800; font-size: .85rem;
  min-width: 26px; height: 26px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.hc-attn-go { margin-left: auto; opacity: .7; }
.hc-attn.allclear { background: var(--brand-soft); color: inherit; border: 1px solid var(--line); }