/* ============================================================================
   JUVO - shared design tokens  (SINGLE SOURCE OF TRUTH for styling)
   ----------------------------------------------------------------------------
   Every Juvo surface loads THIS file and reads its colours, scales, primitives
   and component classes from the definitions below. Nothing re-declares the
   palette per page. Public pages (index.html, pricing.html, deck.html,
   demo-live.html, lex-marketing/index.html, lex-manual/index.html) and the
   authenticated app surfaces (vault.html, dashboard.html, admin.html, etc.)
   all inherit the same look by linking this one file.

   This kills the live drift we had:
     - index.html used      --paper:#FBFCFA  and had NO --red
     - app.html / compliance.html used --paper:#FCFDFC and DID define --red
     - inline copies also drifted gold (#C9A14A vs canonical #C8A15A) and
       hair (#E6E6E6 vs canonical #E2EBE5)
   We deliberately PICK the canonical token values here and INCLUDE --red, as
   the superset. Pages should DELETE their inline :root palette blocks and read
   from these variables so cross-page consistency is enforced by the kit.

   No long-dash punctuation anywhere in this file (UI-copy rule). Comments use
   commas, colons and parentheses only.
   Fonts are loaded by each page's own <link> (Cormorant/Fraunces, Inter
   400/500/600, IBM Plex Mono 400/500, display=swap); this file only references
   the families by name.

   HOW TO EXTEND:  add new tokens or component classes, never rename or remove
   an existing variable (pages + JS reference --g, --mg, --am, --sev-*, --ring,
   --s1..--s7, --r1..--r5, --shadow-* by name). Additive only.
   ========================================================================== */

:root{
  /* ---- brand palette, from the Juvo visual guide ------------------------- */
  --g:#0B3D2E;        /* forest green, primary brand, headers, wordmark */
  --g2:#062F24;       /* deeper green hover / pressed */
  --mg:#2F765C;       /* sage-green success and positive accents */
  --gold:#C8A15A;     /* muted gold, logo V and fine highlights */
  --gold2:#8A682E;    /* gold, text-safe (eyebrows, labels) */
  --am:#C88527;       /* amber / caution, medium severity + unverified flag */
  --red:#C94A3A;      /* red, high severity + danger */
  --ink:#111418;      /* graphite body text */
  --slate:#5D6661;    /* secondary text */
  --tint:#DDE3DB;     /* sage surface */
  --gtint:#F3E9D7;    /* gold tint surface */
  --hair:#DED8CB;     /* stone hairline borders */
  --paper:#FAF8F4;    /* ivory page background */

  /* ---- additive surface + text tokens (refinements, nothing renamed) ---- */
  --card:#FFFFFF;         /* card / panel fill on top of --paper */
  --ink-2:#353B38;        /* strong secondary, one step lighter than --ink */
  --hair-strong:#C9C1B2;  /* stronger hairline for inputs, dividers under load */
  --mg-tint:#E3EEE8;      /* sage-green tint (verified chip fill) */
  --am-tint:#F5E8CF;      /* amber tint (flagged chip fill) */
  --overlay:rgba(17,20,24,.46); /* modal / dialog scrim */

  /* ---- spacing scale (px) so pages never hardcode gaps ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* additive larger steps for section rhythm (do not replace --s1..--s7) */
  --s8:64px; --s9:96px;

  /* ---- radius scale (px) ---- */
  --r1:8px; --r2:10px; --r3:12px; --r4:14px; --r5:18px;
  --r-pill:999px;   /* additive: fully rounded (chips, pills, dots) */

  /* ---- type scale (refined serif display, Inter UI, mono cite) ------------ */
  --fs-display:clamp(38px,5.4vw,60px);  /* hero display, Cormorant/Fraunces */
  --fs-h1:clamp(30px,3.6vw,42px);       /* Cormorant/Fraunces */
  --fs-h2:clamp(24px,2.6vw,30px);       /* Cormorant/Fraunces */
  --fs-h3:20px;                         /* refined serif or Inter 600 */
  --fs-h4:16.5px;                        /* Inter 600 section label */
  --fs-lead:18.5px;                      /* intro paragraph */
  --fs-body:15.5px;                      /* default body */
  --fs-sm:13.5px;                        /* secondary / captions */
  --fs-xs:12px;                          /* fine print, meta */
  --fs-mono:13.5px;                      /* citations, code, section signs */

  --lh-tight:1.12;   /* display + headings */
  --lh-snug:1.3;     /* subheads, leads */
  --lh-body:1.6;     /* running text */

  --fw-reg:400; --fw-med:500; --fw-semi:600;
  --ls-tight:0;        /* display tracking */
  --ls-eyebrow:.12em;  /* eyebrow / overline tracking */

  /* ---- elevation ---- */
  --shadow-card:0 1px 3px rgba(17,20,24,.05);
  --shadow-pop:0 8px 28px rgba(17,20,24,.10);
  --shadow-modal:0 18px 60px rgba(17,20,24,.32);
  /* additive elevation refinements (share the same green-tinted language) */
  --shadow-hair:0 0 0 1px var(--hair);           /* crisp hairline as a shadow */
  --shadow-raise:0 2px 8px rgba(17,20,24,.08);   /* hover lift for cards / buttons */
  --shadow-focus:var(--ring);                     /* alias so JS can reuse the ring */

  /* ---- the one visible focus ring every interactive element uses ---- */
  --ring:0 0 0 3px rgba(11,61,46,.30);
  --ring-strong:0 0 0 2px var(--paper),0 0 0 4px var(--g); /* AA-strong, offset */

  /* ---- motion tokens (respect the reduced-motion block at the bottom) ---- */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ---- responsive container widths ---- */
  --w-prose:64ch;   /* comfortable reading measure */
  --w-content:960px;
  --w-wide:1120px;
  --w-page:1200px;
  --gutter:clamp(16px,4vw,32px);

  /* ---- z-index scale ---- */
  --z-nav:50; --z-toast:90; --z-modal:100;

  /* ---- severity map as variables so JS reads identical values ---- */
  --sev-high-bg:#F9DAD7;   --sev-high-fg:#872618;   --sev-high-edge:#C94A3A;
  --sev-medium-bg:#F6E4C7; --sev-medium-fg:#754807; --sev-medium-edge:#C88527;
  --sev-low-bg:#F2E8C8;    --sev-low-fg:#66500C;    --sev-low-edge:#C8A15A;
}

