/* ============================================================================
   Clever Legal — single bundled stylesheet (one <link>, one request).
   Was a chain of 6 @imports that serialised into a render-blocking waterfall
   before first paint. Now concatenated in dependency order below:
   tokens (colors -> typography -> spacing) -> base/reset -> site -> pages.
   The :root token blocks at the top remain the single source of truth — edit a
   value once and every var() updates. Sections keep their original banners.
   ========================================================================= */


/* ============================================================================
   Clever Legal — colour tokens (single source of truth)
   LIGHT palette (warm cream + brass, forest kept as dark ink/accents).
   Switched from the original dark forest scheme at Cam's request.
   Edit a value here once and every surface using it via var() updates.
   ========================================================================= */

:root {
  /* Surfaces -------------------------------------------------------------- */
  --bg:      #F6F4FB; /* page background — cool light lavender-white */
  --bg-2:    #EDEAF5; /* secondary band background — light lavender */
  --card:    #FFFFFF; /* card / tile surface */
  --card-2:  #FBF9FE; /* raised card surface */

  /* Brand accents (purple) ------------------------------------------------ */
  --brass:      #6D28D9; /* purple — buttons(+white text), icons, eyebrows, links */
  --brass-deep: #5B21B6; /* deeper purple — focus rings, hover borders */
  --brass-soft: #7C3AED; /* brighter purple — primary button hover */

  /* Text (near-black with a cool tint on the light surfaces) -------------- */
  --ink:   #1E1A2E; /* headings / strongest text */
  --on:    #2E2940; /* primary body text */
  --muted: #5A5470; /* secondary / supporting copy */
  --faint: #6C6682; /* faint labels / captions */
  --dim:   #6F6986; /* dimmest fine print, e.g. copyright */

  /* Lines & borders ------------------------------------------------------- */
  --line:   #E6E1F0; /* soft borders / dividers */
  --line-2: #D6CFE7; /* stronger hairline (button outline, hover) */
}


/* ============================================================================
   Clever Legal — typography tokens (single source of truth)
   Arial system stack, NO web fonts. Authored from mockup 02b.
   ========================================================================= */

:root {
  /* Family — the 02b stack. --font is the canonical name 02b's CSS uses. ---- */
  --font: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-text: var(--font);
  --font-display: var(--font);

  /* Weights --------------------------------------------------------------- */
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-heavy: 800;
}


/* ============================================================================
   Clever Legal — layout & radii tokens (single source of truth)
   Authored verbatim from mockup 02b :root.
   ========================================================================= */

:root {
  /* Layout ---------------------------------------------------------------- */
  --maxw: 1180px; /* content max-width (02b --maxw) */

  /* Radii ----------------------------------------------------------------- */
  --r:    14px;   /* default card radius */
  --r-lg: 22px;   /* large radius — strips, outcome cards, traits */
}


/* ============================================================================
   Clever Legal — base / reset (consumes tokens only)
   Authored from mockup 02b's global rules, plus production a11y niceties
   (visible focus, reduced-motion, skip-link utility).
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--on);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

svg { display: inline-block; max-width: 100%; }
img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  color: var(--ink);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.022em;
  line-height: 1.08;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* Visible keyboard focus everywhere (WCAG 2.2) ---------------------------- */
:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Respect reduced-motion: freeze SVG SMIL + disable smooth scroll/transitions */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  svg animate,
  svg animateTransform,
  svg animateMotion { display: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Screen-reader-only utility (skip link) --------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* The skip link is the only focusable .visually-hidden element (the honeypot is
   a div/input, never an anchor). Bring it on-screen on keyboard focus so it's
   actually usable — WCAG 2.4.1 Bypass Blocks. */
a.visually-hidden:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  clip-path: none;
  overflow: visible;
  background: var(--brass);
  color: var(--bg);
  font-weight: 700;
  border-radius: 8px;
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}


