/* =====================================================================
   LeadsNimble Terms of Service — the long-form legal page (lnew-terms).

   A port of the TextCRM reference's Terms & Conditions widget
   (textcrm-elementor-widgets/assets/css/terms-conditions.css), re-skinned
   onto THIS project's design system. The reference is dark-locked on a
   #0b1326 surface with a #42c67a green accent, Space Grotesk + Manrope
   type and an Instrument-Serif italic heading accent. None of that is on
   this site any more, so every value below is the aurora-nightfall system
   as resolved in lnew-faq.css / blog.css / blog-detail.css:

     type      DM Sans (body) + Parkinsans (headings), never a serif
     accent    linear-gradient(100deg, #6366f1 0%, #a855f7 52%, #22d3ee 100%)
     light     bg #dde2f4 · ink #12122a · body #454a63 · muted #6b7089
     dark      bg #0a0a12 · ink #f5f6ff · body #b8bed6 · muted #949bbb
     surface   #ffffff / rgba(255,255,255,.045) glass in dark
     line      #e7e9f4 / rgba(255,255,255,.10) in dark
     eyebrow   the dim indicator-lamp pill (5.2s lit/unlit cycle)
     card      radius 24px, 0 18px 34px -16px rgba(20,20,55,.34)

   LIGHT is the default mode and [data-mode="dark"] flips the palette — the
   same switch the nav writes, matching every other widget here. The widget
   carries no toggle of its own, deliberately: this system flips site-wide.

   Section rhythm is the family's own, shared with lnew-faq.css / blog.css:
     section  112px block padding (84 / 64 / 54 at 1040 / 760 / 460)
     wrap     1360px max-width, 28px gutter (24 / 20 / 16)
     head     56px bottom margin (44 / 34 / 28), centred

   STRUCTURE is the reference's, unchanged — a centred hero header
   (eyebrow badge → two-tone H1 → "Last Updated" pill → intro paragraphs)
   over ONE content card holding an optional two-column Table of Contents
   and a stack of numbered sections (number pill + icon chip + title +
   author prose). Only the skin moved.

   No extra top padding to clear the header: the site's .lnew-nav2 is
   `position: sticky`, so it occupies layout space rather than overlaying
   the page (the floating-pill .lnew-nav is what would need an offset).

   Nothing here is ever hidden by CSS. The entrance reveal is applied by
   lnew-terms.js through GSAP only — so without JS, without GSAP, or under
   reduced motion the legal copy renders finished, readable and indexable.
   The [data-anim*] / [data-lnt-parallax] hooks and the .lnew-has-gsap class
   are lnew-terms.js's contract — do not rename them.
   ===================================================================== */

/* Local reset. Wrapped in :where() so it carries ZERO specificity — see
   [[nav-widget-feature]] for the four cascade traps this avoids. Do not
   unwrap: a bare `.lnew-terms svg {}` is (0,1,1) and would outrank the
   component rules it is meant to sit under. */
.lnew-terms, .lnew-terms *, .lnew-terms *::before, .lnew-terms *::after { box-sizing: border-box; }
:where(.lnew-terms) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-terms) :where(p) { margin: 0; }
:where(.lnew-terms) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-terms) :where(li) { margin: 0; }
:where(.lnew-terms) :where(svg) { display: block; }
:where(.lnew-terms) :where(h1, h2, h3, h4, h5, h6) { margin: 0; }
:where(.lnew-terms) :where(img) { max-width: 100%; }

/* THE `hidden` GUARD. A UA's `[hidden] { display: none }` carries ZERO
   specificity, so any `display: flex` / `inline-flex` / `grid` in this file
   out-ranks it and an element hidden by attribute would stay visible. */
.lnew-terms [hidden] { display: none !important; }