/* ============================================================================
   JUVO BRAND TOKENS (source: brand/JUVO_brand_website_assets/03_design_system/
   juvo_design_tokens.css). Additive aliases only, nothing above is renamed or
   removed. Where a --juvo-* value already matches an existing token (--paper,
   --g, --gold, --tint, --ink) it is kept as a literal alias here so the raw
   Juvo hex values live directly in this file and pages can read either name.
   ========================================================================== */
:root{
  --juvo-ivory:#FAF8F4;      /* alias of --paper */
  --juvo-off-white:#F7F5EF;
  --juvo-stone:#EDEBE6;
  --juvo-border:#D9D4C8;
  --juvo-forest:#0B3D2E;     /* alias of --g */
  --juvo-deep-forest:#06261D;
  --juvo-green-2:#1F5B46;
  --juvo-sage:#DDE3DB;       /* alias of --tint */
  --juvo-gold:#C8A15A;       /* alias of --gold */
  --juvo-soft-gold:#E3CF9B;
  --juvo-graphite:#111418;   /* alias of --ink */
  --juvo-text:#0B2F27;
  --juvo-body:#1C1C1C;
  --juvo-muted:#6F746E;

  /* font family tokens, so pages can reference --font-display / --font-ui
     instead of repeating the family stack inline */
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  /* Juvo radius + shadow vocabulary, aliased onto the existing --r*/--shadow-*
     scale so both naming systems resolve to the same pixels */
  --radius-button:var(--r1);   /* 8px */
  --radius-card:var(--r4);     /* 14px */
  --radius-panel:var(--r5);    /* 18px */
  --shadow-soft:0 18px 45px rgba(6,38,29,.08);
}

/* ---- shared primitives so nothing re-declares per page ---- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the visible focus ring, applied to every interactive element on keyboard nav */
:focus-visible{outline:none;box-shadow:var(--ring)}
/* stronger, offset variant for elements that sit on tinted / dark fills */
.focus-strong:focus-visible{box-shadow:var(--ring-strong)}

/* ============================================================================
   TYPOGRAPHY UTILITIES
   Headlines in Cormorant Garamond/Fraunces, UI/body in Inter, citations in IBM Plex Mono.
   ========================================================================== */