/* ============================================================================
   Clever Legal — site components (dark register).
   Ported verbatim from the approved "Split · Vertical Chronology" mockup (02b)
   <style> block. Consumes tokens only. Global reset / :root / body / heading
   rules live in the token layer (colors / typography / spacing / base).
   The mockup-only .note debug label is intentionally omitted.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   Layout + type primitives
   ------------------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.muted { color: var(--muted); }
.accent { color: var(--brass); }
section { padding: 92px 0; border-top: 1px solid var(--line); }
.lede { max-width: 700px; }
.lede h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.lede p { margin-top: 14px; color: var(--muted); font-size: 1.08rem; }
.ic { display: inline-block; vertical-align: middle; }

/* ----------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; padding: 14px 22px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: .18s; }
.btn--primary { background: var(--brass); color: #fff; }
.btn--primary:hover { background: var(--brass-soft); }
.btn--ghost { border-color: var(--line-2); color: var(--on); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn--sm { padding: 10px 16px; font-size: .92rem; }

/* ----------------------------------------------------------------------------
   Header (sticky + compact-on-scroll)
   ------------------------------------------------------------------------- */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 238, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: .2s; }
header.site.is-compact { background: rgba(247, 245, 238, .96); }
.hdr { display: flex; align-items: center; gap: 24px; height: 78px; transition: .2s; }
header.site.is-compact .hdr { height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--on); }
.brand .mark { width: 34px; height: 34px; }
.brand b { font-weight: 800; font-size: 1.06rem; letter-spacing: .02em; }
.brand small { display: block; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); font-weight: 700; margin-top: 1px; }
nav.main { margin-left: auto; display: flex; align-items: center; gap: 28px; }
nav.main a { color: var(--muted); font-size: .95rem; font-weight: 600; }
nav.main a:hover { color: var(--on); }
nav.main a.btn--primary { color: #fff; } /* CTA text must win over nav link colour */
@media (max-width: 860px) { nav.main a.navlink { display: none; } }

/* Mobile menu (hamburger) — replaces the header CTA button under 860px */
.menu-btn { display: none; width: 44px; height: 44px; margin-left: auto; border-radius: 10px; border: 1px solid transparent; background: transparent; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); flex: none; }
.menu-btn:hover, .menu-btn:active { background: rgba(0, 0, 0, .04); }
.menu-btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.menu-btn .ic { width: 22px; height: 22px; }
.menu-btn .ln { transition: transform .2s ease, opacity .15s ease; transform-origin: center; }
.menu-btn[aria-expanded="true"] .ln1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .ln2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .ln3 { transform: translateY(-5px) rotate(-45deg); }
.mobile-menu { display: none; }
@media (max-width: 860px) {
  nav.main .btn { display: none; }
  .menu-btn { display: flex; }
  .mobile-menu { display: flex; flex-direction: column; max-height: 0; overflow: hidden; background: var(--bg); border-top: 0 solid var(--line); transition: max-height .25s ease; }
  .mobile-menu.is-open { max-height: 360px; border-top-width: 1px; }
  .mobile-menu a.navlink { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .mobile-menu .btn { margin: 16px 20px 20px; justify-content: center; }
}

/* ----------------------------------------------------------------------------
   Split hero
   ------------------------------------------------------------------------- */
.hero { padding: 74px 0 88px; background: radial-gradient(900px 520px at 82% -8%, rgba(109, 40, 217, .10), transparent 60%); }
.hero .grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 50px; align-items: center; }
@media (max-width: 940px) { .hero .grid { grid-template-columns: 1fr; gap: 40px; } }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); font-weight: 800; letter-spacing: -.026em; }
.hero h1 em { font-style: normal; color: var(--brass); }
.hero p.sub { margin-top: 22px; font-size: 1.14rem; color: var(--muted); max-width: 520px; }
.hero .cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.trust { margin-top: 32px; display: flex; flex-direction: column; gap: 11px; color: var(--faint); font-size: .92rem; font-weight: 600; }
.trust span { display: flex; align-items: center; gap: 10px; }
.trust .tk { width: 17px; height: 17px; color: var(--brass); flex: none; }