.lnew-terms {
  /* ---- motion ---- */
  --lnt-ease: cubic-bezier(.16, 1, .3, 1);
  --lnt-dur-fast: .2s;
  --lnt-dur-base: .3s;

  /* ---- geometry ----
     The section's block padding is a TOKEN, not a property, so the
     responsive breakpoints below and the Elementor control both write the
     same thing. Emitting `padding-top` from a control would produce
     (0,2,0) CSS that silently kills every media query in this file — see
     [[elementor-control-css-beats-media-queries]]. */
  --lnt-pad-top: 112px;
  --lnt-pad-btm: 112px;
  --lnt-maxw: 1360px;
  --lnt-gutter: 28px;
  --lnt-head-maxw: 760px;
  --lnt-card-maxw: 920px;
  --lnt-card-pad: clamp(1.75rem, 3.5vw, 3.25rem);

  --lnt-title-size: clamp(2.125rem, 1.2rem + 3vw, 3.25rem);   /* 34 → 52px */
  --lnt-intro-size: clamp(1rem, .92rem + .4vw, 1.125rem);     /* 16 → 18px */
  --lnt-sec-title-size: 1.375rem;                             /* 22px */
  --lnt-body-size: 16px;
  --lnt-body-lh: 1.7;

  --lnt-radius-card: 24px;
  --lnt-radius-lg: 16px;
  --lnt-radius-md: 12px;
  --lnt-radius-sm: 8px;
  --lnt-radius-pill: 100px;

  /* Anchor landing clearance. The header is sticky (in flow), so this is
     just breathing room above a jumped-to section, not a pinned-bar offset. */
  --lnt-anchor-offset: 28px;

  /* ---- type ---- */
  --lnt-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lnt-font-head: 'Parkinsans', 'DM Sans', sans-serif;

  /* ---- palette · LIGHT (the site's default mode) ---- */
  --lnt-bg: #dde2f4;
  --lnt-ink: #12122a;
  --lnt-body: #454a63;
  --lnt-muted: #6b7089;

  --lnt-eyebrow-bg: #eef0ff;
  --lnt-eyebrow-ink: #5b46e0;
  --lnt-eyebrow-border: #e0e3ff;

  --lnt-grad-1: #6366f1;
  --lnt-grad-2: #a855f7;
  --lnt-grad-3: #22d3ee;
  --lnt-accent-grad: linear-gradient(100deg, var(--lnt-grad-1) 0%, var(--lnt-grad-2) 52%, var(--lnt-grad-3) 100%);
  --lnt-accent: #6d5cf5;
  --lnt-accent-ink: #ffffff;              /* text/glyphs ON the gradient fill */
  --lnt-accent-halo: rgba(139,124,255,.28);
  --lnt-accent-tint: #eef0ff;             /* icon chip + "last updated" pill */
  --lnt-accent-soft: #f4f5fd;             /* TOC wash */

  --lnt-surface: #ffffff;
  --lnt-line: #e7e9f4;
  --lnt-divider: #e7e9f4;
  --lnt-dot: rgba(20,22,40,.05);
  --lnt-card-shadow: 0 18px 34px -16px rgba(20,20,55,.34);
  --lnt-chip-shadow: 0 6px 16px -8px var(--lnt-accent-halo);
  --lnt-glass-hi: transparent;
  --lnt-blur: none;

  /* Background spotlight glows — the aurora accents, same as blog.css. */
  --lnt-glow-1: color-mix(in srgb, var(--lnt-grad-1) 20%, transparent);
  --lnt-glow-2: color-mix(in srgb, var(--lnt-grad-3) 18%, transparent);
  --lnt-glow-opacity: .5;

  position: relative;
  width: 100%;
  overflow-x: clip;
  isolation: isolate;
  padding-top: var(--lnt-pad-top);
  padding-bottom: var(--lnt-pad-btm);
  background: var(--lnt-bg);
  font-family: var(--lnt-font-sans);
  color: var(--lnt-body);
  font-size: 17px;
  /* Stated on purpose: dropped into a real theme, an ancestor
     `body { font-weight: 300 }` (a real Twenty Twenty-Five rule) would win
     by inheritance for every run of text here that has no weight of its own.
     Same reason letter-spacing and text-wrap are pinned below. */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- palette · DARK ([data-mode="dark"] on <html>, written by the nav) ----
   The aurora dark tokens, plus the theme's glassmorphism treatment for the
   raised surfaces (translucent fill + backdrop blur + an inset highlight
   instead of the flat light shadow), same as lnew-faq.css / blog.css. */
[data-mode="dark"] .lnew-terms {
  --lnt-bg: #0a0a12;
  --lnt-ink: #f5f6ff;
  --lnt-body: #b8bed6;
  --lnt-muted: #949bbb;

  --lnt-eyebrow-bg: rgba(255,255,255,.05);
  --lnt-eyebrow-ink: #cdc6ff;
  --lnt-eyebrow-border: rgba(255,255,255,.12);

  --lnt-accent: #8b7cff;
  --lnt-accent-tint: rgba(255,255,255,.05);
  --lnt-accent-soft: rgba(255,255,255,.03);

  --lnt-surface: rgba(255,255,255,.045);
  --lnt-line: rgba(255,255,255,.10);
  --lnt-divider: rgba(255,255,255,.12);
  --lnt-dot: rgba(255,255,255,.06);
  --lnt-card-shadow: 0 18px 34px -16px rgba(0,0,0,.5);
  --lnt-glass-hi: rgba(255,255,255,.10);
  --lnt-blur: blur(14px);

  --lnt-glow-opacity: .38;
}

/* =====================================================================
   Background — two blurred aura glows (parallaxed by lnew-terms.js via
   [data-lnt-parallax]) plus a faint dot grid masked to the masthead zone.
   ===================================================================== */
.lnew-terms__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.lnew-terms__aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--lnt-glow-opacity);
  pointer-events: none;
  will-change: transform;
}
/* Centred with `left: calc(50% - half)`, NOT `translate(-50%)`: the parallax
   in lnew-terms.js drives `transform` via GSAP quickTo, so a transform used
   for layout here would be overwritten on the first pointer move. The
   overflow that a fixed 900px causes on a phone is clipped by __bg. */