.fr{font-family:'Cormorant Garamond','Fraunces',Georgia,serif}
.mn{font-family:'IBM Plex Mono',monospace}

.display,.h1,.h2,.h3{
  font-family:'Cormorant Garamond','Fraunces',Georgia,serif;
  font-weight:var(--fw-semi);
  color:var(--g);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  text-wrap:balance;
}
.display{font-size:var(--fs-display)}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-snug)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:0}
.h4{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:var(--fw-semi);
  font-size:var(--fs-h4);
  line-height:var(--lh-snug);
  color:var(--ink);
  letter-spacing:0;
}
.lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-snug);
  color:var(--ink-2);
  max-width:var(--w-prose);
}
.prose{max-width:var(--w-prose);line-height:var(--lh-body)}
.text-sm{font-size:var(--fs-sm)}
.text-xs{font-size:var(--fs-xs)}
.muted{color:var(--slate)}
.strong{font-weight:var(--fw-semi)}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold2);
}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
/* keyboard skip-link: hidden until focused, then pinned top-left */
.skip-link{
  position:absolute;left:var(--s3);top:-48px;
  z-index:calc(var(--z-nav) + 1);
  padding:var(--s2) var(--s4);
  background:var(--g);color:#fff;
  border-radius:var(--r2);
  font-weight:var(--fw-semi);
  transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{top:var(--s3)}

/* ============================================================================
   LAYOUT HELPERS  (container widths + responsive rhythm)
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--w-page);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-content{max-width:var(--w-content)}
.container-wide{max-width:var(--w-wide)}
.section{padding-block:var(--s9)}
.section-tight{padding-block:var(--s7)}
.stack > * + *{margin-top:var(--s4)}       /* vertical rhythm without inline margins */
.stack-sm > * + *{margin-top:var(--s2)}
.stack-lg > * + *{margin-top:var(--s6)}
.row{display:flex;align-items:center;gap:var(--s3)}
.row-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.grid{display:grid;gap:var(--s5)}
.hairline{height:1px;background:var(--hair);border:0}

/* ============================================================================
   ELEVATION + BORDER LANGUAGE  (cards, popovers, modals)
   ========================================================================== */
.card{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--r4);
  box-shadow:var(--shadow-card);
}
.card-pad{padding:var(--s5)}
.card-hover{transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.card-hover:hover{box-shadow:var(--shadow-raise);border-color:var(--hair-strong);transform:translateY(-1px)}
.panel{                                  /* flat framed region, no lift */
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--r3);
}
.popover{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--r3);
  box-shadow:var(--shadow-pop);
}
.modal{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--r5);
  box-shadow:var(--shadow-modal);
}
.scrim{position:fixed;inset:0;background:var(--overlay);z-index:var(--z-modal)}

/* ============================================================================
   CITATION CHIP  (the signature brand element)
   A section reference in a rounded mono chip with a hairline border and a
   verified (money-green) or flagged (amber) dot. Reuse verbatim everywhere.

   Markup:
     <span class="cite cite--verified">
       <span class="cite__dot"></span>
       <span class="cite__ref">TsMS 233 lg 1</span>
       <span class="cite__check" aria-hidden="true">verified glyph optional</span>
     </span>
   Modifiers: .cite--verified (default look) / .cite--flagged
   ========================================================================== */
.cite{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  padding:3px var(--s3) 3px var(--s2);
  font-family:'IBM Plex Mono',monospace;
  font-size:var(--fs-mono);
  line-height:1.2;
  font-weight:var(--fw-med);
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--r-pill);
  white-space:nowrap;
  vertical-align:baseline;
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.cite__dot{
  width:8px;height:8px;flex:0 0 8px;
  border-radius:var(--r-pill);
  background:var(--mg);
}
.cite__ref{letter-spacing:0}
.cite__check{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;color:var(--mg);
}
.cite__check svg{width:14px;height:14px;display:block}
a.cite,button.cite{cursor:pointer}
a.cite:hover,button.cite:hover{border-color:var(--hair-strong);background:var(--tint)}