/* ----------------------------------------------------------------------------
   Chronology card
   ------------------------------------------------------------------------- */
.journey { background: #FFFFFF; border: 1px solid var(--line); border-radius: 26px; padding: 26px 24px 22px; }
.journey .cap { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.journey h3 { font-size: 1.16rem; margin: 4px 0 10px; color: var(--ink); }
.journey > svg { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------------------------
   Cost strip
   ------------------------------------------------------------------------- */
.costrip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 46px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 760px) { .costrip { grid-template-columns: 1fr; } }
.costrip > div { padding: 30px 26px; background: var(--card); }
.costrip > div + div { border-left: 1px solid var(--line); }
@media (max-width: 760px) { .costrip > div + div { border-left: none; border-top: 1px solid var(--line); } }
.costrip .ic { width: 34px; height: 34px; color: var(--brass); margin-bottom: 14px; }
.costrip h3 { font-size: 1.22rem; margin: 0 0 8px; }
.costrip p { color: var(--muted); font-size: .94rem; }
.costrip .price { margin-top: 14px; font-weight: 800; color: var(--brass); }

/* ----------------------------------------------------------------------------
   Compensation cover
   ------------------------------------------------------------------------- */
.cover { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 42px; }
@media (max-width: 860px) { .cover { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cover { grid-template-columns: 1fr; } }
.cov { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.cov .ic { width: 30px; height: 30px; color: var(--brass); margin-bottom: 12px; }
.cov h3 { font-size: 1.02rem; margin-bottom: 5px; }
.cov p { color: var(--muted); font-size: .88rem; }

/* ----------------------------------------------------------------------------
   How we operate
   ------------------------------------------------------------------------- */
.operate h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 820px; }
.opgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; }
@media (max-width: 760px) { .opgrid { grid-template-columns: 1fr; gap: 20px; } }
.opgrid p { color: var(--muted); font-size: 1.05rem; }
.opgrid b { color: var(--on); }
.pull { border-left: 3px solid var(--brass); padding-left: 22px; margin: 30px 0; font-size: 1.32rem; color: var(--ink); font-weight: 700; max-width: 760px; line-height: 1.3; }
.oppoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; }
@media (max-width: 760px) { .oppoints { grid-template-columns: 1fr; } }
.oppoints .p { display: flex; gap: 12px; align-items: flex-start; }
.oppoints .ic { width: 26px; height: 26px; color: var(--brass); flex: none; margin-top: 2px; }
.oppoints .t { font-weight: 700; color: var(--on); font-size: .96rem; }
.oppoints .d { color: var(--muted); font-size: .86rem; }

/* ----------------------------------------------------------------------------
   Claims
   ------------------------------------------------------------------------- */
.claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
@media (max-width: 860px) { .claims { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .claims { grid-template-columns: 1fr; } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; transition: .18s; }
.tile:hover { border-color: var(--brass-deep); transform: translateY(-2px); }
.tile .ic { width: 32px; height: 32px; color: var(--brass); margin-bottom: 13px; }
.tile h3 { font-size: 1.06rem; margin-bottom: 6px; }
.tile p { color: var(--muted); font-size: .89rem; }
.tile.cta { background: linear-gradient(160deg, #F3EEFC, #EAE1FA); border-color: var(--line-2); display: flex; flex-direction: column; justify-content: center; }
.tile.cta a { color: var(--brass); font-weight: 700; }

/* ----------------------------------------------------------------------------
   Outcome
   ------------------------------------------------------------------------- */
.outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
@media (max-width: 760px) { .outcome { grid-template-columns: 1fr; } }
.ocard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; background: var(--card); }
.ocard.viable { border-color: #2a6450; }
.ocard .head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ocard .ic { width: 30px; height: 30px; color: var(--brass); }
.ocard .k { font-weight: 800; color: var(--brass); }
.ocard p { color: var(--muted); }

/* ----------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */
.faq { margin-top: 36px; border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 46px 22px 0; position: relative; font-weight: 700; font-size: 1.08rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--brass); font-weight: 700; font-size: 1.6rem; line-height: 0; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--brass); }
.faq .a { padding: 0 46px 24px 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }

/* ----------------------------------------------------------------------------
   Thesis band — the economics line + value chips ("favicons")
   ------------------------------------------------------------------------- */
.thesis { text-align: center; background: radial-gradient(820px 420px at 50% -12%, rgba(109, 40, 217, .08), transparent 62%); }
.thesis h2 { max-width: 880px; margin: 14px auto 0; font-size: clamp(1.7rem, 3.3vw, 2.5rem); line-height: 1.2; }
.thesis h2 em { font-style: normal; color: var(--brass); }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 48px; text-align: left; }
@media (max-width: 860px) { .chips { grid-template-columns: 1fr 1fr; gap: 24px 22px; } }
@media (max-width: 480px) { .chips { grid-template-columns: 1fr; } }
.chip { display: flex; gap: 13px; align-items: flex-start; padding-left: 19px; border-left: 1px solid var(--line); }
@media (max-width: 480px) { .chip { border-left: none; padding-left: 0; } }
.chip .ic { width: 27px; height: 27px; color: var(--brass); flex: none; margin-top: 1px; }
.chip .t { font-weight: 800; color: var(--ink); font-size: 1rem; letter-spacing: -.01em; }
.chip .d { color: var(--muted); font-size: .85rem; margin-top: 4px; line-height: 1.5; }

/* ----------------------------------------------------------------------------
   Human traits — how we show up
   ------------------------------------------------------------------------- */
.human { background: var(--bg-2); }
.traits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 42px; }
@media (max-width: 860px) { .traits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .traits { grid-template-columns: 1fr; } }
.trait { text-align: center; padding: 32px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.trait .ring { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; border: 1px solid var(--line-2); background: rgba(109, 40, 217, .06); }
.trait .ring .ic { width: 28px; height: 28px; color: var(--brass); }
.trait h3 { font-size: 1.14rem; margin-bottom: 6px; }
.trait p { color: var(--muted); font-size: .9rem; }

/* ----------------------------------------------------------------------------
   Closing band
   ------------------------------------------------------------------------- */
.closing { text-align: center; background: radial-gradient(720px 320px at 50% 0%, rgba(109, 40, 217, .13), transparent 65%); }
.closing .inner { max-width: 640px; margin: 0 auto; }
.closing h2 { font-size: clamp(2rem, 4vw, 3rem); }
.closing p { margin: 16px auto 30px; max-width: 520px; color: var(--muted); font-size: 1.1rem; }

/* ----------------------------------------------------------------------------
   Footer — multi-column, brand block + columns + legal bar
   ------------------------------------------------------------------------- */
footer.site { border-top: 1px solid var(--line); background: var(--bg-2); padding: 64px 0 116px; }
.footgrid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .footgrid { grid-template-columns: 1fr 1fr; gap: 32px 28px; } }
@media (max-width: 480px) { .footgrid { grid-template-columns: 1fr; } }
.footbrand .brand { margin-bottom: 16px; }
.footbrand p.bio { color: var(--muted); font-size: .92rem; max-width: 330px; }
.foot-contact { margin-top: 18px; }
.foot-contact a { display: inline-flex; align-items: center; gap: 9px; color: var(--on); font-size: .94rem; font-weight: 600; }
.foot-contact a:hover { color: var(--brass); }
.foot-contact .ic { width: 20px; height: 20px; color: var(--brass); flex: none; }
.footcol h4 { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); font-weight: 800; margin-bottom: 14px; }
.footcol ul { list-style: none; }
.footcol li { margin-bottom: 9px; }
.footcol a { color: var(--muted); font-size: .92rem; }
.footcol a:hover { color: var(--on); }
.footlegal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--faint); font-size: .84rem; }
.footlegal .ent { color: var(--ink); font-weight: 700; font-size: .9rem; }
.footlegal .ent-detail { margin-top: 4px; color: var(--muted); }
.footlegal .fine { margin-top: 12px; line-height: 1.7; }
.footlegal .copy { margin-top: 14px; color: var(--dim); }