.lnew-terms__aura--1 {
  top: -180px;
  left: calc(50% - 450px);
  width: 900px;
  height: 520px;
  background: radial-gradient(closest-side, var(--lnt-glow-1), transparent 78%);
}
/* Anchored in px, NOT a %: a legal page can be very tall, and a percentage
   would drift this glow far down the document instead of holding the
   spotlight zone around the title and the top of the card. */
.lnew-terms__aura--2 {
  top: 420px;
  right: -8%;
  width: 560px;
  height: 460px;
  background: radial-gradient(closest-side, var(--lnt-glow-2), transparent 78%);
}
.lnew-terms__dots {
  position: absolute;
  inset: 0;
  opacity: .6;
  background-image: radial-gradient(var(--lnt-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 85% 45% at 50% 4%, #000 0%, transparent 76%);
          mask-image: radial-gradient(ellipse 85% 45% at 50% 4%, #000 0%, transparent 76%);
}

/* =====================================================================
   Layout shell
   ===================================================================== */
.lnew-terms__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--lnt-maxw);
  margin-inline: auto;
  padding-inline: var(--lnt-gutter);
}

.lnew-terms__head {
  max-width: var(--lnt-head-maxw);
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: center;
}

/* =====================================================================
   Eyebrow — the dim indicator lamp. Kept dim on purpose: a continuous sine
   pulse reads as decoration, a lit/unlit cycle reads as a status light.
   Metrics and keyframes are lnew-faq.css's, to the pixel.
   ===================================================================== */
.lnew-terms__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--lnt-font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--lnt-eyebrow-ink);
  background: var(--lnt-eyebrow-bg);
  border: 1px solid var(--lnt-eyebrow-border);
  padding: 7px 14px; border-radius: var(--lnt-radius-pill);
}
.lnew-terms__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnt-accent);
  box-shadow: 0 0 0 4px var(--lnt-accent-halo);
  opacity: .45;
  animation: lnt-dot-lamp 5.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lnt-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--lnt-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--lnt-accent-halo), 0 0 7px 1px var(--lnt-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--lnt-accent-halo), 0 0 7px 1px var(--lnt-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnt-accent-halo), 0 0 0 0 transparent; }
}
/* The reference's icon-in-badge, kept as an option alongside the lamp. */
.lnew-terms__eyebrow-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--lnt-accent);
  flex-shrink: 0;
}
.lnew-terms__eyebrow-icon svg { width: 14px; height: 14px; }

/* =====================================================================
   Title + "Last Updated" + intro
   ===================================================================== */
