/* ─── LAWCLERK · Design H · Greatest Hits ──────────────────────────────────
   Combines the strongest signature element from each of A–G while staying
   strictly inside LAWCLERK's canonical Version B (Modern) design tokens.
   See CLAUDE-style header in v15/index.html for the per-element provenance. */

/* Cross-document View Transitions: opt-in via at-rule so the browser
   smoothly animates between /v15/index.html and /v15/work.html when the
   user clicks the audience toggle (Chrome 126+). Other browsers fall
   back to a normal navigation. */
@view-transition {
  navigation: auto;
}

/* Root cross-fade. The default fades BOTH old and new through partial opacity
   at once, so mid-transition the (light) page background shows through as a
   white flash. Instead, hold the old frame fully opaque and fade the new one
   in on top of it — a clean dissolve with no white dip on the audience toggle. */
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: lc-vt-root-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lc-vt-root-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Tab indicator — the white pill behind the active tab gets a shared name
   so the browser morphs its position from one tab to the other instead of
   cross-fading. This is what makes the indicator slide smoothly. */
::view-transition-group(tab-indicator) {
  animation-duration: 0.36s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;  /* sits BELOW the tab text snapshots (z-index 3 below) */
}
::view-transition-old(tab-indicator),
::view-transition-new(tab-indicator) {
  animation: none;  /* group handles position; suppress default crossfade */
}

/* Each tab gets its own stable transition name so its TEXT LABEL stays
   visible during the slide instead of being part of the root cross-fade.
   Use :nth-of-type so the selectors aren't broken by the .hero-tab-indicator
   sibling (which is a <div>, while tabs are <a>). */
.hero-tabs .hero-tab:first-of-type  { view-transition-name: tab-1 }
.hero-tabs .hero-tab:last-of-type   { view-transition-name: tab-2 }
::view-transition-group(tab-1),
::view-transition-group(tab-2){
  animation-duration: 0.36s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;  /* text labels render ABOVE the sliding pill (which is z-index 1) */
}
/* Don't cross-fade the labels — both pages have the same labels in the
   same positions; the text just needs to stay on top of the moving pill. */
::view-transition-old(tab-1),
::view-transition-new(tab-1),
::view-transition-old(tab-2),
::view-transition-new(tab-2){ animation: none; mix-blend-mode: normal }

/* The hero-tabs container itself also gets a name so its rounded background
   stays anchored (sits below the indicator). */
.hero-tabs{ view-transition-name: tabs-container }
::view-transition-group(tabs-container){
  animation-duration: 0.36s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
::view-transition-old(tabs-container),
::view-transition-new(tabs-container){ animation: none }

/* Hero content rises gently on page load (and on view transition entry) */
@keyframes lc-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Above-the-fold hero copy rises WITHOUT fading. It must never render
   invisible, even while a heavy page (e.g. the blog index building 240 cards)
   holds the main thread and stalls the animation at its pre-state. A
   transform-only entrance keeps the text readable and its LCP paint immediate;
   worst case under jank is the copy sitting a few px low for a beat, never
   blank. Images below (.hero-vis) keep the opacity fade. */
@keyframes lc-rise {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}
.hero-in > div:first-child > * {
  animation: lc-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-in > div:first-child > .hero-tabs   { animation-delay: 0.02s }
.hero-in > div:first-child > h1            { animation-delay: 0.08s }
.hero-in > div:first-child > .hero-lede    { animation-delay: 0.14s }
.hero-in > div:first-child > .hero-cta-wrap{ animation-delay: 0.20s }
.hero-in > div:first-child > .platform-pill{ animation-delay: 0.26s }
.hero-in > div:first-child > .hero-trust   { animation-delay: 0.32s }
.hero-vis { animation: lc-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(tab-indicator) { animation-duration: 0.01s }
  .hero-in > div:first-child > *,
  .hero-vis { animation: none }
  /* LAW-582 global fallback: finish every animation/transition instantly so
     scroll reveals still reach their visible end state without motion */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Canonical LAWCLERK tokens — same as Version B (Next.js) */
  --navy:#3A4B5B;
  --navy-light:#4E6374;
  --navy-deep:#2A3845;          /* deep navy for stat band + CTA */
  --gold:#C6B25D;
  --gold-light:#D5C47B;
  --gold-deep:#A89844;
  --gold-tint:#F2EED9;           /* pale gold tint for pill bgs, hover washes */
  --gold-glow:rgba(198,178,93,.22);
  --cream:#EAE8E7;
  --bg:#D6E4EC;                  /* LAWCLERK light-blue page background */
  --bg-card:#FFFFFF;
  --bg-muted:#F5F4F3;
  --foreground:#3A4B5B;
  --post-ink:#3f4c58;              /* long-form body reading ink */
  --muted-foreground:#5D5D5D;
  --ink3:#7A858F;
  --border:#C8D5DE;
  --border-soft:#DCE5EC;
  --status:#7BB67E;               /* "available now" status dot */
  --radius:12px;
  --gutter:clamp(28px,5vw,72px);  /* responsive horizontal page gutter */
  --maxw:1180px;                  /* shared content width — nav, hero, sections align */

  /* LAW-784 issue 1. Tells the browser which palette to paint NATIVE controls
     with — the <select> popup, scrollbars, date pickers. Page CSS cannot style
     an opened <select> popup in Chromium; `color-scheme` is the only lever.
     Undeclared, the browser assumed `light` and painted the popup white, while
     the dark rules set the options' inherited colour to #fff. White on white:
     every option invisible except the highlighted row, on every page carrying
     the demo form. Measured 1.00:1 before, 12.00:1 after. */
  color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark}
/* Belt and braces to the line above. A select's own color:#fff is correct for
   the CLOSED control -- it sits on a translucent white layer over the dark page
   -- and wrong for the OPEN popup, which the OS paints. Kept GLOBAL rather than
   scoped to .demo-field, because .atty-filter select carries the same
   color:#fff and any select added later inherits the same trap. */
:root[data-theme="dark"] option{background-color:#2A3845;color:#fff}
/* Deliberately NOT scroll-behavior:smooth (LAW-710). On the root element that
   property also animates plain keyboard and scrollbar scrolling — arrow keys and
   PageDown took ~1525ms to settle instead of ~260ms, which reads as the page
   lagging behind the reader. In-page anchor scrolling is smooth via nav-scroll.js,
   which intercepts every a[href^="#"] and passes behavior:'smooth' explicitly, so
   nothing intentional is lost here. Don't reintroduce the global rule. */
html{scroll-behavior:auto}
body{font-family:'Geist','Inter',-apple-system,sans-serif;background:var(--bg);color:var(--foreground);font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ─── Top banner ──────────────────────────────────────────────────── */
.banner{background:var(--navy);color:rgba(255,255,255,.9);text-align:center;padding:10px 24px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:12px}
.banner-pill{background:var(--gold);color:var(--navy);font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:3px 10px;border-radius:9999px}
.banner a{color:var(--gold-light);font-weight:500;border-bottom:1px solid rgba(213,196,123,.4)}
.banner a:hover{color:#fff;border-bottom-color:#fff}

/* ─── Nav — 3-button trio + path pill (from G + E) ────────────────── */
nav{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);height:68px;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border)}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 var(--gutter);gap:10px}
.logo{flex-shrink:0}
.logo img{height:28px;width:auto;display:block}
/* LAW-784 issue 2. The wordmark is a PNG whose "LAW" half is #5D5D5D, tuned for
   a light page. On the dark nav and footer that is 2.10:1 -- present, unreadable.
   Swap the asset rather than filter it: `brightness(0) invert(1)` would whiten
   the gold "CLERK" too, and a filter cannot recolour one half only.

   lawclerk-logo-white-gold.png is DERIVED from lawclerk-logo.png, not the
   1334x118 file in LC-HTML/230102_HourlyAssociate. That one is a different
   lockup -- 11.31:1 ink ratio against this logo's 5.54:1 -- so it would have
   changed the wordmark's proportions in dark mode only. This version recolours
   the neutral pixels to white and leaves every gold pixel and every glyph
   position untouched, so the two themes are the same mark. 13.82:1.

   A `content:url()` swap keeps this to CSS; the alt text on the <img> still
   carries the accessible name. */
:root[data-theme="dark"] .logo img{content:url("/v17/lawclerk-logo-white-gold.png")}
.nav-links{display:flex;gap:2px;align-items:center;flex-shrink:1;min-width:0;margin-left:auto}
.nav-links a{display:inline-flex;align-items:center;line-height:1;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;color:var(--navy);padding:7px 8px;border-radius:8px;transition:all .2s;white-space:nowrap;letter-spacing:0}
.nav-links>a,.nav-links .nav-dd{align-self:center}
.nav-links a:hover{color:var(--gold-deep);background:rgba(198,178,93,.08)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.path-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border);border-radius:9999px;font-family:'Geist',sans-serif;font-size:12px;font-weight:500;color:var(--navy);background:var(--bg-muted);transition:all .2s;text-decoration:none;white-space:nowrap;flex-shrink:0}
.path-pill:hover{border-color:var(--navy);background:#fff;box-shadow:0 2px 8px rgba(58,75,91,.08)}
.path-pill::after{content:'→';color:var(--gold-deep);transition:transform .2s;font-weight:600;margin-left:2px}
.path-pill:hover::after{transform:translateX(3px)}
.path-pill strong{font-weight:600}
.path-pill small{color:var(--muted-foreground);font-weight:400}
.btn-text{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);padding:9px 10px;background:transparent;cursor:pointer;text-decoration:none;display:inline-block;transition:color .2s;white-space:nowrap;flex-shrink:0}
.btn-text:hover{color:var(--gold-deep)}
/* ─── Marketing Press buttons (Option H): 2px gold-deep bottom edge that
   collapses on press; hover lightens + glows without moving ─── */
.btn-outline{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:transparent;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 2px 0 rgba(58,75,91,.12);transition:border-color .2s,background .2s,box-shadow .2s,transform .08s;white-space:nowrap;flex-shrink:0}
.btn-outline:hover{border-color:var(--navy);background:rgba(58,75,91,.04);box-shadow:0 2px 0 rgba(58,75,91,.12),0 4px 12px rgba(58,75,91,.10)}
.btn-outline:active{transform:translateY(2px);box-shadow:0 0 0 0 rgba(58,75,91,.12)}
.btn-primary{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-deep);padding:11px 18px;background:var(--gold);border:none;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .2s,box-shadow .2s,transform .08s;box-shadow:0 2px 0 var(--gold-deep);white-space:nowrap;flex-shrink:0}
.btn-primary:hover{background:var(--gold-light);box-shadow:0 2px 0 var(--gold-deep),0 5px 16px rgba(198,178,93,.42)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 0 0 0 var(--gold-deep)}
.btn-primary-lg{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--navy-deep);padding:16px 32px;background:var(--gold);border:none;border-radius:10px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:background .2s,box-shadow .2s,transform .08s;box-shadow:0 2px 0 var(--gold-deep)}
.btn-primary-lg::after{content:'→';font-weight:700;transition:transform .2s}
.btn-primary-lg:hover{background:var(--gold-light);box-shadow:0 2px 0 var(--gold-deep),0 7px 22px rgba(198,178,93,.45)}
.btn-primary-lg:hover::after{transform:translateX(4px)}
.btn-primary-lg:active{transform:translateY(2px);box-shadow:0 0 0 0 var(--gold-deep)}
.btn-primary-lg:active::after{transform:translateX(4px)}
/* Hide the "Are you looking for work?" path-pill on everything but very
   wide screens — it's the widest item in the nav and overlaps the
   buttons at typical desktop sizes. The hero's audience toggle covers
   the same function so nothing is lost. */
/* Path-pill is redundant with the hero's audience toggle — hide always */
.path-pill{display:none}
@media(max-width:1240px){.btn-text{display:none}}  /* secondary CTA collapses first */
@media(max-width:1140px){.nav-links{display:none}}
@media(max-width:640px){.btn-outline{display:none}}

/* ─── Hero ─────────────────────────────────────────────────────────── */
.hero{padding:64px var(--gutter) 80px;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,rgba(255,255,255,.4) 100%)}
.hero-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:72px;align-items:center}
/* An `fr` track takes an automatic minimum of min-content, so wide unbreakable
   content can push its track past its fr share — squeezing the neighbouring track,
   or overflowing into the gap and closing the distance to .hero-side. min-width:0
   pins both tracks to their fr share whatever the content does, which makes the
   copy/panel gap a function of the grid alone. Applies to every hero variant
   (.hero-in, .hero-bg-video .hero-in, .hero-sub .hero-in) since it targets the
   shared container. Keep this alongside the wrapping em at .hero h1 em: this rule
   fixes the track width, that one keeps the text inside it. */
.hero-in > *{min-width:0}
@media(max-width:980px){.hero-in{grid-template-columns:1fr;gap:48px}}

/* Audience toggle pill — from G.
   The white pill is a separate sibling element (.hero-tab-indicator),
   absolutely positioned over the tab row, while the tab labels sit ABOVE
   it via explicit z-index. This guarantees the labels stay readable
   throughout the slide — the pill literally slides UNDER the text. */
.hero-tabs{display:inline-flex;align-items:stretch;background:rgba(255,255,255,.6);border:1px solid var(--border);border-radius:9999px;padding:5px;gap:2px;margin-bottom:28px;backdrop-filter:blur(8px);position:relative}
/* The sliding indicator pill — sibling of the tab anchors, not a pseudo-
   element. toggle.js sets --pill-x (translate offset) and --pill-w (width)
   based on the active tab; the indicator transitions smoothly when those
   values change. */
.hero-tab-indicator{
  position:absolute;top:5px;bottom:5px;left:5px;
  width:var(--pill-w,160px);
  background:#fff;border-radius:9999px;
  box-shadow:0 1px 3px rgba(58,75,91,.10),0 0 0 1px var(--border);
  z-index:1;
  transform:translateX(var(--pill-x,0));
  /* Indicator is invisible until toggle.js measures the active tab and adds
     .placed. Prevents the flash of wrong position on page load. */
  opacity:0;
  /* Note: transitions here only run for *same-page* events like resize.
     The actual toggle slide is driven by View Transitions API in
     toggle.js, which interrupts cleanly when the user clicks rapidly. */
  transition:opacity .14s ease-out;
  view-transition-name:tab-indicator;
  pointer-events:none;
}
.hero-tab-indicator.placed{opacity:1}
.hero-tab{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;color:var(--muted-foreground);padding:10px 20px;border-radius:9999px;transition:color .18s;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;letter-spacing:.02em;white-space:nowrap;position:relative;z-index:2}
.hero-tab:hover{color:var(--navy)}
.hero-tab.on{color:var(--navy)}
@media(max-width:480px){.hero-tab{padding:10px 14px;font-size:12px}}

/* Hero H1 with chunky gold highlight stroke — from G */
.hero h1{font-family:'Montserrat',sans-serif;font-size:clamp(46px,5.8vw,76px);font-weight:700;line-height:1.02;letter-spacing:-.025em;color:var(--navy);margin-bottom:24px;overflow-wrap:break-word}
/* Same treatment the section headings got on 2026-07-30, which this rule was
   deliberately excluded from at the time "as it is white-space:nowrap". That nowrap
   was the bug: the <em> could not wrap, so a long emphasised phrase overflowed the
   600px hero-copy column and ran straight into .hero-side. Measured before the fix,
   the text's right edge crossed the panel's left edge by 201px on
   /for-firms/solo-small ("without growing overhead"), 139px on /verification
   ("verified before they work") and 41px on /work/how-it-works ("without the
   overhead") at >=1920px, and solo-small was already 42px over at 1280px. Nothing
   clipped it, because a hero has no overflow guard - the headline simply sat on top
   of the panel.
   display:inline + box-decoration-break:clone lets the em fragment per line and
   repeats the gradient underline on each fragment at exactly that line's width,
   which is why the bar can be a background instead of one absolutely-positioned
   ::after spanning the widest line. */
.hero h1 em{
  font-style:italic;font-weight:600;color:var(--gold-deep);
  --hl:rgba(198,178,93,.32);
  display:inline;
  background-image:linear-gradient(to top,transparent 0 6px,var(--hl) 6px 18px,transparent 18px);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero-lede{font-size:17px;line-height:1.7;color:var(--muted-foreground);max-width:520px;margin-bottom:32px;font-weight:400}

/* Single CTA with sub-copy — from D */
.hero-cta-wrap{margin-bottom:36px}
.hero-cta-sub{display:block;margin-top:14px;font-size:13px;color:var(--muted-foreground)}
.hero-cta-sub strong{color:var(--navy);font-weight:600}

/* Search/category pill — from F/G, demoted to secondary spot */
.platform-pill{display:inline-flex;align-items:center;gap:0;background:#fff;border:1px solid var(--border);border-radius:12px;padding:5px;box-shadow:0 2px 12px rgba(58,75,91,.06);max-width:540px;width:100%;margin-bottom:32px}
.platform-pill-input{flex:1;display:flex;align-items:center;gap:10px;padding:11px 14px;color:var(--ink3);font-size:13px;min-width:0}
.platform-pill-input svg{width:16px;height:16px;color:var(--ink3);flex-shrink:0}
.platform-pill-input span{font-weight:400;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.platform-pill-cta{padding:10px 18px;background:var(--gold);color:var(--navy-deep);font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-radius:8px;border:none;cursor:pointer;white-space:nowrap}
.platform-pill-cta:hover{background:var(--gold-light)}

.hero-trust{display:flex;gap:36px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--border)}
.hero-compliance{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}
.hero-compliance span{display:inline-flex;align-items:center;gap:6px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted-foreground)}
.hero-compliance svg{width:13px;height:13px;color:var(--gold-deep);flex-shrink:0}
.hero-bg-video .hero-compliance span{color:rgba(255,255,255,.85)}
.hero-bg-video .hero-compliance svg{color:var(--gold-light)}
.htr{display:flex;flex-direction:column;gap:4px}
.htr-n{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:600;color:var(--navy);letter-spacing:-.01em;line-height:1}
.htr-l{font-size:11px;color:var(--muted-foreground);letter-spacing:.08em;text-transform:uppercase;font-weight:500;font-family:'Montserrat',sans-serif}

/* Hero visual — sepia-tinted hero photo (from A) + floating cards (F/G) */
.hero-vis{position:relative}
.hero-img-wrap{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--bg-card);max-width:460px;margin-left:auto;box-shadow:0 20px 48px rgba(58,75,91,.18),0 0 0 1px var(--border)}
.hero-img-wrap img,.hero-img-wrap video{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.20) saturate(.85)}
.hero-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(58,75,91,.55) 100%);pointer-events:none}
.float-card{position:absolute;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:0 10px 28px rgba(58,75,91,.14);display:flex;align-items:center;gap:11px}
.float-card.bottom-left{bottom:24px;left:-20px;width:220px}
.float-card-av{width:38px;height:38px;border-radius:50%;background:var(--bg-muted);flex-shrink:0;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}
.float-card-av img{width:100%;height:100%;object-fit:cover}
.float-card-body{flex:1;min-width:0}
.float-card-name{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--navy);line-height:1.2;display:flex;align-items:center;gap:6px}
.float-card-name::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--status);flex-shrink:0;box-shadow:0 0 0 2px rgba(123,182,126,.20)}
.float-card-role{font-size:11px;color:var(--muted-foreground);margin-top:2px}
.float-card-rate{font-size:12px;color:var(--gold-deep);font-weight:700;margin-top:4px}
@media(max-width:980px){.float-card.bottom-left{left:8px;bottom:8px}}

/* Floating "saved" badge — from D */
.hero-badge{position:absolute;top:-18px;right:-18px;padding:14px 18px;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);color:#fff;border-radius:12px;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;box-shadow:0 12px 28px rgba(198,178,93,.30),0 0 0 1px var(--gold);z-index:10;max-width:180px;line-height:1.4}
.hero-badge strong{display:block;font-size:18px;letter-spacing:-.01em;text-transform:none;margin-bottom:2px;font-weight:700}

/* ─── Hero with full-bleed background video (v17 / Design J) ──────── */
.hero-bg-video{position:relative;background:var(--navy-deep);min-height:760px;padding-top:80px;padding-bottom:96px;overflow:hidden;isolation:isolate}
.hero-bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(.85) brightness(.78)}
.hero-bgvid-overlay{position:absolute;inset:0;z-index:1;background:
  linear-gradient(105deg,rgba(15,28,42,.86) 0%,rgba(15,28,42,.72) 42%,rgba(15,28,42,.30) 100%),
  linear-gradient(180deg,rgba(15,28,42,.55) 0%,rgba(15,28,42,.30) 40%,rgba(15,28,42,.70) 100%);
  pointer-events:none}
.hero-bg-video .hero-in{position:relative;z-index:2}

/* Text colour inversion for dark video background */
.hero-bg-video h1{color:#fff}
.hero-bg-video h1 em{color:var(--gold-light)}
.hero-bg-video h1 em{--hl:rgba(198,178,93,.40)}
.hero-bg-video .hero-lede{color:rgba(255,255,255,.86)}
.hero-bg-video .hero-cta-sub{color:rgba(255,255,255,.72)}
.hero-bg-video .hero-cta-sub strong{color:#fff}

/* Tabs on glass */
.hero-bg-video .hero-tabs{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-bg-video .hero-tab{color:rgba(255,255,255,.70)}
.hero-bg-video .hero-tab:hover{color:#fff}
.hero-bg-video .hero-tab.on{color:var(--navy-deep)}

/* Platform pill on glass */
.hero-bg-video .platform-pill{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.30);box-shadow:0 16px 40px rgba(0,0,0,.28)}

/* Trust row */
.hero-bg-video .hero-trust{border-top-color:rgba(255,255,255,.18)}
.hero-bg-video .htr-n{color:#fff}
.hero-bg-video .htr-l{color:rgba(255,255,255,.65)}

/* ─── 2-column hero layout over video (v17 / Design J) ─────────────── */
.hero-bg-video{padding:40px var(--gutter);min-height:calc(100vh - 116px);display:flex;flex-direction:column;justify-content:center}
.hero-bg-video .hero-in{width:100%;max-width:var(--maxw);grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.hero-bg-video .hero-copy{max-width:600px;display:flex;flex-direction:column;align-items:flex-start}

/* Eyebrow chip above tabs */
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:9999px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.92);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:18px}
.hero-eyebrow-dot{width:7px;height:7px;background:var(--gold-light);transform:rotate(45deg);border-radius:1.5px;box-shadow:0 0 0 1px rgba(213,196,123,.45);animation:lc-diamond-bob 1.9s ease-in-out infinite}
@keyframes lc-diamond-bob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-2px) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.hero-eyebrow-dot,.hero-panel-dot{animation:none}}

/* Headline — slightly tighter than centered version, still bold */
.hero-bg-video h1{font-size:clamp(38px,4vw,56px);line-height:1.06;margin-bottom:18px;text-shadow:0 2px 24px rgba(0,0,0,.32)}
.hero-bg-video .hero-lede{font-size:16px;line-height:1.65;max-width:520px;margin-bottom:26px;text-shadow:0 1px 12px rgba(0,0,0,.25)}

/* Dual CTA row */
.hero-bg-video .hero-cta-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:10px}
.hero-bg-video .hero-cta-sub{display:block;margin-bottom:26px;font-size:13px}

/* Ghost button (secondary CTA on dark) */
/* Matches .btn-primary-lg's shape/typography (size, uppercase, radius,
   arrow) but keeps the frosted-glass colour as the secondary action. */
.btn-ghost-lg{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:10px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 0 rgba(255,255,255,.22);transition:background .2s,border-color .2s,box-shadow .2s,transform .08s}
.btn-ghost-lg:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);box-shadow:0 2px 0 rgba(255,255,255,.22),0 6px 20px rgba(255,255,255,.16)}
.btn-ghost-lg:active{transform:translateY(2px);box-shadow:0 0 0 0 rgba(255,255,255,.22)}
.btn-ghost-lg svg{width:16px;height:16px;flex-shrink:0;transition:transform .2s}
.btn-ghost-lg:hover svg{transform:translateX(4px)}
/* Products-section CTA: navy ghost on the (default) light section, white ghost when the section turns dark */
[data-theme="dark"] #products .btn-ghost-lg.cta-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.34);color:#fff;box-shadow:0 2px 0 rgba(255,255,255,.22)}
[data-theme="dark"] #products .btn-ghost-lg.cta-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);box-shadow:0 2px 0 rgba(255,255,255,.22),0 6px 20px rgba(255,255,255,.16)}
[data-theme="dark"] #products .btn-ghost-lg.cta-ghost:active{transform:translateY(2px);box-shadow:0 0 0 0 rgba(255,255,255,.22)}

/* Trust row at bottom of left column */
.hero-bg-video .hero-trust{padding-top:24px;gap:32px;align-self:stretch}

/* ─── Right column: frosted "live matches" panel ───────────────────── */
.hero-side{position:relative;display:flex;justify-content:flex-end;animation:lc-fade-up 0.65s cubic-bezier(0.22,1,0.36,1) 0.18s both}
@media (prefers-reduced-motion:reduce){.hero-side{animation:none}}
.hero-panel{width:100%;max-width:420px;background:rgba(22,32,42,.42);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:20px;backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1);box-shadow:0 16px 40px rgba(0,0,0,.24);color:#fff}
.hero-panel-head{display:flex;align-items:center;gap:9px;padding:0 4px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.hero-panel-dot{width:8px;height:8px;background:var(--gold-light);transform:rotate(45deg);border-radius:1.5px;box-shadow:0 0 0 1px rgba(213,196,123,.45);animation:lc-diamond-bob 1.9s ease-in-out infinite .55s}
.hero-panel-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.78);letter-spacing:.10em;text-transform:uppercase}
.hero-panel-list{list-style:none;margin:0;padding:6px 0;display:flex;flex-direction:column;gap:2px}

.hero-match{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 4px;border-radius:10px;transition:background .2s}
.hero-match:hover{background:rgba(255,255,255,.05)}
.hero-match-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.20)}
.hero-match-av img{width:100%;height:100%;object-fit:cover;display:block}
.hero-match-av-icon{background:rgba(213,196,123,.18);box-shadow:0 0 0 1px rgba(213,196,123,.32);display:flex;align-items:center;justify-content:center;color:var(--gold-light)}
.hero-match-av-icon svg{width:18px;height:18px;stroke-width:2}
.hero-match-body{min-width:0}
.hero-match-top{display:flex;align-items:center;gap:8px}
.hero-match-name{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.005em}
.hero-match-chip{font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:9999px;line-height:1.4;white-space:nowrap}
.hero-match-chip-go{background:rgba(123,182,126,.22);color:#9FD9A2;border:1px solid rgba(123,182,126,.40)}
.hero-match-chip-mid{background:rgba(213,196,123,.20);color:var(--gold-light);border:1px solid rgba(213,196,123,.38)}
.hero-match-meta{font-size:12px;color:rgba(255,255,255,.60);margin-top:2px}
.hero-match-rate{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em;white-space:nowrap}
.hero-match-rate small{font-size:11px;font-weight:500;color:rgba(255,255,255,.55);margin-left:1px}

.hero-panel-foot{margin-top:8px;padding:14px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:12px;display:flex;align-items:center;gap:12px}
.hero-panel-foot-icon{width:34px;height:34px;border-radius:50%;background:rgba(213,196,123,.16);color:var(--gold-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-panel-foot-icon svg{width:18px;height:18px;stroke-width:2.2}
.hero-panel-foot-text{display:flex;flex-direction:column;line-height:1.2}
.hero-panel-foot-text strong{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.015em}
.hero-panel-foot-text span{font-size:11px;color:rgba(255,255,255,.62);font-weight:500;letter-spacing:.04em;margin-top:1px}
.hero-panel-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.05);overflow:hidden}
.hero-panel-stats>div{padding:12px 12px;border-right:1px solid rgba(255,255,255,.10)}
.hero-panel-stats>div:last-child{border-right:none}
.hero-panel-stats b{display:block;font-family:'Montserrat',sans-serif;font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.05}
.hero-panel-stats span{display:block;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px}

/* Responsive */
@media (max-width:980px){
  .hero-bg-video .hero-in{grid-template-columns:1fr;gap:40px}
  .hero-side{justify-content:flex-start}
  .hero-panel{max-width:560px}
}
@media (max-width:560px){
  .hero-bg-video{padding-top:40px;padding-bottom:48px;min-height:auto}
  .hero-bg-video h1{font-size:clamp(36px,9vw,52px)}
  .hero-bg-video .hero-cta-wrap{flex-direction:column;align-items:stretch}
  .hero-bg-video .hero-cta-wrap > a{justify-content:center}
}

/* ─── Trust strip — bar associations (from F/G) ───────────────────── */
.trust{padding:22px var(--gutter);background:var(--bg);border-bottom:1px solid var(--border)}
.trust-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
/* Single horizontal row: label sits inline before the logos */
.trust-label{font-family:'Montserrat',sans-serif;font-size:11px;color:var(--muted-foreground);font-weight:600;letter-spacing:.10em;text-transform:uppercase;margin:0;white-space:nowrap;padding-right:28px;border-right:1px solid var(--border)}
.trust-logos{display:flex;gap:28px;flex-wrap:wrap;align-items:center;justify-content:center}
.trust-logo{display:inline-flex;align-items:center;gap:9px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.03em;white-space:nowrap}
.trust-logo img{width:30px;height:30px;object-fit:contain;filter:grayscale(1) opacity(.7);transition:filter .2s}
.trust-logo:hover img{filter:grayscale(0) opacity(1)}
/* Dark mode: seals are drawn for light backgrounds — give them a faint
   light disc so they stay legible on the navy backdrop. */
:root[data-theme="dark"] .trust-logo{color:rgba(255,255,255,.82)}
:root[data-theme="dark"] .trust-logo img{background:rgba(255,255,255,.88);border-radius:50%;padding:2px;filter:grayscale(1) opacity(.85)}
@media(max-width:760px){.trust-label{border-right:none;padding-right:0;flex-basis:100%;text-align:center}}

/* Top banner hidden for now */
.banner{display:none}

/* ─── Section base ────────────────────────────────────────────────── */
section.sec{padding:88px var(--gutter);border-bottom:1px solid var(--border)}
section.sec.cream{background:var(--cream)}
section.sec.white{background:var(--bg-card)}
section.sec.deep{background:var(--navy-deep);color:#fff;border-bottom-color:rgba(255,255,255,.08)}
.s-in{max-width:var(--maxw);margin:0 auto}
.s-eyebrow{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;color:var(--gold-deep);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;display:inline-flex;align-items:center;gap:10px}
.s-eyebrow::before{content:'';width:24px;height:2px;background:var(--gold);border-radius:1px}
section.sec.deep .s-eyebrow{color:var(--gold-light)}
section.sec.deep .s-eyebrow::before{background:var(--gold-light)}
.s-h2{font-family:'Montserrat',sans-serif;font-size:clamp(30px,3.8vw,46px);font-weight:300;line-height:1.1;color:var(--navy);margin-bottom:16px;letter-spacing:-.005em;max-width:780px}
h1,h2,h3,h4,.s-h2,.s-eyebrow{text-wrap:balance}
p,.s-sub{text-wrap:pretty}
section.sec.deep .s-h2{color:#fff}
/* The gold highlight is a per-line gradient, not one absolutely-positioned bar.
   As display:inline-block the <em> stayed a single box as tall as its wrapped
   lines, so ::after drew ONE bar at the bottom spanning the WIDEST line, which
   overhung the shorter last line ("without the / overhead"). display:inline lets
   the em fragment per line and box-decoration-break:clone repeats the gradient on
   each fragment, so every line gets an underline of exactly its own width.
   --hl carries the per-section opacity that the old ::after overrides set. */
.s-h2 em{font-style:italic;font-weight:400;color:var(--gold-deep);--hl:rgba(198,178,93,.30);display:inline;background-image:linear-gradient(to top,transparent 0 4px,var(--hl) 4px 12px,transparent 12px);-webkit-box-decoration-break:clone;box-decoration-break:clone}

section.sec.deep .s-h2 em{color:var(--gold-light)}
section.sec.deep .s-h2 em{--hl:rgba(198,178,93,.50)}
.s-sub{font-size:16px;color:var(--muted-foreground);line-height:1.7;max-width:680px;margin-bottom:56px}
section.sec.deep .s-sub{color:rgba(255,255,255,.7)}

/* ─── How it works — numbered steps (rounded cards w/ hard shadow on hover) ── */
.howsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:8px}
@media(max-width:900px){.howsteps{grid-template-columns:1fr;gap:20px}}
.hstep{padding:32px;background:#fff;border:1px solid var(--border);border-radius:14px;transition:all .25s;position:relative}
.hstep:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gold);border-color:var(--gold)}
.hstep-num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--navy-deep);font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;margin-bottom:20px;box-shadow:0 2px 8px rgba(198,178,93,.32)}
.hstep h3{font-family:'Montserrat',sans-serif;font-size:21px;font-weight:600;color:var(--navy);margin-bottom:10px;letter-spacing:-.005em;line-height:1.2}
.hstep p{font-size:14px;color:var(--muted-foreground);line-height:1.7}

/* Pay-cycle groups (/work/getting-paid): both rows number 1-4, so each row
   carries its own .s-eyebrow label ("Hourly work" / "Project work") and the
   groups need clear separation. */
.paycycle+.paycycle{margin-top:44px}
/* Align descriptions across a row: above ~1000px the wider columns let some step
   titles wrap to two lines while others stay at one, which pushed the
   descriptions out of step (measured 153px vs 128px from the card top) and broke
   the card-consistency rule. Reserving two lines of title only at those widths
   fixes it; at <=900px every title already fits on one line, so no space is
   wasted there. (Deliberately NOT subgrid: these cards inherit the homepage
   hover-scene system -- #how .hstep is display:flex with .hs-scene margin-top:auto
   -- and grid-row:span would also turn the row's 24px gap into internal padding.) */
@media(min-width:1000px){
  .paycycle-steps .hstep h3{min-height:50px} /* 2 lines at 21px/1.2 */
}
/* Same problem in the pricing tiers: a 1-line blurb ("Research, memos, and
   document review.") beside 2-line ones pushed the rate, the rule below it and
   the feature list out of step across the row. Reserve two blurb lines while the
   grid is 3-up; below 880px .tiergrid is a single column, so alignment is moot. */
/* Visually hidden but available to screen readers (table caption, the empty
   corner header cell). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Earnings comparison (/work/getting-paid): reuses the .compare-table look from
   the hire pages, but with only TWO columns it needs no min-width and no
   horizontal scroll, so the 880px floor that forces scrolling there is dropped. */
/* Doubled class again: .compare-table sets min-width:880px to force the
   horizontal scroll the 5-column hire tables need. Two columns fit, so drop it. */
.compare-table.earn-table{min-width:0;width:100%}
.earn-table thead th{vertical-align:bottom}
.earn-table tbody th{white-space:normal;width:23%;color:var(--navy);font-weight:600}
/* Doubled class: plain `.earn-table td` ties with `.compare-table td` (which sets
   center for the hire-page tables) and loses on order. These cells are prose, not
   one-word verdicts, so they read far better left-aligned. */
.compare-table.earn-table td{text-align:left}
.earn-h-sub{display:block;margin-top:4px;font-family:'Geist',sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink3)}

/* Phones: a 3-column table would crush the text, and horizontal scroll is the
   thing the hire-page duel exists to avoid. Restack as one block per earning
   model, with each cell showing its row label from data-label. */
@media(max-width:700px){
  /* Doubled class on the table itself: the hire pages hide .compare-table below
     600px in favour of the JS mobile view (removed 2026-08-04), and a single .earn-table ties with
     that rule and loses on order — which blanked this table entirely on phones.
     This table has only two columns, so it stacks instead of needing the duel. */
  .compare-table.earn-table,
  .earn-table tbody,.earn-table tr,.earn-table th,.earn-table td{display:block;width:auto}
  /* Column names move into each cell (data-col), so the header row is redundant. */
  .earn-table thead{display:none}
  .earn-table tbody tr{padding:16px 0;border-bottom:1px solid rgba(58,75,91,.12)}
  .earn-table tbody tr:last-child{border-bottom:0}
  /* Row label stays visible as the group heading for its two values. */
  .earn-table tbody th{padding:0 16px 12px;border:0;font-size:15.5px;white-space:normal}
  .earn-table td{padding:0 16px 12px;border:0;text-align:left}
  .earn-table td:last-child{padding-bottom:0}
  .earn-table td::before{
    content:attr(data-col);display:block;margin-bottom:3px;
    font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
  }
}

/* Measured natural blurb heights: 63px (3 lines) while the 3-up columns are
   narrow, 42px (2 lines) once they widen past ~960px. */
@media(min-width:881px) and (max-width:959px){
  .paycycle-tiers .tier-head p{min-height:63px}
}
@media(min-width:960px){
  .paycycle-tiers .tier-head p{min-height:42px}
}

/* ─── Practice areas grid (from F/G) ──────────────────────────────── */
/* auto-fit (not repeat(4,...)) so a section with fewer cards than columns has no
   empty trailing track: 3 cards used to leave a 299px gap on the right of
   /work/hourly-associate. auto-fit collapses the unused tracks and the remaining
   cards share the full width. At the 1120px content width this still yields 4
   tracks for 4-card sections, so those are unchanged. */
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:8px}
@media(max-width:1100px){.catgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.catgrid{grid-template-columns:repeat(2,1fr)}}
.cat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px 20px;transition:all .2s;text-decoration:none;color:inherit;display:flex;flex-direction:column;justify-content:space-between;min-height:150px}
.cat:hover{border-color:var(--gold);background:var(--gold-tint);transform:translateY(-2px);box-shadow:0 8px 20px rgba(198,178,93,.10)}
.cat-icon{width:28px;height:28px;color:var(--gold-deep);margin-bottom:12px}
.cat-icon svg{width:100%;height:100%}
/* Phosphor duotone icons — foreground inherits container gold via currentColor, back layer renders ~20% opacity */
.cat-icon i{font-size:28px;line-height:1;display:block}
.prod-icon i{font-size:28px;line-height:1}
.prod-mode-icon i{font-size:24px;line-height:1}
.bencard-icon i{font-size:21px;line-height:1}
.matter-icon i{font-size:24px;line-height:1}
.reg-rolecard-icon i{font-size:25px;line-height:1}
.retainer-note-icon i{font-size:20px;line-height:1}
.atty-empty-icon i{font-size:24px;line-height:1}
.cat h4{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:600;color:var(--navy);margin-bottom:6px;letter-spacing:-.005em;line-height:1.25}
.cat-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto}
.cat-rate{font-family:'Montserrat',sans-serif;font-size:12px;color:var(--muted-foreground);font-weight:600}
.cat-count{font-size:11px;color:var(--ink3)}

/* ─── Featured counsel — radial gold flare on cards (from C) ──────── */
.attygrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px;transition:opacity .25s ease}
.attygrid > .atty{flex:0 1 calc(25% - 12px);max-width:calc(25% - 12px)}
/* Featured-counsel filter console (ported from Fable, Current palette) */
.counsel-console{margin:6px 0 26px}
.cc-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cc-q{font-family:'Montserrat',sans-serif;font-weight:600;font-size:15px;color:var(--navy)}
.cc-meta{font-size:12.5px;color:var(--muted-foreground)}
.counsel-tabs{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--navy);background:#fff;border:1px solid var(--border);padding:8px 14px;border-radius:9999px;cursor:pointer;transition:color .18s,background .18s,border-color .18s}
.ct-chip:hover{border-color:var(--gold);color:var(--gold-deep)}
.ct-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.atty-cta{align-items:center;justify-content:center;text-align:center;border-style:dashed}
.ac-in{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px}
.ac-in i{font-size:30px;color:var(--gold-deep)}
.ac-in h4{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;color:var(--navy);margin:0}
.ac-in p{font-size:12.5px;color:var(--muted-foreground);margin:0;max-width:200px}
.ac-go{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep);margin-top:4px}
[data-theme="dark"] .cc-q{color:#fff}
[data-theme="dark"] .ct-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
[data-theme="dark"] .ct-chip:hover{border-color:var(--gold);color:var(--gold-light)}
[data-theme="dark"] .ct-chip.on{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
[data-theme="dark"] .ac-in h4{color:#fff}
/* RA Spotlight card treatment: rate range, availability, % positive, unlock, no presence dot */
.atty-avatar::after{display:none}
.atty.prop-atty,#counsel .atty{text-decoration:none}
.atty-rating.pct::before{display:none}
.atty-rating.pct{color:var(--navy);font-weight:700;cursor:help}
.atty-meta dd.atty-avail{font-weight:600}
.atty-meta dd.atty-avail-open{color:#16A34A}
.atty-meta dd.atty-avail-limited{color:var(--ink3)}
.atty-unlock{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;padding-top:13px;border-top:1px dashed var(--border-soft);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep)}
.atty-unlock i{font-size:14px}
.atty:hover .atty-unlock{color:var(--navy)}
[data-theme="dark"] .atty-rating.pct{color:#fff}
[data-theme="dark"] .atty-avail-limited{color:rgba(255,255,255,.55)}
/* Browse-by-practice-area: Fable spotlight-expand (sideways), Current palette, scoped to #categories */
#categories .catgrid{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
#categories .cat{flex:1 1 19%;min-width:0;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;opacity:1;transition:flex-grow .5s cubic-bezier(.4,0,.2,1),opacity .35s ease,transform .25s,box-shadow .25s,border-color .25s,background .25s}
#categories .cat:hover,#categories .cat:focus-within{flex-grow:3;transform:none}
#categories .catgrid:hover .cat:not(:hover):not(:focus-within),#categories .catgrid:focus-within .cat:not(:hover):not(:focus-within){opacity:.55}
#categories .cat-row{display:flex;align-items:flex-start;flex:1 1 auto;min-width:0;width:100%;position:relative;z-index:1;padding-bottom:56px}
#categories .cat-main{flex:1 1 auto;min-width:0}
#categories .cat-main .cat-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#categories .cat-more{display:block;flex:0 0 0%;width:0;opacity:0;overflow:hidden;margin-left:0;padding-left:0;border-left:1px dashed transparent;white-space:nowrap;transition:flex-basis .5s cubic-bezier(.4,0,.2,1),opacity .35s ease .12s,margin-left .5s cubic-bezier(.4,0,.2,1),padding-left .5s cubic-bezier(.4,0,.2,1),border-color .35s}
#categories .cat:hover .cat-more,#categories .cat:focus-within .cat-more{flex-basis:54%;opacity:1;margin-left:16px;padding-left:16px;border-left-color:rgba(168,152,68,.35)}
#categories .cat-stat{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light);white-space:nowrap;margin-bottom:8px}
#categories .cat-matters{list-style:none;margin:0;padding:0}
#categories .cat-matters li{font-size:12.5px;color:rgba(255,255,255,.82);padding:3px 0 3px 16px;position:relative;white-space:nowrap}
#categories .cat-matters li::before{content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%) rotate(45deg);width:5px;height:5px;background:var(--gold);border-radius:1px}
#categories .cat-head{position:absolute;left:0;right:0;bottom:0;font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:500;line-height:1.45;color:rgba(255,255,255,.72);padding-top:10px;border-top:1px dashed rgba(255,255,255,.14)}
#categories .cat-head b{color:var(--gold-light);font-weight:700}
#categories .cat-arrow{position:absolute;top:18px;right:18px;color:var(--gold-deep);opacity:0;transform:translateX(-6px);transition:.25s;font-size:16px;font-weight:700;z-index:2}
#categories .cat:hover .cat-arrow,#categories .cat:focus-within .cat-arrow{opacity:1;transform:translateX(0)}
#categories .cat::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(198,178,93,.16) 50%,transparent 70%);transform:translateX(-101%);transition:transform .6s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}
#categories .cat:hover::before{transform:translateX(101%)}
[data-theme="dark"] #categories .cat-matters li{color:rgba(255,255,255,.66)}
[data-theme="dark"] #categories .cat-stat{color:var(--gold-light)}
/* Depth-numbers strip in the "By the numbers" (deep/navy) section */
.statdepth-lead{margin:40px 0 16px;text-align:center;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.statdepth{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.statdepth .sd{text-align:center}
.statdepth .sd-n{font-family:'Montserrat',sans-serif;font-weight:700;font-size:26px;color:var(--gold-light,#D5C47B);letter-spacing:-.01em}
.statdepth .sd-l{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;line-height:1.35}
@media(max-width:820px){.statdepth{grid-template-columns:repeat(3,1fr);gap:22px 12px}}
@media(max-width:460px){.statdepth{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){#trust .trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){#trust .trust-grid{grid-template-columns:1fr}}
@media(max-width:1080px){#categories .catgrid{display:grid;grid-template-columns:repeat(2,1fr)}#categories .cat-more{display:none}}
@media(max-width:520px){#categories .catgrid{grid-template-columns:1fr}}
@media(max-width:1100px){.attygrid > .atty{flex-basis:calc(50% - 8px);max-width:calc(50% - 8px)}}
@media(max-width:600px){.attygrid > .atty{flex-basis:100%;max-width:100%}}
.atty{background:
  radial-gradient(circle at 100% 0%,rgba(198,178,93,.10) 0%,transparent 60%),
  #fff;
  border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;padding:22px 20px 20px}
.atty::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(198,178,93,.35),transparent);opacity:0;transition:opacity .3s}
.atty:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(58,75,91,.10);border-color:var(--gold)}
.atty:hover::before{opacity:1}

/* Header: circular avatar + name/role */
.atty-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.atty-avatar{position:relative;width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--border)}
.atty-avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* available-now status dot on the avatar */
.atty-avatar::after{content:'';position:absolute;bottom:1px;right:1px;width:12px;height:12px;border-radius:50%;background:var(--status);box-shadow:0 0 0 2px #fff}
.atty-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.atty-name{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.005em;display:inline-flex;align-items:center;gap:6px;margin:0}
.atty-verified{width:15px;height:15px;color:var(--gold);flex-shrink:0}
/* Two lines are RESERVED, not merely allowed. "Business & Corporate Attorney"
   wraps where "Litigation Attorney" does not, which pushed that card's meta and
   tag rows 15px below its neighbours' — measured across the featured row. The
   role text also changes when the practice-area filter switches, so which card
   wraps is not fixed and cannot be handled per-card. */
.atty-role{font-size:12.5px;color:var(--muted-foreground);font-weight:500;line-height:1.4;min-height:2.8em}

/* Meta detail rows */
.atty-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0 0 16px;padding:14px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.atty-meta div{display:flex;flex-direction:column;gap:1px}
.atty-meta dt{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.atty-meta dd{margin:0;font-size:13px;font-weight:600;color:var(--navy);letter-spacing:-.005em}

/* Focus-area tags */
.atty-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.atty-cred{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#fff !important;background:var(--navy) !important;border:1px solid var(--navy) !important;padding:4px 9px;border-radius:9999px}
.atty-tags span{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--gold-deep);background:var(--gold-tint);border:1px solid rgba(168,152,68,.22);padding:4px 9px;border-radius:9999px}

/* Top-rated ribbon */
.atty-tag{position:absolute;top:14px;right:14px;background:var(--navy);color:#fff;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:9999px;box-shadow:0 2px 6px rgba(58,75,91,.30);z-index:2}

.atty-stats{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:14px;border-top:1px solid var(--border-soft);font-size:13px}
.atty-rate{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--navy)}
.atty-rate small{font-weight:500;color:var(--ink3);font-size:11px}
.atty-rating{font-family:'Montserrat',sans-serif;color:var(--navy);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.atty-rating::before{content:'★';color:var(--gold)}

/* ─── Why LAWCLERK — checkmarks + photo (from F/G) ────────────────── */
.bengrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:8px}
@media(max-width:900px){.bengrid{grid-template-columns:1fr;gap:36px}}
.benlist{display:flex;flex-direction:column;gap:22px}
.benitem{display:flex;align-items:flex-start;gap:14px}
/* Browse-by-practice-area: Fable hover polish (gold sheen sweep + arrow slide-in), Current palette + Current's lift/border hover */
#categories .cat{position:relative;overflow:hidden}
#categories .cat > *{position:relative;z-index:1}
#categories .cat-arrow{position:absolute;top:18px;right:18px;color:var(--gold-deep);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;font-size:16px;font-weight:700;z-index:2}
#categories .cat:hover .cat-arrow,#categories .cat:focus-within .cat-arrow{opacity:1;transform:translateX(0)}
#categories .cat::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(198,178,93,.16) 50%,transparent 70%);transform:translateX(-101%);transition:transform .6s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}
#categories .cat:hover::before{transform:translateX(101%)}
/* Why-LAWCLERK: interactive 3-state mockup (ported from Fable, Current palette) */
.benitem{border-left:3px solid transparent;padding-left:0;cursor:pointer;transition:border-color .5s cubic-bezier(.22,1,.36,1),padding-left .5s cubic-bezier(.22,1,.36,1),background .5s ease,filter .35s ease;outline:none;border-radius:2px}
.benitem.on{border-left-color:var(--gold);padding-left:14px;background:linear-gradient(90deg,rgba(198,178,93,.08),transparent 70%)}
.benitem:focus-visible{border-left-color:var(--gold-light)}
.benui-body{display:grid;grid-template-columns:1fr}
.benui-head{grid-row:1}
.benui-dots{display:flex;gap:6px;align-items:center}
.benui-dots i{width:6px;height:6px;border-radius:50%;background:rgba(168,152,68,.28);transition:background .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.benui-body[data-state="1"] .benui-dots i:nth-child(1),.benui-body[data-state="2"] .benui-dots i:nth-child(2),.benui-body[data-state="3"] .benui-dots i:nth-child(3),.benui-body[data-state="4"] .benui-dots i:nth-child(4),.benui-body[data-state="5"] .benui-dots i:nth-child(5){background:var(--gold-deep);transform:scale(1.4)}
.benui-state{grid-row:3;grid-column:1;display:block;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
:is(.benui-body[data-state="1"] .bs1,.benui-body[data-state="2"] .bs2,.benui-body[data-state="3"] .bs3,.benui-body[data-state="4"] .bs4,.benui-body[data-state="5"] .bs5){opacity:1;transform:none;pointer-events:auto}
.benui-state>*{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
:is(.benui-body[data-state="1"] .bs1,.benui-body[data-state="2"] .bs2,.benui-body[data-state="3"] .bs3,.benui-body[data-state="4"] .bs4,.benui-body[data-state="5"] .bs5)>*{opacity:1;transform:none}
:is(.benui-body[data-state="1"] .bs1,.benui-body[data-state="2"] .bs2,.benui-body[data-state="3"] .bs3,.benui-body[data-state="4"] .bs4,.benui-body[data-state="5"] .bs5)>*:nth-child(1){transition-delay:.06s}
:is(.benui-body[data-state="1"] .bs1,.benui-body[data-state="2"] .bs2,.benui-body[data-state="3"] .bs3,.benui-body[data-state="4"] .bs4,.benui-body[data-state="5"] .bs5)>*:nth-child(2){transition-delay:.15s}
:is(.benui-body[data-state="1"] .bs1,.benui-body[data-state="2"] .bs2,.benui-body[data-state="3"] .bs3,.benui-body[data-state="4"] .bs4,.benui-body[data-state="5"] .bs5)>*:nth-child(3){transition-delay:.24s}
:is(.benui-body[data-state="1"] .bs1,.benui-body[data-state="2"] .bs2,.benui-body[data-state="3"] .bs3,.benui-body[data-state="4"] .bs4,.benui-body[data-state="5"] .bs5)>*:nth-child(n+4){transition-delay:.33s}
@keyframes benuiIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.benui-mini{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-soft)}
.benui-mini:first-child{padding-top:2px}
.benimg .benui-mini img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block}
.benui-mini-init{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em}
.benui-mini-name{font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700;color:var(--navy)}
.benui-mini-sub{font-size:11.5px;color:var(--ink3)}
.benui-mini-match{margin-left:auto;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);border:1px solid rgba(168,152,68,.45);border-radius:9999px;padding:3px 9px;white-space:nowrap}
.benui-check{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-soft);font-size:13.5px;color:var(--muted-foreground)}
.benui-check:first-child{padding-top:2px}
.benui-check i{font-size:21px;color:var(--gold-deep);flex-shrink:0}
.bs1 .benui-toast,.bs2 .benui-toast,.bs5 .benui-toast{margin-top:16px}
[data-theme="dark"] .benui-mini,[data-theme="dark"] .benui-check{border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .benui-mini-name{color:#fff}
[data-theme="dark"] .benui-mini-sub{color:rgba(255,255,255,.55)}
[data-theme="dark"] .benui-mini-match{color:var(--gold-light);border-color:rgba(213,196,123,.45)}
[data-theme="dark"] .benui-check{color:rgba(255,255,255,.7)}
[data-theme="dark"] .benui-check i{color:var(--gold-light)}
.benitem-check{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;line-height:1;margin-top:2px}
.benitem h4{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:600;color:var(--navy);margin-bottom:5px;letter-spacing:-.005em}
.benitem p{font-size:14px;color:var(--muted-foreground);line-height:1.65}
.benimg{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--bg-muted);box-shadow:0 12px 28px rgba(58,75,91,.10)}
.benimg img,.benimg video{width:100%;height:100%;object-fit:cover;display:block}
/* Subtle warm tint on the video to match the sepia treatment used elsewhere */
.benimg video{filter:sepia(.12) saturate(.9)}

/* ─── Stat band — big display nums on deep navy (from F/G) ────────── */
.statband{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:8px;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
@media(max-width:780px){.statband{grid-template-columns:1fr;gap:36px;max-width:none}}
.statbig{font-family:'Montserrat',sans-serif;font-size:clamp(40px,5vw,64px);font-weight:600;color:var(--gold-light);letter-spacing:-.025em;line-height:1;margin-bottom:8px}
.statlbl{font-size:13px;color:rgba(255,255,255,.7);font-weight:500;font-family:'Montserrat',sans-serif;letter-spacing:.02em}

/* ─── Pull quote — Cormorant Garamond italic on navy (from A + C) ── */
.pullq{padding:120px var(--gutter);background:var(--navy-deep);color:#fff;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.pullq::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(198,178,93,.18) 0%,transparent 65%);pointer-events:none}
.pullq-in{max-width:900px;margin:0 auto;text-align:center;position:relative;z-index:1}
.pullq-mk{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-style:italic;font-size:140px;color:var(--gold);line-height:.4;margin-bottom:20px;opacity:.85;font-weight:500}
.pullq-tx{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:clamp(28px,3.4vw,44px);font-weight:400;color:#fff;line-height:1.25;font-style:italic;margin-bottom:32px;letter-spacing:-.005em}
.pullq-tx em{font-style:italic;font-weight:500;color:var(--gold-light)}
.pullq-tx strong{font-style:normal;font-weight:600;color:#fff}
.pullq-by{display:inline-flex;align-items:center;gap:14px;padding:14px 24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:9999px;backdrop-filter:blur(8px)}
.pullq-av{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--navy-deep);font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pullq-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:#fff}
.pullq-role{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px}

/* ─── Testimonials grid (with sepia avatars from A) ─────────────────── */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}
/* Flex column so the attribution (and its border-top rule) pins to the bottom
   of every card: quotes vary in line count, and without this the divider and
   name land at different heights across the row, breaking the card-consistency
   rule that internal elements must line up. */
.tc{background:#fff;border:1px solid var(--border);border-radius:12px;padding:28px;transition:all .25s;display:flex;flex-direction:column}
.tc:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gold-tint);border-color:var(--gold)}
.tc-stars{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.tc-stars i{position:relative;display:inline-block;font-style:normal;font-size:14px;letter-spacing:2px;color:rgba(168,152,68,.28);line-height:1}
.tc-stars i::before{content:"★★★★★"}
.tc-stars i::after{content:"★★★★★";position:absolute;left:0;top:0;width:var(--r);overflow:hidden;color:var(--gold);white-space:nowrap}
.tc-stars b{font-family:"Montserrat",sans-serif;font-weight:700;font-size:13px;color:var(--gold-deep)}
.tc q{font-size:15px;color:var(--navy);line-height:1.6;display:block;margin-bottom:22px;font-weight:500;letter-spacing:-.005em;quotes:none;flex:1}
.tc-fact{display:inline-block;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-tint);border:1px solid rgba(168,152,68,.25);border-radius:9999px;padding:4px 10px;margin:-10px 0 18px}
.tc q::before,.tc q::after{content:none}
.tc-by{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--border)}
.tc-av{width:40px;height:40px;border-radius:50%;background:var(--bg-muted);overflow:hidden}
.tc-av img{width:100%;height:100%;object-fit:cover;filter:sepia(.15) saturate(.9)}
.tc-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:var(--navy)}
.tc-role{font-size:12px;color:var(--muted-foreground);margin-top:2px}

/* ─── Audience-bridge section (from D) ────────────────────────────── */
.audience-split{padding:96px var(--gutter);background:var(--cream);border-bottom:1px solid var(--border)}
.as-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.as-in{grid-template-columns:1fr}}
.as-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:40px 32px;display:flex;flex-direction:column;justify-content:space-between;min-height:300px;transition:all .25s;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(58,75,91,.04)}
.as-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gold);border-color:var(--gold)}
.as-card.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.as-card.dark:hover{background:var(--navy-light);border-color:var(--gold-light);box-shadow:6px 6px 0 var(--gold-light)}
.as-card-tag{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px}
.as-card.dark .as-card-tag{color:var(--gold-light)}
.as-card h3{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:300;line-height:1.15;letter-spacing:-.005em;color:var(--navy);margin-bottom:14px}
.as-card.dark h3{color:#fff}
.as-card h3 em{font-style:italic;font-weight:400;color:var(--gold-deep)}
.as-card.dark h3 em{color:var(--gold-light)}
.as-card p{font-size:14px;color:var(--muted-foreground);line-height:1.7;margin-bottom:28px}
.as-card.dark p{color:rgba(255,255,255,.75)}
.as-card-cta{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--navy);display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border-bottom:1px solid var(--gold);padding-bottom:4px;transition:gap .2s}
.as-card.dark .as-card-cta{color:#fff;border-bottom-color:var(--gold-light)}
.as-card-cta::after{content:'→';font-weight:600}
.as-card:hover .as-card-cta{gap:12px}

/* ─── Final CTA with highlight stroke (from G) ────────────────────── */
.cta-final{padding:120px var(--gutter);text-align:center;background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 100%);border-bottom:1px solid var(--border)}
.cta-in{max-width:780px;margin:0 auto}
.cta-in .s-eyebrow{color:var(--gold-deep);margin-bottom:24px;justify-content:center}
.cta-in h2{font-family:'Montserrat',sans-serif;font-size:clamp(36px,5vw,60px);font-weight:300;line-height:1.05;letter-spacing:-.015em;color:var(--navy);margin-bottom:20px}
.cta-in h2 em{font-style:italic;font-weight:400;color:var(--gold-deep);--hl:rgba(198,178,93,.35);display:inline;background-image:linear-gradient(to top,transparent 0 5px,var(--hl) 5px 17px,transparent 17px);-webkit-box-decoration-break:clone;box-decoration-break:clone}

.cta-in p{font-size:16px;color:var(--muted-foreground);line-height:1.7;max-width:520px;margin:0 auto 36px}

/* ─── Footer ──────────────────────────────────────────────────────── */
footer{padding:64px var(--gutter) 28px;background:var(--bg-card);border-top:1px solid var(--border)}
.ft{max-width:1280px;margin:0 auto}
.ft-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:48px;margin-bottom:48px}
@media(max-width:900px){.ft-top{grid-template-columns:1fr 1fr;gap:32px}}
.ft-b p{font-size:13px;color:var(--muted-foreground);line-height:1.7;margin-top:14px;max-width:260px}
/* Footer phone numbers (LAW-649).

   BOTH the label and the link get their own explicit dark rule, matching what
   every other footer element in this file already does rather than leaning on
   `:root[data-theme="dark"] footer a` (~line 1642) to reach in. That rule does
   cover these links on specificity, so the one below is belt-and-braces: it
   makes the night colour visible where the light one is set instead of two
   screens away, and survives anyone narrowing the `footer a` selector later.

   Verified at 15.37:1 on the #1B2630 dark footer.

   Method note, because it cost real time here: measure dark mode by setting
   localStorage 'lc-daynight' and RELOADING, not by mutating data-theme and
   reading getComputedStyle in the same session. With the browser pane hidden
   the page stops compositing, style recalc is skipped, and computed colours
   come back stale -- this rule read as var(--navy) at 1.71:1 three times while
   the cascade was demonstrably correct. */
.ft-contact{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.ft-contact-row{display:flex;flex-direction:column;gap:2px;margin:0}
.ft-contact-label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)}
.ft-contact-row a{font-size:15px;font-weight:600;color:var(--navy);text-decoration:none;transition:color .2s}
.ft-contact-row a:hover{color:var(--gold-deep)}
:root[data-theme="dark"] .ft-contact-label{color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .ft-contact-row a{color:#fff}
:root[data-theme="dark"] .ft-contact-row a:hover{color:var(--gold-light)}

.fc h5{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--navy);margin-bottom:16px;letter-spacing:.10em;text-transform:uppercase}
.fc h5 a{color:inherit;text-decoration:none;transition:color .2s}
.fc h5 a:hover{color:var(--gold-deep)}
:root[data-theme="dark"] .fc h5 a:hover{color:var(--gold-light)}
.fc a{display:block;font-size:13px;color:var(--muted-foreground);margin-bottom:9px;transition:color .2s}
.fc a:hover{color:var(--gold-deep)}
.ft-bot{border-top:1px solid var(--border);padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted-foreground)}

/* ─── Products grid ───────────────────────────────────────────────── */
.prodgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px;margin:8px auto 0;align-items:stretch;max-width:1000px}
@media(max-width:900px){.prodgrid{grid-template-columns:1fr;gap:16px;max-width:480px}}

.prod{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:32px;display:flex;flex-direction:column;transition:all .25s;position:relative;overflow:hidden}
/* Gold accent stripe on top */
.prod::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--border);border-radius:14px 14px 0 0;transition:background .28s}
.prod:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gold);border-color:var(--gold)}
.prod:hover::after,.prod-featured::after{background:var(--gold)}

.prod-top{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.prod-badge-row{height:22px;display:flex;align-items:flex-start;margin-bottom:4px}
.prod-badge{display:inline-block;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--navy);color:#fff;padding:3px 9px;border-radius:9999px}
.prod-badge-new{background:var(--gold);color:var(--navy-deep)}

.prod-icon{width:50px;height:50px;background:var(--gold-tint);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--gold-deep)}
.prod-icon svg{width:24px;height:24px}

.prod-name{font-family:'Montserrat',sans-serif;font-size:21px;font-weight:600;color:var(--navy);letter-spacing:-.01em;line-height:1.15}
.prod-desc{font-size:14px;color:var(--muted-foreground);line-height:1.7}

/* Sub-highlights within Remote Associate */
.prod-modes{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.prod-mode{display:flex;align-items:flex-start;gap:12px;background:var(--bg-muted);border:1px solid var(--border-soft);border-radius:10px;padding:14px 15px;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s,background .2s}
.prod-mode:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(58,75,91,.35)}
/* Persistent arrow chip so these read as obvious links */
.prod-mode-arrow{margin-left:auto;align-self:center;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold-deep);background:rgba(168,152,68,.12);border:1px solid rgba(168,152,68,.30);transition:background .2s,border-color .2s,color .2s,transform .2s}
.prod-mode-arrow svg{width:14px;height:14px}
.prod-mode:hover .prod-mode-arrow{transform:translateX(3px)}
.prod-mode-icon{width:26px;height:26px;flex-shrink:0;color:var(--gold-deep);margin-top:1px}
.prod-mode-icon svg{width:100%;height:100%}
.prod-mode-name{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.prod-mode-desc{font-size:12px;color:var(--muted-foreground);line-height:1.55;margin-bottom:5px}
.prod-mode-rate{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--gold-deep);letter-spacing:.02em}

/* "Work starts immediately" callout — sits between description and feature list */
.prod-instant{display:flex;align-items:center;gap:9px;background:rgba(198,178,93,.12);border:1px solid rgba(198,178,93,.28);border-radius:8px;padding:11px 14px;margin-bottom:20px;font-size:12px;font-weight:500;color:var(--gold-light);line-height:1.45}
.prod-instant svg{width:14px;height:14px;flex-shrink:0;color:var(--gold);stroke:var(--gold)}
/* On white (non-featured) cards, shift to a navy-on-gold-tint treatment */
.prod:not(.prod-featured) .prod-instant{background:var(--gold-tint);border-color:rgba(168,152,68,.25);color:var(--gold-deep)}
.prod:not(.prod-featured) .prod-instant svg{color:var(--gold-deep);stroke:var(--gold-deep)}

/* Feature list for AI Associate */
.prod-features{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.prod-features li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted-foreground)}
.prod-features li::before{content:'';flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E") center/10px no-repeat}

/* Flow visual for AI + Attorney Review */
.prod-flow{display:flex;align-items:stretch;gap:6px;margin-bottom:16px}
.prod-flow-step{flex:1;background:var(--bg-muted);border:1px solid var(--border-soft);border-radius:8px;padding:10px 8px;text-align:center;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;line-height:1.35;display:flex;align-items:center;justify-content:center}
.prod-flow-step-accent{background:var(--gold-tint);border-color:rgba(198,178,93,.45);color:var(--gold-deep)}
.prod-flow-arrow{color:var(--gold);font-weight:700;font-size:14px;display:flex;align-items:center;flex-shrink:0}

/* CTA link — same pattern as .as-card-cta */
.prod-cta{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--navy);display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border-bottom:1px solid var(--gold);padding-bottom:4px;transition:gap .2s,color .2s;text-decoration:none;margin-top:auto}
.prod-cta::after{content:'→';font-weight:600}
.prod-cta:hover{color:var(--gold-deep);gap:12px}

/* ── Featured card (AI Associate) — full dark treatment so it reads as
      the highlighted tier instantly, not just a stripe accent ───────── */
.prod-featured{background:var(--navy);border-color:var(--navy);box-shadow:0 8px 28px rgba(58,75,91,.20)}
.prod-featured::after{background:var(--gold)}               /* gold stripe stays */
.prod-featured .prod-name{color:#fff}
.prod-featured .prod-desc{color:rgba(255,255,255,.72)}
.prod-featured .prod-icon{background:rgba(198,178,93,.18);color:var(--gold-light)}
.prod-featured .prod-features li{color:rgba(255,255,255,.78)}
.prod-featured .prod-features li::before{background:var(--gold) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E") center/10px no-repeat}
.prod-featured .prod-cta{color:var(--gold-light);border-bottom-color:var(--gold)}
.prod-featured .prod-cta:hover{color:#fff;gap:12px}
.prod-featured:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gold-deep);border-color:var(--navy-light)}

/* ─── Glass treatment for products section (v17) ───────────────────── */
.prods-glass{position:relative;overflow:hidden}
.prods-glass::before{content:'';position:absolute;inset:0;background:
  radial-gradient(60% 50% at 18% 22%, rgba(198,178,93,.12) 0%, transparent 60%),
  radial-gradient(50% 45% at 82% 78%, rgba(198,178,93,.08) 0%, transparent 60%);
  pointer-events:none;z-index:0}
.prods-glass .s-in{position:relative;z-index:1}
.prods-glass .s-h2 em{color:var(--gold-light)}
.prods-glass .s-h2 em{--hl:rgba(198,178,93,.40)}
.prods-glass .s-sub{color:rgba(255,255,255,.72)}

/* All cards: glass base (overrides white card) */
.prods-glass .prod{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 56px rgba(0,0,0,.32);
  color:#fff;
}
.prods-glass .prod::after{display:none}
.prods-glass .prod:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-3px);
  box-shadow:0 32px 64px rgba(0,0,0,.42);
}

/* Top section */
.prods-glass .prod-name{color:#fff}
.prods-glass .prod-desc{color:rgba(255,255,255,.74)}
.prods-glass .prod-icon{background:rgba(213,196,123,.18);color:var(--gold-light);border:1px solid rgba(213,196,123,.22)}
.prods-glass .prod-badge{background:rgba(255,255,255,.10);color:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.22)}
.prods-glass .prod-badge-new{background:var(--gold);color:var(--navy-deep);border-color:transparent}

/* Remote Associate inner sub-mode cards (Hourly / Project) */
.prods-glass .prod-mode{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}
.prods-glass .prod-mode:hover{border-color:rgba(213,196,123,.50);background:rgba(255,255,255,.07)}
.prods-glass .prod-mode-icon{color:var(--gold-light)}
.prods-glass .prod-mode-name{color:#fff}
.prods-glass .prod-mode-desc{color:rgba(255,255,255,.65)}
.prods-glass .prod-mode-rate{color:var(--gold-light)}

/* AI Associate "Work starts immediately" callout */
.prods-glass .prod-instant{
  background:rgba(213,196,123,.14);
  border-color:rgba(213,196,123,.32);
  color:var(--gold-light);
}
.prods-glass .prod-instant svg{color:var(--gold-light);stroke:var(--gold-light)}

/* Feature lists */
.prods-glass .prod-features li{color:rgba(255,255,255,.80)}
.prods-glass .prod-features li::before{background:var(--gold) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E") center/10px no-repeat}

/* Hybrid flow chips */
.prods-glass .prod-flow-step{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.65);
}
.prods-glass .prod-flow-step-accent{
  background:rgba(213,196,123,.18);
  border-color:rgba(213,196,123,.42);
  color:var(--gold-light);
}
.prods-glass .prod-flow-arrow{color:var(--gold-light)}

/* CTAs */
.prods-glass .prod-cta{color:#fff;border-bottom-color:var(--gold)}
.prods-glass .prod-cta:hover{color:var(--gold-light);gap:12px}

/* Featured (AI Associate) — gold-tinted glass for visual dominance */
.prods-glass .prod-featured{
  background:linear-gradient(135deg, rgba(198,178,93,.18) 0%, rgba(213,196,123,.06) 100%);
  border-color:rgba(213,196,123,.45);
  box-shadow:0 28px 60px rgba(198,178,93,.18), 0 0 0 1px rgba(213,196,123,.12);
}
.prods-glass .prod-featured:hover{
  background:linear-gradient(135deg, rgba(198,178,93,.26) 0%, rgba(213,196,123,.10) 100%);
  border-color:rgba(213,196,123,.65);
  box-shadow:0 36px 72px rgba(198,178,93,.28), 0 0 0 1px rgba(213,196,123,.20);
  transform:translateY(-4px);
}
.prods-glass .prod-featured .prod-icon{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.24)}
.prods-glass .prod-featured .prod-name{color:#fff}
.prods-glass .prod-featured .prod-desc{color:rgba(255,255,255,.84)}
.prods-glass .prod-featured .prod-features li{color:rgba(255,255,255,.90)}

/* Dark-mode specificity guards — keep glass effect when [data-mode=dark] flips on */
:root[data-mode="dark"] .prods-glass .prod-mode{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
:root[data-mode="dark"] .prods-glass .prod-flow-step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
:root[data-mode="dark"] .prods-glass .prod-flow-step-accent{background:rgba(213,196,123,.18);border-color:rgba(213,196,123,.42)}
:root[data-mode="dark"] .prods-glass .prod-featured{background:linear-gradient(135deg, rgba(198,178,93,.18) 0%, rgba(213,196,123,.06) 100%);border-color:rgba(213,196,123,.45)}

/* Dark mode for products (cards handled by the shared group above) */
:root[data-mode="dark"] .prod-mode{background:var(--bg-muted)}
:root[data-mode="dark"] .prod-flow-step{background:var(--bg-muted)}
:root[data-mode="dark"] .prod-flow-step-accent{background:rgba(213,196,123,.12);border-color:rgba(213,196,123,.35)}
/* Featured card keeps its dark treatment in dark mode — use deepest bg so it still pops */
:root[data-mode="dark"] .prod-featured{background:#050B14;border-color:#050B14}
:root[data-mode="dark"] .prod-featured:hover{border-color:var(--navy-light)}

/* ─── Scroll reveal ──────────────────────────────────────────────── */
/* JS (interact.js) adds .reveal to elements it wants to animate, then
   .is-visible when the element enters the viewport. */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .60s cubic-bezier(0.22,1,0.36,1),
             transform .60s cubic-bezier(0.22,1,0.36,1);
}
.reveal.is-visible{ opacity:1; transform:none }
/* Kill reveals immediately for users who prefer reduced motion — JS also
   bails early, but this ensures nothing stays invisible if JS is slow. */
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ─── Float card gentle bob ──────────────────────────────────────── */
@keyframes lc-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.float-card.bottom-left{ animation: lc-bob 4.5s ease-in-out infinite }
@media(prefers-reduced-motion:reduce){ .float-card.bottom-left{ animation:none } }

/* ─── "Available now" status dot — soft pulse ────────────────────── */
@keyframes lc-pulse{
  0%,100%{ box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(123,182,126,.22) }
  50%    { box-shadow:0 0 0 2px #fff,0 0 0 7px rgba(123,182,126,.40) }
}
.float-card-name::after{ animation: lc-pulse 2.6s ease-in-out infinite }
@media(prefers-reduced-motion:reduce){ .float-card-name::after{ animation:none } }

/* ─── Switcher ────────────────────────────────────────────────────── */
.v-sw{position:fixed;bottom:24px;right:24px;z-index:9999;display:inline-flex;align-items:stretch;background:#fff;border:1px solid var(--border);border-radius:9999px;box-shadow:0 4px 14px rgba(58,75,91,.10);padding:4px;font-family:'Montserrat',sans-serif;gap:2px}
.v-sw a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9999px;font-size:12px;font-weight:700;color:var(--muted-foreground);text-decoration:none;transition:all .18s;letter-spacing:.02em}
.v-sw a:hover{color:var(--navy);background:var(--cream)}
.v-sw a.on{background:var(--navy);color:var(--gold-light);box-shadow:0 2px 8px rgba(58,75,91,.22)}
.v-sw-cap{padding:0 12px 0 10px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap;display:flex;align-items:center;border-right:1px solid var(--border);margin-right:4px}
@media(max-width:520px){.v-sw-cap{display:none}}
.v-mode-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9999px;border:none;background:transparent;cursor:pointer;color:var(--muted-foreground);transition:all .18s;margin-left:6px;border-left:1px solid var(--border);padding-left:8px}
.v-mode-btn:hover{color:var(--navy);background:var(--cream)}
.v-mode-btn svg{width:16px;height:16px;display:none}
.v-mode-btn .ico-moon{display:block}
:root[data-mode="dark"] .v-mode-btn .ico-moon{display:none}
:root[data-mode="dark"] .v-mode-btn .ico-sun{display:block}

/* ─── Dark mode ───────────────────────────────────────────────────── */
:root[data-mode="dark"]{
  --navy:#E2EAF2;
  --navy-light:#C8D5DE;
  --navy-deep:#050B14;
  --gold:#D5C47B;
  --gold-light:#E4D599;
  --gold-deep:#D5C47B;
  --gold-tint:rgba(213,196,123,.10);
  --cream:#1A2330;
  --bg:#0E141C;
  --bg-card:#16202C;
  --bg-muted:#1F2A38;
  --foreground:#E2EAF2;
  --muted-foreground:#A1B0C0;
  --ink3:#7A858F;
  --border:#2A3848;
  --border-soft:#1F2A38;
}
:root[data-mode="dark"] body{background:var(--bg);color:var(--foreground)}
:root[data-mode="dark"] nav{background:rgba(14,20,28,.95)}
:root[data-mode="dark"] .banner{background:#050B14}
:root[data-mode="dark"] .logo img{filter:brightness(0) invert(1) opacity(.92)}
:root[data-mode="dark"] .btn-primary,
:root[data-mode="dark"] .btn-primary-lg{color:var(--bg)}
:root[data-mode="dark"] .hero-tab.on{background:var(--bg-card)}
:root[data-mode="dark"] .platform-pill{background:var(--bg-card)}
:root[data-mode="dark"] .atty,
:root[data-mode="dark"] .hstep,
:root[data-mode="dark"] .cat,
:root[data-mode="dark"] .tc,
:root[data-mode="dark"] .as-card,
:root[data-mode="dark"] .prod{background:var(--bg-card)}
:root[data-mode="dark"] .atty{background:radial-gradient(circle at 100% 0%,rgba(213,196,123,.10) 0%,transparent 60%),var(--bg-card)}
:root[data-mode="dark"] .as-card.dark{background:#050B14}
:root[data-mode="dark"] .as-card.dark:hover{background:var(--bg-muted)}
:root[data-mode="dark"] .hstep:hover{box-shadow:6px 6px 0 var(--gold)}
:root[data-mode="dark"] .pullq{background:#050B14}
:root[data-mode="dark"] section.sec.deep{background:#050B14}
:root[data-mode="dark"] section.sec.cream,:root[data-mode="dark"] .audience-split{background:var(--cream)}
:root[data-mode="dark"] section.sec.white{background:var(--bg-card)}
:root[data-mode="dark"] .cta-final{background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 100%)}
:root[data-mode="dark"] footer{background:var(--bg-card)}
:root[data-mode="dark"] .v-sw{background:var(--bg-card)}
:root[data-mode="dark"] .v-sw a.on{background:var(--gold);color:var(--bg)}

/* ════════════════════════════════════════════════════════════════════
   Soft-glass card aesthetic (v17 / Design J)
   Unified treatment for every light-section card type:
   hstep · cat · atty · tc · as-card
   — Gradient surface w/ subtle top inner highlight
   — Soft layered shadows (no brutalist 6px 6px 0)
   — Larger border-radius
   — Gentle translateY lift on hover with gold-tinted border
   ════════════════════════════════════════════════════════════════════ */

/* Section backdrops — aurora with LAWCLERK light-blue + gold + navy
   so the blue-tinted glass has a rich colour scene to frost over. */
section.sec.cream,
section.sec.white,
.audience-split{position:relative;overflow:hidden}
section.sec.cream > *,
section.sec.white > *,
.audience-split > *{position:relative;z-index:1}
section.sec.cream::before,
section.sec.white::before,
.audience-split::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(48% 42% at 14% 22%, rgba(214,228,236,.78) 0%, transparent 68%),
    radial-gradient(44% 40% at 88% 78%, rgba(198,178,93,.34) 0%, transparent 70%),
    radial-gradient(36% 32% at 72% 18%, rgba(214,228,236,.62) 0%, transparent 68%),
    radial-gradient(30% 26% at 28% 78%, rgba(58,75,91,.18) 0%, transparent 70%);
}
section.sec.white::before{
  background:
    radial-gradient(46% 40% at 16% 24%, rgba(214,228,236,.78) 0%, transparent 68%),
    radial-gradient(42% 38% at 84% 76%, rgba(198,178,93,.28) 0%, transparent 70%),
    radial-gradient(32% 28% at 62% 88%, rgba(214,228,236,.62) 0%, transparent 68%),
    radial-gradient(26% 22% at 32% 12%, rgba(58,75,91,.14) 0%, transparent 70%);
}
.audience-split::before{
  background:
    radial-gradient(52% 46% at 18% 30%, rgba(214,228,236,.78) 0%, transparent 68%),
    radial-gradient(48% 44% at 82% 70%, rgba(198,178,93,.34) 0%, transparent 70%);
}

/* ─── Light-blue glass cards ──────────────────────────────────────────
   Tinted with --bg #D6E4EC (LAWCLERK light blue) so cards feel like
   they're cut from the brand's signature pale sky. Strong blur +
   saturation pulls the aurora colours through. */
.hstep,
.cat,
.atty,
.tc,
.as-card{
  background:linear-gradient(135deg,
    rgba(214,228,236,.78) 0%,
    rgba(232,240,245,.52) 45%,
    rgba(214,228,236,.30) 100%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 1px 2px rgba(58,75,91,.05),
    0 18px 44px -12px rgba(58,75,91,.20);
  backdrop-filter:blur(30px) saturate(1.45);
  -webkit-backdrop-filter:blur(30px) saturate(1.45);
  color:var(--navy);
  transition:transform .35s cubic-bezier(0.22,1,0.36,1),box-shadow .35s,border-color .35s,background .35s;
}

.hstep:hover,
.cat:hover,
.atty:hover,
.tc:hover,
.as-card:hover{
  transform:translateY(-4px);
  background:linear-gradient(135deg,
    rgba(214,228,236,.88) 0%,
    rgba(232,240,245,.62) 45%,
    rgba(214,228,236,.40) 100%);
  border-color:rgba(213,196,123,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(58,75,91,.06),
    0 28px 58px -12px rgba(58,75,91,.24),
    0 0 0 1px rgba(213,196,123,.20);
}

/* Per-card sizing */
.cat{padding:24px 22px}
.atty{overflow:hidden;position:relative}
.atty-img{border-radius:0}
.tc{padding:30px}
.as-card{padding:42px 34px;min-height:300px}

/* Inner element colour preservation — text + icons stay in the
   original navy/gold palette. Only the surface is glass. */

/* Practice-area cards: warm gold-tinted blue glass on hover */
.cat:hover{
  background:linear-gradient(135deg,
    rgba(242,238,217,.78) 0%,
    rgba(225,228,210,.52) 45%,
    rgba(214,228,236,.32) 100%);
}

/* Attorney accent line on top-edge bumped to be visible on light glass */
.atty::before{background:linear-gradient(90deg,transparent,rgba(198,178,93,.55),transparent)}
.atty-img::after{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(123,182,126,.30)}

/* Testimonial avatar — drop the sepia filter that looked muddy on dark
   was tuned for; on light glass the original sepia is fine */

/* ─── as-card.dark variant ───────────────────────────────────────────
   This is the "Looking for work?" / freelance attorney card. Make it a
   navy-glass piece for clear contrast against the light glass partner. */
.as-card.dark{
  background:linear-gradient(135deg,
    rgba(58,75,91,.92) 0%,
    rgba(74,93,112,.84) 50%,
    rgba(58,75,91,.78) 100%);
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(30px) saturate(1.35);
  -webkit-backdrop-filter:blur(30px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 2px rgba(0,0,0,.10),
    0 24px 52px -12px rgba(58,75,91,.34);
  color:#fff;
}
.as-card.dark:hover{
  background:linear-gradient(135deg,
    rgba(74,93,112,.94) 0%,
    rgba(94,113,132,.86) 50%,
    rgba(74,93,112,.78) 100%);
  border-color:rgba(213,196,123,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 1px 2px rgba(0,0,0,.14),
    0 30px 58px -12px rgba(58,75,91,.44),
    0 0 0 1px rgba(213,196,123,.25);
}
.as-card.dark .as-card-tag{color:var(--gold-light)}
.as-card.dark h3{color:#fff}
.as-card.dark h3 em{color:var(--gold-light)}
.as-card.dark p{color:rgba(255,255,255,.80)}
.as-card.dark .as-card-cta{color:#fff;border-bottom-color:var(--gold-light)}
.as-card.dark:hover .as-card-cta{color:var(--gold-light)}

/* Dark-mode parity for all card surfaces */
:root[data-mode="dark"] .hstep,
:root[data-mode="dark"] .cat,
:root[data-mode="dark"] .atty,
:root[data-mode="dark"] .tc,
:root[data-mode="dark"] .as-card:not(.dark){
  background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);
  border-color:rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.20),
    0 16px 36px -10px rgba(0,0,0,.40);
}
:root[data-mode="dark"] .hstep:hover,
:root[data-mode="dark"] .cat:hover,
:root[data-mode="dark"] .atty:hover,
:root[data-mode="dark"] .tc:hover,
:root[data-mode="dark"] .as-card:not(.dark):hover{
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 100%);
  border-color:rgba(213,196,123,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.24),
    0 26px 52px -10px rgba(0,0,0,.50),
    0 0 0 1px rgba(213,196,123,.20);
}

/* ════════════════════════════════════════════════════════════════════
   Auth pages (v17 / Design J) — sign in + sign up share /v17/auth.html
   Dark video bg, single centered frosted-glass card, sliding tab pill.
   ════════════════════════════════════════════════════════════════════ */

/* Lock the page to viewport so the video covers everything */
.auth-body{min-height:100vh;background:var(--navy-deep);overflow-x:hidden;position:relative}
.auth-bgvid{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0;filter:saturate(.85) brightness(.74)}
.auth-bgvid-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(105deg,rgba(15,28,42,.86) 0%,rgba(15,28,42,.72) 40%,rgba(15,28,42,.40) 100%),
  linear-gradient(180deg,rgba(15,28,42,.50) 0%,rgba(15,28,42,.30) 40%,rgba(15,28,42,.70) 100%)}

/* Top bar: logo + back link */
.auth-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;max-width:1280px;margin:0 auto}
.auth-logo img{height:32px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
.auth-back{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.74);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;text-decoration:none;padding:8px 14px;border-radius:9999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s,color .2s}
.auth-back:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.30);color:#fff}
.auth-back svg{width:14px;height:14px}

/* Stage centers the card vertically with a touch of top padding */
.auth-stage{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;padding:40px 24px 80px;min-height:calc(100vh - 100px)}

/* THE CARD — frosted glass with strong blur */
.auth-card{
  width:100%;max-width:480px;
  padding:36px 36px 32px;
  background:linear-gradient(135deg,rgba(58,75,91,.52) 0%,rgba(58,75,91,.22) 100%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(0,0,0,.10),
    0 28px 64px -16px rgba(0,0,0,.40);
  color:#fff;
  view-transition-name:auth-card;
}

/* Tab pill — sign in / create account */
.auth-tabs{
  position:relative;
  display:flex;align-items:stretch;gap:2px;
  padding:5px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
  border-radius:9999px;
  margin-bottom:28px;
}
.auth-tab-indicator{
  position:absolute;top:5px;bottom:5px;left:5px;
  width:var(--auth-pill-w,calc(50% - 5px));
  transform:translateX(var(--auth-pill-x,0));
  background:rgba(255,255,255,.96);
  border-radius:9999px;
  box-shadow:0 4px 12px rgba(0,0,0,.20);
  transition:transform .36s cubic-bezier(0.22,1,0.36,1),width .36s cubic-bezier(0.22,1,0.36,1),opacity .14s ease-out;
  opacity:0;
  z-index:1;
  pointer-events:none;
  view-transition-name:auth-pill;
}
.auth-tab-indicator.placed{opacity:1}
.auth-tab{
  flex:1;
  background:transparent;border:0;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.72);
  padding:10px 16px;
  border-radius:9999px;
  cursor:pointer;
  position:relative;z-index:2;
  transition:color .18s;
}
.auth-tab:hover{color:#fff}
.auth-tab.on{color:var(--navy-deep)}

/* Pane content */
.auth-pane[hidden]{display:none}
.auth-h1{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:#fff;margin-bottom:6px}
.auth-lede{font-size:14px;color:rgba(255,255,255,.70);line-height:1.55;margin-bottom:24px}

/* Form */
.auth-form{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.auth-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-field{display:flex;flex-direction:column;gap:6px;position:relative}
.auth-field-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.78);letter-spacing:.04em}
.auth-field input{
  width:100%;
  padding:13px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  font-family:'Geist',sans-serif;font-size:14px;
  color:#fff;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.auth-field input::placeholder{color:rgba(255,255,255,.40)}
.auth-field input:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28)}
.auth-field input:focus{outline:none;background:rgba(255,255,255,.12);border-color:rgba(213,196,123,.55);box-shadow:0 0 0 3px rgba(213,196,123,.18)}
.auth-field-link{position:absolute;top:0;right:0;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:var(--gold-light);text-decoration:none;letter-spacing:.02em}
.auth-field-link:hover{color:#fff}
.auth-field-hint{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px;letter-spacing:.01em}

/* Checkbox row */
.auth-check{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.78);cursor:pointer;line-height:1.5;padding:2px 0}
.auth-check input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.30);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.auth-check input[type=checkbox]:checked{
  background:var(--gold);border-color:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:10px;
}
.auth-check a{color:var(--gold-light);text-decoration:none;border-bottom:1px solid rgba(213,196,123,.40)}
.auth-check a:hover{color:#fff;border-bottom-color:#fff}

/* Submit button */
.auth-submit{
  margin-top:6px;
  padding:15px 22px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:#fff;border:0;border-radius:10px;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(198,178,93,.28),inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .15s,box-shadow .2s,background .2s;
}
.auth-submit:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(198,178,93,.36),inset 0 1px 0 rgba(255,255,255,.20)}
.auth-submit:active{transform:translateY(0)}

/* Divider with text */
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:rgba(255,255,255,.50);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-family:'Montserrat',sans-serif;font-weight:600}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.14)}

/* OAuth buttons */
.auth-oauth-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-oauth{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;
  border-radius:10px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s;
}
.auth-oauth:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.30);transform:translateY(-1px)}
.auth-oauth svg{flex-shrink:0}

/* Foot link */
.auth-foot{margin-top:22px;text-align:center;font-size:13px;color:rgba(255,255,255,.66)}
.auth-link-btn{background:none;border:0;color:var(--gold-light);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0;margin-left:4px;text-decoration:none;border-bottom:1px solid rgba(213,196,123,.50);padding-bottom:1px;transition:color .18s,border-color .18s}
.auth-link-btn:hover{color:#fff;border-bottom-color:#fff}

/* ── Sign-up specific: role selector ─────────────────────────────── */
.auth-role{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.auth-role-card{
  cursor:pointer;position:relative;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:14px;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.auth-role-card input{position:absolute;opacity:0;pointer-events:none}
.auth-role-card:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28)}
.auth-role-card:has(input:checked){background:linear-gradient(135deg,rgba(198,178,93,.22) 0%,rgba(213,196,123,.08) 100%);border-color:rgba(213,196,123,.55);box-shadow:0 0 0 1px rgba(213,196,123,.30),0 4px 14px rgba(198,178,93,.18)}
.auth-role-body{display:flex;align-items:center;gap:11px}
.auth-role-icon{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;
  background:rgba(213,196,123,.20);color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(213,196,123,.30);
  transition:background .2s,color .2s;
}
.auth-role-icon svg{width:18px;height:18px;stroke-width:2}
.auth-role-card:has(input:checked) .auth-role-icon{background:var(--gold);color:#fff}
.auth-role-name{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;color:#fff;line-height:1.2}
.auth-role-desc{font-size:11px;color:rgba(255,255,255,.62);margin-top:2px}

/* View Transition glue — let the pane height auto-animate during morph */
::view-transition-group(auth-card){animation-duration:.42s;animation-timing-function:cubic-bezier(0.22,1,0.36,1)}
::view-transition-group(auth-pill){animation-duration:.36s;animation-timing-function:cubic-bezier(0.22,1,0.36,1);z-index:1}
::view-transition-old(auth-pill),::view-transition-new(auth-pill){animation:none}

/* Mobile */
@media (max-width:540px){
  .auth-card{padding:28px 24px}
  .auth-top{padding:16px 20px}
  .auth-role{grid-template-columns:1fr}
  .auth-oauth-row{grid-template-columns:1fr}
  .auth-field-row{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════════
   THEME PREVIEW PILL  (v17 / Design J)
   Floats top-right so user can A/B between three card treatments.
   ════════════════════════════════════════════════════════════════════ */
.theme-pill{
  position:fixed;bottom:18px;right:18px;z-index:100;
  display:inline-flex;align-items:center;gap:4px;
  padding:5px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:9999px;
  box-shadow:0 10px 26px rgba(58,75,91,.20),0 0 0 1px rgba(255,255,255,.6) inset;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:'Montserrat',sans-serif;
}
.theme-pill-cap{font-size:9px;font-weight:700;color:var(--ink3);letter-spacing:.14em;text-transform:uppercase;padding:0 8px 0 10px;line-height:1}
.theme-pill button{
  background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--ink3);
  padding:7px 12px;border-radius:9999px;
  transition:background .18s,color .18s;
}
.theme-pill button:hover{color:var(--navy)}
.theme-pill button.on{background:var(--navy);color:#fff;box-shadow:0 2px 6px rgba(58,75,91,.18)}

/* Dark + white themes — swap pill chrome for contrast */
:root[data-theme="dark"] .theme-pill{background:rgba(42,56,69,.92);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .theme-pill-cap{color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .theme-pill button{color:rgba(255,255,255,.60)}
:root[data-theme="dark"] .theme-pill button:hover{color:#fff}
:root[data-theme="dark"] .theme-pill button.on{background:var(--gold);color:var(--navy-deep);box-shadow:0 2px 6px rgba(198,178,93,.40)}

:root[data-theme="white"] .theme-pill{background:#fff;border-color:#E2E8F0;box-shadow:0 6px 18px rgba(0,0,0,.10)}

/* ════════════════════════════════════════════════════════════════════
   THEME 2 · DARK — full navy-deep background
   Hero already dark; sections + cards inherit the navy palette.
   ════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] body{background:var(--navy-deep);color:#fff}

/* Section bgs all collapse to navy-deep variations */
:root[data-theme="dark"] section.sec.cream{background:var(--navy-deep)}
:root[data-theme="dark"] section.sec.white{background:#243341}
:root[data-theme="dark"] section.sec.deep{background:#1B2630}
:root[data-theme="dark"] .audience-split{background:var(--navy-deep)}
:root[data-theme="dark"] section.sec{border-bottom-color:rgba(255,255,255,.06)}
:root[data-theme="dark"] .trust{background:var(--navy-deep);border-bottom-color:rgba(255,255,255,.06)}
:root[data-theme="dark"] .trust-label{color:rgba(255,255,255,.50);border-right-color:rgba(255,255,255,.18)}
:root[data-theme="dark"] .trust-logos{opacity:.45}
:root[data-theme="dark"] .trust-logos span{color:#fff}
:root[data-theme="dark"] .cta-final{background:linear-gradient(180deg,#1B2630 0%,var(--navy-deep) 100%)}
:root[data-theme="dark"] nav{background:rgba(42,56,69,.92);border-bottom-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .nav-links a{color:rgba(255,255,255,.78)}
:root[data-theme="dark"] .nav-links a:hover{color:var(--gold-light);background:rgba(213,196,123,.10)}
:root[data-theme="dark"] .path-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.86)}
/* LAW-784 issue 3. The rule above colours the pill, but `.path-pill small` then
   overrides it with --muted-foreground (#5D5D5D) and `::after` with --gold-deep.
   Neither token is redefined under [data-theme] -- v17 dark works per element,
   and the palette is only re-tokenised under the LEGACY [data-mode]. So on the
   dark pill (6% white over the nav, an effective #2F3B46) "Are you a" sat at
   1.74:1. Same root cause as the legal-document fix below and as the wordmark.
   .62 rather than plain white keeps `small` visibly secondary to `strong`
   (8.97:1) while clearing AA: 5.53:1.

   The arrow was reported as faint grey and is not -- it measures #A89844, 3.95:1,
   already past the 3:1 non-text bar. Moved to --gold-light anyway (6.55:1),
   which is the established dark-mode gold here (see .nav-links a:hover).
   Both selectors cover the hire-side twin too: same classes, different copy. */
:root[data-theme="dark"] .path-pill small{color:rgba(255,255,255,.62)}
:root[data-theme="dark"] .path-pill::after{color:var(--gold-light)}
:root[data-theme="dark"] .btn-text{color:rgba(255,255,255,.80)}
:root[data-theme="dark"] .btn-outline{color:#fff;border-color:rgba(255,255,255,.30)}
:root[data-theme="dark"] .btn-outline:hover{background:rgba(255,255,255,.10);border-color:rgba(213,196,123,.50)}

/* Section content text recolours for dark bg */
:root[data-theme="dark"] .s-h2{color:#fff}
:root[data-theme="dark"] .s-h2 em{color:var(--gold-light)}
:root[data-theme="dark"] .s-sub{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .s-eyebrow{color:var(--gold-light)}
:root[data-theme="dark"] .cta-final h2{color:#fff}
:root[data-theme="dark"] .cta-final h2 em{color:var(--gold-light)}
:root[data-theme="dark"] .cta-final p{color:rgba(255,255,255,.72)}

/* Aurora — soft gold/light-blue glows in the dark */
:root[data-theme="dark"] section.sec.cream::before,
:root[data-theme="dark"] section.sec.white::before,
:root[data-theme="dark"] .audience-split::before{
  background:
    radial-gradient(50% 44% at 14% 22%, rgba(198,178,93,.18) 0%, transparent 70%),
    radial-gradient(46% 42% at 88% 78%, rgba(214,228,236,.10) 0%, transparent 70%),
    radial-gradient(36% 32% at 72% 18%, rgba(198,178,93,.12) 0%, transparent 70%);
}

/* Cards: subtle navy-lighter glass on dark sections */
:root[data-theme="dark"] .hstep,
:root[data-theme="dark"] .cat,
:root[data-theme="dark"] .atty,
:root[data-theme="dark"] .tc,
:root[data-theme="dark"] .as-card:not(.dark){
  background:linear-gradient(135deg,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.04) 45%,
    rgba(255,255,255,.02) 100%);
  border-color:rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 1px 2px rgba(0,0,0,.18),
    0 18px 44px -12px rgba(0,0,0,.34);
  color:#fff;
}
:root[data-theme="dark"] .hstep:hover,
:root[data-theme="dark"] .cat:hover,
:root[data-theme="dark"] .atty:hover,
:root[data-theme="dark"] .tc:hover,
:root[data-theme="dark"] .as-card:not(.dark):hover{
  background:linear-gradient(135deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.06) 45%,
    rgba(255,255,255,.03) 100%);
  border-color:rgba(213,196,123,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 1px 2px rgba(0,0,0,.22),
    0 26px 54px -12px rgba(0,0,0,.44),
    0 0 0 1px rgba(213,196,123,.20);
}

/* Inner text becomes light */
:root[data-theme="dark"] .hstep h3,
:root[data-theme="dark"] .cat h4,
:root[data-theme="dark"] .atty-name,
:root[data-theme="dark"] .tc q,
:root[data-theme="dark"] .as-card h3{color:#fff}
:root[data-theme="dark"] .hstep p,
:root[data-theme="dark"] .as-card p{color:rgba(255,255,255,.74)}
:root[data-theme="dark"] .atty-role,
:root[data-theme="dark"] .cat-rate,
:root[data-theme="dark"] .cat-count,
:root[data-theme="dark"] .tc-role,
:root[data-theme="dark"] .atty-rate small{color:rgba(255,255,255,.60)}
:root[data-theme="dark"] .atty-rate,
:root[data-theme="dark"] .atty-rating,
:root[data-theme="dark"] .tc-name{color:#fff}
:root[data-theme="dark"] .as-card-tag{color:var(--gold-light)}
:root[data-theme="dark"] .as-card h3 em{color:var(--gold-light)}
:root[data-theme="dark"] .as-card-cta{color:#fff;border-bottom-color:var(--gold-light)}
:root[data-theme="dark"] .as-card:hover .as-card-cta{color:var(--gold-light)}
:root[data-theme="dark"] .cat-icon{color:var(--gold-light)}
:root[data-theme="dark"] .atty-stats,
:root[data-theme="dark"] .tc-by{border-top-color:rgba(255,255,255,.10)}
/* Featured-counsel info-card elements in dark mode */
:root[data-theme="dark"] .atty-meta{border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .atty-meta dt{color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .atty-meta dd{color:#fff}
:root[data-theme="dark"] .atty-tags span{background:rgba(213,196,123,.16);border-color:rgba(213,196,123,.30);color:var(--gold-light)}
:root[data-theme="dark"] .atty-avatar{box-shadow:0 0 0 2px rgba(255,255,255,.15),0 0 0 3px rgba(255,255,255,.10)}
:root[data-theme="dark"] .atty-avatar::after{box-shadow:0 0 0 2px #243341}

/* benitem (Why LAWCLERK) also recolours */
:root[data-theme="dark"] .benitem h4{color:#fff}
:root[data-theme="dark"] .benitem p{color:rgba(255,255,255,.72)}

/* The dark variant of as-card already exists; ensure it still feels integrated */
:root[data-theme="dark"] .as-card.dark{
  background:linear-gradient(135deg,
    rgba(198,178,93,.30) 0%,
    rgba(74,93,112,.50) 50%,
    rgba(58,75,91,.40) 100%);
  border-color:rgba(213,196,123,.36);
}

/* Pull-quote */
:root[data-theme="dark"] .pullq{background:#1B2630}

/* Footer */
:root[data-theme="dark"] footer{background:#1B2630;border-top-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] footer h5{color:rgba(255,255,255,.92)}
:root[data-theme="dark"] footer a{color:rgba(255,255,255,.62)}
/* Was missing, and it is a real failure rather than a nicety: without it
   .ft-b p keeps the light --muted-foreground (#5D5D5D) on the #1B2630 dark
   footer, measured 2.33:1 against a 4.5 bar. footer a and footer h5 both
   got a dark rule; paragraphs were simply missed. Found while adding the
   phone numbers below the brand copy. */
:root[data-theme="dark"] footer p{color:rgba(255,255,255,.62)}
:root[data-theme="dark"] footer a:hover{color:var(--gold-light)}

/* ════════════════════════════════════════════════════════════════════
   THEME 3 · WHITE — pure white sections, darker navy-tinted glass cards
   ════════════════════════════════════════════════════════════════════ */
:root[data-theme="white"] body{background:#FAFBFC}
:root[data-theme="white"] section.sec.cream{background:#FAFBFC}
:root[data-theme="white"] section.sec.white{background:#FFFFFF}
:root[data-theme="white"] .audience-split{background:#FAFBFC}
:root[data-theme="white"] .trust{background:#FFFFFF;border-bottom-color:#EEF1F4}
:root[data-theme="white"] section.sec{border-bottom-color:#EEF1F4}
:root[data-theme="white"] nav{background:rgba(255,255,255,.96);border-bottom-color:#EEF1F4}

/* Aurora — subtler so the white sections stay clean */
:root[data-theme="white"] section.sec.cream::before,
:root[data-theme="white"] section.sec.white::before,
:root[data-theme="white"] .audience-split::before{
  background:
    radial-gradient(46% 40% at 14% 22%, rgba(214,228,236,.52) 0%, transparent 70%),
    radial-gradient(42% 38% at 88% 78%, rgba(198,178,93,.18) 0%, transparent 70%),
    radial-gradient(32% 28% at 72% 18%, rgba(214,228,236,.40) 0%, transparent 70%);
}

/* Cards: darker navy-blue glass on white sections */
:root[data-theme="white"] .hstep,
:root[data-theme="white"] .cat,
:root[data-theme="white"] .atty,
:root[data-theme="white"] .tc,
:root[data-theme="white"] .as-card:not(.dark){
  background:linear-gradient(135deg,
    rgba(58,75,91,.92) 0%,
    rgba(74,93,112,.78) 50%,
    rgba(58,75,91,.62) 100%);
  border-color:rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(58,75,91,.10),
    0 22px 50px -12px rgba(58,75,91,.32);
  color:#fff;
}
:root[data-theme="white"] .hstep:hover,
:root[data-theme="white"] .cat:hover,
:root[data-theme="white"] .atty:hover,
:root[data-theme="white"] .tc:hover,
:root[data-theme="white"] .as-card:not(.dark):hover{
  background:linear-gradient(135deg,
    rgba(74,93,112,.94) 0%,
    rgba(94,113,132,.82) 50%,
    rgba(74,93,112,.66) 100%);
  border-color:rgba(213,196,123,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 1px 2px rgba(58,75,91,.14),
    0 30px 60px -12px rgba(58,75,91,.42),
    0 0 0 1px rgba(213,196,123,.25);
}

/* Inner text light */
:root[data-theme="white"] .hstep h3,
:root[data-theme="white"] .cat h4,
:root[data-theme="white"] .atty-name,
:root[data-theme="white"] .tc q,
:root[data-theme="white"] .as-card h3{color:#fff}
:root[data-theme="white"] .hstep p,
:root[data-theme="white"] .as-card p{color:rgba(255,255,255,.78)}
:root[data-theme="white"] .atty-role,
:root[data-theme="white"] .cat-rate,
:root[data-theme="white"] .cat-count,
:root[data-theme="white"] .tc-role,
:root[data-theme="white"] .atty-rate small{color:rgba(255,255,255,.66)}
:root[data-theme="white"] .atty-rate,
:root[data-theme="white"] .atty-rating,
:root[data-theme="white"] .tc-name{color:#fff}
:root[data-theme="white"] .as-card-tag{color:var(--gold-light)}
:root[data-theme="white"] .as-card h3 em{color:var(--gold-light)}
:root[data-theme="white"] .as-card-cta{color:#fff;border-bottom-color:var(--gold-light)}
:root[data-theme="white"] .as-card:hover .as-card-cta{color:var(--gold-light)}
:root[data-theme="white"] .cat-icon{color:var(--gold-light)}
:root[data-theme="white"] .atty-stats,
:root[data-theme="white"] .tc-by{border-top-color:rgba(255,255,255,.16)}
:root[data-theme="white"] .tc-av img{filter:none}
/* Featured-counsel info-card elements in white theme (dark glass cards) */
:root[data-theme="white"] .atty-meta{border-color:rgba(255,255,255,.16)}
:root[data-theme="white"] .atty-meta dt{color:rgba(255,255,255,.60)}
:root[data-theme="white"] .atty-meta dd{color:#fff}
:root[data-theme="white"] .atty-tags span{background:rgba(213,196,123,.16);border-color:rgba(213,196,123,.30);color:var(--gold-light)}
:root[data-theme="white"] .atty-avatar{box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 0 3px rgba(255,255,255,.12)}
:root[data-theme="white"] .atty-avatar::after{box-shadow:0 0 0 2px #3a4b5b}

/* as-card.dark stays as the gold-accent variant */
:root[data-theme="white"] .as-card.dark{
  background:linear-gradient(135deg,
    rgba(168,152,68,.96) 0%,
    rgba(74,93,112,.86) 50%,
    rgba(58,75,91,.74) 100%);
  border-color:rgba(213,196,123,.40);
}

/* Mobile: shrink theme pill */
@media (max-width:540px){
  .theme-pill{bottom:12px;right:12px;padding:4px;gap:2px}
  .theme-pill-cap{display:none}
  .theme-pill button{padding:6px 10px;font-size:10px}
}

/* ════════════════════════════════════════════════════════════════════
   THEME 3 · WHITE — extended overrides
   Make hero, products section, and stat band also light.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero with video bg: switch to light overlay + navy text ────────── */
:root[data-theme="white"] .hero-bg-video{background:var(--bg)}
:root[data-theme="white"] .hero-bgvid{filter:saturate(.6) brightness(1.18)}
:root[data-theme="white"] .hero-bgvid-overlay{
  background:
    linear-gradient(105deg, rgba(214,228,236,.88) 0%, rgba(232,240,245,.74) 42%, rgba(255,255,255,.50) 100%),
    linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(214,228,236,.28) 40%, rgba(214,228,236,.62) 100%);
}

/* Eyebrow chip — light glass instead of dark */
:root[data-theme="white"] .hero-bg-video .hero-eyebrow{
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.95);
  color:var(--navy);
  box-shadow:0 4px 14px rgba(58,75,91,.10),inset 0 1px 0 rgba(255,255,255,.85);
}

/* Headline + lede back to navy */
:root[data-theme="white"] .hero-bg-video h1{color:var(--navy);text-shadow:none}
:root[data-theme="white"] .hero-bg-video h1 em{color:var(--gold-deep)}
:root[data-theme="white"] .hero-bg-video h1 em{--hl:rgba(198,178,93,.36)}
:root[data-theme="white"] .hero-bg-video .hero-lede{color:var(--muted-foreground);text-shadow:none}
:root[data-theme="white"] .hero-bg-video .hero-cta-sub{color:var(--muted-foreground)}
:root[data-theme="white"] .hero-bg-video .hero-cta-sub strong{color:var(--navy)}

/* Tab pill — original light treatment */
:root[data-theme="white"] .hero-bg-video .hero-tabs{
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.95);
  box-shadow:0 6px 18px rgba(58,75,91,.12),inset 0 1px 0 rgba(255,255,255,.85);
}
:root[data-theme="white"] .hero-bg-video .hero-tab{color:var(--muted-foreground)}
:root[data-theme="white"] .hero-bg-video .hero-tab:hover{color:var(--navy)}
:root[data-theme="white"] .hero-bg-video .hero-tab.on{color:var(--navy)}
:root[data-theme="white"] .hero-tab-indicator{background:#fff;box-shadow:0 2px 6px rgba(58,75,91,.16),0 0 0 1px var(--border)}

/* Ghost CTA — dark border on light bg */
:root[data-theme="white"] .hero-bg-video .btn-ghost-lg{
  background:rgba(255,255,255,.60);
  border-color:rgba(58,75,91,.18);
  color:var(--navy);
}
:root[data-theme="white"] .hero-bg-video .btn-ghost-lg:hover{
  background:rgba(255,255,255,.85);
  border-color:rgba(58,75,91,.32);
}

/* Platform pill */
:root[data-theme="white"] .hero-bg-video .platform-pill{
  background:rgba(255,255,255,.96);
  border-color:var(--border);
  box-shadow:0 12px 30px rgba(58,75,91,.14);
}

/* Trust row */
:root[data-theme="white"] .hero-bg-video .hero-trust{border-top-color:var(--border-soft)}
:root[data-theme="white"] .hero-bg-video .htr-n{color:var(--navy)}
:root[data-theme="white"] .hero-bg-video .htr-l{color:var(--muted-foreground)}

/* Right-column "live matches" panel — light glass */
:root[data-theme="white"] .hero-panel{
  background:linear-gradient(135deg,rgba(214,228,236,.82) 0%,rgba(232,240,245,.58) 50%,rgba(214,228,236,.34) 100%);
  border-color:rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 1px 2px rgba(58,75,91,.05),
    0 24px 56px -14px rgba(58,75,91,.22);
  color:var(--navy);
}
:root[data-theme="white"] .hero-panel-head{border-bottom-color:rgba(58,75,91,.10)}
:root[data-theme="white"] .hero-panel-label{color:var(--muted-foreground)}
:root[data-theme="white"] .hero-match:hover{background:rgba(255,255,255,.40)}
:root[data-theme="white"] .hero-match-name{color:var(--navy)}
:root[data-theme="white"] .hero-match-meta{color:var(--muted-foreground)}
:root[data-theme="white"] .hero-match-rate{color:var(--navy)}
:root[data-theme="white"] .hero-match-rate small{color:var(--ink3)}
:root[data-theme="white"] .hero-match-av{box-shadow:0 0 0 2px rgba(255,255,255,.90)}

/* Status chips — darker text for legibility on light bg */
:root[data-theme="white"] .hero-match-chip-go{
  background:rgba(123,182,126,.20);
  color:#3D7A41;
  border-color:rgba(123,182,126,.50);
}
:root[data-theme="white"] .hero-match-chip-mid{
  background:rgba(168,152,68,.18);
  color:var(--gold-deep);
  border-color:rgba(213,196,123,.55);
}

/* Footer stat card */
:root[data-theme="white"] .hero-panel-foot{
  background:linear-gradient(135deg,rgba(198,178,93,.20) 0%,rgba(213,196,123,.10) 100%);
  border-color:rgba(213,196,123,.45);
}
:root[data-theme="white"] .hero-panel-foot-icon{
  background:rgba(213,196,123,.30);
  color:var(--gold-deep);
}
:root[data-theme="white"] .hero-panel-foot-text strong{color:var(--navy)}
:root[data-theme="white"] .hero-panel-foot-text span{color:var(--muted-foreground)}
:root[data-theme="white"] .hero-panel-stats{background:rgba(255,255,255,.55);border-color:var(--border-soft)}
:root[data-theme="white"] .hero-panel-stats>div{border-right-color:var(--border-soft)}
:root[data-theme="white"] .hero-panel-stats b{color:var(--navy)}
:root[data-theme="white"] .hero-panel-stats span{color:var(--muted-foreground)}

/* ── Stat band (.sec.deep "Eight years…") — flip to light ───────────── */
:root[data-theme="white"] section.sec.deep{background:#FFFFFF;color:var(--navy);border-bottom-color:#EEF1F4}
:root[data-theme="white"] section.sec.deep .s-eyebrow{color:var(--gold-deep)}
:root[data-theme="white"] section.sec.deep .s-h2{color:var(--navy)}
:root[data-theme="white"] section.sec.deep .s-h2 em{color:var(--gold-deep)}
:root[data-theme="white"] section.sec.deep .s-sub{color:var(--muted-foreground)}
:root[data-theme="white"] section.sec.deep .statbig{color:var(--navy)}
:root[data-theme="white"] section.sec.deep .statlbl{color:var(--muted-foreground)}

/* ── Products section (.prods-glass) — light bg with dark navy glass cards ─ */
:root[data-theme="white"] .prods-glass{background:#FAFBFC}
:root[data-theme="white"] .prods-glass::before{
  background:
    radial-gradient(46% 40% at 16% 24%, rgba(214,228,236,.55) 0%, transparent 70%),
    radial-gradient(42% 38% at 84% 76%, rgba(198,178,93,.20) 0%, transparent 70%),
    radial-gradient(30% 26% at 60% 88%, rgba(214,228,236,.36) 0%, transparent 70%);
}
:root[data-theme="white"] .prods-glass .s-eyebrow{color:var(--gold-deep)}
:root[data-theme="white"] .prods-glass .s-h2{color:var(--navy)}
:root[data-theme="white"] .prods-glass .s-h2 em{color:var(--gold-deep)}
:root[data-theme="white"] .prods-glass .s-sub{color:var(--muted-foreground)}

/* Cards: dark navy glass matching the rest of white theme */
:root[data-theme="white"] .prods-glass .prod{
  background:linear-gradient(135deg,
    rgba(58,75,91,.92) 0%,
    rgba(74,93,112,.78) 50%,
    rgba(58,75,91,.62) 100%);
  border-color:rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(58,75,91,.10),
    0 24px 54px -12px rgba(58,75,91,.32);
}
:root[data-theme="white"] .prods-glass .prod:hover{
  background:linear-gradient(135deg,
    rgba(74,93,112,.94) 0%,
    rgba(94,113,132,.82) 50%,
    rgba(74,93,112,.66) 100%);
  border-color:rgba(213,196,123,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 1px 2px rgba(58,75,91,.14),
    0 32px 64px -12px rgba(58,75,91,.42),
    0 0 0 1px rgba(213,196,123,.25);
}

/* Featured (AI Associate) — gold-tinted gradient for visual dominance */
:root[data-theme="white"] .prods-glass .prod-featured{
  background:linear-gradient(135deg,
    rgba(198,178,93,.90) 0%,
    rgba(168,152,68,.82) 45%,
    rgba(58,75,91,.66) 100%);
  border-color:rgba(213,196,123,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 1px 2px rgba(58,75,91,.10),
    0 28px 60px -12px rgba(198,178,93,.32);
}
:root[data-theme="white"] .prods-glass .prod-featured:hover{
  background:linear-gradient(135deg,
    rgba(213,196,123,.96) 0%,
    rgba(198,178,93,.86) 45%,
    rgba(74,93,112,.70) 100%);
  border-color:rgba(213,196,123,.70);
}

/* Inner card text + accents (white) */
:root[data-theme="white"] .prods-glass .prod-name,
:root[data-theme="white"] .prods-glass .prod-featured .prod-name{color:#fff}
:root[data-theme="white"] .prods-glass .prod-desc{color:rgba(255,255,255,.78)}
:root[data-theme="white"] .prods-glass .prod-icon{background:rgba(213,196,123,.20);color:var(--gold-light);border-color:rgba(213,196,123,.30)}
:root[data-theme="white"] .prods-glass .prod-featured .prod-icon{background:rgba(255,255,255,.20);color:#fff;border-color:rgba(255,255,255,.30)}

/* Sub-mode tiles (Hourly / Project) inside Remote Associate card */
:root[data-theme="white"] .prods-glass .prod-mode{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
:root[data-theme="white"] .prods-glass .prod-mode:hover{background:rgba(255,255,255,.12);border-color:rgba(213,196,123,.50)}
:root[data-theme="white"] .prods-glass .prod-mode-icon{color:var(--gold-light)}
:root[data-theme="white"] .prods-glass .prod-mode-name{color:#fff}
:root[data-theme="white"] .prods-glass .prod-mode-desc{color:rgba(255,255,255,.70)}
:root[data-theme="white"] .prods-glass .prod-mode-rate{color:var(--gold-light)}

/* AI "Work starts immediately" callout */
:root[data-theme="white"] .prods-glass .prod-instant{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.30);
  color:#fff;
}
:root[data-theme="white"] .prods-glass .prod-instant svg{color:#fff;stroke:#fff}

/* Feature checklist */
:root[data-theme="white"] .prods-glass .prod-features li{color:rgba(255,255,255,.84)}

/* Hybrid flow chips */
:root[data-theme="white"] .prods-glass .prod-flow-step{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.74)}
:root[data-theme="white"] .prods-glass .prod-flow-step-accent{background:rgba(213,196,123,.30);border-color:rgba(213,196,123,.50);color:#fff}
:root[data-theme="white"] .prods-glass .prod-flow-arrow{color:var(--gold-light)}

/* CTAs */
:root[data-theme="white"] .prods-glass .prod-cta{color:#fff;border-bottom-color:var(--gold)}
:root[data-theme="white"] .prods-glass .prod-cta:hover{color:var(--gold-light)}

/* Badges */
:root[data-theme="white"] .prods-glass .prod-badge{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.30)}
:root[data-theme="white"] .prods-glass .prod-badge-new{background:var(--gold);color:var(--navy-deep);border-color:transparent}

/* ── Pull-quote ──────────────────────────────────────────────────────── */
:root[data-theme="white"] .pullq{background:#FFFFFF;border-bottom:1px solid #EEF1F4}
:root[data-theme="white"] .pullq-tx{color:var(--navy)}
:root[data-theme="white"] .pullq-by{color:var(--muted-foreground)}


/* ════════════════════════════════════════════════════════════════════
   THEME · REFINED (v17 / Design J)
   A polish-pass on Blue Glass that addresses each grade weakness:
   ① Tonal rhythm   — cream warms (peach aurora), white cools (more blue)
   ② Softer edges   — border drops to .42 white, lets glass blend in
   ③ Gold thread    — a 1px gold gradient pinned to the top of every card
                      so gold becomes the card identity, not just hover
   ④ Inner depth    — layered: blue tint + warm gold corner glow + chromatic
                      blue refraction on the right edge for "real glass"
   ⑤ Hover lights   — inner glow instead of outer ring; card "wakes up"
                      from within rather than gaining a frame
   ⑥ Bigger radius  — 26px for a softer, more premium silhouette
   ════════════════════════════════════════════════════════════════════ */

/* ── Section tonal rhythm: warm vs cool aurora distinction ─────────── */
:root[data-theme="refined"] section.sec.cream::before{
  background:
    /* Warm side — peach/gold dominant */
    radial-gradient(50% 44% at 14% 22%, rgba(214,228,236,.62) 0%, transparent 70%),
    radial-gradient(46% 42% at 88% 78%, rgba(213,196,123,.48) 0%, transparent 70%),
    radial-gradient(36% 32% at 72% 18%, rgba(245,228,196,.42) 0%, transparent 70%),
    radial-gradient(30% 26% at 28% 78%, rgba(168,152,68,.28) 0%, transparent 70%);
}
:root[data-theme="refined"] section.sec.white::before{
  background:
    /* Cool side — light-blue dominant */
    radial-gradient(48% 42% at 16% 24%, rgba(214,228,236,.78) 0%, transparent 70%),
    radial-gradient(44% 40% at 84% 76%, rgba(168,180,196,.36) 0%, transparent 70%),
    radial-gradient(32% 28% at 62% 88%, rgba(198,178,93,.22) 0%, transparent 70%),
    radial-gradient(28% 24% at 32% 12%, rgba(214,228,236,.58) 0%, transparent 70%);
}
:root[data-theme="refined"] .audience-split::before{
  background:
    radial-gradient(52% 46% at 18% 30%, rgba(214,228,236,.72) 0%, transparent 70%),
    radial-gradient(48% 44% at 82% 70%, rgba(213,196,123,.42) 0%, transparent 70%);
}

/* ── Cards: layered glass with chromatic edge + bottom-right gold glow ── */
:root[data-theme="refined"] .hstep,
:root[data-theme="refined"] .cat,
:root[data-theme="refined"] .atty,
:root[data-theme="refined"] .tc,
:root[data-theme="refined"] .as-card:not(.dark){
  position:relative;
  background:
    /* Subtle warm glow in the bottom-right corner — like sunset on glass */
    radial-gradient(ellipse 70% 55% at 95% 95%, rgba(213,196,123,.14) 0%, transparent 65%),
    /* Main blue tint with smoother three-stop gradient */
    linear-gradient(135deg,
      rgba(214,228,236,.74) 0%,
      rgba(232,240,245,.50) 45%,
      rgba(214,228,236,.26) 100%);
  border:1px solid rgba(255,255,255,.42);
  border-radius:26px;
  box-shadow:
    /* Crisp top highlight (light from above) */
    inset 0 1px 0 rgba(255,255,255,.92),
    /* Subtle bottom highlight */
    inset 0 -1px 0 rgba(255,255,255,.20),
    /* Chromatic refraction hint on the right edge — blue tint */
    inset -1px 0 0 rgba(168,196,220,.32),
    /* Very subtle inner ambient glow */
    inset 0 0 28px rgba(255,255,255,.05),
    /* Soft drop */
    0 1px 2px rgba(58,75,91,.04),
    0 22px 50px -14px rgba(58,75,91,.20);
  backdrop-filter:blur(32px) saturate(1.5);
  -webkit-backdrop-filter:blur(32px) saturate(1.5);
  overflow:hidden;
}

/* Gold thread — 1px gradient line pinned to the top of every card */
:root[data-theme="refined"] .hstep::after,
:root[data-theme="refined"] .cat::after,
:root[data-theme="refined"] .tc::after,
:root[data-theme="refined"] .as-card:not(.dark)::after{
  content:'';
  position:absolute;top:0;left:14%;right:14%;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(213,196,123,.62) 50%,transparent 100%);
  pointer-events:none;
  z-index:2;
}
/* .atty already has its own ::before gold thread — leave it */

/* ── Hover: "light from within" instead of outer ring ────────────────── */
:root[data-theme="refined"] .hstep:hover,
:root[data-theme="refined"] .cat:hover,
:root[data-theme="refined"] .atty:hover,
:root[data-theme="refined"] .tc:hover,
:root[data-theme="refined"] .as-card:not(.dark):hover{
  transform:translateY(-5px);
  background:
    /* Upper-left brightens — like the card just caught more light */
    radial-gradient(ellipse 60% 50% at 25% 0%, rgba(255,255,255,.55) 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 95% 95%, rgba(213,196,123,.22) 0%, transparent 65%),
    linear-gradient(135deg,
      rgba(214,228,236,.86) 0%,
      rgba(232,240,245,.60) 45%,
      rgba(214,228,236,.36) 100%);
  border-color:rgba(213,196,123,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(255,255,255,.28),
    inset -1px 0 0 rgba(168,196,220,.40),
    /* Inner gold glow — the "wake up" */
    inset 0 0 36px rgba(213,196,123,.10),
    0 1px 2px rgba(58,75,91,.06),
    0 32px 64px -14px rgba(58,75,91,.26);
}

/* Gold thread brightens on hover */
:root[data-theme="refined"] .hstep:hover::after,
:root[data-theme="refined"] .cat:hover::after,
:root[data-theme="refined"] .tc:hover::after,
:root[data-theme="refined"] .as-card:not(.dark):hover::after{
  background:linear-gradient(90deg,transparent 0%,rgba(213,196,123,.92) 50%,transparent 100%);
  left:8%;right:8%;
}
:root[data-theme="refined"] .hstep::after,
:root[data-theme="refined"] .cat::after,
:root[data-theme="refined"] .tc::after,
:root[data-theme="refined"] .as-card:not(.dark)::after{
  transition:left .35s cubic-bezier(0.22,1,0.36,1),right .35s cubic-bezier(0.22,1,0.36,1),background .35s;
}

/* ── Practice-area cards: gold warmth on hover instead of cream switch ── */
:root[data-theme="refined"] .cat:hover{
  background:
    radial-gradient(ellipse 60% 50% at 25% 0%, rgba(255,255,255,.55) 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 95% 95%, rgba(213,196,123,.34) 0%, transparent 65%),
    linear-gradient(135deg,
      rgba(232,228,196,.80) 0%,
      rgba(244,238,212,.56) 45%,
      rgba(214,228,236,.32) 100%);
}

/* ── Audience-switcher dark partner — gold-tinted glass, refined ────── */
:root[data-theme="refined"] .as-card.dark{
  position:relative;
  background:
    radial-gradient(ellipse 75% 60% at 95% 95%, rgba(0,0,0,.20) 0%, transparent 70%),
    linear-gradient(135deg,
      rgba(168,152,68,.55) 0%,
      rgba(74,93,112,.46) 50%,
      rgba(58,75,91,.34) 100%);
  border-color:rgba(213,196,123,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset -1px 0 0 rgba(168,196,220,.18),
    inset 0 0 30px rgba(213,196,123,.08),
    0 22px 50px -14px rgba(58,75,91,.32);
}
:root[data-theme="refined"] .as-card.dark::after{
  content:'';
  position:absolute;top:0;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(213,196,123,.78) 50%,transparent 100%);
  z-index:2;pointer-events:none;
}
:root[data-theme="refined"] .as-card.dark:hover{
  background:
    radial-gradient(ellipse 75% 60% at 95% 95%, rgba(0,0,0,.16) 0%, transparent 70%),
    linear-gradient(135deg,
      rgba(198,178,93,.66) 0%,
      rgba(94,113,132,.56) 50%,
      rgba(74,93,112,.40) 100%);
  border-color:rgba(213,196,123,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 40px rgba(213,196,123,.16),
    0 32px 64px -14px rgba(58,75,91,.42);
}

/* ── Theme-pill chrome for Refined ────────────────────────────────── */
:root[data-theme="refined"] .theme-pill{
  background:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.65);
  box-shadow:0 10px 28px rgba(58,75,91,.22),inset 0 1px 0 rgba(255,255,255,.85),0 0 0 1px rgba(213,196,123,.18)
}
:root[data-theme="refined"] .theme-pill button.on{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);box-shadow:0 2px 6px rgba(58,75,91,.22)}

/* ── Refined: lighten the products section ────────────────────────────
   Override .sec.deep + .prods-glass so the "Choose how you add capacity"
   section matches the rest of Refined — light blue aurora bg + the same
   light blue glass cards (with gold thread, chromatic edge, inner glow).
   ─────────────────────────────────────────────────────────────────── */
:root[data-theme="refined"] .prods-glass{background:#EAF1F6}
:root[data-theme="refined"] .prods-glass::before{
  background:
    radial-gradient(48% 42% at 16% 22%, rgba(214,228,236,.82) 0%, transparent 70%),
    radial-gradient(44% 40% at 84% 78%, rgba(213,196,123,.46) 0%, transparent 70%),
    radial-gradient(36% 32% at 72% 18%, rgba(245,228,196,.42) 0%, transparent 70%),
    radial-gradient(28% 24% at 28% 78%, rgba(168,180,196,.30) 0%, transparent 70%);
}

/* Section heading text — back to navy on light bg */
:root[data-theme="refined"] .prods-glass .s-eyebrow{color:var(--gold-deep)}
:root[data-theme="refined"] .prods-glass .s-h2{color:var(--navy-deep)}
:root[data-theme="refined"] .prods-glass .s-h2 em{color:var(--gold-deep)}
:root[data-theme="refined"] .prods-glass .s-sub{color:rgba(58,75,91,.78)}

/* ── Product cards: same light glass language as the rest of Refined ── */
:root[data-theme="refined"] .prods-glass .prod{
  position:relative;
  background:
    radial-gradient(ellipse 70% 55% at 95% 95%, rgba(213,196,123,.14) 0%, transparent 65%),
    linear-gradient(135deg,
      rgba(214,228,236,.74) 0%,
      rgba(232,240,245,.50) 45%,
      rgba(214,228,236,.26) 100%);
  border:1px solid rgba(255,255,255,.42);
  border-radius:26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.20),
    inset -1px 0 0 rgba(168,196,220,.32),
    inset 0 0 28px rgba(255,255,255,.05),
    0 1px 2px rgba(58,75,91,.04),
    0 22px 50px -14px rgba(58,75,91,.20);
  backdrop-filter:blur(32px) saturate(1.5);
  -webkit-backdrop-filter:blur(32px) saturate(1.5);
  color:var(--navy-deep);
  overflow:hidden;
}
:root[data-theme="refined"] .prods-glass .prod::after{
  content:'';
  position:absolute;top:0;left:14%;right:14%;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(213,196,123,.62) 50%,transparent 100%);
  pointer-events:none;z-index:2;
  transition:left .35s cubic-bezier(0.22,1,0.36,1),right .35s cubic-bezier(0.22,1,0.36,1),background .35s;
}
:root[data-theme="refined"] .prods-glass .prod:hover{
  transform:translateY(-5px);
  background:
    radial-gradient(ellipse 60% 50% at 25% 0%, rgba(255,255,255,.55) 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 95% 95%, rgba(213,196,123,.22) 0%, transparent 65%),
    linear-gradient(135deg,
      rgba(214,228,236,.86) 0%,
      rgba(232,240,245,.60) 45%,
      rgba(214,228,236,.36) 100%);
  border-color:rgba(213,196,123,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(255,255,255,.28),
    inset -1px 0 0 rgba(168,196,220,.40),
    inset 0 0 36px rgba(213,196,123,.10),
    0 1px 2px rgba(58,75,91,.06),
    0 32px 64px -14px rgba(58,75,91,.26);
}
:root[data-theme="refined"] .prods-glass .prod:hover::after{
  background:linear-gradient(90deg,transparent 0%,rgba(213,196,123,.92) 50%,transparent 100%);
  left:8%;right:8%;
}

/* Featured "AI Associate" — gold-tinted glass for visual dominance */
:root[data-theme="refined"] .prods-glass .prod-featured{
  background:
    radial-gradient(ellipse 75% 60% at 95% 95%, rgba(168,152,68,.18) 0%, transparent 70%),
    linear-gradient(135deg,
      rgba(232,228,196,.86) 0%,
      rgba(244,238,212,.56) 45%,
      rgba(214,228,236,.30) 100%);
  border-color:rgba(213,196,123,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset -1px 0 0 rgba(168,196,220,.28),
    inset 0 0 30px rgba(213,196,123,.12),
    0 22px 54px -14px rgba(198,178,93,.26);
}
:root[data-theme="refined"] .prods-glass .prod-featured:hover{
  background:
    radial-gradient(ellipse 60% 50% at 25% 0%, rgba(255,255,255,.60) 0%, transparent 70%),
    radial-gradient(ellipse 75% 60% at 95% 95%, rgba(168,152,68,.30) 0%, transparent 70%),
    linear-gradient(135deg,
      rgba(245,236,196,.92) 0%,
      rgba(248,240,210,.64) 45%,
      rgba(214,228,236,.36) 100%);
  border-color:rgba(213,196,123,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(255,255,255,.30),
    inset 0 0 44px rgba(213,196,123,.20),
    0 32px 68px -14px rgba(198,178,93,.36);
}

/* Inner card text + accents — flip back to navy/gold-deep for the light bg */
:root[data-theme="refined"] .prods-glass .prod-name{color:var(--navy-deep)}
:root[data-theme="refined"] .prods-glass .prod-desc{color:rgba(58,75,91,.78)}
:root[data-theme="refined"] .prods-glass .prod-icon{
  background:rgba(213,196,123,.18);
  color:var(--gold-deep);
  border:1px solid rgba(213,196,123,.36);
}
:root[data-theme="refined"] .prods-glass .prod-featured .prod-icon{
  background:rgba(255,255,255,.55);
  color:var(--navy-deep);
  border-color:rgba(255,255,255,.78);
}
:root[data-theme="refined"] .prods-glass .prod-badge{
  background:rgba(58,75,91,.92);color:#fff;border-color:transparent;
}
:root[data-theme="refined"] .prods-glass .prod-badge-new{
  background:var(--gold);color:var(--navy-deep);
}

/* Sub-mode tiles (Hourly / Project-Based) inside Remote Associate */
:root[data-theme="refined"] .prods-glass .prod-mode{
  background:rgba(255,255,255,.42);
  border-color:rgba(255,255,255,.62);
}
:root[data-theme="refined"] .prods-glass .prod-mode:hover{
  background:rgba(255,255,255,.62);
  border-color:rgba(213,196,123,.55);
}
:root[data-theme="refined"] .prods-glass .prod-mode-icon{color:var(--gold-deep)}
:root[data-theme="refined"] .prods-glass .prod-mode-name{color:var(--navy-deep)}
:root[data-theme="refined"] .prods-glass .prod-mode-desc{color:rgba(58,75,91,.74)}
:root[data-theme="refined"] .prods-glass .prod-mode-rate{color:var(--gold-deep)}

/* "Work starts immediately" callout */
:root[data-theme="refined"] .prods-glass .prod-instant{
  background:rgba(213,196,123,.22);
  border-color:rgba(213,196,123,.45);
  color:var(--gold-deep);
}
:root[data-theme="refined"] .prods-glass .prod-instant svg{
  color:var(--gold-deep);stroke:var(--gold-deep);
}

/* Feature checklist text */
:root[data-theme="refined"] .prods-glass .prod-features li{color:rgba(58,75,91,.82)}

/* Hybrid flow chips (AI drafts → Attorney reviews → You receive) */
:root[data-theme="refined"] .prods-glass .prod-flow-step{
  background:rgba(255,255,255,.42);
  border-color:rgba(255,255,255,.62);
  color:rgba(58,75,91,.74);
}
:root[data-theme="refined"] .prods-glass .prod-flow-step-accent{
  background:rgba(213,196,123,.30);
  border-color:rgba(213,196,123,.55);
  color:var(--gold-deep);
}
:root[data-theme="refined"] .prods-glass .prod-flow-arrow{color:var(--gold-deep)}

/* CTAs */
:root[data-theme="refined"] .prods-glass .prod-cta{
  color:var(--navy-deep);
  border-bottom-color:var(--gold);
}
:root[data-theme="refined"] .prods-glass .prod-cta:hover{color:var(--gold-deep)}


/* ── Refined: dark treatment for browse-by-practice-area sections ─────
   #categories  (hire side: "Find counsel in your specialty.")
   #matters     (work side: "Find matters in your specialty.")
   Both get the same dark anchor moment in the Refined composition. */
:root[data-theme="refined"] section.sec.white#categories,
:root[data-theme="refined"] section.sec.white#matters{
  /* Soft slate-blue gradient matching the .as-card.dark "For Attorneys"
     card — navy on the upper-left, lightening toward the lower-right. */
  background:linear-gradient(140deg, #445A6C 0%, #536A7E 55%, #647C92 100%);
  border-bottom-color:rgba(255,255,255,.10);
}
:root[data-theme="refined"] section.sec.white#categories::before,
:root[data-theme="refined"] section.sec.white#matters::before{
  background:
    radial-gradient(50% 44% at 14% 22%, rgba(214,228,236,.18) 0%, transparent 70%),
    radial-gradient(46% 42% at 88% 78%, rgba(198,178,93,.22) 0%, transparent 70%),
    radial-gradient(36% 32% at 72% 18%, rgba(214,228,236,.14) 0%, transparent 70%),
    radial-gradient(28% 24% at 28% 78%, rgba(198,178,93,.14) 0%, transparent 70%);
}

/* Section heading text — white + gold-light em */
:root[data-theme="refined"] #categories .s-eyebrow,
:root[data-theme="refined"] #matters .s-eyebrow{color:var(--gold-light)}
:root[data-theme="refined"] #categories .s-h2,
:root[data-theme="refined"] #matters .s-h2{color:#fff}
:root[data-theme="refined"] #categories .s-h2 em,
:root[data-theme="refined"] #matters .s-h2 em{color:var(--gold-light)}
:root[data-theme="refined"] #categories .s-sub,
:root[data-theme="refined"] #matters .s-sub{color:rgba(255,255,255,.72)}

/* ── Cat cards: dark frosted-glass treatment ───────────────────────── */
:root[data-theme="refined"] #categories .cat,
:root[data-theme="refined"] #matters .cat{
  position:relative;
  background:
    radial-gradient(ellipse 70% 55% at 95% 95%, rgba(213,196,123,.18) 0%, transparent 65%),
    linear-gradient(135deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.10) 45%,
      rgba(255,255,255,.06) 100%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.10),
    inset -1px 0 0 rgba(168,196,220,.18),
    inset 0 0 28px rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.16),
    0 22px 50px -14px rgba(0,0,0,.34);
  backdrop-filter:blur(32px) saturate(1.4);
  -webkit-backdrop-filter:blur(32px) saturate(1.4);
  color:#fff;
  overflow:hidden;
}

/* Gold thread on top */
:root[data-theme="refined"] #categories .cat::after,
:root[data-theme="refined"] #matters .cat::after{
  content:'';
  position:absolute;top:0;left:14%;right:14%;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(213,196,123,.72) 50%,transparent 100%);
  pointer-events:none;z-index:2;
  transition:left .35s cubic-bezier(0.22,1,0.36,1),right .35s cubic-bezier(0.22,1,0.36,1),background .35s;
}

/* Hover: inner gold glow, no outer ring */
:root[data-theme="refined"] #categories .cat:hover,
:root[data-theme="refined"] #matters .cat:hover{
  transform:translateY(-5px);
  background:
    radial-gradient(ellipse 60% 50% at 25% 0%, rgba(255,255,255,.18) 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 95% 95%, rgba(213,196,123,.30) 0%, transparent 65%),
    linear-gradient(135deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.08) 45%,
      rgba(255,255,255,.05) 100%);
  border-color:rgba(213,196,123,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset -1px 0 0 rgba(168,196,220,.24),
    inset 0 0 40px rgba(213,196,123,.14),
    0 32px 64px -14px rgba(0,0,0,.46);
}
:root[data-theme="refined"] #categories .cat:hover::after,
:root[data-theme="refined"] #matters .cat:hover::after{
  background:linear-gradient(90deg,transparent 0%,rgba(213,196,123,.96) 50%,transparent 100%);
  left:8%;right:8%;
}

/* Inner text + accents — light on dark glass */
:root[data-theme="refined"] #categories .cat h4,
:root[data-theme="refined"] #matters .cat h4{color:#fff}
:root[data-theme="refined"] #categories .cat-icon,
:root[data-theme="refined"] #matters .cat-icon{color:var(--gold-light)}
:root[data-theme="refined"] #categories .cat-rate,
:root[data-theme="refined"] #matters .cat-rate{color:rgba(255,255,255,.84)}
:root[data-theme="refined"] #categories .cat-count,
:root[data-theme="refined"] #matters .cat-count{color:rgba(255,255,255,.60)}

/* ── Refined: "Practice on your terms" / "For Attorneys" card ─────────
   Explicit opaque slate-blue gradient matching the reference photo —
   medium slate upper-left → light gray-blue lower-right. Opaque so the
   look is consistent regardless of the section behind it. */
:root[data-theme="refined"] .as-card.dark{
  background:linear-gradient(135deg, #586E80 0%, #788C9D 52%, #9CABB8 100%);
  border:1px solid rgba(255,255,255,.20);
  border-radius:24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 2px 4px rgba(58,75,91,.10),
    0 22px 50px -14px rgba(58,75,91,.30);
  color:#fff;
}
:root[data-theme="refined"] .as-card.dark:hover{
  background:linear-gradient(135deg, #607788 0%, #8295A5 52%, #A6B4C0 100%);
  border-color:rgba(213,196,123,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 2px 4px rgba(58,75,91,.12),
    0 30px 60px -14px rgba(58,75,91,.40),
    0 0 0 1px rgba(213,196,123,.25);
}
:root[data-theme="refined"] .as-card.dark .as-card-tag{color:var(--gold-light)}
:root[data-theme="refined"] .as-card.dark h3{color:#fff}
:root[data-theme="refined"] .as-card.dark h3 em{color:var(--gold-light)}
:root[data-theme="refined"] .as-card.dark p{color:rgba(255,255,255,.86)}
:root[data-theme="refined"] .as-card.dark .as-card-cta{color:#fff;border-bottom-color:var(--gold-light)}
:root[data-theme="refined"] .as-card.dark:hover .as-card-cta{color:var(--gold-light)}

/* ════════════════════════════════════════════════════════════════════
   DAY / NIGHT SYSTEM  (v17 / Design J — committed design)
   data-theme="light"  → airy: slate hero, every section light
   data-theme="dark"   → moody: navy hero, every section dark navy glass
   Toggle via the fixed sun/moon button (daynight.js).
   ════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── LIGHT (default) ───────────────────────── */

/* Hero: slate-blue overlay (browse-by-practice-area palette) */
[data-theme="light"] .hero-bgvid{filter:saturate(.7) brightness(.86)}
[data-theme="light"] .hero-bgvid-overlay{
  background:
    linear-gradient(135deg, rgba(68,90,108,.90) 0%, rgba(83,106,126,.76) 50%, rgba(100,124,146,.52) 100%),
    linear-gradient(180deg, rgba(68,90,108,.34) 0%, transparent 42%, rgba(68,90,108,.52) 100%);
}
[data-theme="light"] .hero-eyebrow,
[data-theme="light"] .hero-tabs{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.30)}
[data-theme="light"] .hero-panel{
  background:rgba(38,52,66,.40);
  border-color:rgba(255,255,255,.16);
}

/* "For Attorneys" / "Practice on your terms" card — opaque slate accent */
[data-theme="light"] .as-card.dark{
  background:linear-gradient(135deg, #586E80 0%, #788C9D 52%, #9CABB8 100%);
  border:1px solid rgba(255,255,255,.20);
  border-radius:24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 2px 4px rgba(58,75,91,.10),
    0 22px 50px -14px rgba(58,75,91,.30);
  color:#fff;
}
[data-theme="light"] .as-card.dark:hover{
  background:linear-gradient(135deg, #607788 0%, #8295A5 52%, #A6B4C0 100%);
  border-color:rgba(213,196,123,.55);
}
[data-theme="light"] .as-card.dark .as-card-tag{color:var(--gold-light)}
[data-theme="light"] .as-card.dark h3{color:#fff}
[data-theme="light"] .as-card.dark h3 em{color:var(--gold-light)}
[data-theme="light"] .as-card.dark p{color:rgba(255,255,255,.86)}
[data-theme="light"] .as-card.dark .as-card-cta{color:#fff;border-bottom-color:var(--gold-light)}

/* Products section → airy light with light-blue glass cards
   (uses section.sec.deep.prods-glass to out-specify the base navy rule) */
[data-theme="light"] section.sec.deep.prods-glass{background:#FFFFFF;color:var(--navy);border-bottom-color:var(--border)}
[data-theme="light"] .prods-glass::before{
  background:
    radial-gradient(46% 40% at 16% 24%, rgba(214,228,236,.62) 0%, transparent 70%),
    radial-gradient(42% 38% at 84% 76%, rgba(198,178,93,.22) 0%, transparent 70%),
    radial-gradient(30% 26% at 60% 88%, rgba(214,228,236,.44) 0%, transparent 70%);
}
/* Match the "How It Works" heading colours exactly (out-specify the
   section.sec.deep .s-eyebrow / .s-h2 em rules that force pale gold-light) */
[data-theme="light"] section.sec.deep.prods-glass .s-eyebrow{color:var(--gold-deep)}
[data-theme="light"] section.sec.deep.prods-glass .s-h2{color:var(--navy)}
[data-theme="light"] section.sec.deep.prods-glass .s-h2 em{color:var(--gold-deep)}
[data-theme="light"] section.sec.deep.prods-glass .s-h2 em{--hl:rgba(198,178,93,.30)}
[data-theme="light"] section.sec.deep.prods-glass .s-sub{color:var(--muted-foreground)}

[data-theme="light"] .prods-glass .prod{
  background:linear-gradient(135deg, rgba(214,228,236,.78) 0%, rgba(232,240,245,.50) 45%, rgba(214,228,236,.28) 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 1px 2px rgba(58,75,91,.05),
    0 18px 44px -12px rgba(58,75,91,.20);
  backdrop-filter:blur(30px) saturate(1.45);
  -webkit-backdrop-filter:blur(30px) saturate(1.45);
}
[data-theme="light"] .prods-glass .prod:hover{
  background:linear-gradient(135deg, rgba(214,228,236,.88) 0%, rgba(232,240,245,.60) 45%, rgba(214,228,236,.38) 100%);
  border-color:rgba(213,196,123,.55);
}
[data-theme="light"] .prods-glass .prod-name{color:var(--navy)}
[data-theme="light"] .prods-glass .prod-desc{color:var(--muted-foreground)}
[data-theme="light"] .prods-glass .prod-icon{background:var(--gold-tint);color:var(--gold-deep);border-color:rgba(168,152,68,.25)}
[data-theme="light"] .prods-glass .prod-mode{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.75)}
[data-theme="light"] .prods-glass .prod-mode:hover{border-color:rgba(213,196,123,.50)}
[data-theme="light"] .prods-glass .prod-mode-name{color:var(--navy)}
[data-theme="light"] .prods-glass .prod-mode-desc{color:var(--muted-foreground)}
[data-theme="light"] .prods-glass .prod-mode-rate{color:var(--gold-deep)}
[data-theme="light"] .prods-glass .prod-mode-icon{color:var(--gold-deep)}
[data-theme="light"] .prods-glass .prod-features li{color:var(--muted-foreground)}
[data-theme="light"] .prods-glass .prod-flow-step{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.75);color:var(--muted-foreground)}
[data-theme="light"] .prods-glass .prod-flow-step-accent{background:var(--gold-tint);border-color:rgba(198,178,93,.45);color:var(--gold-deep)}
[data-theme="light"] .prods-glass .prod-flow-arrow{color:var(--gold)}
[data-theme="light"] .prods-glass .prod-cta{color:var(--navy);border-bottom-color:var(--gold)}
[data-theme="light"] .prods-glass .prod-cta:hover{color:var(--gold-deep)}
[data-theme="light"] .prods-glass .prod-badge{background:var(--navy);color:#fff;border-color:transparent}
[data-theme="light"] .prods-glass .prod-badge-new{background:var(--gold);color:var(--navy-deep)}

/* Featured AI Associate — warm gold-tinted glass */
[data-theme="light"] .prods-glass .prod-featured{
  background:linear-gradient(135deg, rgba(242,238,217,.86) 0%, rgba(232,221,168,.55) 45%, rgba(214,228,236,.32) 100%);
  border-color:rgba(213,196,123,.55);
}
[data-theme="light"] .prods-glass .prod-featured:hover{
  background:linear-gradient(135deg, rgba(242,238,217,.94) 0%, rgba(232,221,168,.66) 45%, rgba(214,228,236,.42) 100%);
  border-color:rgba(213,196,123,.72);
}
[data-theme="light"] .prods-glass .prod-featured .prod-icon{background:rgba(198,178,93,.22);color:var(--gold-deep)}
[data-theme="light"] .prods-glass .prod-instant{background:rgba(198,178,93,.16);border-color:rgba(198,178,93,.32);color:var(--gold-deep)}
[data-theme="light"] .prods-glass .prod-instant svg{color:var(--gold-deep);stroke:var(--gold-deep)}

/* Stat band ("By the numbers") → slate gradient matching the hero */
[data-theme="light"] section.sec.deep:not(.prods-glass){
  background:linear-gradient(135deg, #445A6C 0%, #536A7E 50%, #647C92 100%);
  color:#fff;border-bottom-color:rgba(255,255,255,.10);
}
[data-theme="light"] section.sec.deep:not(.prods-glass) .s-eyebrow{color:var(--gold-light)}
[data-theme="light"] section.sec.deep:not(.prods-glass) .s-h2{color:#fff}
[data-theme="light"] section.sec.deep:not(.prods-glass) .s-h2 em{color:var(--gold-light)}
[data-theme="light"] section.sec.deep:not(.prods-glass) .s-sub{color:rgba(255,255,255,.80)}
[data-theme="light"] section.sec.deep:not(.prods-glass) .statbig{color:#fff}
[data-theme="light"] section.sec.deep:not(.prods-glass) .statlbl{color:rgba(255,255,255,.66)}

/* Pull-quote → slate gradient matching the hero */
[data-theme="light"] .pullq{background:linear-gradient(135deg, #445A6C 0%, #536A7E 50%, #647C92 100%)}
[data-theme="light"] .pullq::before{background:radial-gradient(circle,rgba(198,178,93,.20) 0%,transparent 65%)}
[data-theme="light"] .pullq-tx{color:#fff}
[data-theme="light"] .pullq-tx em{color:var(--gold-light)}
[data-theme="light"] .pullq-tx strong{color:#fff}
[data-theme="light"] .pullq-mk{color:var(--gold-light)}
[data-theme="light"] .pullq-by{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
[data-theme="light"] .pullq-name{color:#fff}
[data-theme="light"] .pullq-role{color:rgba(255,255,255,.66)}

/* ── Day/Night toggle button (fixed, bottom-right) ─────────────────── */
/* Design version switcher (Current ↔ Fable comparison) */
.vswitch{position:fixed;bottom:18px;left:18px;z-index:120;display:flex;align-items:center;border:1px solid var(--border);border-radius:9999px;overflow:hidden;background:rgba(255,255,255,.96);box-shadow:0 10px 26px rgba(58,75,91,.20);font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.vswitch a{padding:10px 16px;color:var(--muted-foreground);transition:.18s;cursor:pointer}
.vswitch a:hover{color:var(--navy)}
.vswitch a.on{background:var(--navy);color:#fff;cursor:default}
@media (max-width:540px){.vswitch{bottom:12px;left:12px}.vswitch a{padding:8px 13px}}

.daynight-toggle{
  position:fixed;bottom:18px;right:18px;z-index:100;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(58,75,91,.20),inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  cursor:pointer;color:var(--navy);
  transition:background .25s,border-color .2s,transform .2s,color .25s,box-shadow .25s;
}
.daynight-toggle:hover{transform:translateY(-2px);border-color:var(--gold)}
.daynight-toggle svg{width:20px;height:20px;position:absolute;transition:opacity .25s ease,transform .4s cubic-bezier(0.22,1,0.36,1)}
/* Light mode → show MOON (click to go dark) */
.daynight-toggle .dn-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.daynight-toggle .dn-moon{opacity:1;transform:none}
/* Dark mode → show SUN (click to go light) */
.daynight-toggle.is-dark{
  background:rgba(42,56,69,.92);
  border-color:rgba(255,255,255,.18);
  color:var(--gold-light);
  box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.12);
}
.daynight-toggle.is-dark .dn-sun{opacity:1;transform:none}
.daynight-toggle.is-dark .dn-moon{opacity:0;transform:rotate(90deg) scale(.5)}
@media (max-width:540px){.daynight-toggle{bottom:12px;right:12px;width:42px;height:42px}}

/* ── Dark mode: "By the numbers" + pull-quote echo the navy hero ──────
   Subtle deep-navy diagonal gradient mirroring the hero's overlay so
   these two sections read as the same foundation colour in dark mode. */
:root[data-theme="dark"] section.sec.deep:not(.prods-glass){
  background:linear-gradient(135deg, #1B2630 0%, #243341 55%, #2E3F4E 100%);
}
:root[data-theme="dark"] .pullq{
  background:linear-gradient(135deg, #1B2630 0%, #243341 55%, #2E3F4E 100%);
}
:root[data-theme="dark"] .pullq::before{background:radial-gradient(circle,rgba(198,178,93,.16) 0%,transparent 65%)}

/* ════════════════════════════════════════════════════════════════════
   "Browse by practice area" (#categories / #matters) — matches the
   "By the numbers" stat band exactly: slate gradient in Light, navy
   gradient in Dark. Dark frosted-glass cards sit on top.
   ════════════════════════════════════════════════════════════════════ */

/* ── LIGHT: slate gradient (same as stat band + hero) ──────────────── */
[data-theme="light"] section.sec.white#categories,
[data-theme="light"] section.sec.white#matters{
  background:linear-gradient(135deg, #445A6C 0%, #536A7E 50%, #647C92 100%);
  border-bottom-color:rgba(255,255,255,.10);
}
[data-theme="light"] section.sec.white#categories::before,
[data-theme="light"] section.sec.white#matters::before{
  background:
    radial-gradient(46% 40% at 14% 22%, rgba(255,255,255,.14) 0%, transparent 70%),
    radial-gradient(42% 38% at 88% 78%, rgba(198,178,93,.20) 0%, transparent 70%),
    radial-gradient(34% 30% at 72% 18%, rgba(255,255,255,.10) 0%, transparent 70%);
}
[data-theme="light"] #categories .s-eyebrow,
[data-theme="light"] #matters .s-eyebrow{color:var(--gold-light)}
[data-theme="light"] #categories .s-h2,
[data-theme="light"] #matters .s-h2{color:#fff}
[data-theme="light"] #categories .s-h2 em,
[data-theme="light"] #matters .s-h2 em{color:var(--gold-light)}
[data-theme="light"] #categories .s-sub,
[data-theme="light"] #matters .s-sub{color:rgba(255,255,255,.80)}

/* ── DARK: navy gradient (same as stat band) ───────────────────────── */
:root[data-theme="dark"] section.sec.white#categories,
:root[data-theme="dark"] section.sec.white#matters{
  background:linear-gradient(135deg, #1B2630 0%, #243341 55%, #2E3F4E 100%);
}

/* ── Cards (.cat): dark frosted glass in BOTH modes ────────────────── */
[data-theme="light"] #categories .cat,
[data-theme="light"] #matters .cat,
:root[data-theme="dark"] #categories .cat,
:root[data-theme="dark"] #matters .cat{
  position:relative;
  background:
    radial-gradient(ellipse 70% 55% at 95% 95%, rgba(213,196,123,.18) 0%, transparent 65%),
    linear-gradient(135deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.10) 45%,
      rgba(255,255,255,.06) 100%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset -1px 0 0 rgba(168,196,220,.18),
    inset 0 0 28px rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.16),
    0 22px 50px -14px rgba(0,0,0,.34);
  backdrop-filter:blur(32px) saturate(1.4);
  -webkit-backdrop-filter:blur(32px) saturate(1.4);
  color:#fff;
  overflow:hidden;
}
[data-theme="light"] #categories .cat::after,
[data-theme="light"] #matters .cat::after,
:root[data-theme="dark"] #categories .cat::after,
:root[data-theme="dark"] #matters .cat::after{
  content:'';position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(213,196,123,.72) 50%,transparent 100%);
  pointer-events:none;z-index:2;
  transition:left .35s cubic-bezier(0.22,1,0.36,1),right .35s cubic-bezier(0.22,1,0.36,1),background .35s;
}
[data-theme="light"] #categories .cat:hover,
[data-theme="light"] #matters .cat:hover,
:root[data-theme="dark"] #categories .cat:hover,
:root[data-theme="dark"] #matters .cat:hover{
  transform:translateY(-5px);
  background:
    radial-gradient(ellipse 60% 50% at 25% 0%, rgba(255,255,255,.18) 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 95% 95%, rgba(213,196,123,.30) 0%, transparent 65%),
    linear-gradient(135deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.14) 45%,
      rgba(255,255,255,.08) 100%);
  border-color:rgba(213,196,123,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset -1px 0 0 rgba(168,196,220,.24),
    inset 0 0 40px rgba(213,196,123,.14),
    0 32px 64px -14px rgba(0,0,0,.46);
}
[data-theme="light"] #categories .cat:hover::after,
[data-theme="light"] #matters .cat:hover::after,
:root[data-theme="dark"] #categories .cat:hover::after,
:root[data-theme="dark"] #matters .cat:hover::after{
  background:linear-gradient(90deg,transparent 0%,rgba(213,196,123,.96) 50%,transparent 100%);
  left:8%;right:8%;
}
[data-theme="light"] #categories .cat h4,
[data-theme="light"] #matters .cat h4,
:root[data-theme="dark"] #categories .cat h4,
:root[data-theme="dark"] #matters .cat h4{color:#fff}
[data-theme="light"] #categories .cat-icon,
[data-theme="light"] #matters .cat-icon,
:root[data-theme="dark"] #categories .cat-icon,
:root[data-theme="dark"] #matters .cat-icon{color:var(--gold-light)}
[data-theme="light"] #categories .cat-rate,
[data-theme="light"] #matters .cat-rate,
:root[data-theme="dark"] #categories .cat-rate,
:root[data-theme="dark"] #matters .cat-rate{color:rgba(255,255,255,.84)}
[data-theme="light"] #categories .cat-count,
[data-theme="light"] #matters .cat-count,
:root[data-theme="dark"] #categories .cat-count,
:root[data-theme="dark"] #matters .cat-count{color:rgba(255,255,255,.60)}

/* ════════════════════════════════════════════════════════════════════
   LIGHT MODE · continuous page background (no per-section seams)
   One flowing gradient on <body> blends light-blue ↔ light-gray with
   aurora pools that span the whole page. Light sections go transparent
   so the backdrop flows through them; borders between light sections
   are removed. Dark slate anchors keep their own opaque backgrounds.
   ════════════════════════════════════════════════════════════════════ */
[data-theme="light"] body{
  background-color:#E2E8EC;
  background-image:
    radial-gradient(52% 38% at 10% 6%,  rgba(198,178,93,.20) 0%, transparent 62%),
    radial-gradient(48% 34% at 90% 26%, rgba(168,152,68,.13) 0%, transparent 62%),
    radial-gradient(50% 36% at 14% 56%, rgba(198,178,93,.14) 0%, transparent 62%),
    radial-gradient(52% 38% at 88% 80%, rgba(58,75,91,.10)  0%, transparent 62%),
    linear-gradient(165deg, #D6E4EC 0%, #E6E9E8 32%, #EAE8E7 52%, #E1E7EB 72%, #D6E4EC 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}

/* Light sections become transparent so the page backdrop flows through.
   (#categories / #matters are excluded — they're the slate anchors.) */
[data-theme="light"] .trust,
[data-theme="light"] section.sec.cream,
[data-theme="light"] section.sec.white:not(#categories):not(#matters),
[data-theme="light"] section.sec.deep.prods-glass,
[data-theme="light"] .audience-split,
[data-theme="light"] .cta-final{background:transparent}

/* Kill the per-section clipped auroras on the light sections — the
   page-level backdrop handles atmosphere now. */
[data-theme="light"] section.sec.cream::before,
[data-theme="light"] section.sec.white:not(#categories):not(#matters)::before,
[data-theme="light"] section.sec.deep.prods-glass::before,
[data-theme="light"] .audience-split::before{display:none}

/* Remove the hard lines between sections (the border-bottom seams).
   Dark anchors transition via colour change, so no border needed. */
[data-theme="light"] section.sec,
[data-theme="light"] .trust{border-bottom-color:transparent}
[data-theme="light"] .pullq{border-bottom-color:transparent}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE · continuous page background (matches the light-mode flow)
   One deep-navy gradient on <body> with aurora pools spanning the page.
   Dark content sections go transparent; slate/navy anchors stay opaque.
   ════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] body{
  background-color:#222F3B;
  background-image:
    radial-gradient(52% 38% at 10% 6%,  rgba(198,178,93,.14) 0%, transparent 62%),
    radial-gradient(48% 34% at 90% 26%, rgba(214,228,236,.06) 0%, transparent 62%),
    radial-gradient(50% 36% at 14% 56%, rgba(198,178,93,.10) 0%, transparent 62%),
    radial-gradient(52% 38% at 88% 80%, rgba(214,228,236,.05) 0%, transparent 62%),
    linear-gradient(165deg, #2A3845 0%, #243341 32%, #2E3F4E 52%, #232F3B 72%, #2A3845 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}

/* Dark content sections become transparent so the backdrop flows.
   (#categories / #matters / stat band / pull-quote stay opaque anchors.) */
:root[data-theme="dark"] .trust,
:root[data-theme="dark"] section.sec.cream,
:root[data-theme="dark"] section.sec.white:not(#categories):not(#matters),
:root[data-theme="dark"] section.sec.deep.prods-glass,
:root[data-theme="dark"] .audience-split,
:root[data-theme="dark"] .cta-final{background:transparent}

/* Kill the per-section clipped auroras on the flowing dark sections */
:root[data-theme="dark"] section.sec.cream::before,
:root[data-theme="dark"] section.sec.white:not(#categories):not(#matters)::before,
:root[data-theme="dark"] section.sec.deep.prods-glass::before,
:root[data-theme="dark"] .audience-split::before{display:none}

/* Remove the hard border seams between sections */
:root[data-theme="dark"] section.sec,
:root[data-theme="dark"] .trust,
:root[data-theme="dark"] .pullq{border-bottom-color:transparent}

/* ── Demo-reservation banner (top, like lawclerk.legal) ────────────── */
.demo-banner{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:8px var(--gutter);
  background:var(--navy);
  color:#fff;text-align:center;
  font-size:13px;line-height:1.4;
}
.demo-banner-text{color:rgba(255,255,255,.90);font-weight:500}
.demo-banner-text strong{color:var(--gold-light);font-weight:700}
/* Match the hero "Talk to Us" ghost button — frosted glass + white outline */
.demo-banner-cta{
  display:inline-flex;align-items:center;
  padding:6px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  border-radius:8px;text-decoration:none;white-space:nowrap;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s;
}
.demo-banner-cta:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);transform:translateY(-1px)}
@media(max-width:600px){.demo-banner{gap:10px;padding:8px 16px;font-size:12px}}

/* ── Products heading legibility in DARK mode (white on dark) ─────────
   The base .s-h2 is navy; on the dark products background the main
   "Choose how you add capacity" text was dark-on-dark. Force light. */
:root[data-theme="dark"] .prods-glass .s-eyebrow{color:var(--gold-light)}
:root[data-theme="dark"] .prods-glass .s-h2{color:#fff}
:root[data-theme="dark"] .prods-glass .s-h2 em{color:var(--gold-light)}
:root[data-theme="dark"] .prods-glass .s-sub{color:rgba(255,255,255,.80)}

/* ── "Solutions" nav dropdown (click → #products, hover → sub-options) ── */
.nav-dd{position:relative;display:inline-flex}
.nav-dd-trigger{display:inline-flex !important;align-items:center;gap:5px}
.nav-dd-trigger svg{width:11px;height:11px;transition:transform .25s}
.nav-dd:hover .nav-dd-trigger svg{transform:rotate(180deg)}
.nav-dd-menu{
  position:absolute;top:100%;left:0;min-width:252px;
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(247,250,252,.97) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 54px -14px rgba(58,75,91,.34);
  padding:8px;margin-top:11px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:top left;
  transition:opacity .22s ease,transform .22s cubic-bezier(0.22,1,0.36,1),visibility .22s;
  z-index:60;
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
}
/* caret pointing up to the trigger */
.nav-dd-menu::before{content:'';position:absolute;top:-6px;left:26px;width:11px;height:11px;background:rgba(255,255,255,.99);border-left:1px solid var(--border);border-top:1px solid var(--border);border-top-left-radius:3px;transform:rotate(45deg)}
/* invisible bridge so the menu survives the cursor crossing the gap */
.nav-dd-menu::after{content:'';position:absolute;top:-13px;left:0;right:0;height:13px}
.nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:none}
.nav-dd-menu a{
  position:relative;display:flex;align-items:center;justify-content:flex-start;gap:9px;
  /* right padding reserves a lane for the absolutely-placed hover chevron; with
     the old 14px the label + pill + chevron overflowed the nowrap column and the
     chevron rendered outside the link, in the gutter beside the next column's
     item (it looked like "> Mid-Size Firms" while Hourly Associate was hovered) */
  padding:10px 32px 10px 16px;border-radius:10px;min-height:40px;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;color:var(--navy);
  white-space:nowrap;letter-spacing:.01em;
  transition:background .16s,color .16s,transform .16s;
}
/* sliding gold accent on the left */
.nav-dd-menu a::before{content:'';position:absolute;left:6px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--gold);transform:scaleY(0);transition:transform .18s ease}
/* chevron that reveals on hover */
.nav-dd-menu a::after{content:'';position:absolute;right:11px;top:50%;width:15px;height:15px;flex-shrink:0;background-color:currentColor;opacity:0;transform:translateY(-50%) translateX(-4px);transition:opacity .16s,transform .16s;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.nav-dd-menu .nav-dd-pill{margin-left:auto}
.nav-dd-menu a:hover{background:var(--gold-tint);color:var(--gold-deep);transform:translateX(2px)}
.nav-dd-menu a:hover::before{transform:scaleY(1)}
.nav-dd-menu a:hover::after{opacity:.65;transform:translateY(-50%) translateX(0)}
/* Dark mode */
:root[data-theme="dark"] .nav-dd-menu{background:linear-gradient(180deg, rgba(34,46,58,.99) 0%, rgba(27,37,49,.98) 100%);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 54px -14px rgba(0,0,0,.6)}
:root[data-theme="dark"] .nav-dd-menu::before{background:rgba(34,46,58,.99);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .nav-dd-menu a{color:rgba(255,255,255,.85)}
:root[data-theme="dark"] .nav-dd-menu a::before{background:var(--gold-light)}
:root[data-theme="dark"] .nav-dd-menu a:hover{background:rgba(213,196,123,.16);color:var(--gold-light)}

/* ── Anchor-scroll offset for the sticky nav ───────────────────────────
   Without this, clicking nav links (Solutions → #products, etc.) scrolls
   the section under the 68px sticky nav so its heading is hidden. */
#products, #how, #categories, #counsel, #why, #matters{scroll-margin-top:64px}

/* Keep the dropdown trigger clickable above its own menu */
.nav-dd-trigger{position:relative;z-index:2}

/* ════════════════════════════════════════════════════════════════════
   Hamburger button + mobile-menu overlay
   Appears at ≤1140px (when nav-links collapse). Full-screen frosted
   panel slides down with stacked links + expanded sub-options.
   ════════════════════════════════════════════════════════════════════ */
.nav-burger{
  display:none;
  width:40px;height:40px;
  border:0;background:transparent;cursor:pointer;
  padding:9px 7px;
  flex-direction:column;justify-content:space-between;align-items:stretch;
  border-radius:8px;flex-shrink:0;
  transition:background .18s;
}
.nav-burger:hover{background:rgba(58,75,91,.06)}
.nav-burger span{display:block;height:2px;background:var(--navy);border-radius:1px;transition:transform .28s cubic-bezier(0.22,1,0.36,1),opacity .2s}
.nav-burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Hamburger shows only when desktop nav-links hide */
@media(max-width:1140px){.nav-burger{display:flex}}

/* ── Mobile-menu overlay ──────────────────────────────────────────── */
.mobile-menu{
  /* Start BELOW the 68px sticky nav so menu content can't scroll behind /
     above the semi-transparent nav bar. */
  position:fixed;top:68px;left:0;right:0;bottom:0;
  /* match the site's page surface (light-blue --bg), not stark white */
  background:var(--bg);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  z-index:49;
  padding:24px var(--gutter) 40px;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s ease,transform .32s cubic-bezier(0.22,1,0.36,1),visibility .28s;
}
.mobile-menu.is-open{opacity:1;visibility:visible;transform:none}
.mobile-menu-inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:8px}

/* This is a <nav>, so the global nav{} rule (sticky bar: white bg, height:68px,
   position:sticky, border-bottom, blur) leaks onto it and paints a 68px box over
   the first items. Fully neutralize those inherited properties. */
.mobile-nav{
  display:flex;flex-direction:column;gap:2px;
  /* !important: several type-level nav{} rules (base + per-theme) otherwise paint
     this container; it must always be transparent over the menu surface */
  background:none!important;height:auto!important;min-height:0;position:static!important;
  border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

.mm-group{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 0 12px;
  border-bottom:1px solid var(--border-soft);
}
.mm-group:last-of-type{border-bottom:1px solid var(--border-soft)}

.mm-link{
  display:block;
  padding:13px 14px;border-radius:10px;
  font-family:'Montserrat',sans-serif;font-size:16px;font-weight:600;
  color:var(--navy);text-decoration:none;letter-spacing:-.005em;
  transition:background .15s,color .15s;
}
.mm-link:hover{background:var(--gold-tint);color:var(--gold-deep)}
/* section label (not a link) — gold uppercase eyebrow with a hairline divider
   above it so the three groups read as distinct blocks, not one loose list */
.mm-head{
  display:block;margin:16px 0 2px;padding:16px 14px 7px;
  border-top:1px solid var(--border-soft);
  font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
}
/* first group sits right under the nav — no divider, no extra top gap */
.navset .mm-head:first-child{margin-top:0;padding-top:2px;border-top:0}
/* Join Today — primary button (mm-join, NOT mm-cta which is the reserved
   fixed-footer container) */
.mm-join{
  display:block;margin:24px 0 4px;padding:15px;border-radius:12px;
  background:var(--gold);color:var(--navy);text-align:center;text-decoration:none;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.mm-join:hover{background:var(--gold-light)}
/* Log in — secondary text link under Join Today */
.mm-login{display:block;padding:14px;text-align:center;font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--navy);text-decoration:none}
.mm-login:hover{color:var(--gold-deep)}
/* Tap-to-call in the mobile menu (LAW-649). Modelled on .mm-login so it sits
   in the same rhythm as the Log in row directly above it. .mobile-menu goes
   dark (background rgba(23,33,44,.99)) and .mm-link/.mm-login/.mm-switch all
   carry explicit #fff dark rules, so this needs one too or it is navy on
   near-black. */
.mm-call{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--navy);text-decoration:none}
.mm-call svg{width:15px;height:15px;flex-shrink:0;color:var(--gold-deep)}
.mm-call:hover{color:var(--gold-deep)}
:root[data-theme="dark"] .mm-call{color:#fff}
:root[data-theme="dark"] .mm-call svg{color:var(--gold-light)}

:root[data-theme="dark"] .mm-login{color:#fff}
/* audience-switch row */
.mm-switch{
  display:block;margin-top:8px;padding:13px 14px;border-radius:10px;border:1px solid var(--border);
  font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:var(--navy);text-decoration:none;text-align:center;transition:background .15s,color .15s,border-color .15s;
}
.mm-switch:hover{background:var(--gold-tint);color:var(--gold-deep);border-color:var(--gold)}
:root[data-theme="dark"] .mm-head{color:var(--gold-light)}
:root[data-theme="dark"] .mm-switch{color:#fff;border-color:rgba(255,255,255,.22)}

.mm-sub{
  display:block;
  padding:8px 14px 8px 30px;border-radius:8px;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;
  color:var(--muted-foreground);text-decoration:none;
  transition:background .15s,color .15s;
}
.mm-sub:hover{background:var(--gold-tint);color:var(--gold-deep)}

/* CTA stack as a fixed footer at the bottom of the viewport, sibling
   of .mobile-menu (NOT inside it — .mobile-menu's backdrop-filter
   creates a containing block that breaks position:fixed). Visible only
   when body has .mm-open (toggled by mobile-menu.js). */
.mm-cta{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;flex-direction:row;gap:10px;
  padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-top:1px solid var(--border-soft);
  z-index:51;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .25s cubic-bezier(0.22,1,0.36,1),visibility .22s;
  pointer-events:none;
}
body.mm-open .mm-cta{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mm-cta .mm-btn{flex:1;min-width:0}
.mobile-menu{padding-bottom:120px} /* /motion variant: room above its fixed .mm-cta footer */
/* live menu (SiteNav) has no fixed footer — its CTAs scroll inline, so drop the dead tail */
.mobile-menu:has(.mm-join){padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.mm-btn{
  display:block;text-align:center;text-decoration:none;
  padding:14px 20px;border-radius:10px;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
}
.mm-btn-text{color:var(--navy);background:rgba(58,75,91,.06)}
.mm-btn-text:hover{background:rgba(58,75,91,.10)}
.mm-btn-primary{color:var(--navy-deep);background:var(--gold);box-shadow:0 2px 6px rgba(168,152,68,.28)}
.mm-btn-primary:hover{background:var(--gold-light)}

/* Lock body scroll while menu is open */
body.mm-open{overflow:hidden}
/* while the menu is open, hide the floating page chrome (A/B/C/D switcher + day/night
   toggle, z-index 120) so it can't overlap the menu's Log in / action zone */
body.mm-open .vswitch,
body.mm-open .daynight-toggle{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}

/* ── Dark mode ────────────────────────────────────────────────────── */
:root[data-theme="dark"] .nav-burger span{background:rgba(255,255,255,.88)}
:root[data-theme="dark"] .nav-burger:hover{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .mobile-menu{background:rgba(23,33,44,.99)}
:root[data-theme="dark"] .mm-link,
:root[data-theme="dark"] .mm-head{color:#fff}
:root[data-theme="dark"] .mm-link:hover,
:root[data-theme="dark"] .mm-head:hover{background:rgba(213,196,123,.16);color:var(--gold-light)}
:root[data-theme="dark"] .mm-sub{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .mm-sub:hover{background:rgba(213,196,123,.16);color:var(--gold-light)}
:root[data-theme="dark"] .mm-group,
:root[data-theme="dark"] .mm-cta{background:rgba(28,40,52,.97);border-top-color:rgba(255,255,255,.10)}
:root[data-theme="dark"] .mm-btn-text{color:#fff;background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .mm-btn-text:hover{background:rgba(255,255,255,.14)}

/* Opaque nav while the mobile menu is open — prevents any underlying
   page content from showing through the translucent nav background.
   :not(.mobile-nav) so it targets only the top sticky bar, not the menu's
   own inner <nav> (which must stay transparent over the menu surface). */
body.mm-open nav:not(.mobile-nav){background:#FFFFFF}
:root[data-theme="dark"] body.mm-open nav:not(.mobile-nav){background:var(--navy-deep)}

/* Practice-area card description (replaces the old cat-rate/cat-count meta) */
.cat-desc{font-size:12.5px;line-height:1.5;margin-top:6px;letter-spacing:.005em;color:rgba(255,255,255,.78)}
[data-theme="light"] #categories .cat-desc,
[data-theme="light"] #matters .cat-desc,
:root[data-theme="dark"] #categories .cat-desc,
:root[data-theme="dark"] #matters .cat-desc{color:rgba(255,255,255,.78)}

/* Why-LAWCLERK two-column variant: heading + sub + list on the left
   (the whole content stack); photo on the right in its own column at
   its natural 4/3 ratio, vertically centered so it horizontally lines
   up with the middle of the content. */
.bencol{display:flex;flex-direction:column}
.bencol .s-sub{margin-bottom:32px}
.bengrid-full{align-items:center}

/* "Ready to scale" final CTA — side-by-side buttons */
.cta-final-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:8px}

/* Demo-booked confirmation (LAW-743). The success seal and a 3-up card grid,
   replacing the legal-document type scale the page shipped with.
   .tyb-grid caps the row at 3 so the cards do not stretch on wide screens --
   .bencard-grid is auto-fill and would give three very wide cards. */
/* Inline with the headline (David 2026-08-27). Sized in em off the h1 so the
   two stay proportional through the height tiers below -- the tiers change
   the h1 font-size and the seal follows, with no per-tier size rule. */
.tyb-head-row{display:flex;align-items:center;justify-content:center;gap:.44em;
  font-size:clamp(28px,3.2vw,38px);margin-bottom:10px;text-wrap:balance}
.tyb-head-row .s-h2{font-size:1em;margin:0;line-height:1.15}
.tyb-seal{
  flex-shrink:0;width:1.16em;height:1.16em;border-radius:50%;
  background:var(--gold-tint);color:var(--gold-deep);
  display:inline-flex;align-items:center;justify-content:center;
}
.tyb-seal svg{width:.62em;height:.62em}
/* Below ~560px the headline wraps to 2-3 lines and a vertically centred seal
   drifts away from the first line, so pin it to the top there. */
@media(max-width:560px){.tyb-head-row{align-items:flex-start;gap:.34em}
  .tyb-seal{margin-top:.1em}}
:root[data-theme="dark"] .tyb-seal{background:rgba(213,196,123,.16);color:var(--gold-light)}
.bencard-grid.tyb-grid{max-width:1040px;margin:0 auto;grid-template-columns:repeat(3,1fr)}
/* .bencard-grid is 2-up and its >:last-child:nth-child(odd) rule spans and
   centres an orphan third card. At 3-up there is no orphan, so that rule has to
   be switched off or the third card renders half-width and centred. */
.bencard-grid.tyb-grid>:last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}
@media(max-width:900px){.bencard-grid.tyb-grid{grid-template-columns:1fr}}
.tyb-grid .bencard p a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--gold)}

/* One-fold compression (David, 2026-08-27). Measured at 1440x900 the page ran
   2148px and the account CTA needed 588px of scrolling to reach -- on a
   confirmation page, where the whole point is that the next step is visible.
   Almost all of it was section padding rather than content: hero 341 + cards
   587 + cta 613 = 1541px against 832px of usable height below the 68px nav.
   Scoped to this page only. .sec and .cta-final are used on ~100 other pages
   and their generous padding is correct there. */
.sec.tyb-hero{padding-top:40px;padding-bottom:20px}
.tyb-hero .tyb-head-row{font-size:clamp(28px,3.2vw,38px)}
.tyb-hero .s-eyebrow{margin-bottom:6px}
.tyb-hero .s-sub{margin-bottom:0}
/* The hero was the only block on this page not centred (David, 2026-08-27).
   .tyb-head-row centres itself with flex, while .s-eyebrow and .s-sub inherit
   the section's default left alignment, so the three lines zig-zagged
   left / centre / left and read as broken. Centre the block instead, the same
   way .cta-final does it below (text-align on the container, line 819), rather
   than adding a second centring mechanism.
   text-align is what moves .s-eyebrow: it is an inline-flex whose box
   shrink-wraps its dash and label, so justify-content cannot position it. */
.tyb-hero .s-in{text-align:center}
/* Qualified to section.sec.tyb-hero deliberately: `section.sec.pghead .s-sub`
   sets max-width:none above 1024px (line ~5750) and this section carries
   .pghead too, so a plain `.tyb-hero .s-sub` loses on specificity and the
   max-width silently does nothing. MEASURED at 1280 wide: the sub-line was
   still 1152px with the unqualified selector. */
section.sec.tyb-hero .s-sub{max-width:540px;margin-left:auto;margin-right:auto}
.sec.tyb-cards{padding-top:28px;padding-bottom:28px}
.tyb-cards .bencard.bencard{padding:18px 20px}
.tyb-cards .bencard-icon{width:34px;height:34px;border-radius:8px;margin-bottom:10px}
.tyb-cards .bencard-icon svg,.tyb-cards .bencard-icon i{width:17px;height:17px;font-size:17px}
.tyb-cards .bencard h4{font-size:15px;margin-bottom:5px}
.tyb-cards .bencard p{font-size:13px;line-height:1.55}
.cta-final.tyb-cta{padding-top:34px;padding-bottom:44px}
.tyb-cta .s-h2{font-size:clamp(22px,2.4vw,28px)}
.tyb-cta .s-sub{margin-bottom:18px;max-width:620px;margin-left:auto;margin-right:auto}
.tyb-cta .cta-final-actions{margin-top:0}
/* Tiered by VIEWPORT HEIGHT, because that is what the fold actually depends on.
   Measured CTA-button bottom against viewport height, 3-column layout:
     1440x900  838  fits
     1366x768  822  54px short   <- very common laptop
     1280x720  822  102px short
   Two tiers rather than one aggressive set, so tall screens keep the roomier
   spacing and only short ones get squeezed. */
@media(max-height:860px){
  .sec.tyb-hero{padding-top:28px;padding-bottom:12px}
  .tyb-hero .tyb-head-row{font-size:clamp(26px,2.8vw,32px)}
  .sec.tyb-cards{padding-top:18px;padding-bottom:18px}
  .tyb-cards .bencard.bencard{padding:15px 17px}
  .tyb-cards .bencard p{font-size:12.5px;line-height:1.5}
  .cta-final.tyb-cta{padding-top:22px;padding-bottom:26px}
  .tyb-cta .s-sub{margin-bottom:14px}
}
@media(max-height:780px){
  .sec.tyb-hero{padding-top:20px;padding-bottom:8px}
  .tyb-hero .tyb-head-row{font-size:26px;margin-bottom:6px}
  .tyb-hero .s-sub{font-size:14px}
  .sec.tyb-cards{padding-top:14px;padding-bottom:14px}
  .tyb-cards .bencard.bencard{padding:13px 15px}
  .tyb-cards .bencard-icon{width:28px;height:28px;margin-bottom:8px}
  .tyb-cards .bencard h4{font-size:14px;margin-bottom:4px}
  .cta-final.tyb-cta{padding-top:18px;padding-bottom:20px}
  .tyb-cta .s-h2{font-size:22px}
  .tyb-cta .s-sub{margin-bottom:12px;font-size:14px}
}
@media(max-width:900px){ .sec.tyb-hero{padding-top:32px} .tyb-cards .bencard{padding:16px 18px} }
:root[data-theme="dark"] .tyb-grid .bencard p a{color:var(--gold-light);border-bottom-color:rgba(213,196,123,.5)}
/* Ghost variant tuned for the LIGHT cta-final background (navy outline on light) */
.btn-ghost-lg.cta-ghost{background:rgba(58,75,91,.05);border-color:rgba(58,75,91,.22);color:var(--navy);backdrop-filter:none;box-shadow:0 2px 0 rgba(58,75,91,.18)}
.btn-ghost-lg.cta-ghost:hover{background:rgba(58,75,91,.10);border-color:var(--navy);box-shadow:0 2px 0 rgba(58,75,91,.18),0 5px 16px rgba(58,75,91,.14)}
.btn-ghost-lg.cta-ghost:active{transform:translateY(2px);box-shadow:0 0 0 0 rgba(58,75,91,.18)}
/* Dark mode: light outline + white text */
:root[data-theme="dark"] .btn-ghost-lg.cta-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:#fff}
:root[data-theme="dark"] .btn-ghost-lg.cta-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}

/* ════════════════════════════════════════════════════════════════════
   Book-a-demo page (/v17/book-a-demo.html)
   Two-column layout: copy + value props on the left, demo-request
   form card on the right. Inherits the light/dark page backdrop.
   ════════════════════════════════════════════════════════════════════ */
.demo-page{padding:72px var(--gutter) 96px;position:relative}
.demo-in{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start;
}
@media(max-width:980px){.demo-in{grid-template-columns:1fr;gap:48px}}

/* LEFT — copy column */
.demo-copy{display:flex;flex-direction:column}
.demo-h1{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(34px,4.4vw,52px);font-weight:700;line-height:1.05;letter-spacing:-.02em;
  color:var(--navy);margin:8px 0 22px;
}
.demo-h1 em{font-style:italic;font-weight:600;color:var(--gold-deep);--hl:rgba(198,178,93,.30);display:inline;background-image:linear-gradient(to top,transparent 0 4px,var(--hl) 4px 14px,transparent 14px);-webkit-box-decoration-break:clone;box-decoration-break:clone}

.demo-phone{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:11px 18px;border-radius:9999px;
  background:rgba(58,75,91,.06);border:1px solid rgba(58,75,91,.18);
  font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:var(--navy);
  text-decoration:none;letter-spacing:-.005em;
  margin-bottom:24px;transition:background .2s,border-color .2s,transform .2s;
}
.demo-phone:hover{background:rgba(58,75,91,.10);border-color:var(--navy);transform:translateY(-1px)}
.demo-phone svg{width:16px;height:16px;color:var(--gold-deep)}

/* ── Sales-line pill beside a product page's demo CTA (LAW-649) ──
   Two modifiers because the two CTA slots sit on OPPOSITE surfaces, which is not
   visible from the markup: the product heroes are dark video (.hero-bg-video, h1
   is #fff and the ghost button carries white text) while .cta-final is a
   cream-to-bg gradient the stylesheet itself calls light at .btn-ghost-lg
   .cta-ghost. Dropping the base pill into both would put navy text on the dark
   hero. Measure the surface before reusing a pill; the class name does not say.

   Both share the layout half: display:flex + width:fit-content breaks the pill
   onto its own line under the button row (the parents are blocks, so an
   inline-flex pill would otherwise sit beside "Talk to Us"), and the 14px top
   margin matches the .hero-cta-sub precedent. margin overrides the base
   margin-bottom:24px, which is there for /book-a-demo's hero, not for this.

   white-space:nowrap is LOAD-BEARING, not tidiness. Unlike .btn-ghost-lg, the
   base .demo-phone never set it -- it did not need to, because the two existing
   pills are inline-flex and size to their content. Under width:fit-content the
   label is free to wrap, and fit-content then resolves to min-content: measured
   159x98 in the hero and 101x148 in the cta band, i.e. the number broken into a
   tall narrow column. Remove this line and both pills silently deform. */

/* Dark hero. Values mirror .btn-ghost-lg (line 368) rather than the modal pill,
   so it reads as a set with the ghost button directly above it on the same
   surface. NOTE under :root[data-theme="dark"] the higher-specificity rule
   further down wins and paints .08/.20 instead of .06/.32 -- harmless, because
   that is also white on translucent white and this hero is dark in BOTH modes.
   Left as-is deliberately: matching specificity here would need either an
   :root[data-theme] prefix that breaks if the attribute is ever absent, or an
   !important. Neither is worth a difference nobody can see. */
.demo-phone-hero{
  display:flex;width:fit-content;white-space:nowrap;margin:14px 0 0;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.demo-phone-hero:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.demo-phone-hero svg{color:var(--gold-light)}

/* Light .cta-final band: the base pill is already correct, so this is layout
   only. margin auto centers it under the centered .cta-final-actions row.

   Night mode needs nothing, but NOT for the reason it looks like. --cream and
   --bg do NOT flip under data-theme (verified: they stay #EAE8E7 / #D6E4EC --
   only the legacy data-mode system redefines them, see CLAUDE.md). The band goes
   dark because :root[data-theme="dark"] .cta-final overrides the gradient
   outright, and a later rule then drops it to transparent so the dark body
   shows through; measured backdrop is rgb(34,47,59). The pill turns white via
   the existing :root[data-theme="dark"] .demo-phone rule, landing at ~10.6:1.
   So it works, but by explicit override rather than token flipping -- do not
   "simplify" this on the assumption the tokens invert. */
.demo-phone-cta{display:flex;width:fit-content;white-space:nowrap;margin:14px auto 0}

.demo-sub{font-size:16px;line-height:1.7;color:var(--muted-foreground);max-width:540px;margin-bottom:28px}

.demo-features{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0 0 32px;padding:0}
.demo-features li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--navy);line-height:1.55}
.demo-check{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.demo-check svg{width:12px;height:12px}

.demo-trust{display:grid;grid-template-columns:repeat(3,auto);gap:28px;padding-top:24px;border-top:1px solid var(--border-soft)}
.demo-trust-item{display:flex;flex-direction:column;gap:2px}
.demo-trust-item strong{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.demo-trust-item span{font-size:12px;color:var(--muted-foreground);letter-spacing:.02em}
@media(max-width:560px){.demo-trust{grid-template-columns:1fr;gap:16px}}

/* RIGHT — frosted-glass form card */
.demo-form-wrap{position:relative}
.demo-form{
  background:linear-gradient(135deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.62) 100%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:22px;
  padding:32px 30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(58,75,91,.05),
    0 22px 56px -14px rgba(58,75,91,.22);
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  display:flex;flex-direction:column;gap:14px;
}
/* Progressive disclosure (demo-modal.js / pardot-native-form.tsx). The form is a
   flex column with gap:14px; each group has to repeat that so wrapping fields in
   a group changes nothing about the spacing between them. `.demo-groups` is the
   host later groups mount into — :empty so it contributes no stray gap before the
   first reveal. */
.demo-group,.demo-groups{display:flex;flex-direction:column;gap:14px}
.demo-groups:empty{display:none}
/* Only groups revealed AFTER first paint animate — group 1 is server-rendered and
   would otherwise fade in on every page load for no reason. */
@keyframes demoGroupIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.demo-groups>.demo-group{animation:demoGroupIn .28s cubic-bezier(.22,.61,.36,1) both}
@media(prefers-reduced-motion:reduce){.demo-groups>.demo-group{animation:none}}
.demo-form-head{margin-bottom:6px}
.demo-form-head h2{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.01em;margin-bottom:4px}
.demo-form-head p{font-size:13px;color:var(--muted-foreground);line-height:1.5}

.demo-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.demo-row{grid-template-columns:1fr}}

.demo-field{display:flex;flex-direction:column;gap:6px}
/* Two-up rows: labels can wrap to different heights now that the questions use
   the production form's full wording ("How many attorneys are you looking to
   hire?" beside "Estimated Engagement Length"). The grid stretches both fields to
   the same height, so pinning each control to the bottom keeps the two inputs on
   one line instead of stepping down. */
.demo-row .demo-field > :last-child{margin-top:auto}
.demo-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:var(--navy);letter-spacing:.04em}
.demo-opt{font-weight:500;color:var(--ink3);letter-spacing:0}
.demo-field input,
.demo-field select,
.demo-field textarea{
  width:100%;padding:12px 14px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--border);
  border-radius:10px;
  font-family:'Geist',sans-serif;font-size:14px;color:var(--navy);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.demo-field textarea{resize:vertical;min-height:80px;line-height:1.55}
.demo-field input::placeholder,
.demo-field textarea::placeholder{color:var(--ink3)}
.demo-field input:hover,.demo-field select:hover,.demo-field textarea:hover{background:#fff;border-color:rgba(58,75,91,.30)}
.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus{outline:none;background:#fff;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.20)}
/* Whitepaper download gate (download-gate.js) */
.dl-form input,.dl-form select{height:46px}
.dl-form .demo-field{justify-content:flex-end}
.demo-row-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.demo-row-3{grid-template-columns:1fr}}
.dl-cond{display:none}
.dl-cond.is-on{display:flex;flex-direction:column;gap:14px;animation:dlCondIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes dlCondIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dl-cond.is-on{animation:none}}

.demo-check-row{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--muted-foreground);line-height:1.55;cursor:pointer;padding:4px 0}
.demo-check-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;margin-top:2px;width:16px;height:16px;
  background:#fff;border:1px solid rgba(58,75,91,.32);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.demo-check-row input[type=checkbox]:checked{
  background:var(--gold);border-color:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:10px;
}
.demo-check-row a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(168,152,68,.35)}
.demo-check-row a:hover{color:var(--navy);border-bottom-color:var(--navy)}

.demo-submit{
  margin-top:8px;
  padding:15px 24px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:#fff;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(198,178,93,.28),inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .15s,box-shadow .2s,background .2s;
}
.demo-submit:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(198,178,93,.36)}
.demo-foot{margin-top:6px;text-align:center;font-size:12.5px;color:var(--muted-foreground)}
.demo-foot a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(58,75,91,.30)}

/* Native Pardot form-handler posting (pardot-native-form.tsx / demo-modal.js).
   The form posts into .demo-sink so the visitor stays on the page, then the
   form is swapped for the Calendly embed in .demo-calendly. */
.demo-sink{display:none}
/* .demo-form sets display:flex, which beats the UA [hidden] rule — so the
   submitted-but-still-mounted form needs this to actually disappear. It stays in
   the DOM on purpose: removing a form inside its own submit handler can abort the
   POST before the browser sends it. */
.demo-form[hidden]{display:none}
/* Honeypot: moved off-screen rather than display:none, which some bots skip. */
.demo-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Calendly's initInlineWidget appends a bare <iframe> here and does NOT size it.
   Two things are needed, and BOTH matter — an earlier fix set only the first and
   the widget still never painted:

   1. A DEFINITE height on this element. `min-height` is not enough: the iframe's
      height is a percentage, and a percentage height cannot resolve against a
      parent whose height is `auto` with only a min-height floor.
   2. An explicit rule for the iframe. Calendly's own stylesheet sizes it via
      `.calendly-inline-widget iframe{height:100%}`, but initInlineWidget never
      adds that class to the parent we hand it — so with `class="demo-calendly"`
      alone the iframe falls back to the HTML default of 150px and shows nothing
      but the spinner. We size it ourselves rather than adding Calendly's class,
      so this does not depend on a third-party stylesheet or class name.

   Applies to all three demo surfaces: the modal (demo-modal.js), /book-a-demo
   and /access-legal/book-a-demo (pardot-native-form.tsx, which sets its own
   inline min-height — also not definite, so it needs this rule too). */
.demo-calendly{
  height:640px;
  border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.62) 100%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(58,75,91,.05),
    0 22px 56px -14px rgba(58,75,91,.22);
}
.demo-calendly iframe{display:block;width:100%;height:100%;border:0}
.demo-form-err{
  margin:2px 0 0;padding:10px 12px;border-radius:8px;
  background:rgba(190,72,60,.10);border:1px solid rgba(190,72,60,.28);
  font-size:12.5px;line-height:1.5;color:#8E3428;
}
/* Supply-side deflection panel (LAW-649): shown instead of .demo-calendly when
   `need` = "I want to work". Same card treatment as .demo-form and .demo-calendly
   deliberately — it replaces them in the same slot, so a different card here would
   read as a different surface. */
.demo-deflect{
  background:linear-gradient(135deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.62) 100%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:22px;
  padding:32px 30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(58,75,91,.05),
    0 22px 56px -14px rgba(58,75,91,.22);
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  display:flex;flex-direction:column;gap:14px;
}
.demo-deflect h2{
  font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;
  color:var(--navy);letter-spacing:-.01em;
}
.demo-deflect p{font-size:13px;color:var(--muted-foreground);line-height:1.6}
/* .demo-submit is written for <button>; the deflection CTA is an <a>. */
.demo-deflect .demo-submit{display:block;text-align:center;text-decoration:none}

/* Dark-mode adaptations */
:root[data-theme="dark"] .demo-h1{color:#fff}
:root[data-theme="dark"] .demo-h1 em{color:var(--gold-light)}
:root[data-theme="dark"] .demo-phone{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:#fff}
:root[data-theme="dark"] .demo-phone:hover{background:rgba(255,255,255,.14);border-color:rgba(213,196,123,.50)}
:root[data-theme="dark"] .demo-sub{color:rgba(255,255,255,.74)}
:root[data-theme="dark"] .demo-features li{color:#fff}
:root[data-theme="dark"] .demo-trust{border-top-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .demo-trust-item strong{color:#fff}
:root[data-theme="dark"] .demo-trust-item span{color:rgba(255,255,255,.62)}
:root[data-theme="dark"] .demo-form{
  background:linear-gradient(135deg,rgba(34,46,58,.86) 0%,rgba(34,46,58,.62) 100%);
  border-color:rgba(255,255,255,.16);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 56px -14px rgba(0,0,0,.40);
}
:root[data-theme="dark"] .demo-calendly{
  background:linear-gradient(135deg,rgba(34,46,58,.86) 0%,rgba(34,46,58,.62) 100%);
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 56px -14px rgba(0,0,0,.40);
}
:root[data-theme="dark"] .demo-deflect{
  background:linear-gradient(135deg,rgba(34,46,58,.86) 0%,rgba(34,46,58,.62) 100%);
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 56px -14px rgba(0,0,0,.40);
}
:root[data-theme="dark"] .demo-deflect h2{color:#fff}
:root[data-theme="dark"] .demo-deflect p{color:rgba(255,255,255,.66)}
:root[data-theme="dark"] .demo-form-err{background:rgba(232,120,106,.14);border-color:rgba(232,120,106,.34);color:#F3B4AB}
:root[data-theme="dark"] .demo-form-head h2{color:#fff}
:root[data-theme="dark"] .demo-form-head p{color:rgba(255,255,255,.66)}
:root[data-theme="dark"] .demo-label{color:#fff}
:root[data-theme="dark"] .demo-field input,
:root[data-theme="dark"] .demo-field select,
:root[data-theme="dark"] .demo-field textarea{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:#fff}
:root[data-theme="dark"] .demo-field input:hover,
:root[data-theme="dark"] .demo-field select:hover,
:root[data-theme="dark"] .demo-field textarea:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
:root[data-theme="dark"] .demo-field input:focus,
:root[data-theme="dark"] .demo-field select:focus,
:root[data-theme="dark"] .demo-field textarea:focus{background:rgba(255,255,255,.16);border-color:var(--gold);box-shadow:0 0 0 3px rgba(213,196,123,.22)}
:root[data-theme="dark"] .demo-field input::placeholder,
:root[data-theme="dark"] .demo-field textarea::placeholder{color:rgba(255,255,255,.40)}
/* Download-gate selects: strip the native control (whose intrinsic height
   ignores padding) and draw a custom chevron so selects match text-input
   height exactly. Re-asserted per state because the shared hover/focus
   rules above use the `background` shorthand. */
.dl-form select{appearance:none;-webkit-appearance:none;padding:0 38px 0 14px;cursor:pointer;line-height:44px}
.dl-form select,.dl-form select:hover,.dl-form select:focus{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%237A858F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
:root[data-theme="dark"] .dl-form select,
:root[data-theme="dark"] .dl-form select:hover,
:root[data-theme="dark"] .dl-form select:focus{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23AEB6BE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px}

/* Download-gate custom multi-select: 46px trigger styled like the other
   selects, opening a checkbox panel. An invisible required input
   (.dl-ms-req) carries the joined value for native validation. */
.dl-ms{position:relative}
.dl-ms-btn{
  width:100%;height:46px;padding:0 38px 0 14px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.88) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%237A858F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center;
  background-size:15px;
  border:1px solid var(--border);border-radius:10px;
  font-family:'Geist',sans-serif;font-size:14px;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background-color .2s,border-color .2s,box-shadow .2s;
}
.dl-ms:not(.has-value) .dl-ms-label{color:var(--ink3)}
.dl-ms-btn:hover{background-color:#fff;border-color:rgba(58,75,91,.30)}
.dl-ms-btn:focus,.dl-ms.is-open .dl-ms-btn{outline:none;background-color:#fff;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.20)}
.dl-ms.is-open .dl-ms-btn{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%237A858F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E")}
.dl-ms-req{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0}
.dl-ms-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 18px 44px rgba(58,75,91,.20);
  max-height:210px;overflow:auto;overscroll-behavior:contain;padding:4px;
}
.dl-ms-opt{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;font-size:13px;line-height:1.35;color:var(--navy);cursor:pointer}
.dl-ms-opt:hover{background:rgba(58,75,91,.06)}
.dl-ms-opt input{
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;width:16px;height:16px;padding:0;
  background:#fff;border:1px solid rgba(58,75,91,.32);border-radius:4px;cursor:pointer;
}
.dl-ms-opt input:checked{
  background:var(--gold) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E") no-repeat center/10px;
  border-color:var(--gold);
}
:root[data-theme="dark"] .dl-ms-btn{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:#fff;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23AEB6BE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .dl-ms-btn:hover{background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
:root[data-theme="dark"] .dl-ms-btn:focus,:root[data-theme="dark"] .dl-ms.is-open .dl-ms-btn{background-color:rgba(255,255,255,.16);border-color:var(--gold);box-shadow:0 0 0 3px rgba(213,196,123,.22)}
:root[data-theme="dark"] .dl-ms:not(.has-value) .dl-ms-label{color:rgba(255,255,255,.40)}
:root[data-theme="dark"] .dl-ms-panel{background:#1c2632;border-color:rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.5)}
:root[data-theme="dark"] .dl-ms-opt{color:#fff}
:root[data-theme="dark"] .dl-ms-opt:hover{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .dl-ms-opt input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
:root[data-theme="dark"] .dl-ms-opt input:checked{background:var(--gold) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E") no-repeat center/10px;border-color:var(--gold)}

/* Benitem icon stage (benitem-stage.js): hovering a .benitem inside a
   [data-benstage] container swaps the matching icon slide on the right */
.benstage{position:relative;width:100%;max-width:460px;aspect-ratio:4/3;border-radius:16px;background:var(--bg-muted);border:1px solid var(--border-soft);display:grid;place-items:center;overflow:hidden}
.benstage::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(198,178,93,.16) 0%,transparent 62%);pointer-events:none}
.benstage-slide{grid-area:1/1;position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;pointer-events:none;will-change:opacity,transform}
.benstage-ic{width:132px;height:132px;border-radius:50%;background:rgba(198,178,93,.15);border:1px solid rgba(198,178,93,.35);display:flex;align-items:center;justify-content:center;transform:scale(.88);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.benstage-ic i{font-size:62px;color:var(--gold-deep)}
.benstage-cap{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
:is(.benstage[data-state="1"] .bss1,.benstage[data-state="2"] .bss2,.benstage[data-state="3"] .bss3){opacity:1;transform:none;transition:opacity .38s ease .06s,transform .6s cubic-bezier(.22,1,.36,1) .06s}
:is(.benstage[data-state="1"] .bss1,.benstage[data-state="2"] .bss2,.benstage[data-state="3"] .bss3) .benstage-ic{transform:scale(1);transition-delay:.06s}
:is(.benstage[data-state="1"] .bss1,.benstage[data-state="2"] .bss2,.benstage[data-state="3"] .bss3) .benstage-cap{opacity:1;transform:none;transition-delay:.16s}
@media(prefers-reduced-motion:reduce){.benstage-slide,.benstage-ic,.benstage-cap{transition:none}}
:root[data-theme="dark"] .benstage{background:#1c2632;border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .benstage-ic{background:rgba(213,196,123,.14);border-color:rgba(213,196,123,.32)}
:root[data-theme="dark"] .benstage-ic i{color:var(--gold-light)}
:root[data-theme="dark"] .benstage-cap{color:#fff}

/* ── UPL page micro-interactions (scoped so no other v17 page is touched) ── */
/* Rule cards (5.3 / 5.5): lift on hover, badge pop, heading tints gold */
.wp-teaser .rulecards .benitem{border-radius:12px;padding:14px 16px;margin-left:-16px;transition:transform .35s cubic-bezier(.22,1,.36,1),background .35s ease,box-shadow .35s ease}
.wp-teaser .rulecards .benitem:hover{transform:translateY(-3px);background:linear-gradient(90deg,rgba(198,178,93,.09),transparent 72%);box-shadow:0 14px 30px -18px rgba(58,75,91,.4)}
.wp-teaser .rulecards .benitem-check{transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.wp-teaser .rulecards .benitem:hover .benitem-check{transform:scale(1.1) rotate(-4deg);box-shadow:0 6px 16px -4px rgba(168,152,68,.55)}
.wp-teaser .rulecards .benitem h4{transition:color .3s ease}
.wp-teaser .rulecards .benitem:hover h4{color:var(--gold-deep)}
:root[data-theme="dark"] .wp-teaser .rulecards .benitem:hover h4{color:var(--gold-light)}

/* "What's inside" contents grid: two-column table-of-contents layout */
.wp-teaser .rulecards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 24px;margin-top:22px}
@media(max-width:680px){.wp-teaser .rulecards-grid{grid-template-columns:1fr}}
.wp-teaser .rulecards-grid .benitem{margin-left:0;align-items:flex-start;height:100%}
.wp-teaser .rulecards-grid .benitem-check{flex:0 0 auto}
.wp-teaser .rulecards-note{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:16px 18px;border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:12px;background:var(--cream)}
.wp-teaser .rulecards-note i{font-size:22px;color:var(--gold-deep);flex:0 0 auto;line-height:1}
:root[data-theme="dark"] .wp-teaser .rulecards-note i{color:var(--gold-light)}
.wp-teaser .rulecards-note p{margin:0;font-size:14px;line-height:1.65;color:var(--muted-foreground)}

/* Teaser hero photo banner (strategic-hiring / UPL / outsourcing) */
.wp-teaser .wp-fig{margin:28px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:0 22px 48px -26px rgba(58,75,91,.4)}
.wp-teaser .wp-fig img{width:100%;height:300px;object-fit:cover;display:block}
@media(max-width:600px){.wp-teaser .wp-fig img{height:200px}}
.wp-teaser .wp-fig figcaption{padding:10px 16px;font-size:12px;color:var(--muted-foreground);background:var(--cream);border-top:1px solid var(--border)}
:root[data-theme="dark"] .wp-teaser .wp-fig{border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .wp-teaser .wp-fig figcaption{background:rgba(255,255,255,.045);border-top-color:rgba(255,255,255,.10);color:rgba(255,255,255,.62)}

/* ── Long-form legal document (Business of Law & Ethics) ─────────────
   A readable reference page, scoped so no other v17 page is affected.
   Reuses global s-*, pullq, benlist, bencard, retainer-note; adds a
   contents nav, blockquote, citation note, table, and disclaimer. */
.legaldoc .s-in{max-width:820px}
.legaldoc .pghead .s-in{max-width:820px}
/* section-anchor offset so the sticky nav never covers a heading */
.legaldoc .ldoc-sec{scroll-margin-top:96px}
.legaldoc .ldoc-lead{font-size:16px;line-height:1.85;color:var(--foreground)}
.legaldoc .ldoc-body p{font-size:14.5px;line-height:1.85;color:var(--muted-foreground);margin:0 0 16px}
.legaldoc .ldoc-body p:last-child{margin-bottom:0}
.legaldoc .ldoc-body h3{font-family:'Montserrat',sans-serif;font-weight:600;font-size:17px;color:var(--navy);margin:30px 0 12px}
:root[data-theme="dark"] .legaldoc .ldoc-body h3{color:#fff}

/* On this page — contents nav */
.legaldoc .ldoc-toc{margin-top:26px;padding:20px 22px;border:1px solid var(--border);border-radius:16px;background:var(--cream)}
.legaldoc .ldoc-toc-h{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);margin:0 0 14px}
.legaldoc .ldoc-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;counter-reset:toc}
@media(max-width:640px){.legaldoc .ldoc-toc ol{grid-template-columns:1fr}}
.legaldoc .ldoc-toc a{counter-increment:toc;display:flex;gap:11px;align-items:baseline;text-decoration:none;font-size:14px;color:var(--navy);padding:7px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.legaldoc .ldoc-toc a::before{content:counter(toc,decimal-leading-zero);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--gold-deep);flex:0 0 auto}
.legaldoc .ldoc-toc a:hover{color:var(--gold-deep);border-bottom-color:var(--gold)}
:root[data-theme="dark"] .legaldoc .ldoc-toc a{color:rgba(255,255,255,.82)}
:root[data-theme="dark"] .legaldoc .ldoc-toc a::before,:root[data-theme="dark"] .legaldoc .ldoc-toc a:hover{color:var(--gold-light)}

/* Legal blockquote (rule text, case holdings, ABA opinions) */
.legaldoc .ldoc-quote{margin:22px 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-style:italic;line-height:1.55;color:var(--navy)}
:root[data-theme="dark"] .legaldoc .ldoc-quote{color:rgba(255,255,255,.90)}
.legaldoc .ldoc-quote cite{display:block;margin-top:10px;font-family:'Montserrat',sans-serif;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}

/* Pricing / examples table */
.legaldoc .ldoc-tablewrap{margin:22px 0 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:16px}
.legaldoc .ldoc-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-family:'Geist',sans-serif;font-size:14px}
.legaldoc .ldoc-table thead th{background:var(--navy);color:#fff;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:14px 18px}
.legaldoc .ldoc-table thead th:not(:first-child){text-align:right}
.legaldoc .ldoc-table tbody td{padding:14px 18px;border-bottom:1px solid var(--border);color:var(--muted-foreground)}
.legaldoc .ldoc-table tbody td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.legaldoc .ldoc-table tbody td:first-child{color:var(--navy);font-weight:500}
.legaldoc .ldoc-table tbody tr:last-child td{border-bottom:0}
.legaldoc .ldoc-table tbody tr:nth-child(even) td{background:var(--cream)}
.legaldoc .ldoc-table .ldoc-profit{color:var(--gold-deep);font-weight:700}
:root[data-theme="dark"] .legaldoc .ldoc-table tbody td:first-child{color:#fff}
:root[data-theme="dark"] .legaldoc .ldoc-table .ldoc-profit{color:var(--gold-light)}

/* Section header rule (editorial divider above each section eyebrow) */
.legaldoc .ldoc-rule{position:relative;height:1px;width:100%;margin:2px 0 24px;background:var(--border)}
.legaldoc .ldoc-rule::before{content:'';position:absolute;left:0;top:-1px;width:48px;height:3px;background:var(--gold)}
:root[data-theme="dark"] .legaldoc .ldoc-rule::before{background:var(--gold-light)}

/* Citations / references */
.legaldoc .ldoc-refs{margin:22px 0 0;padding:0;list-style:none;counter-reset:ref;display:grid;gap:11px}
.legaldoc .ldoc-refs li{counter-increment:ref;position:relative;padding-left:34px;font-size:12.5px;line-height:1.6;color:var(--muted-foreground)}
.legaldoc .ldoc-refs li::before{content:counter(ref);position:absolute;left:0;top:0;width:22px;text-align:right;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--gold-deep)}
:root[data-theme="dark"] .legaldoc .ldoc-refs li::before{color:var(--gold-light)}
.legaldoc .ldoc-refs li{scroll-margin-top:96px}
.legaldoc .ldoc-refs li:target{background:linear-gradient(90deg,rgba(198,178,93,.16),transparent 70%);border-radius:6px}
.legaldoc .ldoc-refs a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.legaldoc .ldoc-refs a:hover{color:var(--gold-deep)}
:root[data-theme="dark"] .legaldoc .ldoc-refs a{color:rgba(255,255,255,.82)}
:root[data-theme="dark"] .legaldoc .ldoc-refs a:hover{color:var(--gold-light)}

/* Hero: text + supporting image */
.legaldoc .ldoc-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
@media(max-width:820px){.legaldoc .ldoc-hero{grid-template-columns:1fr;gap:26px}}
.legaldoc .ldoc-hero-media{border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:0 30px 60px -24px rgba(58,75,91,.42);aspect-ratio:4/3}
.legaldoc .ldoc-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.legaldoc .ldoc-hero-media{aspect-ratio:16/9}}

/* In-section figure banner */
.legaldoc .ldoc-figure{margin:0 0 26px;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:0 22px 48px -26px rgba(58,75,91,.4)}
.legaldoc .ldoc-figure img{width:100%;height:260px;object-fit:cover;display:block}
@media(max-width:600px){.legaldoc .ldoc-figure img{height:190px}}
.legaldoc .ldoc-figure figcaption{padding:10px 16px;font-size:12px;color:var(--muted-foreground);background:var(--cream);border-top:1px solid var(--border)}

/* Inline superscript citation pointer */
.legaldoc .ldoc-sup{font-size:.62em;line-height:0;vertical-align:super;margin-left:1px;font-weight:700}
.legaldoc .ldoc-sup a{color:var(--gold-deep);text-decoration:none}
.legaldoc .ldoc-sup a:hover{text-decoration:underline}
:root[data-theme="dark"] .legaldoc .ldoc-sup a{color:var(--gold-light)}

/* Closing contact line */
.legaldoc .ldoc-closing{max-width:660px;margin:0 auto;text-align:center;font-size:16px;line-height:1.85;color:var(--foreground)}
.legaldoc .ldoc-closing a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.legaldoc .ldoc-closing a:hover{color:var(--navy)}
:root[data-theme="dark"] .legaldoc .ldoc-closing a{color:var(--gold-light)}
:root[data-theme="dark"] .legaldoc .ldoc-closing a:hover{color:#fff}

.legaldoc .ldoc-cite{margin-top:8px;font-size:12px;color:var(--muted-foreground);opacity:.85}
.legaldoc .ldoc-disclaimer{max-width:820px;margin:0 auto;padding:0 var(--gutter) 8px;font-size:12.5px;line-height:1.7;color:var(--muted-foreground);opacity:.85;text-align:center}

/* ── Dark mode: v17 [data-theme="dark"] does NOT flip the base tokens
   (--cream/--foreground/--navy/--border keep light values), so every
   legaldoc surface and text color is overridden explicitly here. ── */
:root[data-theme="dark"] .legaldoc .ldoc-lead{color:rgba(255,255,255,.90)}
:root[data-theme="dark"] .legaldoc .ldoc-body p{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .legaldoc .ldoc-rule{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] .legaldoc .ldoc-toc{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .legaldoc .ldoc-toc-h{color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .legaldoc .ldoc-quote cite{color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .legaldoc .ldoc-tablewrap{border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .legaldoc .ldoc-table thead th{background:#1E2A38}
:root[data-theme="dark"] .legaldoc .ldoc-table tbody td{color:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.10)}
:root[data-theme="dark"] .legaldoc .ldoc-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.045)}
:root[data-theme="dark"] .legaldoc .ldoc-figure{border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .legaldoc .ldoc-figure figcaption{background:rgba(255,255,255,.045);border-top-color:rgba(255,255,255,.10);color:rgba(255,255,255,.62)}
:root[data-theme="dark"] .legaldoc .ldoc-refs li{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .legaldoc .ldoc-closing{color:rgba(255,255,255,.88)}
:root[data-theme="dark"] .legaldoc .ldoc-disclaimer{color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .legaldoc .ldoc-hero-media{border-color:rgba(255,255,255,.12)}

/* Bento: icon lifts and the count nudges up on cell hover */
/* Center a partial small-card row (4 cards in the 6-col grid) at desktop:
   offset the first small card to column 2 so the four cards sit in
   columns 2-5, leaving one empty column on each side. */
@media(min-width:981px){.wp-teaser .statbento.sb-center .sb-lead + .sb{grid-column-start:2}}
.wp-teaser .statbento .sb-ic{transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.wp-teaser .statbento .sb:hover .sb-ic{transform:translateY(-4px) scale(1.12);opacity:1}
.wp-teaser .statbento .statbig,.wp-teaser .statbento .sb-n{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.wp-teaser .statbento .sb:hover .statbig,.wp-teaser .statbento .sb:hover .sb-n{transform:translateY(-2px)}

/* Icon stage: the active icon breathes; ring softly pulses */
.wp-teaser :is(.benstage[data-state="1"] .bss1,.benstage[data-state="2"] .bss2,.benstage[data-state="3"] .bss3) .benstage-ic{animation:uplFloat 5.5s ease-in-out infinite .6s}
@keyframes uplFloat{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1) translateY(-7px)}}
.wp-teaser .benstage::before{animation:uplGlow 5.5s ease-in-out infinite}
@keyframes uplGlow{0%,100%{opacity:.75}50%{opacity:1}}

/* Pull-quote mark: gentle idle breathing */
.wp-teaser .pullq-mk{animation:uplMark 6s ease-in-out infinite;transform-origin:left top}
@keyframes uplMark{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}

/* Primary gold download CTA: slow sheen sweep to draw the eye */
.wp-teaser .counsel-gold{position:relative;overflow:hidden}
.wp-teaser .counsel-gold::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:uplSheen 4.5s ease-in-out infinite;pointer-events:none}
@keyframes uplSheen{0%,72%{left:-60%}88%,100%{left:130%}}

@media(prefers-reduced-motion:reduce){
  .wp-teaser .rulecards .benitem,.wp-teaser .rulecards .benitem-check,.wp-teaser .statbento .sb-ic,
  .wp-teaser .benstage-ic,.wp-teaser .benstage::before,.wp-teaser .pullq-mk,.wp-teaser .counsel-gold::before{animation:none;transition:none}
}
:root[data-theme="dark"] .demo-check-row{color:rgba(255,255,255,.74)}
:root[data-theme="dark"] .demo-check-row input[type=checkbox]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32)}
:root[data-theme="dark"] .demo-foot{color:rgba(255,255,255,.62)}
:root[data-theme="dark"] .demo-foot a{color:#fff;border-bottom-color:rgba(255,255,255,.30)}

/* ════════════════════════════════════════════════════════════════════
   Book-a-demo modal
   Opens from any link to /book-a-demo. Uses .demo-form styling for the
   form body but strips the form's own glass surface since the modal
   card already provides one. /book-a-demo page is the no-JS fallback.
   ════════════════════════════════════════════════════════════════════ */
.demo-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 20px;
  opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility .28s;
  overflow-y:auto;overscroll-behavior:contain;
}
.demo-modal.is-open{opacity:1;visibility:visible}
.demo-modal-backdrop{
  position:fixed;inset:0;
  background:rgba(15,22,32,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:-1;
}
.demo-modal-card{
  position:relative;
  width:100%;max-width:540px;margin:auto 0;
  background:#fff;border-radius:22px;
  padding:30px 28px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.6) inset;
  transform:translateY(20px) scale(.98);
  transition:transform .32s cubic-bezier(0.22,1,0.36,1);
}
.demo-modal.is-open .demo-modal-card{transform:translateY(0) scale(1)}
.demo-modal-close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(58,75,91,.06);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--navy);
  transition:background .2s,transform .2s;
}
.demo-modal-close:hover{background:rgba(58,75,91,.14);transform:rotate(90deg)}
.demo-modal-close svg{width:16px;height:16px}

.demo-modal-head{margin-bottom:18px;padding-right:36px}
.demo-modal-head .s-eyebrow{margin-bottom:8px}
.demo-modal-h2{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.01em;line-height:1.2;margin-bottom:6px}
.demo-modal-sub{font-size:13.5px;color:var(--muted-foreground);line-height:1.55;margin-bottom:14px}
/* Label above the modal phone pill. 12.5px so it reads as a secondary offer
   rather than competing with .demo-modal-sub (13.5px) directly above it.
   The pill carries margin-bottom:0, so the head's own 18px is what
   separates the pair from the first form group. */
/* The label and the pill are ONE unit: an offer. Before, the gaps ran
   6 / 14 / 8 (h2->sub->call->pill) and this line rendered the SAME
   muted grey as .demo-modal-sub directly above it, so it read as a third
   stray grey sentence sitting in an arbitrary gap rather than as a label
   for the number. Two fixes, both about grouping rather than size:
   margin-top pushes it away from the sub (16px, collapsing with the
   sub's own 14px) while margin-bottom pulls it tight to the pill (6px),
   and navy at 500 separates it from body copy without competing with the
   22px h2. */
.demo-modal-call{margin:0 0 6px;font-size:12.5px;line-height:1.5;color:var(--navy);font-weight:500}
/* The 16px margin-top above was still reading as too big (David, 2026-08-26).
   Adjacent-sibling margins COLLAPSE, so the gap was never the sum -- it was
   max(sub's 14px, call's 16px) = 16px, and dropping the call's margin alone
   would still have left the sub's 14px. Both sides have to come down, so the
   sub's bottom margin is trimmed only where a call line follows it. :has()
   keeps that scoped: .demo-modal-sub is shared with buildEmbed() and
   blog-chrome.tsx, which have no call line and must keep their 14px. If a
   browser lacks :has() the rule is skipped and the spacing simply stays as
   it was, which is the safe direction to fail. */
.demo-modal-sub:has(+ .demo-modal-call){margin-bottom:8px}
:root[data-theme="dark"] .demo-modal-call{color:rgba(255,255,255,.86)}
.demo-phone-modal{margin-bottom:0;padding:8px 14px;font-size:14px}
.demo-phone-modal svg{width:14px;height:14px}

/* Strip the glass surface from the form when it's inside the modal — the
   modal card already provides the surface. */
.demo-modal .demo-form{
  background:transparent;border:0;padding:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* Lock body scroll while open */
body.demo-open{overflow:hidden}

/* Dark mode */
:root[data-theme="dark"] .demo-modal-backdrop{background:rgba(0,0,0,.65)}
:root[data-theme="dark"] .demo-modal-card{background:#1c2632;box-shadow:0 30px 80px rgba(0,0,0,.50),0 0 0 1px rgba(255,255,255,.08) inset}
:root[data-theme="dark"] .demo-modal-close{background:rgba(255,255,255,.08);color:#fff}
:root[data-theme="dark"] .demo-modal-close:hover{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] .demo-modal-h2{color:#fff}
:root[data-theme="dark"] .demo-modal-sub{color:rgba(255,255,255,.66)}

@media(max-width:560px){
  .demo-modal{padding:0;align-items:stretch}
  /* Bottom sheet. The floor is deliberately low: progressive disclosure means the
     first group is three fields, and the old 88vh left ~460px of empty white below
     them. 45vh is about the natural height of that first group, so it shapes the
     genuinely short states (success, deflection) without padding out the common
     one. Nothing needs a ceiling here — .demo-modal is overflow-y:auto, so the
     overlay scrolls once the card outgrows the viewport. */
  .demo-modal-card{border-radius:18px 18px 0 0;margin:auto 0 0;max-width:none;min-height:45vh}
}

/* Demo-modal success state (after form submit) */
.demo-success{text-align:center;padding:20px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.demo-success-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(123,182,126,.18);color:#3D7A41;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.demo-success-icon svg{width:26px;height:26px}
.demo-success .demo-modal-h2{margin-bottom:4px}
.demo-success-btn{
  margin-top:16px;
  padding:12px 22px;border:0;border-radius:9999px;cursor:pointer;
  background:rgba(58,75,91,.08);color:var(--navy);
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:background .2s;
}
.demo-success-btn:hover{background:rgba(58,75,91,.14)}
:root[data-theme="dark"] .demo-success-icon{background:rgba(123,182,126,.22);color:#9FD9A2}
:root[data-theme="dark"] .demo-success-btn{background:rgba(255,255,255,.10);color:#fff}
:root[data-theme="dark"] .demo-success-btn:hover{background:rgba(255,255,255,.16)}

/* Heartbeat pulse for primary CTA (Start Hiring / Create account)
   Double-beat scale + glow that draws the eye without being annoying.
   Pauses on hover so it doesn't fight click feedback. */
@keyframes lc-cta-beat{
  0%,  28%,100% { transform:translateY(0)    scale(1);    box-shadow:0 2px 6px rgba(168,152,68,.22) }
  8%            { transform:translateY(-2px) scale(1.05); box-shadow:0 10px 28px rgba(198,178,93,.46),0 0 0 8px rgba(198,178,93,.08) }
  16%           { transform:translateY(0)    scale(1);    box-shadow:0 2px 6px rgba(168,152,68,.22) }
  22%           { transform:translateY(-1px) scale(1.03); box-shadow:0 6px 20px rgba(198,178,93,.32) }
}
.btn-primary-lg.btn-pulse{ animation:lc-cta-beat 2.4s ease-in-out infinite; transform-origin:center }
.btn-primary-lg.btn-pulse:hover{ animation-play-state:paused }
@media(prefers-reduced-motion:reduce){ .btn-primary-lg.btn-pulse{ animation:none } }

/* Small pill badges inside nav-dropdown items + mobile-menu sub items
   (e.g. AI Associate → "New", Hourly Associate → "Recommended") */
.mm-sub{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nav-dd-pill{
  display:inline-flex;align-items:center;flex-shrink:0;
  padding:2px 8px;border-radius:9999px;
  font-family:'Montserrat',sans-serif;
  font-size:9px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  line-height:1.5;
}
.nav-dd-pill-new{background:var(--gold);color:var(--navy-deep)}
.nav-dd-pill-rec{background:rgba(58,75,91,.08);color:var(--navy);border:1px solid rgba(58,75,91,.20)}

/* Dark mode */
:root[data-theme="dark"] .nav-dd-pill-rec{background:rgba(255,255,255,.10);color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.22)}

/* Beta pill — soft gold-tint with darker gold text */
.nav-dd-pill-beta{background:var(--gold-tint);color:var(--gold-deep);border:1px solid rgba(168,152,68,.30)}
:root[data-theme="dark"] .nav-dd-pill-beta{background:rgba(213,196,123,.16);color:var(--gold-light);border-color:rgba(213,196,123,.32)}

/* ════════════════════════════════════════════════════════════════════
   Product sub-page elements (Hourly Associate, etc.)
   ════════════════════════════════════════════════════════════════════ */

/* Hero breadcrumb */
.prod-breadcrumb{
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.66);margin:0 0 14px;
}
.prod-breadcrumb a{color:rgba(255,255,255,.86);border-bottom:1px solid rgba(255,255,255,.30)}
.prod-breadcrumb a:hover{color:#fff}
.prod-breadcrumb span{margin:0 7px;color:rgba(255,255,255,.40)}
[data-theme="light"] .prod-breadcrumb{color:rgba(255,255,255,.78)}

/* ── Pricing tiers ─────────────────────────────────────────────────── */
.tiergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;align-items:stretch}
@media(max-width:880px){.tiergrid{grid-template-columns:1fr;max-width:460px}}
.tier{
  position:relative;display:flex;flex-direction:column;
  /* light-blue frosted glass — same recipe as homepage cards */
  background:linear-gradient(135deg, rgba(214,228,236,.78) 0%, rgba(232,240,245,.52) 45%, rgba(214,228,236,.30) 100%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:18px;
  padding:30px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 1px 2px rgba(58,75,91,.05),
    0 18px 44px -12px rgba(58,75,91,.20);
  backdrop-filter:blur(30px) saturate(1.45);
  -webkit-backdrop-filter:blur(30px) saturate(1.45);
  transition:transform .3s cubic-bezier(0.22,1,0.36,1),box-shadow .3s,border-color .3s,background .3s;
}
.tier:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg, rgba(214,228,236,.88) 0%, rgba(232,240,245,.62) 45%, rgba(214,228,236,.40) 100%);
  border-color:rgba(213,196,123,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 26px 54px -14px rgba(58,75,91,.26),0 0 0 1px rgba(213,196,123,.20);
}
/* Featured tier — gold-tinted glass, same as homepage AI Associate card */
.tier-featured{
  background:linear-gradient(135deg, rgba(242,238,217,.86) 0%, rgba(232,221,168,.55) 45%, rgba(214,228,236,.32) 100%);
  border-color:rgba(213,196,123,.55);
}
.tier-featured:hover{
  background:linear-gradient(135deg, rgba(242,238,217,.94) 0%, rgba(232,221,168,.66) 45%, rgba(214,228,236,.42) 100%);
  border-color:rgba(213,196,123,.72);
}
.tier-badge{
  position:absolute;top:-11px;left:28px;
  font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--gold);color:var(--navy-deep);
  padding:4px 12px;border-radius:9999px;
}
.tier-head h3{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--navy);margin:0 0 8px}
.tier-head p{font-size:13.5px;line-height:1.55;color:var(--muted-foreground);margin:0 0 22px}
.tier-rate{display:flex;align-items:baseline;gap:6px;padding:0 0 20px;border-bottom:1px solid rgba(58,75,91,.14);margin-bottom:20px}
.tier-rate-num{font-family:'Montserrat',sans-serif;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.tier-rate-unit{font-size:13px;font-weight:500;color:var(--ink3)}
.tier-feat{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0;flex-grow:1}
.tier-feat li{position:relative;padding-left:24px;font-size:14px;color:var(--muted-foreground);line-height:1.5}
.tier-feat li::before{
  content:'';position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--gold-tint) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' stroke='%23A89844' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* Retainer note */
.retainer-note{
  display:flex;align-items:flex-start;gap:16px;
  margin-top:24px;padding:22px 24px;
  background:var(--gold-tint);
  border:1px solid rgba(168,152,68,.28);
  border-radius:14px;
}
.retainer-note-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:10px;
  background:rgba(168,152,68,.18);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;
}
.retainer-note-icon svg{width:20px;height:20px}
.retainer-note h4{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;color:var(--navy);margin:0 0 5px}
.retainer-note p{font-size:14px;line-height:1.6;color:var(--muted-foreground);margin:0}
.retainer-note strong{color:var(--gold-deep);font-weight:700}

/* ── FAQ accordion ─────────────────────────────────────────────────── */
.faqlist{max-width:760px;margin-top:8px;display:flex;flex-direction:column;gap:0}
.faq{
  border-bottom:1px solid var(--border);
  padding:4px 0;
}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 0;
  font-family:'Montserrat',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.005em;
  color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq-mk{position:relative;flex-shrink:0;width:18px;height:18px}
.faq-mk::before,.faq-mk::after{content:'';position:absolute;background:var(--gold-deep);border-radius:1px;transition:transform .25s}
.faq-mk::before{top:8px;left:0;width:18px;height:2px}
.faq-mk::after{top:0;left:8px;width:2px;height:18px}
.faq[open] .faq-mk::after{transform:scaleY(0)}
.faq p{font-size:15px;line-height:1.7;color:var(--muted-foreground);margin:0;padding:0 40px 22px 0}
.faq summary:hover{color:var(--gold-deep)}

/* Dark-mode for sub-page elements */
:root[data-theme="dark"] .tier{
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.03) 100%);
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 44px -12px rgba(0,0,0,.34);
}
:root[data-theme="dark"] .tier:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.04) 100%);
  border-color:rgba(213,196,123,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 54px -14px rgba(0,0,0,.46),0 0 0 1px rgba(213,196,123,.20);
}
:root[data-theme="dark"] .tier-featured{
  background:linear-gradient(135deg, rgba(213,196,123,.28) 0%, rgba(184,147,72,.14) 45%, rgba(255,255,255,.04) 100%);
  border-color:rgba(213,196,123,.42);
}
:root[data-theme="dark"] .tier-featured:hover{
  background:linear-gradient(135deg, rgba(213,196,123,.36) 0%, rgba(184,147,72,.20) 45%, rgba(255,255,255,.06) 100%);
  border-color:rgba(213,196,123,.62);
}
:root[data-theme="dark"] .tier-head h3,
:root[data-theme="dark"] .tier-rate-num{color:#fff}
:root[data-theme="dark"] .tier-head p,
:root[data-theme="dark"] .tier-feat li{color:rgba(255,255,255,.74)}
:root[data-theme="dark"] .tier-rate{border-bottom-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .retainer-note{background:rgba(213,196,123,.10);border-color:rgba(213,196,123,.26)}
:root[data-theme="dark"] .retainer-note h4{color:#fff}
:root[data-theme="dark"] .retainer-note p{color:rgba(255,255,255,.74)}
:root[data-theme="dark"] .retainer-note strong{color:var(--gold-light)}
:root[data-theme="dark"] .faq{border-bottom-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .faq summary{color:#fff}
:root[data-theme="dark"] .faq p{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .faq-mk::before,
:root[data-theme="dark"] .faq-mk::after{background:var(--gold-light)}

/* ════════════════════════════════════════════════════════════════════
   Interior sub-page hero (.hero-sub) — no video, solid slate gradient,
   more compact than the homepage's cinematic video hero. Signals to the
   visitor that these are secondary pages, not the main landing page.
   ════════════════════════════════════════════════════════════════════ */
.hero-sub.hero-bg-video{
  min-height:0;
  padding-top:44px;padding-bottom:52px;
  background:transparent;
}
/* Slate band, now layered over an optional practice-area photo. Pages set
   --hero-photo:url(...) on .hero-sub-bg; the slate tint sits on top for
   text legibility, the photo in the middle, a solid slate as fallback. */
.hero-sub .hero-sub-bg{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(105deg, rgba(52,72,90,.93) 0%, rgba(62,84,102,.82) 38%, rgba(84,106,126,.52) 75%, rgba(96,118,138,.40) 100%),
    var(--hero-photo, none) center/cover no-repeat,
    linear-gradient(135deg, #445A6C 0%, #536A7E 50%, #647C92 100%);
}
/* Subtle engraved hairlines so it doesn't read totally flat */
.hero-sub .hero-sub-bg::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 100%;
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.hero-sub .hero-in{position:relative;z-index:1;align-items:center}

/* Tighter headline on interior pages — clearly smaller than the homepage H1 */
.hero-sub h1{font-size:clamp(34px,4.4vw,52px);line-height:1.06;margin-bottom:16px}
.hero-sub .hero-lede{font-size:16px;max-width:500px;margin-bottom:24px}
.hero-sub .hero-trust{padding-top:22px;gap:28px}

/* Compact side panel on interior pages */
.hero-sub .hero-panel{max-width:380px;padding:18px}
.hero-sub .hero-panel-list{padding:4px 0}
.hero-sub .hero-match{padding:9px 4px}

/* The breadcrumb is the primary "you are on an interior page" cue */
.hero-sub .prod-breadcrumb{color:rgba(255,255,255,.74)}

/* Light theme: slate tint over the optional photo */
[data-theme="light"] .hero-sub .hero-sub-bg{
  background:
    linear-gradient(105deg, rgba(52,72,90,.93) 0%, rgba(62,84,102,.82) 38%, rgba(84,106,126,.52) 75%, rgba(96,118,138,.40) 100%),
    var(--hero-photo, none) center/cover no-repeat,
    linear-gradient(135deg, #445A6C 0%, #536A7E 50%, #647C92 100%);
}

/* Dark theme: deeper navy tint over the optional photo */
:root[data-theme="dark"] .hero-sub .hero-sub-bg{
  background:
    linear-gradient(105deg, rgba(12,20,28,.94) 0%, rgba(18,28,38,.84) 40%, rgba(28,40,54,.56) 100%),
    var(--hero-photo, none) center/cover no-repeat,
    linear-gradient(135deg, #1B2630 0%, #243341 55%, #2E3F4E 100%);
}

@media(max-width:980px){
  .hero-sub .hero-in{grid-template-columns:1fr;gap:32px}
  .hero-sub .hero-panel{max-width:520px}
}

/* ── Benefit cards (4-up grid, used on Project-Based pricing) ──────── */
.bencard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
/* An odd number of cards leaves the last one alone on its row, left-packed
   against a half-row gap (599px on /for-firms, /how-it-works and /faq). Span it
   across both tracks and centre it at one track's width, so it sits under the
   midpoint instead of hugging the left edge. Card width is unchanged, so the
   card-consistency rule still holds. */
.bencard-grid>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 9px)}
/* 760px, matching the single-column breakpoint below: once every card is on its
   own row the last one is no longer an orphan, and half-width centring would
   shrink it. */
@media(max-width:760px){.bencard-grid>:last-child:nth-child(odd){grid-column:auto;width:auto}}
@media(max-width:760px){.bencard-grid{grid-template-columns:1fr}}
.bencard{
  background:linear-gradient(135deg, rgba(214,228,236,.78) 0%, rgba(232,240,245,.52) 45%, rgba(214,228,236,.30) 100%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:16px;
  padding:26px 26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 1px 2px rgba(58,75,91,.05),
    0 18px 44px -12px rgba(58,75,91,.20);
  backdrop-filter:blur(30px) saturate(1.45);
  -webkit-backdrop-filter:blur(30px) saturate(1.45);
  transition:transform .3s cubic-bezier(0.22,1,0.36,1),box-shadow .3s,border-color .3s,background .3s;
}
.bencard:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg, rgba(214,228,236,.88) 0%, rgba(232,240,245,.62) 45%, rgba(214,228,236,.40) 100%);
  border-color:rgba(213,196,123,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 26px 54px -14px rgba(58,75,91,.26),0 0 0 1px rgba(213,196,123,.20);
}
.bencard-icon{
  width:42px;height:42px;border-radius:10px;
  background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.bencard-icon svg{width:21px;height:21px}
.bencard h4{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:600;color:var(--navy);letter-spacing:-.005em;margin:0 0 7px}
.bencard p{font-size:14px;line-height:1.6;color:var(--muted-foreground);margin:0}

/* ── Chip grid (project-type tags) ─────────────────────────────────── */
.chip-grid{display:flex;flex-wrap:wrap;gap:11px;margin-top:8px}
.chip{
  display:inline-flex;align-items:center;
  padding:11px 18px;border-radius:9999px;
  background:linear-gradient(135deg, rgba(214,228,236,.72) 0%, rgba(232,240,245,.40) 100%);
  border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px -10px rgba(58,75,91,.20);
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;color:var(--navy);
  letter-spacing:-.005em;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.chip:hover{background:linear-gradient(135deg, rgba(242,238,217,.82) 0%, rgba(232,221,168,.46) 100%);border-color:rgba(213,196,123,.55);color:var(--gold-deep);transform:translateY(-1px)}

/* Dark-mode */
:root[data-theme="dark"] .bencard{
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.03) 100%);
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 44px -12px rgba(0,0,0,.34);
}
:root[data-theme="dark"] .bencard:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.04) 100%);
  border-color:rgba(213,196,123,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 54px -14px rgba(0,0,0,.46),0 0 0 1px rgba(213,196,123,.20);
}
:root[data-theme="dark"] .bencard h4{color:#fff}
:root[data-theme="dark"] .bencard p{color:rgba(255,255,255,.74)}
:root[data-theme="dark"] .chip{background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.88)}
:root[data-theme="dark"] .chip:hover{background:rgba(213,196,123,.16);border-color:rgba(213,196,123,.36);color:var(--gold-light)}

/* ── FAQ two-column layout (heading rail left, accordion right) ────── */
.faq-layout{display:grid;grid-template-columns:0.82fr 1.18fr;gap:56px;align-items:start}
.faq-intro{position:sticky;top:88px}
.faq-intro .s-eyebrow,
.faq-intro .s-h2{margin-bottom:0}
.faq-intro .s-h2{margin-bottom:18px}
.faq-aside{font-size:14px;color:var(--muted-foreground);line-height:1.6;margin:0}
.faq-aside a{color:var(--gold-deep);font-weight:600;border-bottom:1px solid rgba(168,152,68,.4);white-space:nowrap}
.faq-aside a:hover{color:var(--navy);border-bottom-color:var(--navy)}
.faq-layout .faqlist{max-width:none;margin-top:0}
/* tighten answer copy now that the column is narrower */
.faq-layout .faq p{padding-right:8px}
:root[data-theme="dark"] .faq-aside{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .faq-aside a{color:var(--gold-light);border-bottom-color:rgba(213,196,123,.4)}
:root[data-theme="dark"] .faq-aside a:hover{color:#fff;border-bottom-color:#fff}
@media(max-width:900px){
  .faq-layout{grid-template-columns:1fr;gap:28px}
  .faq-intro{position:static}
}

/* FAQ section must allow overflow so the sticky heading can travel.
   (Base .sec rule sets overflow:hidden for the aurora; sub-pages use the
   body-level backdrop instead, so visible is safe here.) The sticky
   .faq-intro is bounded by its grid row, so it releases at the FAQ's end
   even when every answer is expanded. */
section.sec#faq{overflow:visible}

/* "See how it works in detail" button under the homepage How-It-Works steps */
.how-more{display:flex;justify-content:center;margin-top:48px}
.how-more-btn{background:rgba(58,75,91,.05);border-color:rgba(58,75,91,.22);color:var(--navy);backdrop-filter:none}
.how-more-btn:hover{background:rgba(58,75,91,.10);border-color:var(--navy);transform:translateY(-1px)}
:root[data-theme="dark"] .how-more-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:#fff}
:root[data-theme="dark"] .how-more-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}

/* "Available opportunities" matter cards — icon tile instead of photo */
.atty-matter .matter-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.matter-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-tint);color:var(--gold-deep);
  border:1px solid rgba(168,152,68,.22);
}
.matter-icon svg{width:24px;height:24px}
/* Status tag sits inline at the top-right of matter cards (override absolute) */
.atty-matter .matter-tag{position:static;box-shadow:none}
:root[data-theme="dark"] .matter-icon{background:rgba(213,196,123,.16);color:var(--gold-light);border-color:rgba(213,196,123,.30)}
:root[data-theme="white"] .matter-icon{background:rgba(213,196,123,.16);color:var(--gold-light);border-color:rgba(213,196,123,.30)}



/* ════════════════════════════════════════════════════════════════════
   Registration role gateway (/register-hire) — recreates the
   "I Want to Hire" role-selection page: warm-gray page, white top bar,
   centered heading, two centered cards with circular icons and
   full-width gold buttons.
   ════════════════════════════════════════════════════════════════════ */
.reg-body{
  min-height:100vh;margin:0;
  background:#E9E7E4;
  display:flex;flex-direction:column;
  font-family:'Geist','Inter',sans-serif;color:var(--navy);
}
/* White top bar */
.reg-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,40px);
  background:#fff;
}
.reg-logo img{height:30px;width:auto;display:block}
.reg-back{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:500;color:var(--navy);text-decoration:none;
  transition:color .2s;
}
.reg-back:hover{color:var(--gold-deep)}
.reg-back svg{width:18px;height:18px}

/* Centered content */
.reg-main{flex:1;display:flex;align-items:center;justify-content:center;padding:52px var(--gutter) 60px}
.reg-inner{width:100%;max-width:720px;text-align:center}
.reg-h1{
  font-family:'Montserrat',sans-serif;font-size:clamp(28px,3.4vw,36px);font-weight:700;
  letter-spacing:-.01em;color:var(--navy);margin:0 0 14px;line-height:1.12;
}
.reg-sub{font-size:15px;line-height:1.55;color:#5b6b78;max-width:560px;margin:0 auto 24px}
.reg-prompt{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:var(--navy);margin:0 0 24px}

/* Two centered cards */
.reg-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:640px;margin:0 auto 28px}
@media(max-width:680px){.reg-cards{grid-template-columns:1fr;max-width:360px}}
.reg-rolecard{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;border-radius:12px;
  padding:30px 26px 26px;
  box-shadow:0 1px 3px rgba(31,41,55,.06),0 14px 34px -22px rgba(31,41,55,.30);
  transition:transform .25s,box-shadow .25s;
}
.reg-rolecard:hover{transform:translateY(-3px);box-shadow:0 20px 44px -20px rgba(31,41,55,.34)}
.reg-rolecard-icon{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.reg-rolecard-icon svg{width:25px;height:25px}
.reg-icon-gold{background:#C7A95B;color:#3A4B5B}
.reg-icon-navy{background:#3A4B5B;color:#fff}
.reg-rolecard-title{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--navy);margin:0 0 10px}
.reg-rolecard-desc{font-size:13.5px;line-height:1.55;color:#5b6b78;margin:0 0 22px;flex-grow:1;max-width:260px}
.reg-rolecard-btn{
  width:100%;display:block;text-align:center;
  background:#C7A95B;color:#fff;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.01em;
  padding:12px 18px;border-radius:8px;text-decoration:none;
  transition:background .2s;
}
.reg-rolecard-btn:hover{background:#b6974a}

.reg-foot-signin{font-size:13.5px;color:#5b6b78;margin:0}
.reg-foot-signin a{color:var(--gold-deep);font-weight:700;text-decoration:none}
.reg-foot-signin a:hover{text-decoration:underline}
@media(max-width:540px){.reg-back span{display:none}}

/* ════════════════════════════════════════════════════════════════════
   Attorney registration form (/register-attorney) — two-panel layout:
   dark value/testimonial panel left, white account form right.
   ════════════════════════════════════════════════════════════════════ */
.rf-body{min-height:100vh;margin:0;background:#fff;font-family:'Geist','Inter',sans-serif;color:var(--navy);display:flex;flex-direction:column}
.rf-nav{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,40px);background:#fff;border-bottom:1px solid var(--border);position:relative;z-index:3}
.rf-logo img{height:30px;width:auto;display:block}
.rf-back{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:var(--navy);text-decoration:none;transition:color .2s}
.rf-back:hover{color:var(--gold-deep)}
.rf-back svg{width:18px;height:18px}

.rf-split{flex:1;display:grid;grid-template-columns:minmax(360px,1fr) 1.4fr}
@media(max-width:860px){.rf-split{grid-template-columns:1fr}}

/* Left dark panel */
.rf-aside{
  background:#36454F;color:#fff;
  padding:44px clamp(28px,3.2vw,44px);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.rf-aside-h1{font-family:'Montserrat',sans-serif;font-size:clamp(21px,2.1vw,26px);font-weight:700;line-height:1.22;letter-spacing:-.01em;margin:0 0 13px}
.rf-aside-sub{font-size:14px;line-height:1.6;color:rgba(255,255,255,.66);margin:0;max-width:340px}
.rf-quote{margin:0;max-width:380px}
.rf-quote-mark{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:54px;line-height:.4;color:var(--gold-light);margin-bottom:14px}
.rf-quote-text{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.86);margin:0 0 16px}
.rf-quote-by{display:flex;align-items:center;gap:11px}
.rf-quote-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.rf-quote-av img{width:100%;height:100%;object-fit:cover;display:block}
.rf-quote-meta{display:flex;flex-direction:column;gap:1px;line-height:1.3}
.rf-quote-name{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--gold-light)}
.rf-quote-role{font-size:12px;font-style:italic;color:rgba(255,255,255,.66)}
@media(max-width:860px){.rf-aside{display:none}}

/* Right form panel */
.rf-main{display:flex;align-items:center;justify-content:center;padding:48px clamp(24px,5vw,56px)}
.rf-form-wrap{width:100%;max-width:368px}
.rf-h2{font-family:'Montserrat',sans-serif;font-size:23px;font-weight:700;letter-spacing:-.01em;color:var(--navy);margin:0 0 7px}
.rf-step{font-size:13px;line-height:1.5;color:var(--muted-foreground);margin:0 0 16px}
.rf-progress{display:flex;gap:7px;margin-bottom:26px}
.rf-progress-seg{flex:1;height:3px;border-radius:2px;background:var(--border)}
.rf-progress-seg.on{background:var(--gold-deep)}

.rf-section-label{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 12px}
.rf-form{display:flex;flex-direction:column;gap:14px}
.rf-field{display:flex;flex-direction:column;gap:6px}
.rf-label{font-size:13px;font-weight:600;color:var(--navy)}
.rf-field input{
  width:100%;padding:11px 13px;
  background:#fff;border:1px solid var(--border);border-radius:8px;
  font-family:'Geist',sans-serif;font-size:14px;color:var(--navy);
  transition:border-color .2s,box-shadow .2s;
}
.rf-field input::placeholder{color:var(--ink3)}
.rf-field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.18)}
.rf-pass{position:relative;display:block}
.rf-pass input{padding-right:46px}
.rf-pass-toggle{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink3);transition:color .2s}
.rf-pass-toggle:hover,.rf-pass-toggle.on{color:var(--gold-deep)}
.rf-pass-toggle svg{width:19px;height:19px}
.rf-submit{
  margin-top:4px;width:100%;
  background:#C7A95B;color:#fff;border:0;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;
  padding:13px 18px;border-radius:8px;
  transition:background .2s;
}
.rf-submit:hover{background:#b6974a}
.rf-terms{text-align:center;font-size:12px;line-height:1.55;color:var(--muted-foreground);margin:16px 0 0}
.rf-terms a{color:var(--gold-deep);font-weight:600;text-decoration:none}
.rf-terms a:hover{text-decoration:underline}
.rf-signin{text-align:center;font-size:13px;color:var(--muted-foreground);margin:14px 0 0}
.rf-signin a{color:var(--gold-deep);font-weight:700;text-decoration:none}
.rf-signin a:hover{text-decoration:underline}
@media(max-width:540px){.rf-back span{display:none}}

/* Firm-staff "business email required" notice (left panel of /register-staff) */
.rf-notice{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(213,196,123,.30);
  border-radius:12px;padding:18px 20px;max-width:420px;
}
.rf-notice-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--gold-light)}
.rf-notice-head svg{width:18px;height:18px;flex-shrink:0}
.rf-notice p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);margin:0}

/* ════════════════════════════════════════════════════════════════════
   Registration-flow entrance choreography
   · Logo glides between pages via a shared view-transition name
   · Role gateway: heading + cards rise in, staggered
   · Attorney/Staff form: dark panel slides in from the side, then the
     nav and form content settle in
   ════════════════════════════════════════════════════════════════════ */

@keyframes rf-rise{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
@keyframes rf-slide-from-left{ from{ transform:translateX(-100%) } to{ transform:none } }
@keyframes rf-fade{ from{ opacity:0 } to{ opacity:1 } }

/* ── Role gateway (/register-hire) ──────────────────────────────────── */
.reg-h1{ animation:rf-rise .55s cubic-bezier(0.22,1,0.36,1) .05s both }
.reg-sub{ animation:rf-rise .55s cubic-bezier(0.22,1,0.36,1) .12s both }
.reg-prompt{ animation:rf-rise .55s cubic-bezier(0.22,1,0.36,1) .19s both }
.reg-cards .reg-rolecard:nth-child(1){ animation:rf-rise .6s cubic-bezier(0.22,1,0.36,1) .26s both }
.reg-cards .reg-rolecard:nth-child(2){ animation:rf-rise .6s cubic-bezier(0.22,1,0.36,1) .34s both }
.reg-foot-signin{ animation:rf-fade .6s ease .5s both }

/* ── Attorney / Staff form (/register-attorney, /register-staff) ──────
   The dark panel is static — the curtain reveal (same slate colour)
   sweeps off it seamlessly. Content rises in just behind the reveal. */
.rf-aside-top{ animation:rf-rise .55s cubic-bezier(0.22,1,0.36,1) .40s both }
.rf-quote, .rf-notice{ animation:rf-rise .55s cubic-bezier(0.22,1,0.36,1) .50s both }
.rf-h2{ animation:rf-rise .5s cubic-bezier(0.22,1,0.36,1) .42s both }
.rf-step{ animation:rf-rise .5s cubic-bezier(0.22,1,0.36,1) .48s both }
.rf-progress{ animation:rf-rise .5s cubic-bezier(0.22,1,0.36,1) .54s both }
.rf-form{ animation:rf-rise .5s cubic-bezier(0.22,1,0.36,1) .60s both }
.rf-terms{ animation:rf-fade .6s ease .70s both }
.rf-signin{ animation:rf-fade .6s ease .76s both }

@media (prefers-reduced-motion:reduce){
  nav .logo,.reg-logo,.rf-logo,.auth-logo{ view-transition-name:none }
  .reg-h1,.reg-sub,.reg-prompt,.reg-cards .reg-rolecard,.reg-foot-signin,
  .rf-aside,.rf-aside-top,.rf-quote,.rf-notice,
  .rf-h2,.rf-step,.rf-progress,.rf-form,.rf-terms,.rf-signin{ animation:none }
}

/* ── 50-state marquee (Trusted in all 50 U.S. states) ──────────────── */
.trust-marquee{
  position:relative;flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.trust-track{
  display:inline-flex;align-items:center;gap:0;
  white-space:nowrap;width:max-content;
  animation:trust-scroll 60s linear infinite;
}
.trust-marquee:hover .trust-track{animation-play-state:paused}
.trust-state{
  display:inline-flex;align-items:center;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;
  color:var(--navy);letter-spacing:.02em;white-space:nowrap;
  padding:0 22px;
}
.trust-state::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--gold);margin-right:22px;flex-shrink:0;
}
@keyframes trust-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .trust-track{animation:none} }
/* theme text colors */
:root[data-theme="dark"] .trust-state{color:rgba(255,255,255,.82)}
:root[data-theme="white"] .trust-state{color:var(--navy)}

/* Small "Trusted in all 50 U.S. states" note under the hero stat row */
.hero-trust-note{
  margin:18px 0 0;font-size:15px;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.92);
  display:inline-flex;align-items:center;gap:9px;
}
.hero-trust-note::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--gold-light);flex-shrink:0;
}
[data-theme="white"] .hero-bg-video .hero-trust-note{color:var(--muted-foreground)}

/* ── Why-LAWCLERK platform mockup (replaces the photo) ─────────────── */
.benui{background:transparent !important;box-shadow:none !important;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;padding:0}
.benui-window{
  width:100%;max-width:440px;border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(58,75,91,.05),0 26px 60px -20px rgba(58,75,91,.34);
}
.benui-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--bg-muted);border-bottom:1px solid var(--border-soft)}
.benui-dot{width:9px;height:9px;border-radius:50%;background:#d6dbe0}
.benui-dot:nth-child(1){background:#e6a4a0}.benui-dot:nth-child(2){background:#e6cf9a}.benui-dot:nth-child(3){background:#a8cda9}
.benui-url{margin-left:10px;font-family:'Geist',sans-serif;font-size:11px;color:var(--ink3);letter-spacing:.01em}
.benui-body{padding:22px 22px 24px}
.benui-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.benui-eyebrow{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.benui-step{font-size:11px;color:var(--ink3);font-weight:500}

.benui-cand{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card)}
.benui-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--border)}
.benui-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.benui-cand-id{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.benui-cand-name{display:inline-flex;align-items:center;gap:6px;font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--navy)}
.benui-verified{width:15px;height:15px;color:var(--gold);flex-shrink:0}
.benui-cand-role{font-size:12px;color:var(--muted-foreground)}
.benui-rate{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:var(--navy);white-space:nowrap}
.benui-rate small{font-size:11px;font-weight:500;color:var(--ink3)}

.benui-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.benui-meta div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--bg-muted);border-radius:9px;text-align:center}
.benui-meta-k{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.benui-meta-v{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--navy)}

.benui-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-bottom:16px}
.benui-btn-ghost{display:flex;align-items:center;justify-content:center;padding:11px;border-radius:9px;border:1px solid var(--border);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--navy)}
.benui-btn-primary{display:flex;align-items:center;justify-content:center;padding:11px;border-radius:9px;background:var(--gold);color:var(--navy-deep);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;box-shadow:0 2px 6px rgba(168,152,68,.28)}

.benui-toast{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:11px;background:rgba(123,182,126,.12);border:1px solid rgba(123,182,126,.32);font-size:13px;line-height:1.4;color:var(--navy)}
.benui-toast strong{color:#3D7A41}
.benui-toast-icon{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:#5BA85F;color:#fff;display:flex;align-items:center;justify-content:center}
.benui-toast-icon svg{width:15px;height:15px}

/* Dark mode */
:root[data-theme="dark"] .benui-window{background:#1c2632;border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .benui-bar{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.10)}
:root[data-theme="dark"] .benui-cand{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .benui-cand-name,:root[data-theme="dark"] .benui-rate,:root[data-theme="dark"] .benui-meta-v,:root[data-theme="dark"] .benui-btn-ghost,:root[data-theme="dark"] .benui-toast{color:#fff}
:root[data-theme="dark"] .benui-cand-role,:root[data-theme="dark"] .benui-rate small{color:rgba(255,255,255,.6)}
:root[data-theme="dark"] .benui-meta div{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .benui-btn-ghost{border-color:rgba(255,255,255,.22)}

/* ── How-It-Works: alternating step rows with platform mockups ─────── */
.hiw-rows{display:flex;flex-direction:column;gap:56px;margin-top:8px}
.hiw-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hiw-row-rev .hiw-copy{order:2}
.hiw-row-rev .hiw-view{order:1}
@media(max-width:860px){
  .hiw-row,.hiw-row-rev{grid-template-columns:1fr;gap:28px}
  .hiw-row-rev .hiw-copy{order:1}.hiw-row-rev .hiw-view{order:2}
}
.hiw-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--gold-tint);color:var(--gold-deep);
  font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;
  border:1px solid rgba(168,152,68,.25);margin-bottom:16px;
}
.hiw-copy h3{font-family:'Montserrat',sans-serif;font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--navy);margin:0 0 10px}
.hiw-copy p{font-size:15.5px;line-height:1.7;color:var(--muted-foreground);margin:0;max-width:440px}
.hiw-view{display:flex;justify-content:center}
.hiw-view .benui-window{max-width:420px}

/* mini form fields (step 1) */
.hiw-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.hiw-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hiw-flabel{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.hiw-finput{padding:11px 13px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);font-size:13.5px;font-weight:500;color:var(--navy)}

/* candidate list rows (step 2) */
.hiw-cand{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--bg-card);margin-bottom:9px}
.hiw-cand:last-child{margin-bottom:0}
.hiw-cand-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--border)}
.hiw-cand-av img{width:100%;height:100%;object-fit:cover;display:block}
.hiw-cand-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.hiw-cand-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--navy)}
.hiw-cand-sub{font-size:12px;color:var(--muted-foreground)}
.hiw-cand-match{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--gold-deep);background:var(--gold-tint);border:1px solid rgba(168,152,68,.28);padding:4px 10px;border-radius:9999px;white-space:nowrap}

/* dark mode */
:root[data-theme="dark"] .hiw-copy h3{color:#fff}
:root[data-theme="dark"] .hiw-copy p{color:rgba(255,255,255,.74)}
:root[data-theme="dark"] .hiw-finput{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
:root[data-theme="dark"] .hiw-cand{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .hiw-cand-name{color:#fff}
:root[data-theme="dark"] .hiw-cand-sub{color:rgba(255,255,255,.6)}
:root[data-theme="dark"] .hiw-cand-match{background:rgba(213,196,123,.16);color:var(--gold-light);border-color:rgba(213,196,123,.3)}

/* ─────────────────────────────────────────────────────────
   Solution comparison table (.compare-wrap / .compare-table)
   Built by comparison.js; active column highlighted via
   data-active. Frosted-glass design, reused on all 5 pages.
   ───────────────────────────────────────────────────────── */
.compare-wrap{
  margin-top:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:10px;
  border-radius:24px;
  /* same frosted-glass recipe as homepage cards / pricing tiers */
  background:linear-gradient(135deg, rgba(214,228,236,.78) 0%, rgba(232,240,245,.52) 45%, rgba(214,228,236,.30) 100%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 1px 2px rgba(58,75,91,.05),
    0 26px 64px -16px rgba(58,75,91,.28);
  backdrop-filter:blur(30px) saturate(1.45);
  -webkit-backdrop-filter:blur(30px) saturate(1.45);
}
.compare-table{width:100%;min-width:880px;border-collapse:separate;border-spacing:0;font-family:'Geist',sans-serif}
.compare-table th,.compare-table td{padding:17px 18px;text-align:center;vertical-align:middle;border-bottom:1px solid rgba(58,75,91,.10);transition:background .2s ease}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:0}

/* column headers (product names) */
.compare-table thead th{padding-top:20px;padding-bottom:18px}
.cmp-corner{background:transparent}
.cmp-h{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.cmp-h-name{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:-.005em;color:var(--navy);transition:color .2s}
.compare-table thead th.cmp-trad .cmp-h-name{color:var(--ink3);font-weight:600}

/* row labels (left column) — icon + uppercase label */
.compare-table tbody th{text-align:left;white-space:nowrap}
.cmp-rowlabel{display:inline-flex;align-items:center;gap:11px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--ink3)}
.cmp-rowlabel svg{width:16px;height:16px;color:var(--gold-deep);flex-shrink:0}

/* cell values */
.compare-table td{font-size:14px;line-height:1.45;color:var(--muted-foreground)}
.compare-table td.cmp-trad{color:var(--ink3)}

/* row hover wash (skips the highlighted column) */
.compare-table tbody tr:hover td:not(.cmp-active):not(.cmp-trad){background:rgba(255,255,255,.5)}
.compare-table tbody tr:hover td.cmp-trad{background:rgba(255,255,255,.28)}

/* active column — a floating gold-glass column */
.compare-table .cmp-active{
  background:linear-gradient(180deg, rgba(242,238,217,.94) 0%, rgba(236,227,182,.60) 100%);
  border-left:1px solid rgba(213,196,123,.55);
  border-right:1px solid rgba(213,196,123,.55);
}
.compare-table thead th.cmp-active{
  border-top:3px solid var(--gold);
  border-top-left-radius:16px;border-top-right-radius:16px;
  box-shadow:0 -10px 26px -10px rgba(168,152,68,.45);
}
.compare-table thead th.cmp-active .cmp-h-name{color:var(--gold-deep)}
.compare-table tbody tr:last-child td.cmp-active{
  border-bottom:1px solid rgba(213,196,123,.55);
  border-bottom-left-radius:16px;border-bottom-right-radius:16px;
}
.compare-table td.cmp-active{color:var(--navy);font-weight:600}
.cmp-badge{
  font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
  border-radius:9999px;padding:3px 10px;
  box-shadow:0 3px 8px -2px rgba(168,152,68,.55);
}

/* dark theme — navy frosted glass */
:root[data-theme="dark"] .compare-wrap{
  background:linear-gradient(135deg, rgba(36,51,65,.74) 0%, rgba(27,38,48,.52) 100%);
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 64px -16px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .compare-table th,
:root[data-theme="dark"] .compare-table td{border-bottom-color:rgba(255,255,255,.09)}
:root[data-theme="dark"] .cmp-h-name{color:#fff}
:root[data-theme="dark"] .cmp-rowlabel{color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .cmp-rowlabel svg{color:var(--gold-light)}
:root[data-theme="dark"] .compare-table td{color:rgba(255,255,255,.80)}
:root[data-theme="dark"] .compare-table thead th.cmp-trad .cmp-h-name,
:root[data-theme="dark"] .compare-table td.cmp-trad{color:rgba(255,255,255,.45)}
:root[data-theme="dark"] .compare-table tbody tr:hover td:not(.cmp-active):not(.cmp-trad){background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .compare-table tbody tr:hover td.cmp-trad{background:rgba(255,255,255,.03)}
:root[data-theme="dark"] .compare-table .cmp-active{
  background:linear-gradient(180deg, rgba(213,196,123,.22) 0%, rgba(213,196,123,.08) 100%);
  border-left-color:rgba(213,196,123,.42);border-right-color:rgba(213,196,123,.42);
}
:root[data-theme="dark"] .compare-table thead th.cmp-active{border-top-color:var(--gold-light);box-shadow:0 -10px 26px -10px rgba(213,196,123,.5)}
:root[data-theme="dark"] .compare-table tbody tr:last-child td.cmp-active{border-bottom-color:rgba(213,196,123,.42)}
:root[data-theme="dark"] .compare-table thead th.cmp-active .cmp-h-name{color:var(--gold-light)}
:root[data-theme="dark"] .compare-table td.cmp-active{color:#fff}
:root[data-theme="dark"] .cmp-badge{background:var(--gold-light);color:var(--navy-deep)}

@media (max-width:640px){
  .compare-wrap{padding:6px;border-radius:18px}
  .compare-table th,.compare-table td{padding:14px 13px}
  .compare-table td{font-size:13px}
  /* Compact the pinned row-label column. It is `white-space:nowrap`, so "DELIVERED
     BY" and "TIME TO START" were setting it to 177px of a 332px viewport at 390px —
     over half the visible width, which clipped the ANCHOR column (the product whose
     page you are on) mid-word at 70%, and to 37% at 320px. Swiping should be for
     comparing against the other columns, not for reading your own. Nothing here
     changes the desktop table: it is all inside the phone breakpoint. */
  .compare-table:not(.earn-table) tbody th{padding-left:10px;padding-right:10px}
  .compare-table:not(.earn-table) .cmp-rowlabel{font-size:10px;letter-spacing:.06em;gap:8px}
  .compare-table:not(.earn-table) .cmp-rowlabel svg{width:14px;height:14px}
}

/* ═══ Mobile: the SAME table as desktop, swiped sideways ═══════════════════
   Per David. Mobile used to get a separate JS-built "anchored duel" instead (a
   tab-selectable 2-column view); the <=600px block here set
   `.compare-wrap{overflow:visible}` + `.compare-table{display:none}` to hide the
   real table, and removing that override is the whole change. No new scroll
   machinery: `.compare-wrap` already carries `overflow-x:auto` +
   `-webkit-overflow-scrolling:touch`, and `.compare-table` already has
   `min-width:880px`, so it simply scrolls now. The 640px padding/font block above
   still applies.

   The row-label column is pinned, or after one swipe you are reading four values
   with no idea which row they belong to. Scoped to the widths where the table
   actually overflows its wrapper, because the opaque background and seam shadow a
   sticky cell needs would otherwise be visible at full desktop width, where there
   is nothing to scroll. Breakpoint measured rather than guessed: the table occupies
   880px min-width + 20px wrap padding = 900px, and the wrap runs ~102px narrower
   than the viewport once page gutters are taken out, so overflow begins at ~1002px
   (verified: 1010px does not scroll, 1000px does — wrap clientWidth 898 vs
   scrollWidth 900). 1020px is that boundary plus a small margin: erring high costs
   a visible seam across ~20px of widths, erring low would leave a band that
   scrolls sideways with no pinned column at all.

   `:not(.earn-table)` matters — /work/getting-paid reuses `.compare-table` for its
   earnings table, which is `min-width:0` and never overflows, and which already has
   its own <=700px treatment that restacks it into blocks. Without the exclusion it
   would pick up a pinned column and a seam shadow it has no use for. */
@media(max-width:1020px){
  .compare-table:not(.earn-table) thead th.cmp-corner,
  .compare-table:not(.earn-table) tbody th{
    position:sticky;left:0;z-index:2;
    /* must be opaque: the value cells scroll underneath it. Tuned to the light end
       of the .compare-wrap glass gradient so the seam reads as a pinned column
       rather than a mismatched patch. */
    background:#E7EFF4;
    /* Three layers, and the first is not decorative. `left:0` pins to the scroll
       container's PADDING box, so scrolled cells travel through .compare-wrap's own
       padding and a sliver of the gold anchor column showed to the LEFT of the
       pinned labels — it read as a stray gold line down the edge. A solid spread
       shadow paints over that gutter (12px covers the 10px base padding and the 6px
       phone padding); the wrap's overflow clip keeps it off the rounded corners.
       Then the 1px seam and the soft depth shadow on the right. */
    box-shadow:-12px 0 0 #E7EFF4, 1px 0 0 rgba(58,75,91,.10), 7px 0 14px -9px rgba(58,75,91,.30);
  }
  :root[data-theme="dark"] .compare-table:not(.earn-table) thead th.cmp-corner,
  :root[data-theme="dark"] .compare-table:not(.earn-table) tbody th{
    background:#212F3C;   /* light end of the dark wrap gradient, opaque */
    box-shadow:-12px 0 0 #212F3C, 1px 0 0 rgba(255,255,255,.10), 7px 0 14px -9px rgba(0,0,0,.6);
  }
}
/* challenger selector — one tab per non-anchor column, desktop order */
/* panel fade on swap (out ~110ms + in ~110ms = <=220ms) */
/* 2-col grid: anchor | challenger; row labels span both columns */
/* anchor column — featured cream/gold (same recipe as the desktop .cmp-active) */
/* row-label band (icon + uppercase label, + TIE flag) */
/* fixed min-height so a row's TIE pill can't make its label band taller than a
   non-tie one (was a 1px-per-tie-row shift when swapping challengers) */
/* TIE flag is absolutely positioned (out of flow) so a tie row is never taller
   than a non-tie row — otherwise swapping challengers shifts height by ~1px/tie */
/* value cells — min-height reserves up to 2 lines so swapping the challenger
   never changes row height (no layout shift / CLS) */
/* very narrow phones wrap the longest value to 3 lines — reserve for it only
   there so the challenger swap can't shift height (wider phones stay compact) */
/* dark theme (data-theme=dark) */

/* comparison-section CTA (per-solution) */
.compare-cta{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:38px;text-align:center}
.compare-cta-txt{font-family:'Montserrat',sans-serif;font-size:clamp(19px,2.4vw,26px);font-weight:300;line-height:1.25;color:var(--navy);letter-spacing:-.005em;margin:0}
.compare-cta-txt em{font-style:italic;font-weight:400;color:var(--gold-deep)}
.compare-cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
:root[data-theme="dark"] .compare-cta-txt{color:#fff}
:root[data-theme="dark"] .compare-cta-txt em{color:var(--gold-light)}

/* ─────────────────────────────────────────────────────────
   "Talk to Us" demo wizard — progressive disclosure scheduler
   (built by demo-modal.js). Progress stepper, calendar, time
   slots, summary, and mock verification widget.
   ───────────────────────────────────────────────────────── */
.demo-modal-card.is-wizard{max-width:600px}

/* progress stepper */
.demo-progress{list-style:none;display:flex;align-items:center;gap:0;margin:0 0 22px;padding:0}
.demo-prog-step{display:flex;align-items:center;gap:9px;flex:1;position:relative;color:var(--ink3)}
.demo-prog-step:not(:last-child)::after{content:'';flex:1;height:2px;background:var(--border);margin:0 10px;border-radius:1px;transition:background .3s}
.demo-prog-step.is-done:not(:last-child)::after{background:var(--gold)}
.demo-prog-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;
  background:var(--bg-muted,#EEF2F6);color:var(--ink3);border:1px solid var(--border);transition:all .3s}
.demo-prog-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.demo-prog-step.is-active .demo-prog-dot{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);box-shadow:0 3px 10px -2px rgba(168,152,68,.6)}
.demo-prog-step.is-active{color:var(--navy)}
.demo-prog-step.is-done .demo-prog-dot{background:var(--gold-tint);color:var(--gold-deep);border-color:rgba(168,152,68,.45)}
@media(max-width:520px){.demo-prog-label{display:none}}

/* step panels (progressive disclosure) */
.demo-step{display:none;flex-direction:column;gap:14px}
.demo-step.is-active{display:flex;animation:demoStepIn .32s cubic-bezier(0.22,1,0.36,1)}
@keyframes demoStepIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}

/* scheduler: calendar + slots */
.demo-sched{display:grid;grid-template-columns:1fr 0.92fr;gap:18px;align-items:start}
@media(max-width:520px){.demo-sched{grid-template-columns:1fr}}
.demo-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.demo-cal-title{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--navy)}
.demo-cal-nav{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.demo-cal-nav svg{width:15px;height:15px}
.demo-cal-nav:hover:not(:disabled){border-color:var(--gold);color:var(--gold-deep);background:var(--gold-tint)}
.demo-cal-nav:disabled{opacity:.35;cursor:not-allowed}
.demo-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.demo-cal-dow{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;color:var(--ink3);text-align:center;padding-bottom:4px;letter-spacing:.03em}
.demo-cal-blank{aspect-ratio:1}
.demo-cal-day{aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--navy);
  font-family:'Geist',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.demo-cal-day:hover:not(:disabled){background:var(--gold-tint);border-color:rgba(168,152,68,.4)}
.demo-cal-day:disabled{color:var(--border);cursor:not-allowed}
.demo-cal-day.is-today:not(.is-sel){box-shadow:inset 0 0 0 1px var(--border)}
.demo-cal-day.is-sel{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);font-weight:700;box-shadow:0 4px 12px -3px rgba(168,152,68,.6)}

.demo-slots-wrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.demo-slots-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--navy);letter-spacing:.04em}
.demo-slots{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:206px;overflow-y:auto;padding-right:2px}
.demo-slot{padding:9px 6px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--navy);
  font-family:'Geist',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}
.demo-slot:hover{border-color:var(--gold);background:var(--gold-tint);color:var(--gold-deep)}
.demo-slot.is-sel{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);box-shadow:0 4px 12px -3px rgba(168,152,68,.55)}
.demo-slots-empty{grid-column:1/-1;font-size:12.5px;color:var(--ink3);line-height:1.5;padding:8px 2px;margin:0}
.demo-sched-err{font-size:12.5px;color:var(--error,#EF4444);font-weight:500;margin:2px 0 0}

/* step 3 summary */
.demo-summary{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--gold-tint)}
.demo-sum-row{display:flex;align-items:center;gap:12px}
.demo-sum-ic{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid rgba(168,152,68,.3);display:flex;align-items:center;justify-content:center;color:var(--gold-deep);flex-shrink:0}
.demo-sum-ic svg{width:18px;height:18px}
.demo-sum-row strong{display:block;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--navy);line-height:1.3}
.demo-sum-row span{display:block;font-size:12.5px;color:var(--muted-foreground);margin-top:1px}

/* mock verification widget ("I'm not a robot") */
.demo-captcha{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(58,75,91,.06)}
.demo-captcha-box{width:26px;height:26px;border-radius:5px;border:2px solid var(--border);background:#fff;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .2s}
.demo-captcha-box:hover{border-color:var(--gold)}
.demo-captcha-check{width:14px;height:14px;display:block}
.demo-captcha-label{font-family:'Geist',sans-serif;font-size:14px;font-weight:500;color:var(--navy);flex:1}
.demo-captcha-brand{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink3)}
.demo-captcha-brand svg{width:20px;height:20px;color:var(--gold-deep)}
.demo-captcha-brand small{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* verifying — spinner */
.demo-captcha[data-state="verifying"] .demo-captcha-box{cursor:default;border-color:var(--gold)}
.demo-captcha[data-state="verifying"] .demo-captcha-check{border:2px solid rgba(168,152,68,.3);border-top-color:var(--gold-deep);border-radius:50%;animation:demoSpin .7s linear infinite}
@keyframes demoSpin{to{transform:rotate(360deg)}}
/* done — checkmark */
.demo-captcha[data-state="done"] .demo-captcha-box{background:var(--success,#16A34A);border-color:var(--success,#16A34A);cursor:default}
.demo-captcha[data-state="done"] .demo-captcha-check{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}

/* actions row */
.demo-actions{display:flex;align-items:center;gap:12px;margin-top:20px}
.demo-actions .demo-submit{flex:1;margin:0}
.demo-back{padding:13px 22px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--navy);
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .18s}
.demo-back:hover{border-color:var(--navy);background:rgba(58,75,91,.05)}
.demo-confirm:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* success — scheduled time card */
.demo-success-when{margin:4px auto 14px;padding:13px 22px;border-radius:12px;background:var(--gold-tint);border:1px solid rgba(168,152,68,.3);
  font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:var(--navy);line-height:1.3;display:inline-block}
.demo-success-when span{display:block;font-family:'Geist',sans-serif;font-size:12.5px;font-weight:500;color:var(--muted-foreground);margin-top:3px}

/* ── dark mode ── */
:root[data-theme="dark"] .demo-prog-dot{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.2)}
:root[data-theme="dark"] .demo-prog-step{color:rgba(255,255,255,.5)}
:root[data-theme="dark"] .demo-prog-step.is-active{color:#fff}
:root[data-theme="dark"] .demo-prog-step:not(:last-child)::after{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] .demo-prog-step.is-done .demo-prog-dot{background:rgba(213,196,123,.18);color:var(--gold-light);border-color:rgba(213,196,123,.4)}
:root[data-theme="dark"] .demo-cal-title{color:#fff}
:root[data-theme="dark"] .demo-cal-nav{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
:root[data-theme="dark"] .demo-cal-nav:hover:not(:disabled){background:rgba(213,196,123,.16);border-color:var(--gold-light);color:var(--gold-light)}
:root[data-theme="dark"] .demo-cal-day{color:rgba(255,255,255,.85)}
:root[data-theme="dark"] .demo-cal-day:hover:not(:disabled){background:rgba(213,196,123,.16);border-color:rgba(213,196,123,.4)}
:root[data-theme="dark"] .demo-cal-day:disabled{color:rgba(255,255,255,.18)}
:root[data-theme="dark"] .demo-cal-day.is-today:not(.is-sel){box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
:root[data-theme="dark"] .demo-slots-label{color:#fff}
:root[data-theme="dark"] .demo-slot{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
:root[data-theme="dark"] .demo-slot:hover{background:rgba(213,196,123,.16);border-color:var(--gold-light);color:var(--gold-light)}
:root[data-theme="dark"] .demo-slots-empty{color:rgba(255,255,255,.5)}
:root[data-theme="dark"] .demo-summary{background:rgba(213,196,123,.12);border-color:rgba(213,196,123,.3)}
:root[data-theme="dark"] .demo-sum-ic{background:rgba(255,255,255,.08);border-color:rgba(213,196,123,.3);color:var(--gold-light)}
:root[data-theme="dark"] .demo-sum-row strong{color:#fff}
:root[data-theme="dark"] .demo-sum-row span{color:rgba(255,255,255,.6)}
:root[data-theme="dark"] .demo-captcha{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
:root[data-theme="dark"] .demo-captcha-box{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
:root[data-theme="dark"] .demo-captcha-label{color:#fff}
:root[data-theme="dark"] .demo-back{color:#fff;border-color:rgba(255,255,255,.3)}
:root[data-theme="dark"] .demo-back:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
:root[data-theme="dark"] .demo-success-when{background:rgba(213,196,123,.14);border-color:rgba(213,196,123,.3);color:#fff}
:root[data-theme="dark"] .demo-success-when span{color:rgba(255,255,255,.65)}

/* demo wizard — QA fill button (testing affordance) */
.demo-qa{position:absolute;top:18px;right:58px;z-index:2;font-family:'Geist',sans-serif;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--ink3);background:transparent;border:1px dashed var(--border);border-radius:7px;padding:4px 9px;cursor:pointer;transition:all .18s}
.demo-qa:hover{color:var(--gold-deep);border-color:var(--gold);background:var(--gold-tint)}
:root[data-theme="dark"] .demo-qa{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.22)}
:root[data-theme="dark"] .demo-qa:hover{color:var(--gold-light);border-color:rgba(213,196,123,.5);background:rgba(213,196,123,.12)}

/* success — account head-start CTA */
.demo-success-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;margin-top:10px}
.demo-success-actions .demo-headstart{margin:0;width:100%}
.demo-success-skip{background:transparent;border:0;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink3);padding:4px;transition:color .18s}
.demo-success-skip:hover{color:var(--navy)}
:root[data-theme="dark"] .demo-success-skip{color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .demo-success-skip:hover{color:#fff}

/* Remote Associate mode arrows — theme-aware colors */
.prods-glass .prod-mode-arrow{color:var(--gold-light);background:rgba(213,196,123,.16);border-color:rgba(213,196,123,.34)}
.prods-glass .prod-mode:hover .prod-mode-arrow{background:var(--gold-light);border-color:var(--gold-light);color:var(--navy-deep)}
.prods-glass .prod-mode:hover .prod-mode-name{color:var(--gold-light)}
[data-theme="light"] .prods-glass .prod-mode-arrow{color:var(--gold-deep);background:rgba(168,152,68,.12);border-color:rgba(168,152,68,.30)}
[data-theme="light"] .prods-glass .prod-mode:hover .prod-mode-arrow{background:var(--gold);border-color:var(--gold);color:#fff}
[data-theme="light"] .prods-glass .prod-mode:hover .prod-mode-name{color:var(--gold-deep)}

/* ─────────────────────────────────────────────────────────
   Attorneys directory — filter toolbar, count, empty state
   ───────────────────────────────────────────────────────── */
.nav-links a.is-current{color:var(--gold-deep);font-weight:600}
:root[data-theme="dark"] .nav-links a.is-current{color:var(--gold-light)}

.atty-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:8px 0 14px;padding:18px;border-radius:16px;
  background:linear-gradient(135deg, rgba(214,228,236,.7) 0%, rgba(232,240,245,.5) 100%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 32px -14px rgba(58,75,91,.22);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
.atty-search{position:relative;flex:1 1 240px;min-width:200px}
.atty-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink3);pointer-events:none}
.atty-search input{width:100%;height:44px;padding:0 14px 0 40px;border:1px solid var(--border);border-radius:10px;background:#fff;font-family:'Geist',sans-serif;font-size:14px;color:var(--navy)}
.atty-search input::placeholder{color:var(--ink3)}
.atty-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.atty-filter{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.atty-filter-label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.atty-filter select{height:44px;padding:0 36px 0 13px;border:1px solid var(--border);border-radius:10px;
  background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%237A858F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;background-size:14px;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;appearance:none;-webkit-appearance:none}
.atty-filter select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.atty-clear{height:44px;align-self:flex-end;padding:0 18px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--navy);
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:border-color .18s,background .18s}
.atty-clear:hover{border-color:var(--navy);background:rgba(58,75,91,.05)}
.atty-count{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:var(--muted-foreground);letter-spacing:.03em;margin:0 0 22px}
.atty-empty{text-align:center;padding:54px 20px 30px;color:var(--muted-foreground)}
.atty-empty-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:var(--gold-tint);color:var(--gold-deep)}
.atty-empty-icon svg{width:24px;height:24px}
.atty-empty h3{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:600;color:var(--navy);margin:0 0 6px}
.atty-empty p{font-size:14px;margin:0}
.atty-empty-clear{background:none;border:0;color:var(--gold-deep);font-weight:600;cursor:pointer;text-decoration:underline;font-size:14px;padding:0;font-family:inherit}

/* dark theme */
:root[data-theme="dark"] .atty-toolbar{background:linear-gradient(135deg, rgba(36,51,65,.72) 0%, rgba(27,38,48,.5) 100%);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px -14px rgba(0,0,0,.5)}
:root[data-theme="dark"] .atty-search input,
:root[data-theme="dark"] .atty-filter select{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
:root[data-theme="dark"] .atty-search input::placeholder{color:rgba(255,255,255,.4)}
:root[data-theme="dark"] .atty-filter-label{color:rgba(255,255,255,.6)}
:root[data-theme="dark"] .atty-clear{color:#fff;border-color:rgba(255,255,255,.3)}
:root[data-theme="dark"] .atty-clear:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
:root[data-theme="dark"] .atty-empty h3{color:#fff}
:root[data-theme="dark"] .atty-empty-icon{background:rgba(213,196,123,.16);color:var(--gold-light)}

/* "Browse all attorneys" CTA under Featured Counsel grids */
.counsel-cta{display:flex;justify-content:center;margin-top:42px}
.wp-teaser .counsel-cta,.legaldoc .counsel-cta{flex-wrap:wrap;gap:12px}
/* Matches the "Talk to Us" secondary (.btn-ghost-lg.cta-ghost) exactly */
.counsel-browse{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:10px;
  background:rgba(58,75,91,.05);border:1px solid rgba(58,75,91,.22);color:var(--navy);
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  box-shadow:0 2px 0 rgba(58,75,91,.18);
  transition:background .2s,border-color .2s,box-shadow .2s,transform .08s}
.counsel-browse svg{width:16px;height:16px;transition:transform .2s}
.counsel-browse:hover{background:rgba(58,75,91,.10);border-color:var(--navy);box-shadow:0 2px 0 rgba(58,75,91,.18),0 5px 16px rgba(58,75,91,.14)}
.counsel-browse:hover svg{transform:translateX(3px)}
.counsel-browse:active{transform:translateY(2px);box-shadow:0 0 0 0 rgba(58,75,91,.18)}
.counsel-browse:active svg{transform:translateX(3px)}
:root[data-theme="dark"] .counsel-browse{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:#fff}
:root[data-theme="dark"] .counsel-browse:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
/* Gold primary variant for dual-CTA rows (matches .btn-primary-lg colours) */
.counsel-browse.counsel-gold{background:var(--gold);border-color:var(--gold-deep);color:var(--navy-deep);box-shadow:0 2px 0 var(--gold-deep)}
.counsel-browse.counsel-gold:hover{background:var(--gold-light);border-color:var(--gold-deep);box-shadow:0 2px 0 var(--gold-deep),0 5px 16px rgba(198,178,93,.42)}
.counsel-browse.counsel-gold:active{transform:translateY(2px);box-shadow:0 0 0 0 var(--gold-deep)}
:root[data-theme="dark"] .counsel-browse.counsel-gold{background:var(--gold);border-color:var(--gold-deep);color:var(--navy-deep)}
:root[data-theme="dark"] .counsel-browse.counsel-gold:hover{background:var(--gold-light);border-color:var(--gold-deep)}

/* The cross-page logo move is handled by logo-morph.js (a FLIP animation)
   so it works in every browser, not just Chromium. Disable the automatic
   cross-document View Transition so it doesn't compete with the FLIP.
   Same-document transitions (audience toggle, auth) are unaffected —
   they run via JS document.startViewTransition(). */
@view-transition { navigation: none; }

/* ─────────────────────────────────────────────────────────
   Registration entrance (register-hire role gateway)
   The logo slides into place (logo-morph.js); back link + cards
   reveal. No banner here — the demo banner only shows on the
   hiring-side pages outside registration.
   ───────────────────────────────────────────────────────── */
/* keep the back link out of the way until the logo has slid into place */
.reg-body.reg-playing .reg-back{animation:regFadeIn 500ms ease 800ms both}
.reg-body.reg-playing .reg-main{animation:regContentIn 700ms cubic-bezier(.22,1,.36,1) 640ms both}
@keyframes regContentIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes regFadeIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .reg-body.reg-playing .reg-back,
  .reg-body.reg-playing .reg-main{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   Blog (index + single post)
   ═══════════════════════════════════════════════════════════ */
.blog-featured{margin-bottom:8px}
/* archive header: dynamic label (JS retitles it per filter) styled as a
   real section head, with a top border to break the magazine -> grid seam */
.blog-more-head{margin:56px 0 24px;padding-top:44px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:16px}
.blog-more-eyebrow{display:block;margin:0;font-family:'Montserrat',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.005em;line-height:1.2;text-transform:none;color:var(--navy)}
.blog-chips{gap:9px}
.ct-chip-n{margin-left:7px;font-size:11px;font-weight:700;color:var(--ink3)}
.ct-chip.on .ct-chip-n{color:inherit;opacity:.72}
:root[data-theme="dark"] .blog-more-head{border-top-color:rgba(255,255,255,.10)}
:root[data-theme="dark"] .blog-more-eyebrow{color:#fff}
:root[data-theme="dark"] .ct-chip-n{color:rgba(255,255,255,.6)}
:root[data-theme="dark"] .ct-chip.on .ct-chip-n{color:inherit;opacity:.72}
@media(max-width:600px){
  .blog-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin-right:calc(var(--gutter) * -1);padding-right:var(--gutter)}
  .blog-chips::-webkit-scrollbar{display:none}
  .ct-chip{flex:0 0 auto}
}
/* blog index load-more (new control; modeled on .btn-outline vocabulary) */
.blog-more-wrap{display:flex;justify-content:center;margin-top:34px}
.blog-more-btn[hidden]{display:none}
.blog-more-btn{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--navy);background:transparent;border:1px solid var(--border);border-radius:999px;padding:14px 30px;cursor:pointer;transition:border-color .18s,color .18s,background .18s,box-shadow .18s}
.blog-more-btn:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-tint);box-shadow:0 8px 20px rgba(198,178,93,.18)}
:root[data-theme="dark"] .blog-more-btn{color:#fff;border-color:rgba(255,255,255,.18)}
:root[data-theme="dark"] .blog-more-btn:hover{border-color:var(--gold-light);color:var(--gold-light);background:rgba(255,255,255,.04)}
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px}
@media(max-width:900px){.bloggrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bloggrid{grid-template-columns:1fr;gap:28px}}
.blogcard{display:flex;flex-direction:column;
  background:radial-gradient(circle at 100% 0%,rgba(198,178,93,.10) 0%,transparent 60%), var(--bg-card);
  border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(58,75,91,.05);transition:transform .25s,box-shadow .25s,border-color .25s}
.blogcard:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(58,75,91,.10);border-color:var(--gold)}
.blogcard-cover{display:block;width:100%;aspect-ratio:16/10;background:var(--cream) center/cover no-repeat}
.blogcard-body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px}
.blogcard-cat{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.blogcard-title{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:600;line-height:1.28;letter-spacing:-.01em;color:var(--navy)}
.blogcard-excerpt{font-size:14px;line-height:1.6;color:var(--muted-foreground)}
.blogcard-meta{font-size:12px;color:var(--ink3);margin-top:2px}
/* featured large two-col */
.blogcard-lg{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
.blogcard-lg .blogcard-cover{height:100%;aspect-ratio:auto;min-height:300px}
.blogcard-lg .blogcard-body{justify-content:center;gap:12px;padding:36px 38px}
.blogcard-lg .blogcard-title{font-size:27px;font-weight:300;letter-spacing:-.01em}
@media(max-width:780px){.blogcard-lg{grid-template-columns:1fr}.blogcard-lg .blogcard-cover{min-height:200px;aspect-ratio:16/9}}

.post{max-width:760px;margin:0 auto;padding:46px var(--gutter) 8px}
.post-head{margin-bottom:24px}
.post-back{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);text-decoration:none;margin-bottom:22px;transition:color .2s}
.post-back:hover{color:var(--gold-deep)}
.post-back svg{width:15px;height:15px}
.post-cat{display:inline-block;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.post-title{font-family:'Montserrat',sans-serif;font-size:clamp(30px,4.4vw,46px);font-weight:300;line-height:1.1;letter-spacing:-.015em;color:var(--navy);margin:0 0 14px}
.post-meta{font-size:13.5px;color:var(--ink3);margin:0}
.post-cover{width:100%;aspect-ratio:16/9;border-radius:16px;background:#e8eef3 center/cover no-repeat;margin:6px 0 30px;box-shadow:0 18px 44px -18px rgba(58,75,91,.30)}
.post-body{font-size:17.5px;line-height:1.75;color:var(--post-ink)}
.post-body>p,.post-body>h2,.post-body>h3,.post-body>h4,.post-body>ul,.post-body>ol,.post-body>blockquote{max-width:68ch}
.post-body p{margin:0 0 22px}
.post-body>h1:empty:first-child + p,.post-body>p:first-child{font-size:20px;line-height:1.6;font-weight:300;color:var(--navy);margin:0 0 26px}
[data-theme="dark"] .post-body>h1:empty:first-child + p,[data-theme="dark"] .post-body>p:first-child{color:#fff}
.post-body h2{font-family:'Montserrat',sans-serif;font-size:25px;font-weight:600;color:var(--navy);margin:44px 0 14px;line-height:1.25;letter-spacing:-.01em}
.post-missing{max-width:680px;margin:0 auto;padding:90px var(--gutter);text-align:center}
.post-missing h1{font-family:'Montserrat',sans-serif;font-weight:300;font-size:32px;color:var(--navy);margin:8px 0 12px}
.post-missing a{color:var(--gold-deep);font-weight:600;text-decoration:none}

:root[data-theme="dark"] .blogcard{
  background:linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.02) 100%);
  border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.18),0 18px 44px -12px rgba(0,0,0,.34);
  color:#fff;
}
:root[data-theme="dark"] .blogcard:hover{border-color:var(--gold-light)}
:root[data-theme="dark"] .blogcard-title{color:#fff}
:root[data-theme="dark"] .blogcard-excerpt{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .post-title,:root[data-theme="dark"] .post-missing h1{color:#fff}
:root[data-theme="dark"] .post-body h2{color:#fff}
.post-body h2:first-child,.post-body h3:first-child,.post-body h4:first-child{margin-top:0}

/* ── LAW-519 · blog post: full long-form type system ───────────────────────
   The body is real WordPress HTML; style every element it actually uses so a
   long article reads beautifully (links, lists, sub-headings, quotes, media,
   tables, embeds). Media is capped to the 68ch text measure so it stays
   left-aligned with the paragraphs. */
.post-body h3{font-family:'Montserrat',sans-serif;font-size:20.5px;font-weight:600;color:var(--navy);letter-spacing:-.005em;line-height:1.3;margin:34px 0 10px}
.post-body h4{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--gold-deep);letter-spacing:.08em;text-transform:uppercase;margin:28px 0 8px}
.post-body h1:empty{display:none}
/* links: navy text (AA on white) + gold underline; gold-deep on hover */
.post-body a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--gold);transition:color .15s ease,text-decoration-color .15s ease,text-decoration-thickness .15s ease}
.post-body a:hover{color:var(--gold-deep);text-decoration-color:var(--gold-deep);text-decoration-thickness:2px}
.post-body a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(198,178,93,.4);border-radius:2px}
.post-body strong,.post-body b{font-weight:600;color:var(--navy)}
.post-body sup{font-size:.72em;line-height:0}
.post-body sub{font-size:.72em;line-height:0}
.post-body sup a{text-decoration:none;padding:0 1px}
.post-body sup a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
/* <u> is used for emphasis in WP copy; render as a highlight, not a fake link */
.post-body u{text-decoration:none;background:linear-gradient(transparent 62%,rgba(198,178,93,.22) 0)}
.post-body ul,.post-body ol{max-width:68ch;margin:0 0 22px;padding-left:1.4em}
.post-body li{margin:0 0 9px;padding-left:.3em}
.post-body li::marker{color:var(--gold-deep);font-weight:600}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li>ul,.post-body li>ol{margin:9px 0 2px}
.post-body blockquote{max-width:68ch;margin:30px 0;padding:2px 0 2px 26px;border-left:3px solid var(--gold);font-family:'Montserrat',sans-serif;font-weight:300;font-size:21px;line-height:1.5;color:var(--navy)}
.post-body blockquote p{margin:0 0 10px}
.post-body blockquote p:last-child{margin:0}
.post-body hr{max-width:68ch;border:0;height:1px;background:var(--border);margin:42px 0}
/* media — kept to the text measure, left-aligned with the paragraphs */
.post-body figure,.post-body>img{max-width:68ch;margin:32px 0}
.post-body img{max-width:100%;height:auto;display:block;border-radius:12px}
.post-body figure img{width:100%}
.post-body figure img,.post-body>img{box-shadow:0 14px 34px -18px rgba(58,75,91,.35)}
.post-body figcaption{font-size:13.5px;line-height:1.5;color:var(--muted-foreground);text-align:center;margin-top:11px}
.post-body iframe{width:100%;max-width:68ch;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;margin:12px 0;display:block}
.post-body .wp-block-embed{max-width:68ch}
.post-body .wp-block-embed__wrapper{max-width:100%}
/* tables — bordered, header tint, zebra; scrolls on small screens */
.post-body .post-table-scroll{max-width:68ch;overflow-x:auto;margin:26px 0}
.post-body table{width:100%;border-collapse:collapse;font-size:15.5px}
.post-body th,.post-body td{border:1px solid var(--border);padding:10px 14px;text-align:left;vertical-align:top;line-height:1.55}
.post-body thead th,.post-body table tr:first-child td{background:var(--cream);font-family:'Montserrat',sans-serif;font-weight:600;color:var(--navy)}
.post-body tbody tr:nth-child(even) td{background:rgba(58,75,91,.035)}
.post-body ::selection{background:rgba(198,178,93,.3)}
/* dark mode for the new elements (these tokens don't auto-flip under data-theme) */
:root[data-theme="dark"] .post-body h3,:root[data-theme="dark"] .post-body strong,:root[data-theme="dark"] .post-body b,:root[data-theme="dark"] .post-body blockquote{color:#fff}
:root[data-theme="dark"] .post-body h4{color:var(--gold-light)}
:root[data-theme="dark"] .post-body a{color:var(--gold-light);text-decoration-color:var(--gold-light)}
:root[data-theme="dark"] .post-body a:hover{color:#fff;text-decoration-color:#fff}
:root[data-theme="dark"] .post-body a:hover{color:#fff}
:root[data-theme="dark"] .post-body li::marker{color:var(--gold-light)}
:root[data-theme="dark"] .post-body hr{background:rgba(255,255,255,.16)}
:root[data-theme="dark"] .post-body figcaption{color:rgba(255,255,255,.6)}
:root[data-theme="dark"] .post-body th,:root[data-theme="dark"] .post-body td{border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .post-body thead th,:root[data-theme="dark"] .post-body table tr:first-child td{background:rgba(255,255,255,.08);color:#fff}
:root[data-theme="dark"] .post-body tbody tr:nth-child(even) td{background:rgba(255,255,255,.03)}
@media(max-width:640px){
  .post-body{font-size:16.5px}
  .post-body h2{font-size:22px;margin-top:36px}
  .post-body h3{font-size:18px}
  .post-body blockquote{font-size:19px;padding-left:20px}
}

/* ═══════════════════════════════════════════════════════════
   Blog admin (/admin) — authoring UI (prototype, localStorage)
   ═══════════════════════════════════════════════════════════ */
.admin-body{background:#EEF1F4;min-height:100vh;margin:0;font-family:'Geist','Inter',sans-serif;color:var(--navy)}
.admin-top{display:flex;align-items:center;gap:16px;padding:13px clamp(18px,3vw,32px);background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
.admin-logo img{height:26px;display:block}
.admin-top-tag{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);border-left:1px solid var(--border);padding-left:16px}
.admin-top-actions{margin-left:auto;display:flex;align-items:center;gap:18px}
.admin-top-link{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:var(--navy);text-decoration:none;letter-spacing:.03em}
.admin-top-link:hover{color:var(--gold-deep)}
.admin-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1240px;margin:0 auto;padding:28px clamp(18px,3vw,32px) 60px;align-items:start}
@media(max-width:900px){.admin-wrap{grid-template-columns:1fr}}
.admin-editor{background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px 26px 30px;box-shadow:0 1px 3px rgba(58,75,91,.05)}
.admin-h1{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:var(--navy);margin:0 0 4px}
.admin-sub{font-size:13px;color:var(--muted-foreground);margin:0 0 22px}
.admin-form{display:flex;flex-direction:column;gap:16px}
.admin-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.admin-row{grid-template-columns:1fr}}
.admin-field{display:flex;flex-direction:column;gap:6px}
.admin-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--navy)}
.admin-label-sm{font-weight:600;color:var(--ink3);text-transform:none;letter-spacing:.02em}
.admin-field input,.admin-field textarea{font-family:inherit;font-size:14px;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:9px;padding:11px 13px;transition:border-color .18s,box-shadow .18s}
.admin-field textarea{resize:vertical;line-height:1.6}
.admin-field input::placeholder,.admin-field textarea::placeholder{color:var(--ink3)}
.admin-field input:focus,.admin-field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.admin-field-inline{margin-top:10px}
.admin-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:150px;border:1.5px dashed var(--border);border-radius:12px;background:#fff;cursor:pointer;color:var(--ink3);position:relative;overflow:hidden;background-size:cover;background-position:center;transition:border-color .18s,background-color .18s}
.admin-drop svg{width:26px;height:26px;color:var(--gold-deep)}
.admin-drop-text{font-size:13.5px;color:var(--navy)}
.admin-drop-text strong{color:var(--gold-deep)}
.admin-drop-hint{font-size:11px}
.admin-drop:hover,.admin-drop.drag{border-color:var(--gold);background-color:var(--gold-tint)}
.admin-drop.has-img>svg,.admin-drop.has-img>.admin-drop-text,.admin-drop.has-img>.admin-drop-hint{display:none}
.admin-drop.has-img::after{content:'Change image';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,22,32,.45);color:#fff;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .2s}
.admin-drop.has-img:hover::after{opacity:1}
.admin-actions{display:flex;align-items:center;gap:12px;margin-top:4px}
.admin-save{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-deep);background:var(--gold);border:none;border-radius:10px;padding:13px 26px;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 2px 6px rgba(168,152,68,.22)}
.admin-save:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 8px 20px rgba(198,178,93,.36)}
.admin-ghost{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);background:transparent;border:1px solid var(--border);border-radius:10px;padding:13px 20px;cursor:pointer;transition:all .2s}
.admin-ghost:hover{border-color:var(--navy);background:rgba(58,75,91,.05)}
.admin-saved{font-size:13px;font-weight:600;color:#16A34A}
.admin-list-wrap{margin-top:30px;border-top:1px solid var(--border);padding-top:22px}
.admin-h2{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--navy);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.admin-h2-mt{margin-top:28px}
.admin-ro{font-family:'Geist',sans-serif;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);background:#e8eef3;border-radius:9999px;padding:2px 8px}
.admin-list{display:flex;flex-direction:column;gap:10px}
.admin-listrow{display:flex;align-items:center;gap:13px;padding:10px;border:1px solid var(--border);border-radius:11px;background:#fff}
.admin-listrow-thumb{width:54px;height:42px;border-radius:7px;background:#e8eef3 center/cover no-repeat;flex-shrink:0}
.admin-listrow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.admin-listrow-title{font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-listrow-meta{font-size:11.5px;color:var(--ink3)}
.admin-listrow-actions{display:flex;gap:6px;flex-shrink:0}
.admin-mini{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--navy);background:transparent;border:1px solid var(--border);border-radius:7px;padding:6px 10px;cursor:pointer;text-decoration:none;transition:all .18s}
.admin-mini:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-tint)}
.admin-mini-del:hover{border-color:#EF4444;color:#EF4444;background:rgba(239,68,68,.06)}
.admin-empty{font-size:13px;color:var(--ink3);padding:6px 2px;margin:0}
.admin-preview{position:sticky;top:74px;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(58,75,91,.05)}
.admin-preview-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);background:#f4f7f9}
.admin-preview-tabs{display:flex;gap:4px}
.admin-pv-tab{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink3);background:transparent;border:1px solid transparent;border-radius:7px;padding:5px 11px;cursor:pointer;text-transform:uppercase}
.admin-pv-tab.is-on{background:#fff;border-color:var(--border);color:var(--navy)}
.admin-preview-stage{padding:22px;max-height:calc(100vh - 132px);overflow:auto}
.admin-pv-empty{color:var(--ink3);font-size:13.5px;text-align:center;padding:60px 12px}
.admin-pv-card{cursor:default}
.admin-pv-article{padding:0;margin:0;max-width:none}
.admin-pv-article .post-cover{margin-top:0}

/* admin: body format badge + import control */
.admin-fmt{font-family:'Geist',sans-serif;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);background:#e8eef3;border-radius:9999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.admin-fmt[data-fmt="md"]{background:var(--gold-tint);color:var(--gold-deep)}
.admin-fmt[data-fmt="html"]{background:rgba(37,99,235,.12);color:#2563EB}
.admin-import{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.admin-importbtn{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 14px;cursor:pointer;transition:all .18s}
.admin-importbtn:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-tint)}
.admin-importbtn svg{width:16px;height:16px;color:var(--gold-deep)}
.admin-import-hint{font-size:12px;color:var(--ink3)}

/* admin: author <select> matches inputs */
.admin-field select{font-family:inherit;font-size:14px;color:var(--navy);background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%237A858F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;background-size:14px;border:1px solid var(--border);border-radius:9px;padding:11px 34px 11px 13px;cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .18s,box-shadow .18s}
.admin-field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}

/* admin: account switcher (top bar) */
.admin-acct{position:relative;margin-left:6px}
.admin-acct-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);border-radius:9999px;padding:5px 11px 5px 6px;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.admin-acct-btn:hover{border-color:var(--gold)}
.admin-acct-btn svg{width:13px;height:13px;color:var(--ink3)}
.admin-acct-name{font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;color:var(--navy)}
.admin-acct-av{width:30px;height:30px;border-radius:50%;background:var(--gold-tint) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--gold-deep);flex-shrink:0}
.admin-acct-av.sm{width:34px;height:34px;font-size:12px}
.admin-acct-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:264px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 48px -16px rgba(58,75,91,.34);padding:10px;z-index:40}
.admin-acct-menu-label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:4px 8px 8px}
.admin-acct-list{display:flex;flex-direction:column;gap:2px}
.admin-acct-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;border-radius:10px;padding:8px 9px;cursor:pointer;transition:background .15s}
.admin-acct-item:hover{background:var(--gold-tint)}
.admin-acct-itxt{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.admin-acct-itxt span{font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;color:var(--navy)}
.admin-acct-itxt small{font-size:11.5px;color:var(--ink3)}
.admin-acct-item.is-on{background:var(--gold-tint)}
.admin-acct-check{width:16px;height:16px;color:var(--gold-deep);flex-shrink:0}
.admin-acct-manage{width:100%;text-align:left;margin-top:6px;padding:10px 9px;border:0;border-top:1px solid var(--border);background:transparent;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;color:var(--gold-deep);border-radius:0 0 8px 8px}
.admin-acct-manage:hover{color:var(--navy)}

/* admin: accounts modal */
.acct-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:6vh 20px;overflow-y:auto}
.acct-modal[hidden]{display:none}
.acct-modal-backdrop{position:fixed;inset:0;background:rgba(15,22,32,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.acct-modal-card{position:relative;width:100%;max-width:520px;background:#fff;border-radius:18px;padding:28px 26px;box-shadow:0 30px 80px rgba(0,0,0,.3);margin:auto 0}
.acct-modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(58,75,91,.06);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy);transition:background .2s}
.acct-modal-close:hover{background:rgba(58,75,91,.14)}
.acct-modal-close svg{width:15px;height:15px}
.acct-modal-h2{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:var(--navy);margin:0 0 4px}
.acct-modal-sub{font-size:13px;color:var(--muted-foreground);margin:0 0 18px}
.acct-modal-list{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.acct-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border:1px solid var(--border);border-radius:11px}
.acct-row-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.acct-row-name{font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;color:var(--navy)}
.acct-row-txt small{font-size:11.5px;color:var(--ink3)}
.acct-row-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.acct-form{border-top:1px solid var(--border);padding-top:18px;display:flex;flex-direction:column;gap:14px}
.acct-form-h{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--navy);margin:0}
.acct-form-save{align-self:flex-start}

/* admin: list search + sort bar, status badges, draft button */
.admin-ghost-quiet{color:var(--ink3)}
.admin-listbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.admin-listsearch{position:relative;flex:1 1 200px;min-width:160px}
.admin-listsearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink3);pointer-events:none}
.admin-listsearch input{width:100%;height:40px;padding:0 13px 0 36px;border:1px solid var(--border);border-radius:9px;background:#fff;font-family:'Geist',sans-serif;font-size:13.5px;color:var(--navy)}
.admin-listsearch input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.admin-sortby{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.admin-sortby select{height:40px;padding:0 32px 0 12px;border:1px solid var(--border);border-radius:9px;background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%237A858F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;background-size:13px;font-family:'Geist',sans-serif;font-size:13px;font-weight:500;color:var(--navy);cursor:pointer;appearance:none;-webkit-appearance:none;text-transform:none;letter-spacing:0}
.admin-sortby select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.admin-status{display:inline-block;margin-left:9px;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:9999px;padding:2px 8px;vertical-align:middle}
.admin-status-draft{background:rgba(168,152,68,.16);color:var(--gold-deep)}
.admin-status-pub{background:rgba(22,163,74,.12);color:#16A34A}

/* admin: status filter segmented control + one-click publish */
.admin-filter{display:inline-flex;background:#eef2f5;border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}
.admin-filter-btn{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink3);background:transparent;border:0;border-radius:7px;padding:7px 13px;cursor:pointer;transition:all .16s}
.admin-filter-btn:hover{color:var(--navy)}
.admin-filter-btn.is-on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(58,75,91,.12)}
.admin-mini-pub{border-color:rgba(22,163,74,.4);color:#16A34A}
.admin-mini-pub:hover{border-color:#16A34A;color:#fff;background:#16A34A}

/* admin: prototype sign-in gate */
.admin-gate{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,#27384a 0%,#0f1922 100%)}
.admin-gate[hidden]{display:none}
.admin-gate-card{width:100%;max-width:380px;background:#fff;border-radius:18px;padding:34px 30px 28px;box-shadow:0 30px 80px rgba(0,0,0,.42);display:flex;flex-direction:column;gap:13px}
.admin-gate-logo{height:30px;width:auto;align-self:flex-start;margin-bottom:4px}
.admin-gate-card h1{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:var(--navy);margin:0}
.admin-gate-card>p{font-size:13.5px;color:var(--muted-foreground);margin:0 0 4px}
.admin-gate-card label{display:flex;flex-direction:column;gap:6px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--navy)}
.admin-gate-card input{font-family:'Geist',sans-serif;font-size:14px;font-weight:400;letter-spacing:0;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:9px;padding:12px 13px}
.admin-gate-card input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.admin-gate-card button{margin-top:6px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-deep);background:var(--gold);border:0;border-radius:10px;padding:13px;cursor:pointer;transition:background .2s,transform .2s}
.admin-gate-card button:hover{background:var(--gold-light);transform:translateY(-1px)}
.admin-gate-err{font-size:12.5px;font-weight:600;color:#EF4444;margin:0}
.admin-gate-note{font-size:11.5px;line-height:1.5;color:var(--ink3);margin:4px 0 0}
.admin-gate-note strong{color:var(--navy)}

/* ── admin: slug field ── */
.admin-slug{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:#fff}
.admin-slug:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.admin-slug-pre{display:flex;align-items:center;padding:0 10px;background:var(--bg-light,#f1f5f9);color:var(--ink3);font-family:'Geist',sans-serif;font-size:12.5px;white-space:nowrap;border-right:1px solid var(--border)}
.admin-slug input{flex:1;border:0;border-radius:0;padding:11px 13px;font-family:'Geist',sans-serif;font-size:14px;color:var(--navy)}
.admin-slug input:focus{outline:none;box-shadow:none}

/* ── admin: rich-text editor ── */
.rte-wrap{border:1px solid var(--border);border-radius:11px;overflow:hidden;background:#fff;transition:border-color .18s,box-shadow .18s}
.rte-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.rte-toolbar{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:7px 8px;border-bottom:1px solid var(--border);background:var(--bg-light,#f8fafc)}
.rte-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--navy);cursor:pointer;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;transition:background .15s,border-color .15s}
.rte-btn .rte-i,.rte-btn i{font-style:italic}
.rte-btn svg{width:16px;height:16px}
.rte-btn:hover{background:#fff;border-color:var(--border)}
.rte-btn:active{background:var(--gold-tint)}
.rte-sep{width:1px;height:20px;background:var(--border);margin:0 4px}
.rte-spacer{flex:1}
.rte-import{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--navy);cursor:pointer;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;transition:border-color .15s,color .15s}
.rte-import svg{width:15px;height:15px;color:var(--gold-deep)}
.rte-import:hover{border-color:var(--gold);color:var(--gold-deep)}
.rte{min-height:280px;max-height:560px;overflow-y:auto;padding:18px 20px;font-family:'Geist',sans-serif;font-size:15px;line-height:1.7;color:var(--navy)}
.rte:focus{outline:none}
.rte:empty:before{content:attr(data-ph);color:var(--ink3)}
.rte h2{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:var(--navy);margin:18px 0 8px}
.rte h3{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin:16px 0 6px}
.rte p{margin:0 0 12px}
.rte ul,.rte ol{margin:0 0 12px;padding-left:22px}
.rte li{margin:3px 0}
.rte blockquote{margin:0 0 14px;padding:6px 0 6px 16px;border-left:3px solid var(--gold);color:var(--muted-foreground);font-style:italic}
.rte a{color:var(--gold-deep);text-decoration:underline}
.rte img{max-width:100%;height:auto;border-radius:8px;margin:6px 0}

/* ── admin: SEO section ── */
.admin-seo{border:1px solid var(--border);border-radius:11px;padding:0 16px;background:var(--bg-light,#f8fafc)}
.admin-seo[open]{padding-bottom:16px}
.admin-seo-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;cursor:pointer;list-style:none}
.admin-seo-sum::-webkit-details-marker{display:none}
.admin-seo-sum::after{content:'';width:9px;height:9px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);transition:transform .2s;flex-shrink:0}
.admin-seo[open] .admin-seo-sum::after{transform:rotate(225deg)}
.admin-seo-hint{font-size:12px;color:var(--ink3);font-weight:400;margin-left:auto;margin-right:6px}
.admin-seo .admin-field{margin-bottom:12px}
.seo-snippet{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:#fff;border:1px solid var(--border);border-radius:10px;margin-top:4px}
.seo-snippet-url{font-family:'Geist',sans-serif;font-size:12.5px;color:#3a7a3a}
.seo-snippet-title{font-family:'Geist',sans-serif;font-size:18px;color:#1a0dab;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seo-snippet-desc{font-family:'Geist',sans-serif;font-size:13px;color:#4d5156;line-height:1.5}

/* dark mode */
:root[data-theme="dark"] .admin-slug,
:root[data-theme="dark"] .rte-wrap{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
:root[data-theme="dark"] .admin-slug-pre,
:root[data-theme="dark"] .rte-toolbar,
:root[data-theme="dark"] .admin-seo{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .admin-slug input,
:root[data-theme="dark"] .rte,
:root[data-theme="dark"] .rte h2,
:root[data-theme="dark"] .rte h3,
:root[data-theme="dark"] .rte-btn,
:root[data-theme="dark"] .rte-import{color:#fff}
:root[data-theme="dark"] .rte-btn:hover,
:root[data-theme="dark"] .rte-import{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .seo-snippet{background:#1c2632;border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .seo-snippet-title{color:#8ab4f8}
:root[data-theme="dark"] .seo-snippet-url{color:#9cc79c}
:root[data-theme="dark"] .seo-snippet-desc{color:rgba(255,255,255,.7)}

/* admin: stacked preview blocks (card + article shown together) */
.admin-pv-block{display:flex;flex-direction:column;gap:10px}
.admin-pv-block + .admin-pv-block{margin-top:26px;padding-top:24px;border-top:1px dashed var(--border)}
.admin-pv-label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--ink3)}
:root[data-theme="dark"] .admin-pv-block + .admin-pv-block{border-top-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .admin-pv-label{color:rgba(255,255,255,.5)}

/* admin: category multi-select chips */
.cat-picker{display:flex;flex-wrap:wrap;gap:8px}
.cat-chip{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:9999px;padding:7px 14px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.cat-chip:hover{border-color:var(--gold);color:var(--gold-deep)}
.cat-chip.is-on{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.cat-add{display:flex;gap:8px;margin-top:10px}
.cat-add input{flex:1;border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-family:'Geist',sans-serif;font-size:13.5px;color:var(--navy)}
.cat-add input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.cat-add .admin-mini{padding:0 16px}
/* multiple category pills on the article */
.post-cats{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center}
.post-cats .post-cat{margin:0}
:root[data-theme="dark"] .cat-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
:root[data-theme="dark"] .cat-chip:hover{border-color:var(--gold-light);color:var(--gold-light)}
:root[data-theme="dark"] .cat-chip.is-on{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
:root[data-theme="dark"] .cat-add input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}

/* #categories is a dark slate panel — the Explore CTA must use the white
   "Talk to Us" ghost treatment (not the navy light one) */
#categories .counsel-browse{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32);color:#fff}
#categories .counsel-browse:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}

/* /practice-areas overview — keep the light cards but make text readable
   (base .cat-desc is white for the dark homepage panel; override here) */
#areas .cat{background:#fff;border:1px solid var(--border)}
#areas .cat h4{color:var(--navy)}
#areas .cat-desc{color:var(--muted-foreground)}
#areas .cat-icon{color:var(--gold-deep)}
:root[data-theme="dark"] #areas .cat{background:#243341;border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] #areas .cat h4{color:#fff}
:root[data-theme="dark"] #areas .cat-desc{color:rgba(255,255,255,.74)}
:root[data-theme="dark"] #areas .cat-icon{color:var(--gold-light)}

/* #compare "Why attorneys choose…" benefit cards sit on LIGHT sections (sec
   white/cream), but .cat-desc defaults to white (built for the dark practice
   bands) — that left the descriptions at ~1.1:1 contrast (invisible). Mirror
   the #areas fix: dark body text on light, light on the dark-mode flip. */
#compare .cat-desc{color:var(--muted-foreground)}
:root[data-theme="dark"] #compare .cat-desc{color:rgba(255,255,255,.74)}

/* admin: list ⇄ editor views */
.admin-wrap[hidden],.admin-listview[hidden]{display:none}
.admin-listview{max-width:980px;margin:0 auto;padding:28px clamp(18px,3vw,32px) 70px}
.admin-listview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.admin-newbtn{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.admin-newbtn svg{width:16px;height:16px}
.admin-back{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;cursor:pointer;padding:0;margin-bottom:14px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);transition:color .18s}
.admin-back svg{width:15px;height:15px}
.admin-back:hover{color:var(--gold-deep)}
/* floating save toast (visible across views) */
.admin-saved{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);opacity:0;background:var(--navy);color:#fff;padding:11px 20px;border-radius:10px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;box-shadow:0 12px 30px -8px rgba(58,75,91,.5);z-index:400;transition:opacity .2s,transform .2s;pointer-events:none}
.admin-saved:not([hidden]){opacity:1;transform:translateX(-50%) translateY(0)}
:root[data-theme="dark"] .admin-saved{background:var(--gold);color:var(--navy-deep)}

/* admin: quick article preview modal */
.admin-listrow{cursor:pointer}
.admin-listrow .admin-mini{cursor:pointer}
.pv-modal{position:fixed;inset:0;z-index:260;display:flex;align-items:flex-start;justify-content:center;padding:5vh 20px;overflow-y:auto}
.pv-modal[hidden]{display:none}
.pv-modal-backdrop{position:fixed;inset:0;background:rgba(15,22,32,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.pv-modal-card{position:relative;width:100%;max-width:760px;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.32);margin:auto 0;overflow:hidden;display:flex;flex-direction:column;max-height:90vh}
.pv-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--border);background:var(--bg-light,#f8fafc);flex-shrink:0}
.pv-modal-label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--ink3)}
.pv-modal-actions{display:flex;align-items:center;gap:8px}
.pv-modal-close{width:32px;height:32px;border-radius:50%;border:0;background:rgba(58,75,91,.06);color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.pv-modal-close:hover{background:rgba(58,75,91,.14)}
.pv-modal-close svg{width:14px;height:14px}
.pv-modal-body{overflow-y:auto;padding:8px 0 24px}
.pv-modal-body .pv-article{padding-top:14px}
:root[data-theme="dark"] .pv-modal-card{background:#1c2632}
:root[data-theme="dark"] .pv-modal-bar{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .pv-modal-close{background:rgba(255,255,255,.08);color:#fff}

/* admin: bulk select + actions */
.admin-bulk{display:flex;align-items:center;gap:12px;padding:8px 12px;margin-bottom:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-light,#f8fafc)}
.admin-bulk-count{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--navy)}
.admin-bulk-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
.admin-rowcheck{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;padding:2px}
.admin-rowcheck-sp{width:18px;flex-shrink:0}
.admin-rowcheck input,.admin-bulk #bulkAll{width:17px;height:17px;cursor:pointer;accent-color:var(--gold-deep);margin:0}
.admin-rowcheck-all{margin-left:2px}
:root[data-theme="dark"] .admin-bulk{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .admin-bulk-count{color:#fff}

/* ─────────────────────────────────────────────────────────
   Category color pills — on-brand palette, one color per
   category (assigned by LCBlog.catClass). Used on blog cards,
   article pages, the admin picker, and previews.
   ───────────────────────────────────────────────────────── */
.cat-c0{--cc:#A88944;--cct:#7c6622;--ccl:#dcc97e}   /* gold      */
.cat-c1{--cc:#3A4B5B;--cct:#33414f;--ccl:#aebdcb}   /* navy      */
.cat-c2{--cc:#1F7A6E;--cct:#1b6e63;--ccl:#6fc9bd}   /* teal      */
.cat-c3{--cc:#7A3F76;--cct:#6e3a6a;--ccl:#c99bc5}   /* plum      */
.cat-c4{--cc:#B05A33;--cct:#9a4f2e;--ccl:#e6a988}   /* terracotta*/
.cat-c5{--cc:#4A6B32;--cct:#41602c;--ccl:#a6c98a}   /* sage      */
.cat-c6{--cc:#2D5A9E;--cct:#2a5391;--ccl:#93b6e6}   /* blue      */
.cat-c7{--cc:#9A6A1E;--cct:#8a5f1b;--ccl:#e0bb6e}   /* amber     */
.cat-c8{--cc:#556575;--cct:#4c5b69;--ccl:#b8c4cf}   /* slate     */
.cat-c9{--cc:#8E3A44;--cct:#80343d;--ccl:#e0959d}   /* burgundy  */
.cat-c10{--cc:#4A4391;--cct:#423c82;--ccl:#ada7e6}  /* indigo    */

/* display pills (blog card + article) */
.blogcard-cat,.post-cat{display:inline-block;padding:4px 11px;border-radius:9999px;
  background:color-mix(in srgb, var(--cc,#A88944) 15%, #fff);color:var(--cct,#7c6622)}
.blogcard-cat{align-self:flex-start}
:root[data-theme="dark"] .blogcard-cat,:root[data-theme="dark"] .post-cat{
  background:color-mix(in srgb, var(--cc,#A88944) 26%, #1c2632);color:var(--ccl,#dcc97e)}

/* picker chips colored per category; selected = solid in its color */
.cat-chip{background:color-mix(in srgb, var(--cc,#A88944) 12%, #fff);
  border-color:color-mix(in srgb, var(--cc,#A88944) 30%, transparent);color:var(--cct,#7c6622)}
.cat-chip:hover{border-color:var(--cc,#A88944)}
.cat-chip.is-on{background:var(--cc,#A88944);border-color:var(--cc,#A88944);color:#fff}
:root[data-theme="dark"] .cat-chip{background:color-mix(in srgb, var(--cc,#A88944) 22%, #1c2632);
  border-color:color-mix(in srgb, var(--cc,#A88944) 38%, transparent);color:var(--ccl,#dcc97e)}
:root[data-theme="dark"] .cat-chip.is-on{background:var(--cc,#A88944);border-color:var(--cc,#A88944);color:#10161d}

/* ─────────────────────────────────────────────────────────
   Login modal — in-page recreation of the /sign-in page,
   opened from any "Log in" link (login-modal.js)
   ───────────────────────────────────────────────────────── */
.login-modal{position:fixed;inset:0;z-index:280;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.login-modal[hidden]{display:none}
.login-modal-backdrop{position:fixed;inset:0;background:rgba(15,22,32,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.login-modal-card{position:relative;width:100%;max-width:880px;margin:auto;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.42);display:flex;flex-direction:column;max-height:94vh;animation:lgIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes lgIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.login-modal-close{position:absolute;top:13px;right:13px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(58,75,91,.08);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy);transition:background .2s}
.login-modal-close:hover{background:rgba(58,75,91,.16)}
.login-modal-close svg{width:15px;height:15px}
.lg-top{padding:15px 24px;border-bottom:1px solid var(--border);flex-shrink:0}
.lg-top img{height:22px;display:block}
.lg-grid{display:grid;grid-template-columns:1fr 1.08fr;overflow:auto}
.lg-aside{background:var(--navy-deep,#1E293B);color:#fff;padding:36px 30px;display:flex;flex-direction:column;justify-content:space-between;gap:36px}
.lg-aside-h{font-family:'Montserrat',sans-serif;font-size:25px;font-weight:700;line-height:1.18;margin:0 0 12px;color:#fff}
.lg-aside-sub{font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);margin:0}
.lg-quote-mark{color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:42px;line-height:.6;margin-bottom:8px}
.lg-quote blockquote{margin:0 0 16px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82)}
.lg-quote figcaption{display:flex;align-items:center;gap:12px}
.lg-avatar{width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;flex-shrink:0}
.lg-quote-meta strong{display:block;color:var(--gold-light);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700}
.lg-quote-meta small{color:rgba(255,255,255,.6);font-size:12px}
.lg-main{padding:34px 34px 30px;display:flex;flex-direction:column}
.lg-h1{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:700;color:var(--navy);margin:0 0 6px}
.lg-sub{font-size:13.5px;color:var(--muted-foreground);line-height:1.55;margin:0 0 20px}
.lg-roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.lg-role{display:flex;align-items:center;gap:11px;text-align:left;padding:13px;border:1.5px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .18s,background .18s}
.lg-role-ic{width:42px;height:42px;border-radius:10px;background:#eef2f6;color:#7a858f;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .18s,color .18s}
.lg-role-ic svg{width:22px;height:22px}
.lg-role-name{display:block;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--navy)}
.lg-role-desc{display:block;font-size:12px;color:var(--ink3);margin-top:1px}
.lg-role[data-role="hire"].is-on{border-color:var(--gold);background:#FBF8EC}
.lg-role[data-role="hire"].is-on .lg-role-ic{background:var(--gold);color:#fff}
.lg-role[data-role="work"].is-on{border-color:#2563EB;background:#EEF3FF}
.lg-role[data-role="work"].is-on .lg-role-ic{background:#2563EB;color:#fff}
.lg-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lg-label{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--navy)}
.lg-field input{height:46px;border:1px solid var(--border);border-radius:10px;padding:0 14px;font-family:'Geist',sans-serif;font-size:14px;color:var(--navy);width:100%}
.lg-field input::placeholder{color:var(--ink3)}
.lg-field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.2)}
.lg-pass{position:relative;display:block}
.lg-pass input{padding-right:44px}
.lg-eye{position:absolute;right:9px;top:50%;transform:translateY(-50%);background:0;border:0;cursor:pointer;color:var(--ink3);padding:6px;display:flex}
.lg-eye:hover{color:var(--navy)}
.lg-submit{display:block;width:100%;height:48px;margin-top:4px;background:var(--gold);color:var(--navy-deep);border:0;border-radius:10px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:background .2s,transform .2s}
.lg-submit:hover{background:var(--gold-light);transform:translateY(-1px)}
.lg-foot{text-align:center;font-size:13.5px;color:var(--muted-foreground);margin:16px 0 0}
.lg-create{background:0;border:0;color:var(--gold-deep);font-weight:700;cursor:pointer;font-size:13.5px;font-family:inherit;padding:0}
.lg-create:hover{text-decoration:underline}
@media(max-width:720px){.lg-grid{grid-template-columns:1fr}.lg-aside{display:none}.login-modal-card{max-width:440px}}
:root[data-theme="dark"] .login-modal-card{background:#1c2632}
:root[data-theme="dark"] .lg-top{border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .lg-h1{color:#fff}
:root[data-theme="dark"] .lg-label{color:#fff}
:root[data-theme="dark"] .lg-role{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .lg-role-name{color:#fff}
:root[data-theme="dark"] .lg-field input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}

/* ─────────────────────────────────────────────────────────
   Standalone /sign-in page — full-page version of the login
   two-panel design (reuses the .lg-* inner styles)
   ───────────────────────────────────────────────────────── */
.auth2-body{margin:0;background:#fff}
.auth2-top{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,40px);border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:5}
.auth2-top .auth-logo img{height:30px;width:auto;display:block}
.auth2-back{display:inline-flex;align-items:center;gap:7px;color:var(--ink3);text-decoration:none;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;transition:color .2s}
.auth2-back svg{width:16px;height:16px}
.auth2-back:hover{color:var(--gold-deep)}
.auth2-stage{display:grid;grid-template-columns:minmax(0,460px) 1fr;min-height:calc(100vh - 58px)}
.auth2-aside{padding:48px 44px}
.auth2-aside .lg-aside-h{font-size:32px}
.auth2-main{display:flex;align-items:center;justify-content:center;padding:48px 32px;background:#fff}
.auth2-form-wrap{width:100%;max-width:420px}
@media(max-width:780px){
  .auth2-stage{grid-template-columns:1fr}
  .auth2-aside{display:none}
}


/* AI Associate platform mockup (drafting in your voice) */
.aiwin-tag{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-tint);border:1px solid rgba(168,152,68,.3);border-radius:9999px;padding:3px 9px}
.aiwin-prompt{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.aiwin-prompt-av{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aiwin-prompt-txt{font-family:'Geist',sans-serif;font-size:13px;color:var(--navy);background:var(--bg-muted,#f1f5f9);border-radius:10px;padding:8px 12px;line-height:1.4}
.aiwin-doc{border:1px solid var(--border);border-radius:12px;padding:16px;background:#fff;margin-bottom:14px}
.aiwin-doc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.aiwin-doc-cap{font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--ink3)}
.aiwin-doc-badge{font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;color:var(--gold-deep);background:var(--gold-tint);border-radius:5px;padding:2px 7px}
.aiwin-doc-title{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:10px}
.aiwin-line{height:7px;border-radius:4px;background:#e7edf2;margin-bottom:7px}
.aiwin-line.short{width:62%}
.aiwin-cite{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-family:'Geist',sans-serif;font-size:11.5px;font-style:italic;color:var(--muted-foreground);border-top:1px dashed var(--border);padding-top:10px}
.aiwin-cite-ok{font-style:normal;font-weight:700;font-size:10px;color:#3f8f43;background:rgba(123,182,126,.16);border-radius:9999px;padding:2px 8px;white-space:nowrap}
:root[data-theme="dark"] .aiwin-doc{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .aiwin-doc-title{color:#fff}
:root[data-theme="dark"] .aiwin-prompt-txt{background:rgba(255,255,255,.06);color:#fff}
:root[data-theme="dark"] .aiwin-line{background:rgba(255,255,255,.1)}

/* How-it-works hover scenes: each step card acts out its action on hover (index #how only) */
#how .hstep{display:flex;flex-direction:column}
#how .hstep{cursor:default;outline:none}
#how .hs-scene{margin-top:auto;padding-top:16px;border-top:1px dashed var(--border-soft);opacity:.62;transition:opacity .3s ease;position:relative}
#how .hstep>p{margin-bottom:18px}
#how .hstep:hover .hs-scene,#how .hstep:focus-within .hs-scene,#how .hstep:focus .hs-scene{opacity:1}
#how .hs-toast{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:9px;background:#EFFAF3;border:1px solid #CBEBD6;color:#1F7A4D;font-size:12px;font-weight:600;opacity:0;transform:translateY(6px)}
#how .hs-tick{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#16A34A;color:#fff;font-size:10px;font-weight:700;flex:0 0 auto}
#how .hstep:hover .hs-toast,#how .hstep:focus .hs-toast{animation:hsRise .4s ease 1.05s forwards}
/* 01 - post the matter */
#how .hs-form{background:#F6F4F0;border:1px solid var(--border-soft);border-radius:10px;padding:12px 14px}
#how .hs-form-title{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:4px;white-space:nowrap;overflow:hidden}
#how .hs-form-title span{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:bottom;max-width:100%}
#how .hstep:hover .hs-post .hs-form-title span,#how .hstep:focus .hs-post .hs-form-title span{animation:hsType .85s steps(26) both}
#how .hs-form-line{height:7px;border-radius:4px;background:#E6E2DA;margin:7px 0;transform-origin:left}
#how .hs-form-line.short{width:58%}
#how .hstep:hover .hs-post .hs-form-line,#how .hstep:focus .hs-post .hs-form-line{animation:hsGrow .45s ease .5s backwards}
#how .hstep:hover .hs-post .hs-form-line.short,#how .hstep:focus .hs-post .hs-form-line.short{animation-delay:.65s}
#how .hs-form-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
#how .hs-chip{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#79691f;background:var(--gold-tint,#F2EED9);border-radius:9999px;padding:3px 9px}
#how .hs-btn{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy-deep);background:var(--gold);border-radius:7px;padding:6px 11px;box-shadow:0 2px 0 var(--gold-deep)}
#how .hstep:hover .hs-post .hs-btn,#how .hstep:focus .hs-post .hs-btn{animation:hsPress .28s ease .9s}
/* 02 - review counsel */
#how .hs-cand{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border-soft);border-radius:10px;padding:8px 11px;margin-bottom:7px}
#how .hs-cand:last-child{margin-bottom:0}
#how .hs-av{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;flex:0 0 auto}
#how .hs-av2{background:var(--gold-deep)}
#how .hs-av3{background:#4E6374}
#how .hs-cand-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#how .hs-cand-t b{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--navy)}
#how .hs-cand-t i{font-style:normal;font-size:10.5px;color:var(--ink3,#7A858F)}
#how .hs-match{margin-left:auto;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;color:#79691f;background:var(--gold-tint,#F2EED9);border-radius:9999px;padding:3px 8px}
#how .hstep:hover .hs-review .hs-cand,#how .hstep:focus .hs-review .hs-cand{animation:hsRise .38s ease backwards}
#how .hstep:hover .hs-review .hs-cand:nth-child(2),#how .hstep:focus .hs-review .hs-cand:nth-child(2){animation-delay:.18s}
#how .hstep:hover .hs-review .hs-cand:nth-child(3),#how .hstep:focus .hs-review .hs-cand:nth-child(3){animation-delay:.36s}
#how .hstep:hover .hs-review .hs-match,#how .hstep:focus .hs-review .hs-match{animation:hsPop .3s ease .15s backwards}
#how .hstep:hover .hs-review .hs-cand:nth-child(2) .hs-match,#how .hstep:focus .hs-review .hs-cand:nth-child(2) .hs-match{animation-delay:.33s}
#how .hstep:hover .hs-review .hs-cand:nth-child(3) .hs-match,#how .hstep:focus .hs-review .hs-cand:nth-child(3) .hs-match{animation-delay:.51s}
/* 03 - receive the work */
#how .hs-doc{background:#fff;border:1px solid var(--border-soft);border-radius:10px;padding:12px 14px}
#how .hs-doc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#how .hs-doc-name{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--navy)}
#how .hs-doc-badge{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#79691f;background:var(--gold-tint,#F2EED9);border-radius:9999px;padding:2px 8px}
#how .hs-doc-line{height:7px;border-radius:4px;background:#EAE7E1;margin:7px 0;transform-origin:left}
#how .hs-doc-line.short{width:55%}
#how .hstep:hover .hs-work .hs-doc-line,#how .hstep:focus .hs-work .hs-doc-line{animation:hsGrow .4s ease backwards}
#how .hstep:hover .hs-work .hs-doc-line:nth-of-type(2),#how .hstep:focus .hs-work .hs-doc-line:nth-of-type(2){animation-delay:.2s}
#how .hstep:hover .hs-work .hs-doc-line:nth-of-type(3),#how .hstep:focus .hs-work .hs-doc-line:nth-of-type(3){animation-delay:.4s}
@keyframes hsType{from{max-width:0}to{max-width:26ch}}
@keyframes hsRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hsPop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes hsGrow{from{transform:scaleX(.12);opacity:.3}to{transform:scaleX(1);opacity:1}}
@keyframes hsPress{50%{transform:translateY(2px);box-shadow:0 0 0 var(--gold-deep)}}
[data-theme="dark"] #how .hs-form,[data-theme="dark"] #how .hs-cand,[data-theme="dark"] #how .hs-doc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
[data-theme="dark"] #how .hs-form-line,[data-theme="dark"] #how .hs-doc-line{background:rgba(255,255,255,.16)}
[data-theme="dark"] #how .hs-form-title,[data-theme="dark"] #how .hs-cand-t b,[data-theme="dark"] #how .hs-doc-name{color:#fff}
[data-theme="dark"] #how .hs-cand-t i{color:rgba(255,255,255,.55)}
[data-theme="dark"] #how .hs-toast{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.3);color:#7ED9A2}
@media(prefers-reduced-motion:reduce){#how .hs-scene *{animation:none!important}#how .hs-toast{opacity:1;transform:none}}

/* Step number becomes a progress ring while the hover scene plays */
@property --hsp{syntax:'<number>';inherits:false;initial-value:0}
#how .hstep-num{position:relative}
#how .hstep-num::after{content:'';position:absolute;inset:-6px;border-radius:50%;opacity:0;transition:opacity .2s ease;background:conic-gradient(var(--gold-deep) calc(var(--hsp)*1%),rgba(168,152,68,.18) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px))}
#how .hstep:hover .hstep-num::after,#how .hstep:focus .hstep-num::after{opacity:1;animation:hsProgress 1.45s ease-out forwards}
@keyframes hsProgress{from{--hsp:0}to{--hsp:100}}
@media(prefers-reduced-motion:reduce){#how .hstep-num::after{display:none}}

/* After a scene completes (still hovered), a labeled pill points to the next step */
#how .howsteps .hstep[data-next]::before,#how .howsteps .hstep[data-done]::before{position:absolute;top:26px;right:-16px;z-index:3;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--navy-deep);background:var(--gold);border-radius:9999px;padding:8px 14px;box-shadow:0 2px 0 var(--gold-deep),0 8px 20px rgba(168,152,68,.4);opacity:0;pointer-events:none}
#how .howsteps .hstep[data-next]::before{content:attr(data-next)}
#how .howsteps .hstep[data-done]::before{content:attr(data-done);background:#16A34A;box-shadow:0 2px 0 #107A38,0 8px 20px rgba(22,163,74,.35)}
#how .howsteps .hstep[data-next]:hover::before,#how .howsteps .hstep[data-next]:focus::before{animation:hsArrowIn .4s ease 1.5s forwards,hsNudge 1.1s ease-in-out 1.95s infinite}
#how .howsteps .hstep[data-done]:hover::before,#how .howsteps .hstep[data-done]:focus::before{animation:hsArrowIn .4s ease 1.5s forwards}
@keyframes hsArrowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes hsNudge{0%,100%{opacity:1;transform:translateX(0)}50%{opacity:1;transform:translateX(8px)}}
@media(max-width:900px){#how .howsteps .hstep::before{display:none}}
@media(prefers-reduced-motion:reduce){#how .howsteps .hstep::before{display:none}}

/* Counsel search skeletons: shimmer placeholders while the filter "searches" */
#counsel .atty-sk{pointer-events:none}
#counsel .sk-av{width:56px;height:56px;border-radius:50%;flex:0 0 auto}
#counsel .sk-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
#counsel .sk-id{display:flex;flex-direction:column;gap:7px;flex:1}
#counsel .sk-line{height:9px;border-radius:5px}
#counsel .sk-line.sk-thin{height:7px}
#counsel .sk-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:14px 0;margin-bottom:16px;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
#counsel .sk-tags{display:flex;gap:6px;margin-bottom:16px}
#counsel .sk-pill{height:22px;width:46%;border-radius:9999px}
#counsel .sk-foot{display:flex;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border-soft)}
#counsel .sk-av,#counsel .sk-line,#counsel .sk-pill{background:linear-gradient(90deg,#E9EDF2 25%,#F6F8FA 45%,#E9EDF2 65%);background-size:220% 100%;animation:skShimmer 1.1s linear infinite}
@keyframes skShimmer{from{background-position:180% 0}to{background-position:-40% 0}}
[data-theme="dark"] #counsel .sk-av,[data-theme="dark"] #counsel .sk-line,[data-theme="dark"] #counsel .sk-pill{background:linear-gradient(90deg,rgba(255,255,255,.08) 25%,rgba(255,255,255,.16) 45%,rgba(255,255,255,.08) 65%);background-size:220% 100%}
@media(prefers-reduced-motion:reduce){#counsel .sk-av,#counsel .sk-line,#counsel .sk-pill{animation:none}}

/* Scene primitives: tuning sliders / progress fills + icon avatars (all how-it-works pages) */
#how .hs-slider{margin:9px 0}
#how .hs-slab{display:flex;justify-content:space-between;font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3,#7A858F);margin-bottom:5px}
#how .hs-track{height:6px;border-radius:4px;background:#E6E2DA;overflow:hidden}
#how .hs-fill{display:block;height:100%;width:22%;border-radius:4px;background:var(--gold)}
#how .hstep:hover .hs-fill,#how .hstep:focus .hs-fill{animation:hsFillW .7s ease both}
#how .hstep:hover .hs-slider:nth-child(2) .hs-fill,#how .hstep:focus .hs-slider:nth-child(2) .hs-fill{animation-delay:.22s}
#how .hstep:hover .hs-slider:nth-child(3) .hs-fill,#how .hstep:focus .hs-slider:nth-child(3) .hs-fill{animation-delay:.44s}
@keyframes hsFillW{from{width:22%}to{width:var(--w,80%)}}
#how .hs-av.hs-avi{background:var(--gold-tint,#F2EED9);color:var(--gold-deep)}
#how .hs-av i{font-size:15px;line-height:1}
[data-theme="dark"] #how .hs-track{background:rgba(255,255,255,.16)}

/* why-section polish: dim siblings, check pop, step tick */
.benlist:hover .benitem:not(.on){filter:opacity(.55) saturate(.85)}
.benitem-check{transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s ease}
.benitem.on .benitem-check{transform:scale(1.12);box-shadow:0 0 0 5px rgba(198,178,93,.18)}
:root[data-theme="dark"] .benui-dots i{background:rgba(255,255,255,.22)}
@media(prefers-reduced-motion:reduce){.benui-state,.benui-state>*{transition:none}.benitem-check{transition:none}}

/* By-the-numbers bento */
.statbento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:8px}
.statbento .sb{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 14px;text-align:center;display:flex;flex-direction:column;justify-content:center;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease}
.statbento .sb:hover{transform:translateY(-3px);border-color:rgba(213,196,123,.45);background:rgba(255,255,255,.08)}
.statbento .sb-big{grid-column:span 2;padding:28px 22px}
.sb-ic{font-size:26px;color:var(--gold-light);display:block;margin:0 auto 12px;opacity:.9}
.sb-sub{font-size:12px;color:rgba(255,255,255,.55);margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.14)}
.sb-lead{grid-column:1/-1;margin:18px 0 2px}
.sb-n{font-family:'Montserrat',sans-serif;font-weight:700;font-size:28px;color:var(--gold-light);letter-spacing:-.01em}
.sb-l{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;line-height:1.35}
@media(max-width:980px){.statbento .sb{grid-column:span 2}.statbento .sb-big{grid-column:span 6}}

/* footer utility pages: tighten the page-header-to-content gap (the old
   .pghead rule lost to section.sec specificity and never applied) */
section.sec.pghead{padding-bottom:28px}
section.sec.pghead .s-sub{margin-bottom:0}
.pghead + section.sec{padding-top:44px}
/* page-header ledes have nothing to their right, so on desktop let the
   sentence use the full content column instead of the 680px cap that
   leaves the right side empty (mobile/tablet keep the readable cap) */
@media(min-width:1024px){section.sec.pghead .s-sub{max-width:none}}
.ft-soc a{color:var(--muted-foreground)}
.ft-soc a:hover{color:var(--gold-deep)}


/* /solutions "Our solutions": three homepage-style product cards.
   Desktop-only: below 981px the base .prodgrid responsive rules apply,
   keeping these cards identical to the homepage cards at every width. */
@media(min-width:981px){#solutions .prodgrid{grid-template-columns:repeat(3,1fr);max-width:1120px;gap:24px}}
/* 5-column footer */
.ft-top5{grid-template-columns:1.4fr 1fr 1.2fr 1.1fr 1.1fr}
@media(max-width:1080px){.ft-top5{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.ft-top5{grid-template-columns:1fr}}
/* 6-cell footer (brand + 5 nav columns), shared SiteFooter */
.ft-top6{grid-template-columns:1.5fr repeat(5,1fr);gap:40px}
@media(max-width:1080px){.ft-top6{grid-template-columns:1fr 1fr 1fr;gap:32px}}
@media(max-width:720px){.ft-top6{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ft-top6{grid-template-columns:1fr}}

/* static verification list (solutions): no sibling dim, numbered gates */
.benlist-static:hover .benitem:not(.on){filter:none}
.benlist-static .benitem{cursor:default}
/* A benlist-static that IS wired to a stage still needs the interactive
   affordance back, or it responds to hover while the cursor and the lack of
   dimming say it does not. Scoped to [data-benui] so genuinely static lists keep
   their default cursor; the smaller numbered .benitem-check below is unaffected. */
[data-benui] .benlist-static .benitem{cursor:pointer}
[data-benui] .benlist-static:hover .benitem:not(.on){filter:opacity(.55) saturate(.85)}
.benlist-static .benitem-check{font-size:12px}

/* real-attorney avatars: initial shows until the secured photo loads */
.atty-avatar.av-init{display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:20px;letter-spacing:.02em}
/* LAW-524 · initials avatars for the small mockup/feed circles (real
   attorney photos are behind an authenticated endpoint, so initials are
   the public-safe rendering everywhere) */
.hero-match-av.av-init,.benui-avatar.av-init,.hiw-cand-av.av-init{display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.02em}
.hero-match-av.av-init,.hiw-cand-av.av-init{font-size:15px}
.benui-avatar.av-init{font-size:17px}
.av-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* .av-photo is absolutely positioned, so every avatar slot that can host one has to
   establish the containing block. `.atty-avatar` already sets position:relative;
   these three did not, so a photo dropped into them escaped the circle and sized
   itself against the nearest positioned ancestor instead. Set here rather than at
   each call site so any avatar slot can take a photo. */
.hero-match-av,.benui-avatar,.hiw-cand-av{position:relative}

/* FAQ search with autocomplete */
.faqsearch{position:sticky;top:62px;z-index:40;margin:0 0 10px;padding:14px max(0px,calc((100% - 840px)/2)) 12px;pointer-events:none}
.faqsearch input,.faqsearch .faqsug{pointer-events:auto}
.faqsearch i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:19px;color:var(--gold-deep);pointer-events:none}
.faqsearch input{width:100%;padding:15px 18px 15px 46px;border:1px solid var(--border);border-radius:12px;background:#fff;font:inherit;font-size:15px;color:var(--navy);outline:none;box-shadow:0 10px 30px rgba(58,75,91,.12);transition:border-color .2s,box-shadow .2s}
.faqsearch input:focus{border-color:var(--gold);box-shadow:0 10px 30px rgba(58,75,91,.12),0 0 0 3px rgba(198,178,93,.18)}
.faqsug{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(58,75,91,.16);overflow:hidden;z-index:30}
.fs-opt{display:block;width:100%;text-align:left;background:none;border:none;padding:12px 16px;font:inherit;font-size:14px;color:var(--navy);cursor:pointer;text-decoration:none;border-bottom:1px solid var(--border-soft)}
.fs-opt:last-child{border-bottom:none}
.fs-opt:hover{background:var(--gold-tint)}
.fs-group{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);padding:10px 16px 4px;background:#FAFAF8}
.fs-ext{color:var(--gold-deep)}
.fs-none{padding:14px 16px;font-size:14px;color:var(--muted-foreground)}
.fs-none a{color:var(--gold-deep)}
[data-theme="dark"] .faqsearch input{background:#1F2A38;border-color:rgba(255,255,255,.16);color:#fff}
[data-theme="dark"] .faqsug{background:#243341;border-color:rgba(255,255,255,.16)}
[data-theme="dark"] .fs-opt{color:#fff;border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .fs-opt:hover{background:rgba(213,196,123,.14)}
[data-theme="dark"] .fs-group{background:#1F2A38}

/* FAQ grouped layout with sticky left category nav */
.faqwrap{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start;max-width:1040px;margin:0 auto}
.faqnav{position:sticky;top:148px;display:flex;flex-direction:column;gap:2px;background:var(--bg-muted,#F5F4F3);padding:6px 0;z-index:5}
.faqnav a{font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;color:var(--muted-foreground);text-decoration:none;padding:9px 14px;border-left:2px solid var(--border-soft);transition:color .2s,border-color .2s,background .2s}
.faqnav a:hover{color:var(--navy)}
.faqnav a.on{color:var(--gold-deep);border-left-color:var(--gold);background:rgba(198,178,93,.07)}
.faqgroups{min-width:0}
.faqgroup{margin-bottom:34px}
.faq-gh{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;color:var(--navy);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
@media(max-width:880px){.faqwrap{grid-template-columns:1fr;gap:18px}.faqnav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}.faqnav a{border:1px solid var(--border);border-radius:9999px;padding:7px 13px}.faqnav a.on{border-color:var(--gold)}}
[data-theme="dark"] .faqnav{background:var(--bg-muted,#1F2A38)}
[data-theme="dark"] .faqnav a{color:rgba(255,255,255,.6);border-left-color:rgba(255,255,255,.12)}
[data-theme="dark"] .faqnav a.on{color:var(--gold-light);border-left-color:var(--gold)}
[data-theme="dark"] .faq-gh{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
/* sticky search/nav need a non-clipping section (overflow:hidden on .sec breaks position:sticky) */
section.sec.cream:has(.faqsearch),section.sec.white:has(.faqsearch){overflow:visible}

/* FAQ polish: matched sticky band color, card-style nav, eyebrow group headers */

.faqnav{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 10px 10px;box-shadow:0 8px 24px rgba(58,75,91,.06)}
.faqnav::before{content:'Browse by topic';display:block;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding:2px 12px 8px}
.faqnav a{border-left:none;border-radius:8px;padding:9px 12px;color:var(--muted-foreground)}
.faqnav a:hover{background:rgba(58,75,91,.05);color:var(--navy)}
.faqnav a.on{border-left:none;background:var(--gold-tint);color:var(--gold-deep)}
.faqgroup{margin-bottom:44px}
.faq-gh{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);border-bottom:none;padding-bottom:0;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.faq-gh::before{content:'';width:22px;height:2px;background:var(--gold);flex-shrink:0}
@media(max-width:880px){.faqnav{background:none;border:none;box-shadow:none;padding:0}.faqnav::before{display:none}.faqnav a.on{background:var(--gold-tint)}}

[data-theme="dark"] .faqnav{background:#243341;border-color:rgba(255,255,255,.12);box-shadow:none}
[data-theme="dark"] .faqnav a{color:rgba(255,255,255,.6)}
[data-theme="dark"] .faqnav a:hover{background:rgba(255,255,255,.06);color:#fff}
[data-theme="dark"] .faqnav a.on{background:rgba(213,196,123,.14);color:var(--gold-light)}
[data-theme="dark"] .faq-gh{color:var(--gold-light)}
[data-theme="dark"] .faq-gh::before{background:var(--gold-light)}
.faqsearch i{left:calc(max(0px,(100% - 840px)/2) + 16px)}

/* (blog post-body typography consolidated into the LAW-519 block above;
   this stale duplicate was overriding it and has been removed) */

/* Featured Counsel sample note (homepage, under the grid) */
.counsel-cta-note{flex-direction:column;align-items:center;gap:16px;text-align:center}
.counsel-sample-note{font-size:14px;line-height:1.65;color:var(--muted-foreground);max-width:540px;margin:0}
.counsel-sample-note b{color:var(--navy);font-weight:600}
:root[data-theme="dark"] .counsel-sample-note{color:rgba(255,255,255,.66)}
:root[data-theme="dark"] .counsel-sample-note b{color:#fff}

/* ════════════════════════════════════════════════════════════════════
   LAW-578/LAW-579 · phone layout collapses (width-based)
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .catgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  #categories .catgrid,#matters .catgrid,#areas .catgrid{display:grid;grid-template-columns:1fr}
  .catgrid{grid-template-columns:1fr}
  .statbento .sb,.statbento .sb-big{grid-column:1/-1}
}

/* ════════════════════════════════════════════════════════════════════
   LAW-578/LAW-579 · touch ergonomics (any touch device: phones + tablets)
   Tap targets ≥44px via hit-area expansion; form controls ≥16px so
   iOS/iPadOS don't zoom on focus. pointer:coarse targets touch input
   directly instead of guessing from viewport width.
   ════════════════════════════════════════════════════════════════════ */
@media(pointer:coarse){
  .demo-field input,.demo-field select,.demo-field textarea,
  .faqsearch input,.lg-field input,.rf-field input,
  .atty-search input,.atty-filter select,.blogsearch input{font-size:16px}
  .nav-in .logo{padding:10px;margin:-10px}
  .nav-links a{padding-top:15px;padding-bottom:15px}
  .nav-dd-menu a{padding-top:15px;padding-bottom:15px}
  .btn-outline,.btn-text{padding-top:15px;padding-bottom:15px}
  .nav-burger{min-width:44px;min-height:44px}
  .mm-sub{padding-top:12px;padding-bottom:12px}
  .mm-link{padding-top:12px;padding-bottom:12px}
  .fc a{padding:10px 0;margin-bottom:0}
  .prod-cta{min-height:44px;align-items:flex-end}
  .ct-chip{min-height:44px}
  .lg-create{padding:13px 0;margin:-13px 0}
  .daynight-toggle{width:44px;height:44px}
  .demo-modal-close{width:46px;height:46px}
  .rf-pass-toggle,.lg-eye{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ════════════════════════════════════════════════════════════════════
   LAW-581 · very large displays (1440–3840px)
   Content containment + a modest type step so 4K doesn't read miniature.
   ════════════════════════════════════════════════════════════════════ */
/* the retainer note sits under the full-width tier grid, so it spans the
   content column to stay flush with the cards (a 940px cap left the right
   side empty and looked unfinished); the inner prose keeps a readable
   measure instead */
.retainer-note{max-width:none}
.retainer-note > div:last-child{max-width:940px}
@media(min-width:1920px){
  .hero-copy h1{font-size:64px}
  .s-h2{font-size:52px}
  .hero-lede{font-size:17.5px;max-width:560px}
}

/* ── LAW-599 · resource download pages (guides, worksheets, sample projects) ── */
.rsdl-hero{padding:56px 0 8px}
.rsdl-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.rsdl-crumb{font-size:12.5px;color:var(--muted-foreground);margin-bottom:18px}
.rsdl-crumb a{color:inherit;text-decoration:none;border-bottom:1px solid var(--border)}
.rsdl-h1{font-family:'Montserrat',sans-serif;font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.12;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
.rsdl-lede{font-size:15.5px;line-height:1.75;color:var(--muted-foreground);margin:0 0 14px;max-width:560px}
/* LAW-795. .rsdl-lede and .rsdl-crumb sit on the .rsdl-hero band, which flips
   to #222F3B in dark mode while --muted-foreground (#5D5D5D) does not flip at
   all. Measured 2.07:1 against a 4.5 bar -- and the lede is the first body copy
   under the h1. It survived because the colour was picked against the light
   band (#E2E8EC, 5.33:1) and only ever checked there.
   rgba(255,255,255,.72) measures 7.86:1 on the dark band.
   The sibling .rsdl-peek-* rules use the same token and are FINE, because they
   sit on white cards that do not flip -- do not "fix" them. They would inherit
   this defect only if moved onto the hero. */
:root[data-theme="dark"] .rsdl-lede,
:root[data-theme="dark"] .rsdl-crumb{color:rgba(255,255,255,.72)}
:root[data-theme="dark"] .rsdl-crumb a{color:rgba(255,255,255,.86);border-bottom-color:rgba(255,255,255,.28)}
.rsdl-stat{border-left:3px solid var(--gold);padding:10px 0 10px 18px;margin:20px 0 4px;font-size:14.5px;line-height:1.65;color:var(--foreground);max-width:520px}
.rsdl-form{display:grid;gap:12px;margin-top:26px;max-width:440px}
.rsdl-form .btn-primary-lg{width:100%;justify-content:center;cursor:pointer;border:0}
/* Explicit because .rsdl-form is display:grid, which beats the UA [hidden] rule.
   The form is hidden rather than unmounted on submit: removing a form inside its
   own submit handler can abort the POST. */
.rsdl-form[hidden]{display:none}
/* Styled download gate (PardotResourceForm) replacing the Pardot iframe. */
.rsdl-form-head{display:grid;gap:6px;margin-bottom:2px}
.rsdl-form-h2{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--navy);margin:0}
.rsdl-form-sub{font-size:13.5px;line-height:1.6;color:var(--muted-foreground);margin:0}
.rsdl-form-submit{margin-top:4px}
.rsdl-form-note{max-width:440px;margin:26px 0 0;padding:10px 12px;border:1px dashed var(--gold-deep);border-radius:10px;background:rgba(198,178,93,.10);font-size:12.5px;line-height:1.55;color:var(--navy)}
.rsdl-form-note code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px}
/* .rsdl-pardot is a NAVY panel — it was built to frame the white Pardot iframe.
   A native form inside it inherits the site's field styling, which assumes a light
   background, so the heading, labels and helper text all rendered dark-on-navy and
   were effectively invisible. Light them up, scoped to the panel so the same
   component still works on a white background elsewhere. */
/* `.rsdl-pardot iframe{display:block}` (0,1,1) outranks `.demo-sink{display:none}`
   (0,1,0), so the hidden POST sink and the download-trigger iframe rendered as
   150px blank boxes inside the panel. Re-hide them at higher specificity. */
.rsdl-pardot iframe.demo-sink{display:none}
.rsdl-pardot .rsdl-form{margin-top:0;max-width:none}
.rsdl-pardot .rsdl-form-h2{color:#fff}
.rsdl-pardot .rsdl-form-sub{color:rgba(255,255,255,.76)}
/* .rsdl-note is --muted-foreground for the light page context; inside the navy
   .rsdl-pardot panel that is dark-on-dark and effectively invisible. */
.rsdl-pardot .rsdl-note{color:rgba(255,255,255,.76)}
.rsdl-pardot .demo-label{color:rgba(255,255,255,.88)}
.rsdl-pardot .rsdl-form-note{color:#fff;background:rgba(198,178,93,.16);border-color:var(--gold-light)}
.rsdl-pardot .rsdl-done{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.20)}
.rsdl-pardot .rsdl-done h3{color:#fff}
.rsdl-pardot .rsdl-done p{color:rgba(255,255,255,.78)}
.rsdl-pardot .rsdl-done a{color:var(--gold-light)}
:root[data-theme="dark"] .rsdl-form-h2{color:#fff}
:root[data-theme="dark"] .rsdl-form-note{color:#fff;background:rgba(198,178,93,.14)}
/* .demo-form-err is authored for a light card (#8E3428 on a pale red wash), but
   the resource form sits on the NAVY panel in BOTH modes, where that dark red is
   close to unreadable — hence a light-on-dark treatment rather than a dark-mode
   override. Measured 6.94:1 against the panel, versus roughly 1.6:1 before. */
.rsdl-form .demo-form-err{color:#FFDAD3;background:rgba(190,72,60,.26);border-color:rgba(255,150,135,.45)}
.rsdl-note{font-size:12px;color:var(--muted-foreground);margin:2px 0 0}
.rsdl-done{margin-top:26px;max-width:440px;border:1px solid var(--border);border-radius:14px;padding:22px;background:var(--card,#fff)}
.rsdl-done-ic{width:38px;height:38px;border-radius:50%;background:rgba(198,178,93,.16);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:12px}
.rsdl-done-ic svg{width:20px;height:20px}
.rsdl-done h3{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;margin:0 0 6px}
.rsdl-done p{font-size:13.5px;line-height:1.65;color:var(--muted-foreground);margin:0 0 10px}
/* Download-gate "preparing" state (LAW-660). Same 38px box as .rsdl-done-ic so
   the panel does not resize between pending and ready, and it reuses the
   existing demoSpin keyframes rather than declaring a second spin. */
.rsdl-spin{width:38px;height:38px;border-radius:50%;margin-bottom:12px;border:2px solid rgba(198,178,93,.28);border-top-color:var(--gold);animation:demoSpin .7s linear infinite}
@media(prefers-reduced-motion:reduce){.rsdl-spin{animation-duration:2.4s}}
.rsdl-panel{position:sticky;top:96px}
.rsdl-preview{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--card,#fff);box-shadow:0 20px 50px -28px rgba(30,42,56,.35)}
.rsdl-preview img{width:100%;display:block}
.rsdl-preview-cap{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted-foreground)}
.rsdl-preview-cap i{font-size:17px;color:var(--gold)}
.rsdl-inside{margin-top:22px;border:1px solid var(--border);border-radius:14px;padding:20px 22px;background:var(--card,#fff)}
.rsdl-inside h4{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);margin:0 0 12px}
.rsdl-inside ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rsdl-inside li{display:flex;gap:10px;font-size:13.5px;line-height:1.55;color:var(--foreground)}
.rsdl-inside li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:7px}
@media(max-width:960px){.rsdl-grid{grid-template-columns:1fr;gap:36px}.rsdl-panel{position:static;max-width:480px}}
@media(pointer:coarse){.rsdl-form input{font-size:16px}}

/* LAW-599 · "peek inside" strip on resource pages: a taste of the real
   projects/prompts inside the downloadable sheet */
.rsdl-peek{margin-top:22px;border:1px solid var(--border);border-radius:14px;background:var(--card,#fff);overflow:hidden}
.rsdl-peek h4{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);margin:0;padding:16px 22px 12px}
.rsdl-peek-item{padding:13px 22px;border-top:1px solid var(--border)}
.rsdl-peek-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:600;color:var(--foreground)}
/* LAW-795. Was var(--gold) on a white card: 2.12:1, failing in BOTH modes.
   At 10.5px the WCAG large-text allowance does not apply (it starts at
   18.66px bold), so the bar is 4.5:1, not 3:1.
   The ticket suggested "a darker gold (or --navy-deep)". Measured, darker
   gold is NOT enough: --gold-deep (#A89844) on white is only 2.90:1. Only
   --navy-deep (12.00:1) clears the bar, which is also the pattern the
   2026-08-18/19 gold remediation settled on. The gold tint background keeps
   the badge reading as an accent rather than as plain body text. */
.rsdl-peek-fee{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-deep);white-space:nowrap;background:var(--gold-tint);padding:3px 8px;border-radius:999px}
.rsdl-peek-line{font-size:12.5px;line-height:1.6;color:var(--muted-foreground);margin:4px 0 0}
.rsdl-peek-more{padding:12px 22px;border-top:1px dashed var(--border);font-size:12px;color:var(--muted-foreground);font-style:italic}

/* LAW-599 · embedded Pardot download forms (same forms as production) */
/* No bottom padding: the reserved iframe is taller than the form at rest, and
   that trailing transparent strip already reads as the panel's bottom padding.
   The old 10px was tuned for a 620px reserve that sat tight against the button. */
.rsdl-pardot{margin-top:26px;border-radius:14px;background:#3A4B5B;padding:22px 22px 0;overflow:hidden}
/* the Pardot layout template uses white field labels, designed for the navy panel on production */
.rsdl-pardot iframe{display:block;width:100%}
/* .rsdl-pardot takes its width from the ~380px .rsdl-panel sidebar it normally sits in. On
   /resources/guides/legal-outsourcing the gate is its own full-width section instead, where
   unconstrained it renders as a very wide navy slab. Centred at a readable measure. Scoped to
   an extra class so the 28 sidebar gates are untouched. */
.rsdl-pardot-solo{max-width:660px;margin-left:auto;margin-right:auto}

/* Cross-origin Pardot embed: the height cannot be read from here, so it is
   reserved. Sized from the worst case actually measured on the live form with
   every dependent field expanded (a narrower frame wraps Pardot's labels, so
   height goes UP as width goes down):
     viewport 1280→688  900→652  768→670  700→688  560→725  390→779  360→834  320→907
   The previous flat 620px clipped the form — 214px of it at 360px wide, which cut
   off the Submit button inside the frame. Values below clear each worst case with
   headroom for longer option text. Over-reserving only shows more of the navy
   panel below the fields; under-reserving hides the button, so the bias is
   deliberate. The third breakpoint exists so the tallest reserve applies only to
   the few widths that need it instead of every phone.
   `pardot-form-embed.tsx` replaces all of this with the exact height if Pardot's
   form is ever taught to report it (docs/pardot/resource-form-styling.md). */
.pardot-embed{display:block;width:100%;height:720px;border:0}
@media(max-width:760px){.pardot-embed{height:900px}}
@media(max-width:400px){.pardot-embed{height:980px}}
/* Own the gap under the heading rather than inheriting whatever margin Pardot's
   form.css happens to put on its first field. */
.rsdl-form-head + .pardot-embed-wrap{margin-top:14px}
/* Email-first variant of the resource form (?lc_form=preview-stepped): the
   name fields mount once the email validates, so they need an entrance or
   they simply appear. Same treatment as the demo form groups. */
@keyframes rsdlStepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rsdl-step-in{animation:rsdlStepIn .28s cubic-bezier(.22,.61,.36,1) both}
@media(prefers-reduced-motion:reduce){.rsdl-step-in{animation:none}}


/* LAW-519 · related-articles strip on blog post pages */
.post-related .s-eyebrow{margin-bottom:6px}
.post-related-grid{margin-top:28px}

/* LAW-519 · blog index search */
.blogsearch{position:relative;max-width:560px;margin:0 auto 8px}
.blogsearch i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:19px;color:var(--gold-deep);pointer-events:none}
.blogsearch input{width:100%;padding:14px 18px 14px 46px;border:1px solid var(--border);border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--navy);outline:none;box-shadow:0 10px 30px rgba(58,75,91,.08)}
.blogsearch input:focus{border-color:var(--gold);box-shadow:0 10px 30px rgba(58,75,91,.12),0 0 0 3px rgba(198,178,93,.18)}
.blogsearch-count{text-align:center;font-size:13px;color:var(--muted-foreground);margin:0 auto 22px;min-height:16px}
.blog-empty{text-align:center;color:var(--muted-foreground);padding:24px 0 8px;font-size:15px}
.blog-empty a{color:var(--gold-deep);font-weight:600}
:root[data-theme="dark"] .blogsearch input{background:#1F2A38;border-color:rgba(255,255,255,.16);color:#fff}

/* LAW-519 · blog index magazine layout (desktop-first, collapses on mobile) */
.blog-intro{text-align:center;padding-top:56px;padding-bottom:0}
.blog-intro + section.sec{padding-top:30px}
.blog-intro .s-in{max-width:660px}
.blog-intro-eyebrow{justify-content:center}
.blog-intro-h1{font-family:'Montserrat',sans-serif;font-weight:300;font-size:clamp(30px,4vw,46px);color:var(--navy);line-height:1.1;margin:10px 0 12px}
.blog-intro-lede{font-size:16px;line-height:1.7;color:var(--muted-foreground);margin:0 auto;max-width:520px}

.blog-lede-row{display:grid;grid-template-columns:1.55fr 1fr;gap:36px;align-items:stretch;margin:6px 0 0}

/* featured post reuses .blogcard; modifier only enlarges title + shows excerpt */
.blogcard-feat .blogcard-title{font-size:clamp(25px,2.7vw,32px);font-weight:400;line-height:1.14;letter-spacing:-.015em}
.blogcard-feat .blogcard-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}

/* Top Stories numbered list */
.blog-top{display:flex;flex-direction:column}
.blog-top-h{font-family:'Montserrat',sans-serif;font-weight:600;font-size:19px;color:var(--navy);margin:0 0 6px}
.blog-top-list{display:flex;flex-direction:column;flex:1;justify-content:space-between}
.topstory{display:grid;grid-template-columns:auto 1fr 62px;gap:15px;align-items:center;padding:clamp(16px,2.2vh,26px) 0;border-top:1px solid var(--border);border-radius:10px;text-decoration:none}
.topstory:first-child{border-top:none}
.topstory-num{font-family:'Montserrat',sans-serif;font-weight:400;font-size:22px;line-height:1;font-variant-numeric:tabular-nums;color:var(--gold-deep);min-width:22px;text-align:center}
.topstory-title{display:block;font-weight:600;font-size:14.5px;line-height:1.35;letter-spacing:-.005em;color:var(--navy)}
.topstory-meta{display:block;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums;margin-top:4px}
.topstory-thumb{width:62px;height:62px;border-radius:9px;background-size:cover;background-position:center;background-color:var(--cream);flex-shrink:0;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.topstory:hover .topstory-title{color:var(--gold-deep)}
.topstory:hover .topstory-thumb{transform:scale(1.05)}
.topstory:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(198,178,93,.35)}

@media(max-width:900px){
  .blog-lede-row{grid-template-columns:1fr;gap:30px;align-items:start}
  .blog-top-list{flex:none;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.topstory:hover .topstory-thumb{transform:none}}
:root[data-theme="dark"] .blog-top-h,:root[data-theme="dark"] .topstory-title,:root[data-theme="dark"] .blog-intro-h1{color:#fff}
:root[data-theme="dark"] .topstory:focus-visible{box-shadow:0 0 0 3px rgba(198,178,93,.45)}

:root[data-theme="dark"]{--post-ink:rgba(255,255,255,.82)}
/* LAW-519 · blog post: navy title band + article/sidebar layout */
.posthero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:52px var(--gutter) 44px}
.posthero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22}
.posthero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 34%,rgba(58,75,91,.60) 100%),linear-gradient(0deg,rgba(28,38,50,.55),transparent 58%)}
.posthero-in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.posthero-back{display:flex;width:fit-content;align-items:center;gap:7px;color:rgba(255,255,255,.72);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;margin-bottom:22px;transition:color .18s ease,gap .18s ease}
.posthero-back svg{width:15px;height:15px;transition:transform .18s ease}
.posthero-back:hover{color:var(--gold-light);gap:9px}
.posthero-back:hover svg{transform:translateX(-2px)}
.posthero-back:focus-visible{outline:none;border-radius:6px;box-shadow:0 0 0 3px rgba(198,178,93,.45)}
@media(prefers-reduced-motion:reduce){.posthero-back,.posthero-back svg{transition:color .18s ease}.posthero-back:hover{gap:7px}.posthero-back:hover svg{transform:none}}
.posthero .post-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.posthero .post-cat{background:rgba(255,255,255,.12);color:var(--ccl,#dcc97e);border:1px solid rgba(255,255,255,.18);padding:4px 12px}
:root[data-theme="dark"] .posthero .post-cat{background:rgba(255,255,255,.10);color:var(--ccl,#dcc97e);border-color:rgba(255,255,255,.16)}
.posthero-title{font-family:'Montserrat',sans-serif;font-weight:300;font-size:clamp(29px,3.7vw,45px);line-height:1.12;letter-spacing:-.015em;color:#fff;max-width:840px;margin:0 0 16px}
.posthero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13.5px;color:rgba(255,255,255,.72);margin:0}
.posthero-by{color:#fff;font-weight:600}
.posthero-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
/* Featured image shown full-color below the title band, like lawclerk.legal.
   Pulls up to overlap the navy band so it reads as a card lifting out of it. */
/* left-aligned with the article text; 68ch (+matching font-size) makes its
   edges line up with the .post-body paragraphs */
.posthero-img{max-width:68ch;font-size:17.5px;margin:0 0 34px;padding:0}
/* fixed height (not max-height:auto) reserves the box before the image loads,
   so it can't jump 0->360 and push the article + sidebar down (was CLS ~0.12) */
.posthero-img img{display:block;width:100%;height:360px;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px rgba(28,38,50,.16)}
:root[data-theme="dark"] .posthero-img img{box-shadow:0 18px 40px rgba(0,0,0,.45)}
@media(max-width:640px){.posthero-img{margin:0 0 24px}.posthero-img img{border-radius:10px;height:220px}}

.postwrap{max-width:var(--maxw);margin:0 auto;padding:46px var(--gutter) 8px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:46px;align-items:start}
.post.postcol{max-width:none;margin:0;padding:0}

.post-share{display:flex;align-items:center;gap:12px;margin-top:34px;padding-top:24px;border-top:1px solid var(--border)}
.post-share-l{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground)}
.post-share a{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--navy);transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.post-share a:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px);box-shadow:0 6px 16px -6px rgba(58,75,91,.5)}
.post-share a:active{transform:translateY(0);box-shadow:none}
.post-share a:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.35)}
.post-share svg{width:16px;height:16px}
@media(prefers-reduced-motion:reduce){.post-share a{transition:background .15s ease,color .15s ease,border-color .15s ease}.post-share a:hover{transform:none;box-shadow:none}}

.postside{position:sticky;top:88px;display:flex;flex-direction:column;gap:22px}
.side-like{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.side-like-h{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);text-align:left;padding:18px 16px 4px;display:flex;align-items:center;gap:10px}
.side-like-h::before{content:'';width:22px;height:2px;background:var(--gold);flex-shrink:0}
.side-like-list{padding:4px 16px}
.side-like-row{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:13px 0;border-top:1px solid var(--border);text-decoration:none}
.side-like-row:first-child{border-top:none}
.side-like-thumb{width:52px;height:52px;border-radius:8px;background-size:cover;background-position:center;background-color:var(--cream);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.side-like-row:hover .side-like-thumb{transform:scale(1.05)}
.side-like-row:focus-visible{outline:none;border-radius:8px;box-shadow:0 0 0 3px rgba(198,178,93,.35)}
@media(prefers-reduced-motion:reduce){.side-like-thumb{transition:none}.side-like-row:hover .side-like-thumb{transform:none}}
.side-like-title{font-size:13px;line-height:1.4;font-weight:600;color:var(--navy)}
.side-like-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.side-like-meta{font-size:11.5px;line-height:1.35;color:var(--ink3);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .side-like-meta{color:rgba(255,255,255,.55)}
.side-like-row:hover .side-like-title{color:var(--gold-deep)}

.side-consult{background:var(--navy);color:#fff;border-radius:14px;padding:24px}
.side-consult-h{font-family:'Montserrat',sans-serif;font-weight:600;font-size:19px;margin:0 0 8px}
.side-consult-p{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.78);margin:0 0 16px}
.side-consult-btn{display:inline-block;background:var(--gold);color:var(--navy);font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.04em;padding:11px 22px;border-radius:999px;text-decoration:none;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.side-consult-btn:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(198,178,93,.7)}
.side-consult-btn:active{transform:translateY(0);box-shadow:none}
.side-consult-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.side-consult-k{display:block;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin:0 0 8px}
@media(prefers-reduced-motion:reduce){.side-consult-btn{transition:background .18s ease}.side-consult-btn:hover{transform:none;box-shadow:none}}

@media(max-width:900px){
  .postwrap{grid-template-columns:1fr;gap:34px}
  .postside{position:static}
}
:root[data-theme="dark"] .side-like{background:#1F2A38;border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .side-like-title{color:#fff}
:root[data-theme="dark"] .side-like-h{color:var(--gold-light)}
:root[data-theme="dark"] .side-like-h::before{background:var(--gold-light)}
:root[data-theme="dark"] .post-share a:focus-visible{border-color:var(--gold-light);box-shadow:0 0 0 3px rgba(198,178,93,.45)}
:root[data-theme="dark"] .side-like-row:focus-visible{box-shadow:0 0 0 3px rgba(198,178,93,.45)}
:root[data-theme="dark"] .post-share a{color:#fff;border-color:rgba(255,255,255,.22)}
:root[data-theme="dark"] .post-share a:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
:root[data-theme="dark"] .post-share-l{color:rgba(255,255,255,.62)}
:root[data-theme="dark"] .post-share{border-top-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .post-body figcaption{color:rgba(255,255,255,.55)}

/* LAW-519 · blog search living inside the hero (left-aligned, light count) */
.blogsearch-hero{margin:24px 0 0;max-width:480px}
.blogsearch-count-hero{text-align:left;color:rgba(255,255,255,.85);margin:10px 0 0}

/* LAW-519 · blog index polish: focus rings, cover zoom, skeleton, hero focus */
.blogcard{overflow:hidden}
.blogcard-cover{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.blogcard:hover .blogcard-cover{transform:scale(1.05)}
.blogcard:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,178,93,.35),0 16px 36px rgba(58,75,91,.10)}
:root[data-theme="dark"] .blogcard:focus-visible{border-color:var(--gold-light);box-shadow:0 0 0 3px rgba(198,178,93,.45)}
@media(prefers-reduced-motion:reduce){.blogcard:hover .blogcard-cover{transform:none}}

/* loading skeletons (SSR-seeded; blog-index.js overwrites the grid on paint) */
.blog-skel{position:relative;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);border-radius:14px}
.blog-skel-cover{aspect-ratio:16/10;background:var(--cream)}
.blog-skel-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px}
.blog-skel-line{height:12px;border-radius:6px;background:var(--cream)}
.blog-skel-line.w40{width:40%}.blog-skel-line.w90{width:90%}.blog-skel-line.w70{width:70%}
.blog-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:blogShimmer 1.4s ease-in-out infinite}
@keyframes blogShimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.blog-skel::after{animation:none}}
:root[data-theme="dark"] .blog-skel{background:#1F2A38;border-color:rgba(255,255,255,.10)}
:root[data-theme="dark"] .blog-skel-cover,:root[data-theme="dark"] .blog-skel-line{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .blog-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent)}

/* hero search focus emphasis */
.blogsearch-hero input{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.blogsearch-hero:focus-within{transform:translateY(-1px)}
.blogsearch-hero input:focus{border-color:var(--gold);box-shadow:0 14px 36px rgba(58,75,91,.22),0 0 0 3px rgba(198,178,93,.45)}
.blogsearch-hero:focus-within i{color:var(--gold)}
@media(prefers-reduced-motion:reduce){.blogsearch-hero:focus-within{transform:none}}

/* LAW-519 · blog index hero: single-column intro, so tighten it (the shared
   .hero-sub two-column height was making it eat half the first screen) */
.hero-blog.hero-bg-video{padding-top:34px;padding-bottom:38px}
.hero-blog .hero-eyebrow{margin-bottom:12px}
.hero-blog h1{font-size:clamp(28px,3.2vw,40px);line-height:1.08;margin-bottom:12px}
.hero-blog .hero-lede{font-size:15.5px;max-width:460px;margin-bottom:0}
.hero-blog .blogsearch-hero{margin-top:20px}
@media(max-width:980px){.hero-blog.hero-bg-video{padding-top:28px;padding-bottom:32px}}

/* LAW-519 · blog post: reading-progress bar + sidebar table of contents */
.post-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:transparent}
.post-progress-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}
:root[data-theme="dark"] .post-progress-bar{background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.post-toc{border:1px solid var(--border);border-radius:14px;background:var(--bg-card);padding:18px 20px}
.post-toc[hidden]{display:none}
.post-toc-h{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.post-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-left:2px solid var(--border);max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain}
.post-toc-list li{margin:0}
.post-toc-list::-webkit-scrollbar{width:6px}
.post-toc-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
.post-toc-link{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:13px;line-height:1.45;color:var(--muted-foreground);text-decoration:none;transition:color .15s,border-color .15s}
.post-toc-sub{padding-left:26px;font-size:12.5px}
.post-toc-link:hover{color:var(--gold-deep)}
.post-toc-link.is-active{color:var(--navy);border-left-color:var(--gold);font-weight:600}
.post-toc-link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(198,178,93,.35);border-radius:4px}
.post-body h2,.post-body h3,.post-body h4,.post-body [id]{scroll-margin-top:88px}
.post.postcol{scroll-margin-top:88px}
/* mobile keeps the reading-progress bar (a useful aid on long posts); only the
   sidebar TOC is desktop-only */
@media(max-width:900px){.post-toc{display:none}}
:root[data-theme="dark"] .post-toc{background:#1F2A38;border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .post-toc-list{border-left-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .post-toc-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
:root[data-theme="dark"] .post-toc-link{color:rgba(255,255,255,.66)}
:root[data-theme="dark"] .post-toc-link:hover{color:var(--gold-light)}
:root[data-theme="dark"] .post-toc-link.is-active{color:#fff}

/* LAW-519 · blog index: search lives in the filter header with the topic chips */
.blog-more-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.blog-more-top .blog-more-eyebrow{margin:0}
.blog-more-head .blogsearch{margin:0;max-width:340px;flex:0 1 340px}
.blog-more-head .blogsearch input{box-shadow:none}
.blog-more-head .blogsearch-count{text-align:left;margin:0}
@media(max-width:600px){.blog-more-head .blogsearch{max-width:none;flex:1 1 100%}}

/* ══════════════════════════════════════════════════════════════════
   LAW-621 · audience-aware site nav (shared <SiteNav>)
   Both hire + work dropdown sets ship in the markup; html[data-nav]
   (set pre-paint from localStorage 'lc-nav', default hire) picks one.
   ══════════════════════════════════════════════════════════════════ */
.navset{display:contents}
html:not([data-nav="work"]) .navset-work{display:none}
html[data-nav="work"] .navset-hire{display:none}
.audonly-work{display:none}
html[data-nav="work"] .audonly-hire{display:none}
html[data-nav="work"] .audonly-work{display:inline-flex}
/* grouped dropdowns with sub-headers */
.nav-dd-head{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);margin:2px 0 6px 8px}
.nav-dd-group{display:flex;flex-direction:column;gap:2px}
.nav-dd-group + .nav-dd-group{margin-top:12px}
.nav-dd-foot{margin-top:8px;padding-top:10px;border-top:1px solid var(--border);font-weight:600 !important;color:var(--gold-deep) !important}
/* the foot link carries its own literal arrow in the copy, so suppress both the
   gold accent bar and the hover chevron (the chevron would read as a 2nd arrow) */
.nav-dd-foot::before,.nav-dd-foot::after{display:none !important}
/* wide dropdown: two side-by-side groups (Solutions) */
.nav-dd-wide{min-width:440px}
.nav-dd-wide .nav-dd-cols{display:flex;gap:22px}
/* min-width:max-content, not 0: flex:1 gives every column a 0 basis and an equal
   share of the width regardless of content, and min-width:0 let a column shrink
   below what its items need. "Hourly Associate" + the RECOMMENDED pill needs
   275px (16 pad + 112 label + 9 gap + 106 pill + 32 chevron lane) but was handed
   223px, so the pill overflowed past the hover highlight. Columns now size to
   their widest item and redistribute (275 + 172) inside the same menu width. */
.nav-dd-wide .nav-dd-cols .nav-dd-group{flex:1;min-width:max-content}
.nav-dd-wide .nav-dd-group + .nav-dd-group{margin-top:0}
/* two-column dropdown (Practice Areas) */
.nav-dd-2col{min-width:404px;display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
:root[data-theme="dark"] .nav-dd-head{color:rgba(255,255,255,.5)}
:root[data-theme="dark"] .nav-dd-foot{color:var(--gold-light) !important;border-top-color:rgba(255,255,255,.14)}
@media(max-width:1140px){.nav-dd-wide,.nav-dd-2col{min-width:0}}

/* ═══════════════════════════════════════════════════════════════════
   LAW-625 · Mobile declutter (P1) — phones ≤600px only, desktop untouched.
   Information-first: shorter heroes (no background photo/video), tighter
   section rhythm, compact practice tiles + counsel cards, and no
   touch-dead decorative scenes/mockups.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  /* P2 · hide the top promo banners on phones — redundant with the sticky
     Talk-to-us bar, and they eat the top of the first fold */
  .demo-banner,.banner{display:none}

  /* section rhythm — kill the big empty bands (was 88px top+bottom) */
  section.sec{padding:44px var(--gutter)}

  /* P2 · compact section headers — scan the headings, not walls of intro copy
     (s-h2 was clamp≥30, s-sub had a 56px bottom margin) */
  .s-h2{font-size:25px;margin-bottom:10px}
  .s-eyebrow{margin-bottom:10px}
  .s-sub{font-size:15px;line-height:1.6;margin-bottom:24px}

  /* hero — keep the background video (restored per request), just compact it */
  .hero-bg-video{min-height:0;padding-top:32px;padding-bottom:40px}
  .hero h1{font-size:33px;line-height:1.08;margin-bottom:16px}
  .hero-lede{font-size:15px;line-height:1.6;margin-bottom:4px}
  .hero-cta-wrap{margin-top:18px}
  /* P2 · pull the CTA up: hide the trust-stat strip (it repeats in the
     by-the-numbers section) and trim the compliance checklist to the top 3 */
  .hero-trust{display:none}
  .hero-compliance{margin-top:14px}
  .hero-compliance span:nth-child(n+4){display:none}
  /* P2 · hide the hero "Right now on LAWCLERK" activity panel on phones so the
     headline + CTA fit the first fold (its stats repeat in the numbers band) */
  .hero-side{display:none}

  /* nav-right: phones show ONLY the burger. The audience CSS
     (html[data-nav="work"] .audonly-work{display:inline-flex}) was out-
     specifying the mobile hides, re-showing the path-pill + Join Today on
     work pages and pushing the burger off-screen (couldn't open the menu).
     Both live in the burger menu, so hide them here with !important. */
  .nav-right .path-pill,.nav-right .btn-outline{display:none !important}

  /* how-it-works: drop the decorative hover scenes (dead on touch) */
  #how .hs-scene{display:none}
  .hstep{padding:20px}

  /* why-LAWCLERK: hide the big platform mockup, keep the benefit list */
  #why .benimg{display:none}

  /* P3 · practice tiles: a compact 2-up tap grid (icon over name) so all areas
     are visible at once — a "pick your area" menu, not a swipe. Drop the
     description, featured-attorney line, hover panel + arrow.
     (cat-desc/cat-head are set by 0,3,0 selectors, so match that specificity.) */
  #categories .catgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-auto-rows:1fr}
  #categories .cat{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:11px;min-height:0;height:100%;padding:16px 15px}
  #categories .cat-arrow,#categories .cat-more{display:none}
  #categories .cat-main .cat-desc,#categories .cat .cat-head{display:none}
  /* collapse the wrapper so icon + name sit directly in the tile */
  #categories .cat-row{display:contents}
  #categories .cat-main{display:flex;flex-direction:column;align-items:flex-start;gap:11px;flex:1;min-height:0}
  #categories .cat-main .cat-icon{margin:0;flex:none}
  #categories .cat-main h4{margin:0;font-size:14px;line-height:1.25}

  /* featured counsel: condensed cards — name, role, rate, rating, CTA */
  #counsel .atty-meta,#counsel .atty-tags{display:none}
  #counsel .atty{padding:18px}
  /* P2 · show only the first 2 counsel cards on phones (was up to 4) */
  #attyGrid > *:nth-child(n+3){display:none}

  /* /work · #matters practice tiles → 2-up icon-over-name grid (match homepage #categories) */
  #matters .catgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-auto-rows:1fr}
  #matters .cat{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-height:0;height:100%;padding:16px 15px}
  #matters .cat-icon{margin:0;flex:none}
  #matters .cat h4{margin:0;font-size:14px;line-height:1.25}
  #matters .cat-desc,#matters .cat-meta{display:none}

  /* LAW-625 (parity) · /practice-areas · #areas practice tiles → compact icon+name
     rows, same as homepage #categories / #work #matters. #areas .cat is FLAT (icon
     + h4 + cat-desc as direct children, no .cat-row/.cat-main wrappers), so mirror
     the flat #matters block. It is a nav directory (each tile links to a detail
     page that repeats the teaser), so hiding .cat-desc strands no content, and all
     8 areas stay reachable (no count cap). */
  /* 2-up icon-over-name tap grid, matching the homepage #categories treatment */
  #areas .catgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-auto-rows:1fr}
  #areas .cat{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-height:0;height:100%;padding:16px 15px}
  #areas .cat-icon{margin:0;flex:none}
  #areas .cat h4{margin:0;font-size:14px;line-height:1.25}
  #areas .cat-desc{display:none}

  /* LAW-625 (parity) · /work #compare "Why attorneys choose hourly/project work" —
     3 informational benefit cards. Unlike the #categories nav tiles these have NO
     href and the .cat-desc paragraph IS the payload (a distinct reason per card),
     so keep all 3 cards and every word. Only fix the crammed 2+1 grid (generic
     .catgrid goes 2-up ≤780px with no phone rule) → single column + tighter chrome. */
  #compare .catgrid{grid-template-columns:1fr;gap:10px}
  #compare .cat{min-height:0;padding:16px 16px}
  #compare .cat-icon{margin-bottom:8px}

  /* LAW-625 (parity) · /company/success-stories · #attorneys is the credibility
     proof of the page — keep all 4 real verified profiles AND every proof field
     (name + verified badge, meta, tags, rate, % positive). Just condense the .atty
     card for the full-width mobile stack: tighter padding, a smaller avatar
     (de-emphasize the photo), tighter meta. No count cap, no copy hidden. */
  #attorneys .atty{padding:16px 16px 15px}
  #attorneys .atty-head{gap:11px;margin-bottom:13px}
  #attorneys .atty-avatar{width:44px;height:44px}
  #attorneys .atty-name{font-size:16px}
  #attorneys .atty-meta{gap:8px 12px;padding:12px 0;margin:0 0 13px}
  #attorneys .atty-tags{margin-bottom:13px}
  #attorneys .atty-stats{padding-top:12px}

  /* P2 · stat band — was 9 tall full-width cards. Keep the 3 headline stats
     compact (drop the icon + sub-line) and put the 6 "depth" stats in a tidy
     2-up grid so the whole band scans in a fraction of the height */
  .statbento{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .statbento .sb{grid-column:auto;padding:14px 10px}
  .statbento .sb-big{grid-column:1/-1;padding:16px 16px}
  .statbento .sb-big .sb-ic,.statbento .sb-big .sb-sub{display:none}
  .statbento .sb-lead,.sb-lead{grid-column:1/-1}
  .statbig{font-size:32px;margin-bottom:4px}
  .statbento .sb-n{font-size:23px}

  /* P2 · room for the sticky action bar + lift the day/night toggle above it */
  footer{padding-bottom:92px}
  .daynight-toggle{bottom:80px}
}

/* ═══ LAW-625 P2 · mobile sticky action bar — audience-aware primary CTA,
   always reachable on long pages. Hidden ≥601px. ═══ */
/* frosted glass — matches the site's .prods-glass surfaces: translucent, content
   blurs through, subtle light top edge + soft shadow */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:48;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.55);box-shadow:0 -1px 0 rgba(200,213,222,.5) inset,0 -10px 30px rgba(58,75,91,.14);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}
.mcta a{flex:1;display:inline-flex;align-items:center;justify-content:center;height:46px;border-radius:10px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:transform .15s ease}
.mcta a:active{transform:scale(.98)}
.mcta .mcta-primary{background:var(--gold);color:var(--navy);flex:1.5}
.mcta .mcta-secondary{background:transparent;color:var(--navy);border:1px solid var(--border)}
.mcta .mp-work{display:none}
html[data-nav="work"] .mcta .mp-hire{display:none}
html[data-nav="work"] .mcta .mp-work{display:inline-flex}
:root[data-theme="dark"] .mcta{background:rgba(26,37,49,.62);border-top-color:rgba(255,255,255,.14);box-shadow:0 -1px 0 rgba(255,255,255,.08) inset,0 -10px 30px rgba(0,0,0,.28)}
:root[data-theme="dark"] .mcta .mcta-secondary{color:#fff;border-color:rgba(255,255,255,.22)}
@media(max-width:600px){.mcta{display:flex}}
@media(prefers-reduced-motion:reduce){.mcta a{transition:none}}

/* LAW-625 P2 · very narrow phones: stack the stat "depth" tiles 1-up so they
   never cramp (2-up applies 361–600px) */
@media(max-width:360px){.statbento{grid-template-columns:1fr}}

/* ═══ LAW-625 P3 · How-it-works step cards → Apple-style swipe carousel on phones.
   Horizontal scroll-snap with the next card peeking + dot pagination (dots built
   by the small IIFE in interact.js). Desktop keeps its grid untouched. ═══ */
.howdots{display:none;justify-content:center;align-items:center;gap:2px;margin-top:14px}
/* 44px transparent hit area (a11y) with a small 7px visual dot rendered via ::before */
.howdots button{width:44px;height:44px;padding:0;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
/* keyboard-only focus ring on the dot itself (no default blue box on tap) */
.howdots button:focus-visible::before{box-shadow:0 0 0 3px rgba(198,178,93,.6)}
/* currentColor (inherited section text color) so inactive dots contrast on ANY
   surface — light section = dark dots, dark section/mode = light dots — no
   per-section/theme special-casing. Active dot is gold everywhere. */
.howdots button::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;transition:transform .22s ease,opacity .22s ease,background .22s ease}
.howdots button.on::before{background:var(--gold);opacity:1;transform:scale(1.45)}
@media(prefers-reduced-motion:reduce){.howdots button::before{transition:none}}
@media(max-width:600px){
  .howsteps,.prodgrid{
    display:flex;grid-template-columns:none;max-width:none;gap:14px;
    margin:8px calc(var(--gutter)*-1) 0;   /* bleed to the section edges */
    padding:6px var(--gutter) 12px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .howsteps::-webkit-scrollbar,.prodgrid::-webkit-scrollbar{display:none}
  .howsteps>.hstep,.prodgrid>.prod{flex:0 0 84%;scroll-snap-align:center}
  /* These cards scroll HORIZONTALLY, but interact.js reveals with the viewport
     as the observer root (threshold .10) — so a card parked off-screen to the
     right never intersects, never gets .is-visible, and swipes in at opacity:0
     (how-it-works step 03 was invisible at 390px). Pin carousel children to the
     revealed end state; the section intro text still animates normally. */
  .howsteps>.hstep.reveal,.prodgrid>.prod.reveal{opacity:1;transform:none}
  /* Carousel: cards read one at a time, so no cross-card title alignment. */
  .paycycle-steps>.hstep h3{min-height:0}
  .howsteps>.hstep{padding:24px}
  .howdots{display:flex}
}

/* LAW-625 P3 · hide the Stories / testimonials band on phones (per request) */
@media(max-width:600px){#stories{display:none}}

/* ─── Legal / confirmation document body (LAW-784) ──────────────────────
   These pages (/legal/privacy, /legal/cookie-policy, /thank-you/demo-booked)
   used to set their colours inline as var(--navy) / var(--muted-foreground).
   Neither token is redefined under [data-theme="dark"] -- the v17 dark theme
   works through per-element rules, and the palette is only re-tokenised under
   the LEGACY [data-mode="dark"] used by the A/B/C/D comparison. So in real dark
   mode the headings rendered at 1.52:1 and the body text at 2.07:1: present,
   selectable, effectively invisible.

   Inline styles cannot be overridden by a stylesheet without !important, so the
   fix is a class rather than a dark-mode patch. Keep colours here, not inline,
   on anything that has to survive both themes. */
.legaldoc-body h3{font-family:Montserrat,sans-serif;font-size:17px;color:var(--navy);margin:26px 0 8px}
.legaldoc-body p,
.legaldoc-body li{font-size:14.5px;color:var(--muted-foreground);line-height:1.7}
.legaldoc-body ul{margin:0 0 4px;padding-left:20px}
/* var(--gold-deep) on cream measures 2.35:1 -- well under AA, and it was that
   way inline before this class existed. Navy-deep instead, plus an underline so
   the link is not signalled by colour alone. */
.legaldoc-body a{color:var(--navy-deep);text-decoration:underline;text-underline-offset:2px}
.legaldoc-body strong{color:var(--navy)}

:root[data-theme="dark"] .legaldoc-body h3,
:root[data-theme="dark"] .legaldoc-body strong{color:#E2EAF2}
:root[data-theme="dark"] .legaldoc-body p,
:root[data-theme="dark"] .legaldoc-body li{color:rgba(255,255,255,.82)}
:root[data-theme="dark"] .legaldoc-body a{color:var(--gold-light);text-decoration:underline;text-underline-offset:2px}