/* ----------------------------------------------------------------------------
   Fee comparison block (homepage #cost section)
   ------------------------------------------------------------------------- */
.fee-compare { margin: 40px 0 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fee-compare__head { padding: 14px 24px; background: var(--card); border-bottom: 1px solid var(--line); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); font-weight: 700; margin: 0; }
.fee-compare__grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .fee-compare__grid { grid-template-columns: 1fr; } }
.fee-compare__col { padding: 22px 26px; }
.fee-compare__col + .fee-compare__col { border-left: 1px solid var(--line); }
@media (max-width: 640px) { .fee-compare__col + .fee-compare__col { border-left: none; border-top: 1px solid var(--line); } }
.fee-compare__col--old { background: var(--card); }
.fee-compare__col--new { background: rgba(109, 40, 217, .04); }
.fee-compare__label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.fee-compare__col--old .fee-compare__label { color: var(--faint); }
.fee-compare__col--new .fee-compare__label { color: var(--brass); }
.fee-compare__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.fee-compare__col li { font-size: .94rem; line-height: 1.45; }
.fee-compare__col--old li { color: var(--muted); }
.fee-compare__col--old li::before { content: "— "; color: var(--faint); }
.fee-compare__col--new li { color: var(--on); }
.fee-compare__col--new li::before { content: "✓ "; color: var(--brass); }