.lnew-terms .lnew-terms__title {
  font-family: var(--lnt-font-head);
  font-weight: 500;
  font-size: var(--lnt-title-size);
  margin-top: 18px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lnt-ink);
  text-wrap: balance;
}
/* The accent phrase — the family signature: the three-stop aurora gradient
   clipped to the text. NOT an italic serif; nothing on this site uses one. */
.lnew-terms__accent {
  background: var(--lnt-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lnew-terms__updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 14px 6px 11px;
  background: var(--lnt-accent-tint);
  border: 1px solid var(--lnt-eyebrow-border);
  border-radius: var(--lnt-radius-pill);
  color: var(--lnt-eyebrow-ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1;
}
.lnew-terms__updated-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnt-accent);
  box-shadow: 0 0 0 3px var(--lnt-accent-halo);
  flex-shrink: 0;
}
.lnew-terms__updated-label { opacity: .85; }
.lnew-terms__updated-date  { font-weight: 700; }

.lnew-terms .lnew-terms__intro {
  margin-top: 20px;
  font-size: var(--lnt-intro-size);
  line-height: 1.65;
  color: var(--lnt-muted);
  text-wrap: pretty;
}
/* Same colour as the first intro, NOT the --lnt-subtle step the reference
   uses. Subtle is a caption tone: at #949bbb on the #dde2f4 light surface it
   lands near 2:1 contrast, and this paragraph is body copy on a legal page.
   The visual step is the margin, not a drop in legibility. */
.lnew-terms .lnew-terms__intro--secondary {
  margin-top: 12px;
}

/* =====================================================================
   The content card — one surface panel carrying the whole document.
   `overflow: hidden` clips the gradient top strip and the corner dot halo
   to the radius; nothing inside it is sticky, so it costs nothing.
   ===================================================================== */
.lnew-terms__card {
  position: relative;
  width: 100%;
  max-width: var(--lnt-card-maxw);
  margin-inline: auto;
  padding: var(--lnt-card-pad);
  background: var(--lnt-surface);
  border: 1px solid var(--lnt-line);
  border-radius: var(--lnt-radius-card);
  box-shadow: var(--lnt-card-shadow), inset 0 1px 0 var(--lnt-glass-hi);
  -webkit-backdrop-filter: var(--lnt-blur);
          backdrop-filter: var(--lnt-blur);
  overflow: hidden;
}
/* Brand top strip — opt-in via the Decorations control. */
.lnew-terms--accent .lnew-terms__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lnt-accent-grad);
  z-index: 1;
}
/* Dotted corner halo, faded diagonally away from the top-right corner. */
.lnew-terms__card::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  width: 220px;
  height: 220px;
  background-image: radial-gradient(circle at 1.5px 1.5px, color-mix(in srgb, var(--lnt-grad-1) 22%, transparent) 1px, transparent 0);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(225deg, #000 0%, transparent 70%);
  pointer-events: none;
  opacity: .6;
  z-index: 0;
}

/* =====================================================================
   Table of Contents
   ===================================================================== */
.lnew-terms__toc {
  position: relative;
  z-index: 1;
  background: var(--lnt-accent-soft);
  border: 1px solid var(--lnt-line);
  border-radius: var(--lnt-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: clamp(2rem, 3vw, 3rem);
  overflow: hidden;
}
.lnew-terms__toc::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 3px;
  height: 28px;
  background: var(--lnt-accent-grad);
  border-radius: 0 2px 2px 0;
}
.lnew-terms .lnew-terms__toc-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lnt-font-head);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lnt-ink);
  margin-bottom: 1rem;
}
.lnew-terms__toc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--lnt-accent-ink);
  background: var(--lnt-accent-grad);
  border-radius: var(--lnt-radius-sm);
  box-shadow: var(--lnt-chip-shadow);
  flex-shrink: 0;
}
.lnew-terms__toc-icon svg { width: 13px; height: 13px; }