/* verified: money-green dot + faint green tint (default emphasis) */
.cite--verified{background:var(--mg-tint);border-color:#CFEBDD}
.cite--verified .cite__dot{background:var(--mg)}
.cite--verified .cite__check{color:var(--mg)}
/* flagged / unverified: amber dot + amber tint */
.cite--flagged{background:var(--am-tint);border-color:#F0DBB6}
.cite--flagged .cite__dot{background:var(--am)}
.cite--flagged .cite__check{color:var(--am)}

/* ============================================================================
   BUTTONS  (primary green, secondary, ghost, danger + size modifiers)
   One tokenized system so pages stop re-implementing padding / radius / hover.
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--fs-body);
  font-weight:var(--fw-semi);
  line-height:1;
  padding:11px var(--s5);
  border-radius:var(--r2);
  border:1px solid transparent;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

/* primary: pine green fill */
.btn-primary{background:var(--g);border-color:var(--g);color:#fff}
.btn-primary:hover{background:var(--g2);border-color:var(--g2);box-shadow:var(--shadow-raise)}

/* secondary: white with hairline border */
.btn-secondary{background:var(--card);border-color:var(--hair-strong);color:var(--g)}
.btn-secondary:hover{background:var(--tint);border-color:var(--g)}

/* ghost: text-only, border appears on hover */
.btn-ghost{background:transparent;color:var(--g)}
.btn-ghost:hover{background:var(--tint)}

/* danger: red, destructive actions */
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-danger:hover{background:#a8351f;border-color:#a8351f;box-shadow:var(--shadow-raise)}

/* size modifiers */
.btn-sm{padding:7px var(--s4);font-size:var(--fs-sm);border-radius:var(--r1)}
.btn-lg{padding:14px var(--s6);font-size:16.5px;border-radius:var(--r3)}
.btn-block{width:100%}

/* ============================================================================
   INPUTS + FORM FIELDS
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--ink)}
.hint{font-size:var(--fs-xs);color:var(--slate)}
.input,.textarea,.select{
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--hair-strong);
  border-radius:var(--r2);
  padding:10px var(--s3);
  width:100%;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--slate)}
.input:focus,.textarea:focus,.select:focus{
  outline:none;
  border-color:var(--g);
  box-shadow:var(--ring);
}
.textarea{min-height:112px;resize:vertical;line-height:var(--lh-body)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(194,65,46,.18);
}

/* ============================================================================
   CHIPS / BADGES / PILLS  (non-citation)
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px var(--s3);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);
  line-height:1.4;
  border-radius:var(--r-pill);
  border:1px solid var(--hair);
  background:var(--card);color:var(--ink-2);
}
/* optional leading LexUI.ICONS svg inside a .badge (e.g. the "impact" badge on
   a watched document whose law changed after its last scan) */
.badge .ic{display:inline-flex;width:11px;height:11px;flex:0 0 auto}
.badge .ic svg{width:100%;height:100%;display:block}
.badge-green{background:var(--mg-tint);border-color:#CFEBDD;color:#0c6a44}
.badge-gold{background:var(--gtint);border-color:#EFE0C2;color:var(--gold2)}
.badge-amber{background:var(--am-tint);border-color:#F0DBB6;color:#7a4d08}
.badge-neutral{background:var(--tint);border-color:var(--hair);color:var(--slate)}
.pill{                            /* larger, tab-like selectable pill */
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:7px var(--s4);
  font-size:var(--fs-sm);font-weight:var(--fw-med);
  border-radius:var(--r-pill);
  border:1px solid var(--hair-strong);
  background:var(--card);color:var(--ink-2);
  cursor:pointer;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.pill:hover{border-color:var(--g);color:var(--g)}
.pill[aria-selected="true"],.pill.is-active{background:var(--g);border-color:var(--g);color:#fff}

/* ---- severity tags (read the existing --sev-* tokens) ---- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px var(--s3);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);
  line-height:1.5;
  border-radius:var(--r-pill);
  border:1px solid transparent;
}
.tag::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);background:currentColor;opacity:.9}
.tag-high{background:var(--sev-high-bg);color:var(--sev-high-fg);border-color:var(--sev-high-edge)}
.tag-medium{background:var(--sev-medium-bg);color:var(--sev-medium-fg);border-color:var(--sev-medium-edge)}
.tag-low{background:var(--sev-low-bg);color:var(--sev-low-fg);border-color:var(--sev-low-edge)}

/* ============================================================================
   TABLES
   ========================================================================== */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th,.table td{
  text-align:left;
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--hair);
  vertical-align:top;
}
.table thead th{
  font-family:'IBM Plex Mono',monospace;
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--slate);
  font-weight:var(--fw-med);
  border-bottom-color:var(--hair-strong);
}
.table tbody tr:hover{background:var(--tint)}
.table tbody tr:last-child td{border-bottom:0}
.table-card{border:1px solid var(--hair);border-radius:var(--r3);overflow:hidden}
.table-card .table th,.table-card .table td{padding-inline:var(--s4)}

/* ============================================================================
   STATE UTILITIES  (empty / loading / error) + live regions
   Pair the containers with role="status" aria-live="polite" (loading/empty)
   or role="alert" (error) so assistive tech announces the change.
   ========================================================================== */
.state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);
  text-align:center;
  padding:var(--s7) var(--s5);
  color:var(--slate);
}
.state-empty{border:1px dashed var(--hair-strong);border-radius:var(--r3);background:var(--paper)}
.state-title{font-family:'Cormorant Garamond','Fraunces',Georgia,serif;font-size:var(--fs-h3);color:var(--ink);line-height:var(--lh-snug)}
.state-error{
  border:1px solid var(--sev-high-edge);
  border-radius:var(--r3);
  background:var(--sev-high-bg);
  color:var(--sev-high-fg);
  padding:var(--s4) var(--s5);
  text-align:left;
}

/* Stable loader shared by static pages and the component kit. The centre dot
   remains visible when reduced motion is enabled; it never falls back to a
   text glyph, so loaders keep their size and alignment on every platform. */
.spinner{position:relative;display:inline-block;width:20px;height:20px;flex:0 0 20px;border:0;border-radius:50%;box-sizing:border-box;color:var(--spinner-arc,var(--g));vertical-align:-4px}
.spinner::before{content:"";position:absolute;inset:1px;border:2px solid var(--hair);border-top-color:currentColor;border-radius:50%;box-sizing:border-box;animation:lex-spin .72s linear infinite}
.spinner::after{display:none}
.spinner-lg{width:30px;height:30px;flex-basis:30px;vertical-align:-8px}
.spinner-lg::before{border-width:2.5px}
@media(prefers-reduced-motion:reduce){.spinner::before{animation:none;border-color:var(--hair);border-top-color:currentColor}}

/* skeleton shimmer */
.skeleton{
  position:relative;overflow:hidden;
  background:var(--hair);
  border-radius:var(--r1);
  min-height:12px;
}
.skeleton::after{
  content:"";position:absolute;inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shimmer 1.3s ease-in-out infinite;
}
.skeleton-text{height:12px;border-radius:var(--r-pill);margin-block:6px}
.skeleton-line{height:12px;width:100%}
.skeleton-line.short{width:60%}
.skeleton-title{height:22px;width:40%;border-radius:var(--r1)}
.skeleton-block{height:120px;width:100%;border-radius:var(--r3)}

/* ============================================================================
   MICRO-INTERACTIONS  (transition helpers, all reduced-motion-safe)
   ========================================================================== */
.transition{transition:all var(--dur-2) var(--ease)}
.transition-fast{transition:all var(--dur-1) var(--ease)}
.lift{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-raise)}
.fade-in{animation:fadeIn var(--dur-3) var(--ease-out) both}
.rise-in{animation:riseIn var(--dur-3) var(--ease-out) both}

/* ---- severity highlight marks (used by ReviewPane) ---- */
mark.sev-high{background:var(--sev-high-bg)}
mark.sev-medium{background:var(--sev-medium-bg)}
mark.sev-low{background:var(--sev-low-bg)}

/* ============================================================================
   KEYFRAMES  (shared)
   ========================================================================== */
@keyframes lex-spin{to{transform:rotate(360deg)}}
/* Compatibility for the few legacy inline loaders that still name `spin`. */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================================
   RESPONSIVE  (mobile breakpoint strategy: single 720px collapse point)
   ========================================================================== */
@media(max-width:720px){
  :root{--gutter:16px}
  .section{padding-block:var(--s7)}
  .section-tight{padding-block:var(--s6)}
  .btn-lg{padding:12px var(--s5);font-size:var(--fs-body)}
  .hide-mobile{display:none!important}
}
@media(min-width:721px){
  .hide-desktop{display:none!important}
}

/* ---- respect reduced-motion (covers every animation + transition above) ---- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}