/* ----------------------------------------------------------------------------
   Mobile sticky CTA bar
   ------------------------------------------------------------------------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; padding: 12px 78px 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: rgba(247, 245, 238, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.mbar .btn { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  .mbar { display: block; }
  body:has(.mbar) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .hide-mobile { display: none; }
}


/* ============================================================
   Clever Legal — sub-page / guides / form components.
   Loaded after site.css. Same dark system, plus one light form
   surface (the intake form is black-on-light for readability).
   ============================================================ */

/* --- sub-page hero band --- */
.page-hero{border-top:none;padding:60px 0 6px;background:radial-gradient(820px 360px at 50% -22%, rgba(109,40,217,.07), transparent 60%)}
.page-hero .eyebrow{margin-bottom:12px}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);color:var(--ink)}
.page-hero p.sub{margin-top:14px;color:var(--muted);max-width:720px;font-size:1.06rem}

/* --- long-form prose (legal pages, guide articles) --- */
.prose{max-width:760px;margin:0 auto}
.prose .meta{color:var(--faint);font-size:.86rem;margin-bottom:20px}
.prose h2{font-size:1.45rem;color:var(--ink);margin:40px 0 12px;letter-spacing:-.01em;position:relative;padding-top:17px}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:32px;height:3px;border-radius:2px;background:var(--brass)}
.prose h3{font-size:1.14rem;color:var(--ink);margin:24px 0 8px}
.prose p{color:var(--muted);font-size:1.04rem;line-height:1.72;margin:0 0 16px}
.prose ul,.prose ol{color:var(--muted);margin:0 0 18px;padding-left:22px}
.prose li{line-height:1.65;margin:0 0 8px}
.prose strong{color:var(--on)}
.prose a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--brass-soft)}
.prose blockquote{border-left:3px solid var(--brass);margin:22px 0;padding:2px 0 2px 18px;color:var(--ink)}
.prose hr{border:none;border-top:1px solid var(--line);margin:30px 0}
.backlink{display:inline-block;margin-bottom:18px;color:var(--brass);font-weight:700;font-size:.9rem}

/* draft banner (legal/guide pending lawyer review) */
.draft-banner{max-width:760px;margin:0 auto 26px;background:rgba(109,40,217,.06);border:1px solid var(--line-2);border-radius:10px;padding:12px 16px;color:var(--on);font-size:.88rem;line-height:1.5}