.lnew-terms__toc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}
.lnew-terms__toc-item { font-size: 14px; }
.lnew-terms .lnew-terms__toc-link,
.lnew-terms a.lnew-terms__toc-link {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  color: var(--lnt-body);
  font-weight: 500;
  transition: color var(--lnt-dur-fast) var(--lnt-ease),
              transform var(--lnt-dur-fast) var(--lnt-ease);
}
.lnew-terms .lnew-terms__toc-link:hover,
.lnew-terms .lnew-terms__toc-link:focus-visible {
  color: var(--lnt-accent);
  transform: translateX(2px);
}
.lnew-terms .lnew-terms__toc-link:hover .lnew-terms__toc-label,
.lnew-terms .lnew-terms__toc-link:focus-visible .lnew-terms__toc-label {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lnew-terms__toc-num {
  color: var(--lnt-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -.01em;
  flex-shrink: 0;
}

/* =====================================================================
   Sections — numbered articles separated by a dashed rule
   ===================================================================== */
.lnew-terms__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}
.lnew-terms__section { scroll-margin-top: var(--lnt-anchor-offset); }
.lnew-terms__section + .lnew-terms__section {
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px dashed var(--lnt-divider);
}

.lnew-terms__sec-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.25rem;
}
.lnew-terms__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 28px;
  padding: 0 10px;
  background: var(--lnt-accent-grad);
  color: var(--lnt-accent-ink);
  border-radius: var(--lnt-radius-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--lnt-chip-shadow);
  flex-shrink: 0;
}
.lnew-terms__sec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--lnt-accent);
  background: var(--lnt-accent-tint);
  border: 1px solid var(--lnt-line);
  border-radius: var(--lnt-radius-md);
  flex-shrink: 0;
  transition: transform .25s var(--lnt-ease);
}
.lnew-terms__sec-icon svg { width: 18px; height: 18px; }
.lnew-terms__section:hover .lnew-terms__sec-icon { transform: scale(1.05) rotate(-3deg); }

.lnew-terms .lnew-terms__sec-title {
  font-family: var(--lnt-font-head);
  font-size: var(--lnt-sec-title-size);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--lnt-ink);
  flex: 1 1 280px;
  min-width: 0;
}

/* =====================================================================
   Author prose. Everything below is scoped to __body so it only ever
   touches WYSIWYG output, never the widget's own chrome.
   ===================================================================== */
.lnew-terms__body {
  color: var(--lnt-body);
  font-size: var(--lnt-body-size);
  line-height: var(--lnt-body-lh);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.lnew-terms__body > *              { max-width: 100%; }
.lnew-terms__body > *:first-child  { margin-top: 0; }
.lnew-terms__body > *:last-child   { margin-bottom: 0; }
.lnew-terms__body p { margin: 0 0 1rem; }

/* In-body headings */
.lnew-terms__body h2,
.lnew-terms__body h3,
.lnew-terms__body h4,
.lnew-terms__body h5,
.lnew-terms__body h6 {
  font-family: var(--lnt-font-head);
  color: var(--lnt-ink);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 1.5rem 0 .75rem;
}
.lnew-terms__body h2 { font-size: 1.25rem; }
/* The gradient bullet-dot heading — the reference's signature for a
   sub-heading inside a policy section. The dot is absolutely positioned
   rather than a flex child: an empty 6px box has no useful baseline, and
   a flex row would drag the dot to the vertical middle of a heading that
   wraps to two lines instead of leaving it on the first. */
.lnew-terms__body h3 {
  position: relative;
  font-size: 1.0625rem;
  padding-left: 17px;
}
.lnew-terms__body h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lnt-accent-grad);
  box-shadow: 0 0 0 3px var(--lnt-accent-halo);
}
.lnew-terms__body h4 { font-size: 1rem; }
.lnew-terms__body h5,
.lnew-terms__body h6 {
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lnt-muted);
}

/* Lists — gradient custom bullets on ul, accent markers on ol */
.lnew-terms__body ul,
.lnew-terms__body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.lnew-terms__body ul { list-style: none; padding-left: 0; }
.lnew-terms__body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin: 6px 0;
}
.lnew-terms__body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lnt-accent-grad);
}
.lnew-terms__body ol { list-style: decimal; }
.lnew-terms__body ol li { margin: 6px 0; padding-left: 4px; }
.lnew-terms__body ol li::marker { color: var(--lnt-accent); font-weight: 800; }
.lnew-terms__body ul ul,
.lnew-terms__body ul ol,
.lnew-terms__body ol ul,
.lnew-terms__body ol ol { margin-bottom: 0; }

.lnew-terms__body strong,
.lnew-terms__body b { color: var(--lnt-ink); font-weight: 700; }
.lnew-terms__body em,
.lnew-terms__body i { font-style: italic; }

/* Inline links — the family's animated underline */
.lnew-terms__body a {
  color: var(--lnt-accent);
  font-weight: 600;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size var(--lnt-dur-fast) var(--lnt-ease);
  overflow-wrap: break-word;
}
.lnew-terms__body a:hover,
.lnew-terms__body a:focus-visible { background-size: 100% 2px; }

.lnew-terms__body blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--lnt-accent);
  border-radius: 0 var(--lnt-radius-md) var(--lnt-radius-md) 0;
  background: var(--lnt-accent-soft);
  color: var(--lnt-ink);
}
.lnew-terms__body blockquote p:last-child { margin-bottom: 0; }
.lnew-terms__body hr {
  border: 0;
  border-top: 1px dashed var(--lnt-divider);
  margin: 1.5rem 0;
}
.lnew-terms__body code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: .88em;
  padding: 2px 7px;
  background: var(--lnt-accent-tint);
  color: var(--lnt-eyebrow-ink);
  border: 1px solid var(--lnt-line);
  border-radius: var(--lnt-radius-sm);
  font-weight: 600;
}
.lnew-terms__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: .9375rem;
}
.lnew-terms__body th,
.lnew-terms__body td {
  border: 1px solid var(--lnt-line);
  padding: 10px 12px;
  text-align: left;
}
.lnew-terms__body th { color: var(--lnt-ink); font-weight: 700; }

/* Keyboard focus — one visible ring for every interactive element here. */
.lnew-terms a:focus-visible {
  outline: 2px solid var(--lnt-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =====================================================================
   Responsive — the family's own steps (1040 / 760 / 460), plus the two
   the card itself needs (900 for the TOC columns, 720 for the section head).
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-terms { --lnt-gutter: 24px; --lnt-pad-top: 84px; --lnt-pad-btm: 84px; }
  .lnew-terms__head { margin-bottom: 44px; }
}

@media (max-width: 900px) {
  .lnew-terms__toc-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .lnew-terms {
    --lnt-gutter: 20px;
    --lnt-pad-top: 64px;
    --lnt-pad-btm: 64px;
    --lnt-radius-card: 18px;
    --lnt-sec-title-size: 1.25rem;
  }
  .lnew-terms__head { margin-bottom: 34px; }
  .lnew-terms__card::after { width: 160px; height: 160px; }
  .lnew-terms .lnew-terms__sec-title { flex-basis: 100%; }
  .lnew-terms__sec-icon { width: 34px; height: 34px; }
  .lnew-terms__sec-icon svg { width: 16px; height: 16px; }
}

@media (max-width: 460px) {
  .lnew-terms {
    --lnt-gutter: 16px;
    --lnt-pad-top: 54px;
    --lnt-pad-btm: 54px;
    --lnt-card-pad: 1.25rem;
    --lnt-body-size: 15px;
  }
  .lnew-terms__head { margin-bottom: 28px; }
  .lnew-terms__toc { padding: 1rem; }
  .lnew-terms__updated { font-size: 11.5px; padding: 5px 12px 5px 10px; }
  .lnew-terms__updated-label { display: none; }
  .lnew-terms__num { min-width: 34px; height: 26px; font-size: 11px; }
  .lnew-terms__sec-head { gap: 10px; }
}

/* =====================================================================
   Reduced motion. The entrance reveal is GSAP-only and lnew-terms.js
   already opts out under this query, so all that is left here is the
   idle lamp and the two hover transforms.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lnew-terms__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-terms .lnew-terms__toc-link:hover,
  .lnew-terms .lnew-terms__toc-link:focus-visible { transform: none; }
  .lnew-terms__section:hover .lnew-terms__sec-icon { transform: none; }
  .lnew-terms__sec-icon,
  .lnew-terms .lnew-terms__toc-link,
  .lnew-terms__body a { transition: none; }
}

/* In the Elementor editor the reveal must never leave anything hidden —
   an author has to see what they are editing the moment it renders. */
.elementor-editor-active .lnew-terms [data-anim],
.elementor-editor-active .lnew-terms [data-anim-item] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}