/* --- guides index --- */
.guidelist{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media(max-width:760px){.guidelist{grid-template-columns:1fr}}
.gfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.gfilter__btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease}
.gfilter__btn:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-1px)}
.gfilter__btn.is-active{background:var(--brass);border-color:var(--brass);color:#fff}
.gfilter__btn.is-active:hover{color:#fff;transform:none}
.postcard.postcard--hide{display:none} /* higher specificity so it beats .postcard{display:flex} regardless of source order */
@keyframes gcard{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.bloglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.postcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:.18s}
.postcard:hover{border-color:var(--brass-deep);transform:translateY(-2px)}
.postcard .ic{width:30px;height:30px;color:var(--brass);margin-bottom:14px}
.postcard .cat{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:700}
.postcard h2{font-size:1.22rem;color:var(--ink);margin:9px 0 8px}
.postcard p{color:var(--muted);font-size:.93rem}
.postcard .more{margin-top:auto;padding-top:14px;color:var(--brass);font-weight:700;font-size:.9rem}

/* --- intake form: black-on-light surface for readability --- */
.formwrap{max-width:680px;margin:0 auto}
.formcard{background:#F4F5EF;color:#15211A;border:1px solid #cdd5c6;border-radius:var(--r-lg);padding:30px}
.formcard h2{color:#15211A;font-size:1.3rem;margin-bottom:6px}
.formcard>p.lede-sm{color:#46524a;margin-bottom:20px;font-size:.96rem}
.notice{background:#eaece3;border:1px solid #cdd5c6;border-radius:10px;padding:13px 15px;font-size:.84rem;color:#3a463c;line-height:1.55;margin-bottom:22px}
.field{margin-bottom:17px}
.field label{display:block;font-weight:700;font-size:.9rem;color:#1a261d;margin-bottom:6px}
.field .req{color:#9a3b2e}
.field input,.field textarea{width:100%;padding:11px 13px;border:1px solid #b4bdac;border-radius:10px;background:#fff;color:#15211A;font:inherit}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--brass-deep);outline-offset:0;border-color:var(--brass-deep)}
.field .hint{color:#5b665a;font-size:.82rem;margin-top:5px}
.field--file input{padding:9px;background:#fff}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:#1a261d;margin-bottom:8px}
.consent[hidden]{display:none} /* author display:flex would otherwise beat the UA [hidden] rule */
.consent input{width:auto;margin-top:3px;flex:none}
.formcard .btn--primary{width:100%;justify-content:center;margin-top:10px;font-size:1.02rem;padding:14px}
.form-foot{color:#5b665a;font-size:.8rem;margin-top:12px;text-align:center}
.form-status{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:.9rem;display:none}
.form-status.ok{display:block;background:#e2efe6;border:1px solid #b6d3c0;color:#1f5138}
.form-status.err{display:block;background:#f5e4e1;border:1px solid #e0b6ad;color:#7a2e22}

/* form voice control (speak the "what happened" field) */
.voicebar{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.mic-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #b4bdac;border-radius:999px;background:#fff;color:#1a261d;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.mic-btn:hover{border-color:var(--brass-deep);color:var(--brass-deep)}
.mic-btn[aria-pressed="true"]{background:#7a2e22;border-color:#7a2e22;color:#fff}
.mic-btn svg{flex:none}
.mic-status{font-size:.82rem;color:#5b665a}
@media (prefers-reduced-motion: no-preference){.mic-btn[aria-pressed="true"] svg{animation:micpulse 1.2s ease-in-out infinite}}
@keyframes micpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Triage assistant (conversational intake) ─────────────────────────────── */
#form-card{margin-top:18px}
.cl-tprogress{font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--brass-deep);margin:0 0 12px}
.cl-tlog{display:flex;flex-direction:column;gap:10px;max-height:46vh;min-height:180px;overflow-y:auto;padding:6px 4px 2px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cl-tlog[hidden]{display:none} /* author display:flex would otherwise beat the UA [hidden] rule */
.cl-tmsg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:.95rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.cl-tmsg--assistant{align-self:flex-start;background:#fff;border:1px solid #cdd5c6;color:#15211A;border-bottom-left-radius:4px}
.cl-tmsg--user{align-self:flex-end;background:#173026;color:#F3F4ED;border-bottom-right-radius:4px}
.cl-typing{display:inline-flex;gap:5px;align-items:center}
.cl-typing span{width:7px;height:7px;border-radius:50%;background:#9aa79b;display:inline-block}
@media (prefers-reduced-motion: no-preference){.cl-typing span{animation:cltype 1.1s ease-in-out infinite}.cl-typing span:nth-child(2){animation-delay:.18s}.cl-typing span:nth-child(3){animation-delay:.36s}}
@keyframes cltype{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.cl-tcompose{margin-top:14px}
.cl-tcompose textarea{width:100%;padding:11px 13px;border:1px solid #b4bdac;border-radius:10px;background:#fff;color:#15211A;font:inherit;resize:none;min-height:46px;max-height:160px}
.cl-tcompose textarea:focus{outline:2px solid var(--brass-deep);outline-offset:0;border-color:var(--brass-deep)}
.cl-tcompose textarea:disabled{background:#f0eef7;color:#a49dba;-webkit-text-fill-color:#a49dba;cursor:not-allowed;border-color:#d7d3e6}
.cl-tcompose .mic-btn:disabled,.cl-tcompose .cl-trow .btn:disabled{opacity:.45;cursor:not-allowed}
.cl-trow{display:flex;align-items:center;gap:10px;margin-top:9px}
.cl-trow .btn--primary{margin-left:auto;width:auto;margin-top:0;padding:10px 22px}
.cl-tcompose .mic-status{display:block;margin-top:8px}
.cl-tfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #d7dccf}
.cl-tfoot[hidden]{display:none} /* author display:flex would otherwise beat the UA [hidden] rule */
.cl-tdot{color:#9aa79b}
.linkbtn{background:none;border:none;padding:0;font:inherit;font-size:.86rem;font-weight:700;color:var(--brass-deep);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:#9a6f12}
.linkbtn:disabled{color:#9aa79b;cursor:default;text-decoration:none}
@media (max-width:600px){.cl-tlog{max-height:54vh}.cl-tmsg{max-width:92%}}

/* Early contact-capture card (add-early-contact-capture) */
.cl-tcard{margin-top:14px;background:#fff;border:1px solid #cdd5c6;border-radius:14px;padding:16px 16px 18px}
.cl-tcard__h{font-size:1.02rem;margin:0 0 4px;color:var(--ink);font-weight:800}
.cl-tcard__p{font-size:.88rem;color:#3a463c;margin:0 0 14px;line-height:1.5}
.cl-tcard__f{margin-bottom:11px}
.cl-tcard__f label{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.cl-tcard__f .req{color:#9a3b2e}
.cl-tcard__f input{width:100%;padding:11px 13px;border:1px solid #b4bdac;border-radius:10px;background:#fff;color:#15211A;font:inherit}
.cl-tcard__f input:focus{outline:2px solid var(--brass-deep);outline-offset:0;border-color:var(--brass-deep)}
.cl-tcard__ts{margin:6px 0 12px}
.cl-tcard .btn--primary{width:auto;padding:11px 26px;margin-top:2px}
.cl-tcard .mic-status{display:block;margin-top:8px}
.cl-tcard__note{font-size:.78rem;color:#5a655c;line-height:1.5;margin:12px 0 10px}
.cl-tcard__note a{color:var(--brass-deep)}
.cl-tcard__consent{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;font-size:.86rem;color:#3a463c;line-height:1.5;cursor:pointer}
.cl-tcard__consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--brass)}
/* The global reset makes <a> look like plain text; make the Privacy Policy link
   in consent + notices read clearly as a link (purple + underline). */
.cl-tcard__consent a,.consent a,.notice a{color:var(--brass);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.cl-tcard__foot{margin-top:10px}