/* ==========================================================================
   eqLend design system — LIGHT palette, conformed to the eqLend brand color
   treatments guide (Marc Boogie, 2018).

   AUTHORITATIVE PALETTE (the only permitted hues):
     Blue     #3962A4   primary
     Aqua     #3BBEB8   primary  — graphics/fills ONLY, never text on light
     Asphalt  #636871   primary
     Yellow   see TODO(brand) below — UNRESOLVED
     Ash      #EBF2F6   secondary
     White    #FFFFFF   canvas (as used by the guide's own layout)

   Every token below is either an exact brand color, white, or a documented
   lighten()/darken() derivation of one. Derivations and measured WCAG ratios
   are recorded in PALETTE.md at the theme root.

   Tokens authored in oklch to preserve the file's existing convention; the
   source hex is given in a trailing comment on every line.
   ========================================================================== */

:root {
  --radius: 0.75rem;

  /* --- brand anchors (exact) --- */
  --brand-blue: oklch(0.4993 0.1155 259.50);          /* #3962A4 Blue    */
  --brand-aqua: oklch(0.7308 0.1111 190.53);          /* #3BBEB8 Aqua    */
  --brand-asphalt: oklch(0.5161 0.0155 262.34);       /* #636871 Asphalt */
  --brand-ash: oklch(0.9570 0.0092 232.37);           /* #EBF2F6 Ash     */
  --white: oklch(1 0 0);                              /* #FFFFFF         */

  /* TODO(brand): UNRESOLVED YELLOW. The brand guide labels this swatch
     "#ECEED5" (a pale warm cream) but prints a swatch that renders as bright
     canary, approximately #FFC72C. These are entirely different colors and we
     do not know which is authoritative. Using the LABELED hex so we are
     defensibly following the written spec. Pending resolution by the brand
     owner. Every yellow usage in this file routes through this one token, so
     the decision is a one-line change. See PALETTE.md for how each usage
     reads under both candidates. */
  --brand-yellow: oklch(0.9410 0.0330 110.74);        /* #ECEED5 Yellow (labeled) */
  /* Darkened yellow for graphics that must clear 3:1 on a light surface.
     Derived FROM --brand-yellow at runtime so resolving the TODO above is a
     genuine one-line change and this follows automatically.
     TODO(brand): neither yellow candidate clears 3:1 on Ash UNDARKENED
     (cream 1.05:1, canary 1.38:1), so any yellow that must be *seen* on a
     light surface has to be darkened. Under the cream reading this resolves to
     #68695E — an olive-gray that no longer reads as yellow at all. Under the
     canary reading it resolves to #71570D — a dark gold that does. Flagged;
     see PALETTE.md. */
  --brand-yellow-graphic: color-mix(in oklab, var(--brand-yellow) 55%, black);
                                                      /* cream -> #68695E (4.92:1 on Ash) | canary -> #71570D (6.04:1) */

  /* --- surfaces --- */
  --background: oklch(1 0 0);                         /* #FFFFFF canvas            */
  --surface: oklch(0.9570 0.0092 232.37);             /* #EBF2F6 Ash, exact        */
  --card: oklch(1 0 0);                               /* #FFFFFF canvas + Ash rule */

  /* --- lines --- */
  --border: oklch(0.8693 0.0078 228.87);              /* #CFD5D8 darken(Ash,12%) — decorative rules/dividers */
  --border-control: oklch(0.6072 0.0057 228.87);      /* #7F8385 darken(Ash,46%) — form controls, 3:1 non-text */

  /* --- text --- */
  --foreground: oklch(0.5161 0.0155 262.34);          /* #636871 Asphalt, exact    */
  --foreground-strong: oklch(0.4228 0.0127 261.75);   /* #4A4E55 darken(Asphalt,25%) — <strong>/emphasis */
  --muted-foreground: oklch(0.5161 0.0155 262.34);    /* #636871 Asphalt, exact — cannot be lightened, see PALETTE.md */
  --heading: oklch(0.4993 0.1155 259.50);             /* #3962A4 Blue, exact       */

  /* --- interactive --- */
  --primary: oklch(0.4993 0.1155 259.50);             /* #3962A4 Blue, exact       */
  --primary-hover: oklch(0.4557 0.1039 259.51);       /* #325690 darken(Blue,12%)  */
  --primary-foreground: oklch(1 0 0);                 /* #FFFFFF on Blue = 6.07:1  */

  /* --- accent (Aqua) ---
     Aqua is a GRAPHICS, FILL, BORDER and ILLUSTRATION color only.
     Aqua on Ash is 2.01:1 — it can never carry text on a light surface.
     Use --accent-text wherever the old dark theme used teal type. */
  --accent: oklch(0.7308 0.1111 190.53);              /* #3BBEB8 Aqua, exact       */
  --accent-text: oklch(0.5042 0.0750 190.20);         /* #23726E darken(Aqua,40%) — 5.01:1 on Ash */
  --accent-soft: oklch(0.9596 0.0190 192.82);         /* #E4F6F5 lighten(Aqua,86%) — tint fills */

  /* --- translucent derivations (all from brand anchors) --- */
  --accent-a08: oklch(0.7308 0.1111 190.53 / 0.08);   /* Aqua 8%   */
  --accent-a15: oklch(0.7308 0.1111 190.53 / 0.15);   /* Aqua 15%  */
  --accent-a25: oklch(0.7308 0.1111 190.53 / 0.25);   /* Aqua 25%  */
  --accent-a40: oklch(0.7308 0.1111 190.53 / 0.40);   /* Aqua 40%  */
  --blue-a08: oklch(0.4993 0.1155 259.50 / 0.08);     /* Blue 8%   */
  --blue-a15: oklch(0.4993 0.1155 259.50 / 0.15);     /* Blue 15%  */
  --asphalt-a10: oklch(0.5161 0.0155 262.34 / 0.10);  /* Asphalt 10% */
  --asphalt-a20: oklch(0.5161 0.0155 262.34 / 0.20);  /* Asphalt 20% */
  --shadow-soft: oklch(0.5161 0.0155 262.34 / 0.16);  /* Asphalt 16% — light-theme shadow */
  --shadow-card: oklch(0.5161 0.0155 262.34 / 0.10);  /* Asphalt 10% */

  /* TODO(brand): NO SEMANTIC ERROR COLOR EXISTS IN THE PALETTE. The five
     authorized colors contain no red or warning hue. The previous theme used
     an unmapped dusty rose (#e6a5a5) and an oklch red for form errors. Rather
     than invent a sixth hue, error states now use --foreground-strong plus
     weight and an inline marker. This is a legibility-safe fallback but a WEAK
     error signal; a semantic error color should be added to the brand system.
     Flagged for the brand owner — see PALETTE.md. */
  --error-text: oklch(0.4228 0.0127 261.75);          /* #4A4E55 = --foreground-strong, interim */
  --error-surface: oklch(0.9570 0.0092 232.37);       /* #EBF2F6 Ash, interim */

  /* --- white scrims (canvas at alpha; hero overlay + sticky nav) --- */
  --scrim-96: oklch(1 0 0 / 0.96);                    /* #FFFFFF 96% */
  --scrim-92: oklch(1 0 0 / 0.92);                    /* #FFFFFF 92% */
  --scrim-90: oklch(1 0 0 / 0.90);                    /* #FFFFFF 90% */
  --scrim-88: oklch(1 0 0 / 0.88);                    /* #FFFFFF 88% */
  --scrim-55: oklch(1 0 0 / 0.55);                    /* #FFFFFF 55% */
  --scrim-22: oklch(1 0 0 / 0.22);                    /* #FFFFFF 22% */
  --accent-a00: oklch(0.7308 0.1111 190.53 / 0);      /* Aqua 0% — animation end stop */

  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-display: "Playfair Display", serif;
  --font-poppins: "Poppins", sans-serif;
}

* { box-sizing: border-box; }
* { border-color: var(--border); }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  /* Font smoothing: the dark build set -webkit-font-smoothing: antialiased,
     which is correct for LIGHT text on a DARK ground. On a light canvas it does
     the opposite — it thins dark glyph strokes, so a high-contrast display serif
     like Instrument Serif loses its hairlines and reads washed out and soft.
     Returning to the platform default (subpixel) restores stroke weight. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  /* No canvas wash. The dark build layered two radial gradients to lift a
     near-black page; on white they produce a grey-green cast across the upper
     right of every section, which drags down the contrast of type sitting over
     it and reads as softness. Plain canvas instead. */
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}
p { margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }

/* Hide the WP admin bar bump on staging */
html { margin-top: 0 !important; }

/* ------------------------------------------------------------------ layout */
.eq-container      { margin-inline: auto; max-width: 80rem; padding-inline: 1.5rem; }   /* max-w-7xl */
.eq-container-6xl  { margin-inline: auto; max-width: 72rem; padding-inline: 1.5rem; }
.eq-container-5xl  { margin-inline: auto; max-width: 64rem; padding-inline: 1.5rem; }
.eq-section        { padding-block: 6rem; position: relative; }
@media (min-width: 1024px) { .eq-section { padding-block: 8rem; } }
.surface-bg        { background-color: var(--surface); }
.eq-center         { text-align: center; }

/* --------------------------------------------------------------- utilities */
.eq-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--primary);
  font-weight: 500;
}
.eq-eyebrow--poppins {
  font-family: var(--font-poppins);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent-text);
}
.eq-h2 {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.15;
  color: var(--heading);
}
.eq-h2 em, .eq-italic-teal { font-style: italic; color: var(--accent-text); }
.eq-lead { margin-top: 1.25rem; font-size: 1.125rem; color: var(--muted-foreground); }
.eq-max-3xl { max-width: 48rem; }
.eq-max-2xl { max-width: 42rem; }
.eq-mx-auto { margin-inline: auto; }

.text-gradient-teal {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.glass-card {
  /* Light theme: the card must read against BOTH white and Ash sections, so it
     is opaque canvas + a hairline rather than a translucent dark pane. */
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px var(--shadow-card);
  border-radius: var(--radius);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0; transition: opacity 0.3s ease;
}
.glass-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 40px -20px var(--shadow-soft);
}
.glass-card:hover::before { opacity: 1; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.pulse-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-a40);
  animation: pulse-ring 2s infinite;
  display: inline-block;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--accent-a40); }
  70% { box-shadow: 0 0 0 8px var(--accent-a00); }
  100% { box-shadow: 0 0 0 0 var(--accent-a00); }
}

/* Retired. This was a blurred teal glow for the dark build. During the token
   purge its literal — oklch(0.7 0.09 192 / 0.18) — was mapped to --border,
   because the identical literal also defined the border token; that turned a
   soft 18% teal glow into an OPAQUE GREY radial veil covering the viewport
   (pointer-events:none, so it was invisible to hit-testing but not to the eye).
   It washed out everything beneath it. A glow has no job on a white canvas. */
.glow-radial { display: none; }

/* ---------------------------------------------------------------- buttons */
.eq-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 0.375rem; padding: 0.75rem 1.25rem;
  font-weight: 500; font-size: 1rem; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.eq-btn--primary {
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 10px 15px -3px var(--accent-a25);
}
.eq-btn--primary:hover { background: var(--primary-hover); }
.eq-btn--ghost {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
}
.eq-btn--ghost:hover { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.eq-btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.eq-btn .eq-arrow { transition: transform 0.2s ease; }
.eq-btn:hover .eq-arrow { transform: translateX(2px); }

/* -------------------------------------------------------------------- nav */
.eq-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all 0.3s ease;
  background: var(--scrim-90);
  padding-block: 1.25rem;
}
.eq-nav.scrolled {
  background: var(--scrim-90);
  border-bottom: 1px solid var(--border);
  padding-block: 0.75rem;
}
.eq-nav__inner { display: flex; align-items: center; justify-content: space-between; }
.eq-nav__logo img { height: 3rem; width: auto; display: block; border-radius: 3px; transition: height 0.3s ease; }
.eq-nav.scrolled .eq-nav__logo img { height: 2.5rem; }
.eq-nav__links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .eq-nav__links { display: flex; } .eq-nav__burger { display: none; } }
.eq-nav__link {
  font-size: 0.875rem; color: var(--muted-foreground);
  transition: color 0.2s ease; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.25rem; font-family: inherit;
}
.eq-nav__link:hover { color: var(--foreground); }
.eq-nav__dropdown { position: relative; }
.eq-nav__menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 0.5rem; display: none;
}
.eq-nav__dropdown:hover .eq-nav__menu, .eq-nav__dropdown:focus-within .eq-nav__menu { display: block; }
.eq-nav__menu-panel {
  border-radius: 0.5rem; border: 1px solid var(--border);
  background: var(--background);
  box-shadow: 0 20px 25px -5px var(--shadow-card); padding-block: 0.5rem; min-width: 220px;
}
.eq-nav__menu-panel a {
  display: block; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--muted-foreground);
  transition: color 0.2s, background 0.2s;
}
.eq-nav__menu-panel a:hover { color: var(--foreground); background: var(--surface); }
.eq-nav__burger { background: none; border: 0; color: var(--foreground); cursor: pointer; padding: 0.25rem; }
.eq-nav__mobile { display: none; border-top: 1px solid var(--border); background: var(--background); }
.eq-nav__mobile.open { display: block; }
.eq-nav__mobile-inner { padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.eq-nav__mobile-inner a { font-size: 0.875rem; color: var(--muted-foreground); }
.eq-nav__mobile-inner a:hover { color: var(--foreground); }
.eq-nav__mobile-inner .eq-btn { justify-content: center; }

/* ------------------------------------------------------------------- hero */

/* --------------------------------------------------------------- proofbar */
.eq-proofbar { border-block: 1px solid var(--border); }
.eq-proofbar__inner { padding-block: 2.5rem; }
.eq-proofbar__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .eq-proofbar__grid { grid-template-columns: repeat(3, 1fr); } }
.eq-proofbar__value { font-family: var(--font-serif); font-size: 2.5rem; color: var(--primary); line-height: 1; }
.eq-proofbar__label { margin-top: 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.eq-proofbar__divider { margin-top: 2.5rem; border-top: 1px solid var(--border); }
.eq-proofbar__quote {
  margin-top: 1rem; font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--foreground);
  max-width: 48rem; margin-inline: auto; line-height: 1.6;
}

/* --------------------------------------------- loop sections (why + LOA) */
.eq-loop-label { max-width: 300px; }
.eq-loop-label--center { margin-inline: auto; text-align: center; max-width: 360px; }
.eq-loop-label--right { text-align: right; }
.eq-loop-label .eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--accent-text); font-family: var(--font-poppins);
}
.eq-loop-label h3 {
  margin-top: 0.5rem; line-height: 1.25; color: var(--heading);
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
}
.eq-loop-label p {
  margin-top: 0.5rem; color: var(--muted-foreground); font-family: var(--font-poppins);
  font-weight: 300; font-size: 15px; line-height: 1.55;
}
.eq-loop-label p strong { color: var(--foreground-strong); font-weight: 500; }
.eq-loop-desktop { display: none; }
.eq-loop-mobile { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
@media (min-width: 1024px) {
  .eq-loop-desktop { display: block; position: relative; margin-inline: auto; max-width: 1040px; }
  .eq-loop-mobile { display: none; }
  .eq-loop-desktop .pos-left { position: absolute; top: 0; left: 0; z-index: 10; }
  .eq-loop-desktop .pos-right { position: absolute; top: 0; right: 0; z-index: 10; }
  .eq-loop-desktop .loop-svg-wrap { padding-top: 12rem; }
  .eq-loop-desktop .pos-bottom { margin-top: 2rem; display: flex; justify-content: center; }
}
.eq-loop-svg { width: 100%; height: auto; max-width: 880px; margin-inline: auto; display: block; }
.eq-why-sub, .eq-why-outro {
  color: var(--muted-foreground); font-family: var(--font-poppins); font-weight: 300; line-height: 1.65;
}
.eq-why-sub { margin-top: 1.5rem; font-size: 18px; max-width: 740px; margin-inline: auto; }
.eq-why-outro { margin-top: 4rem; font-size: 19.5px; line-height: 1.7; max-width: 880px; margin-inline: auto; }
.eq-why-sub strong, .eq-why-outro strong { color: var(--foreground-strong); font-weight: 500; }
.eq-why-outro .teal { color: var(--accent-text); font-weight: 500; }

.eq-loa { background-color: var(--surface); padding-top: 96px; padding-bottom: 88px; font-family: var(--font-poppins); position: relative; overflow: hidden; }
.eq-loa__glow {
  pointer-events: none; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, var(--accent-a08), transparent 70%);
}
.eq-loa__title {
  margin: 1.25rem auto 0; max-width: 56rem; line-height: 1.08;
  font-family: var(--font-display); font-weight: 400; color: var(--heading);
  font-size: clamp(38px, 5vw, 50px);
}
.eq-loa__title em { color: var(--accent-text); font-style: italic; }
.eq-loa__promise { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 3.5rem; }
.eq-loa__promise-line { display: inline-block; width: 56px; height: 1px; background: var(--accent); opacity: 0.45; }
.eq-loa__promise p { font-style: italic; font-family: var(--font-display); color: var(--accent-text); font-size: 21px; }
.eq-loa__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px;
  background: var(--primary); color: var(--primary-foreground); font-family: var(--font-poppins);
  font-weight: 600; font-size: 15px; padding: 16px 34px;
  transition: all 0.2s ease;
}
.eq-loa__cta:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* ---------------------------------------------------------------- modules */
.eq-cards-3 { margin-top: 4rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .eq-cards-3 { grid-template-columns: repeat(3, 1fr); } }
.eq-module { padding: 1.75rem; display: flex; flex-direction: column; }
.eq-module__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 0.5rem;
  background: var(--accent-a15); color: var(--primary);
  border: 1px solid var(--accent-a25);
}
.eq-module__icon svg { width: 20px; height: 20px; }
.eq-module__eyebrow { margin-top: 1.25rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-text); font-weight: 500; }
.eq-module h3 { margin-top: 0.25rem; font-size: 1.5rem; color: var(--foreground); }
.eq-module__body { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }
.eq-module ul { margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.eq-module li { font-size: 0.875rem; color: var(--foreground); line-height: 1.4; display: flex; gap: 0.75rem; }
.eq-module li::before {
  content: ""; margin-top: 0.375rem; flex-shrink: 0;
  width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--primary);
}

/* ------------------------------------------------------------- experience */
.eq-exp__header { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .eq-exp__header { grid-template-columns: 7fr 5fr; } }
.eq-exp__modes { display: flex; flex-direction: column; gap: 0.75rem; }
.eq-exp__mode {
  display: flex; align-items: center; gap: 1rem; border-radius: 0.75rem;
  border: 1px solid var(--border); background: var(--card);
  padding: 0.75rem 1rem;
}
.eq-exp__mode-num {
  flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
  background: var(--accent-a15); color: var(--primary);
  border: 1px solid var(--accent-a25);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 600;
}
.eq-exp__mode-t { color: var(--foreground); font-weight: 500; }
.eq-exp__mode-d { font-size: 0.875rem; color: var(--muted-foreground); }
.eq-tabs { margin-top: 4rem; }
.eq-tabs__bar { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.eq-tabs__tab {
  padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--muted-foreground); cursor: pointer; font-family: inherit;
  transition: color 0.2s ease;
}
.eq-tabs__tab:hover { color: var(--foreground); }
.eq-tabs__tab.active { color: var(--foreground); border-bottom-color: var(--primary); }
.eq-tabs__panel { display: none; margin-top: 2.5rem; }
.eq-tabs__panel.active { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .eq-tabs__panel.active { grid-template-columns: 7fr 5fr; } }
.eq-tabs__panel h3 { font-size: clamp(1.875rem, 3vw, 2.25rem); color: var(--heading); }
.eq-tabs__panel .sub { margin-top: 0.5rem; color: var(--primary); font-weight: 500; }
.eq-tabs__panel .desc { margin-top: 1rem; color: var(--muted-foreground); line-height: 1.65; }
.eq-tabs__panel ul.features { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.eq-tabs__panel ul.features li { display: flex; gap: 0.75rem; font-size: 0.875rem; color: var(--foreground); }
.eq-tabs__panel ul.features li::before {
  content: "✓"; color: var(--primary); font-weight: 700; flex-shrink: 0;
}
.eq-browser { padding: 1rem; }
.eq-browser__chrome { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.eq-browser__dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; }
.eq-browser__dot--r { background: var(--border-control); }
.eq-browser__dot--y { background: var(--brand-yellow-graphic); }
.eq-browser__dot--g { background: var(--accent); }
.eq-browser__label { margin-left: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }
.eq-browser__screen {
  aspect-ratio: 16 / 10; border-radius: 0.5rem;
  background: var(--background); border: 1px solid var(--border);
  overflow: hidden;
}
.eq-browser__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.eq-callout {
  margin-top: 4rem; border-radius: 1rem; border: 1px solid var(--accent-a40);
  background: var(--accent-a08); padding: 2rem;
}
.eq-callout .eq-eyebrow { font-weight: 600; }
.eq-callout p { margin-top: 0.75rem; color: var(--foreground); line-height: 1.65; max-width: 56rem; }

/* ---------------------------------------------------------------- pricing */
.eq-tier { border-radius: 1rem; padding: 2rem; position: relative; }
.eq-tier--featured {
  border: 2px solid var(--primary);
  background: var(--card);
  box-shadow: 0 0 60px -15px var(--shadow-soft);
}
.eq-tier__badge {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; border-radius: 9999px;
  background: var(--primary); color: var(--primary-foreground);
  padding: 0.25rem 0.75rem; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
}
/* Decorative watermark numeral only — the tier is identified by its heading
   directly beneath. Deliberately low contrast (1.48:1); exempt from WCAG 1.4.3
   as decorative, matching the original design's 10%-alpha ghost numeral. */
.eq-tier__num { font-family: var(--font-serif); font-size: 3.75rem; color: var(--border); line-height: 1; }
.eq-tier h3 { margin-top: 1rem; font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; color: var(--foreground); }
.eq-tier__price { margin-top: 1rem; font-family: var(--font-serif); font-size: 1.875rem; color: var(--primary); }
.eq-tier__note { font-size: 0.875rem; color: var(--muted-foreground); }
.eq-tier__desc { margin-top: 1.25rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }
.eq-tier .eq-btn { margin-top: 1.75rem; width: 100%; justify-content: center; font-size: 0.875rem; padding: 0.625rem 1rem; }
.eq-btn--outline {
  border: 1px solid var(--border-control); color: var(--foreground);
}
.eq-btn--outline:hover { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* -------------------------------------------------------------- ownership */
.eq-ownership { padding-block: 7rem; overflow: hidden; }
@media (min-width: 1024px) { .eq-ownership { padding-block: 9rem; } }
.eq-ownership blockquote {
  margin: 1.5rem 0 0; font-family: var(--font-serif);
  font-size: clamp(1.875rem, 4vw, 2.8rem); line-height: 1.2; color: var(--foreground);
}
.eq-ownership blockquote em { font-style: italic; color: var(--accent-text); }
.eq-ownership .after { margin-top: 2rem; color: var(--muted-foreground); }

/* ----------------------------------------------------------- testimonials */
.eq-testimonial { padding: 1.75rem; display: flex; flex-direction: column; }
.eq-testimonial__stars { display: flex; gap: 2px; color: var(--brand-yellow-graphic); }
.eq-testimonial__stars svg { width: 16px; height: 16px; fill: currentColor; }
.eq-testimonial blockquote {
  margin: 1rem 0 0; font-style: italic; color: var(--muted-foreground);
  line-height: 1.65; font-size: 15px;
}
.eq-testimonial__who { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; }
.eq-testimonial__avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: var(--accent-a15); border: 1px solid var(--accent-a25);
  color: var(--primary); display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 600;
}
.eq-testimonial__name { color: var(--foreground); font-weight: 500; font-size: 0.875rem; }
.eq-testimonial__title { font-size: 0.75rem; color: var(--muted-foreground); }

/* -------------------------------------------------------------------- cta */
.eq-cta__box {
  position: relative; overflow: hidden; border-radius: 1.5rem;
  border: 1px solid var(--border); padding: 2.5rem; text-align: center;
  background: linear-gradient(to bottom right, var(--background), var(--card));
}
@media (min-width: 768px) { .eq-cta__box { padding: 4rem; } }

/* ----------------------------------------------------------------- footer */
.eq-footer { border-top: 1px solid var(--border); background: var(--background); }
.eq-footer__inner { padding-block: 4rem; }
.eq-footer__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .eq-footer__grid { grid-template-columns: 6fr 3fr 3fr; } }
/* Footer wordmark is now the real logo asset, not CSS text. The old rule
   rendered "eq" in --primary and "Lend" in --foreground, which inverted the
   real lockup (in the logo "eq" is Aqua and "Lend" is Blue). */
.eq-footer__logo { display: inline-block; }
.eq-footer__logo img { height: 2.5rem; width: auto; display: block; }
.eq-footer__blurb { margin-top: 1rem; max-width: 28rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }
.eq-footer__head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--foreground); font-weight: 600; }
.eq-footer ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.eq-footer ul a { font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.2s; }
.eq-footer ul a:hover { color: var(--primary); }
.eq-footer__bottom {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; justify-content: space-between;
  font-size: 0.75rem; color: var(--muted-foreground);
}
@media (min-width: 768px) { .eq-footer__bottom { flex-direction: row; align-items: center; } }
.eq-footer__social { display: flex; align-items: center; gap: 1rem; }
.eq-footer__social a { color: var(--muted-foreground); transition: color 0.2s; }
.eq-footer__social a:hover { color: var(--primary); }
.eq-footer__social svg { width: 18px; height: 18px; }
.eq-footer__bottom a:hover { color: var(--primary); }

/* --------------------------------------------------- generic page content */
.eq-page { padding-top: 10rem; padding-bottom: 6rem; }
.eq-page__content { color: var(--foreground); line-height: 1.7; }
.eq-page__content h1, .eq-page__content h2, .eq-page__content h3 { color: var(--foreground); margin-top: 2rem; margin-bottom: 0.75rem; }
.eq-page__content p { margin-bottom: 1rem; }
/* Buttons carry their own colour. Without the :not(), this rule outranks
   .eq-btn--primary on specificity and paints button labels blue on a blue
   fill — invisible. */
.eq-page__content a:not([class*="eq-btn"]) { color: var(--primary); }

/* ---------------------------------------------------------- product pages */
.eq-phero { position: relative; overflow: hidden; padding-top: 8rem; padding-bottom: 5rem; }
@media (min-width: 1024px) { .eq-phero { padding-top: 10rem; padding-bottom: 7rem; } }
.eq-phero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .eq-phero__grid { grid-template-columns: 1fr 1fr; } }
.eq-phero h1 { margin-top: 1.25rem; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; color: var(--heading); }
.eq-phero h1 em { font-style: italic; color: var(--accent-text); }
.eq-phero__img { border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 25px 50px -12px var(--shadow-soft); }
.eq-phero__img img { width: 100%; height: auto; display: block; }
.eq-phero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.eq-btn--border { border: 1px solid var(--border); color: var(--foreground); font-size: 0.875rem; }
.eq-btn--border:hover { background: var(--surface); }

.eq-body { color: var(--muted-foreground); font-family: var(--font-poppins); font-weight: 300; font-size: 18px; line-height: 1.65; }
.eq-body--bright { color: var(--foreground-strong); font-weight: 500; }
.eq-body + .eq-body { margin-top: 1.25rem; }

.eq-band { border-block: 1px solid var(--border); background: var(--surface); padding-block: 6rem; }
.eq-band--tight { padding-block: 4rem; }
.eq-band h2, .eq-plain h2 { margin-top: 1rem; font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.2; color: var(--heading); }
.eq-band h2 em, .eq-plain h2 em { font-style: italic; color: var(--accent-text); }
.eq-plain { padding-block: 6rem; }
.eq-plain--tight { padding-block: 4rem; }
.eq-band .eq-body, .eq-plain .eq-body { margin-top: 1.5rem; }

.eq-close { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.4; color: var(--accent-text); }

/* numbered step timeline (task page) */
.eq-steps { margin-top: 3.5rem; position: relative; list-style: none; padding: 0; }
.eq-steps__line { position: absolute; left: 22px; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--border); display: none; }
@media (min-width: 640px) { .eq-steps__line { display: block; } }
.eq-steps li { position: relative; padding-bottom: 2.5rem; }
@media (min-width: 640px) { .eq-steps li { padding-left: 4rem; } }
.eq-steps li:last-child { padding-bottom: 0; }
.eq-steps__num {
  display: flex; align-items: center; justify-content: center;
  height: 2.75rem; width: 2.75rem; border-radius: 9999px;
  font-family: var(--font-serif); font-size: 1.125rem;
  background: var(--accent-a15); color: var(--accent-text); border: 1px solid var(--accent-a40);
}
@media (min-width: 640px) { .eq-steps__num { position: absolute; left: 0; top: 0; } }
.eq-steps__label { margin-top: 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; color: var(--accent-text); font-family: var(--font-poppins); }
@media (min-width: 640px) { .eq-steps__label { margin-top: 0; } }
.eq-steps h3 { margin-top: 0.5rem; font-size: clamp(1.5rem, 2.5vw, 1.875rem); color: var(--heading); }
.eq-steps .eq-body { margin-top: 0.75rem; max-width: 48rem; font-size: 18px; }

/* big stat (AU page) */
.eq-stat { text-align: center; }
.eq-stat__n { font-family: var(--font-serif); font-style: italic; color: var(--accent-text); font-size: 64px; line-height: 1; }
.eq-stat__l { margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--muted-foreground); font-family: var(--font-poppins); }
.eq-stats-2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 640px) { .eq-stats-2 { grid-template-columns: 1fr 1fr; } }

/* image cards (AU + POS) */
.eq-imgcards { margin-top: 4rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .eq-imgcards { grid-template-columns: repeat(3, 1fr); } }
.eq-imgcards figure { margin: 0; }
.eq-imgcards .frame { border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.eq-imgcards img { width: 100%; height: auto; display: block; }
.eq-imgcards h3 { margin-top: 1.25rem; font-family: var(--font-serif); color: var(--heading); font-size: 22px; }
.eq-imgcards .eq-body { margin-top: 0.5rem; font-size: 15px; line-height: 1.6; }

/* automation modules grid */
.eq-autogrid { margin-top: 3rem; display: grid; gap: 1.25rem; list-style: none; padding: 0; }
@media (min-width: 640px) { .eq-autogrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .eq-autogrid { grid-template-columns: repeat(3, 1fr); } }
.eq-autogrid li { border-radius: 0.5rem; border: 1px solid var(--border); background: var(--surface); padding: 1.5rem; }
.eq-autogrid .tick { height: 2.25rem; width: 2.25rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; background: var(--accent-a15); color: var(--accent-text); }
.eq-autogrid h3 { margin-top: 1rem; color: var(--heading); font-family: var(--font-poppins); font-weight: 600; font-size: 17px; line-height: 1.3; }
.eq-autogrid p { margin-top: 0.75rem; color: var(--muted-foreground); font-family: var(--font-poppins); font-weight: 300; font-size: 14.5px; line-height: 1.6; }

/* two-column prose */
.eq-2col { margin-top: 3rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .eq-2col { grid-template-columns: 1fr 1fr; } }
.eq-2col h3 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); color: var(--heading); }
.eq-2col .eq-body { margin-top: 1rem; }

/* checkmark feature list (POS) */
.eq-checklist { margin-top: 2rem; display: grid; gap: 0.75rem; list-style: none; padding: 0; }
@media (min-width: 640px) { .eq-checklist { grid-template-columns: 1fr 1fr; } }
.eq-checklist li { display: flex; gap: 0.75rem; font-size: 0.9375rem; color: var(--foreground); font-family: var(--font-poppins); font-weight: 300; line-height: 1.5; }
.eq-checklist li::before { content: "✓"; color: var(--primary); font-weight: 700; flex-shrink: 0; }

/* about timeline */
.eq-cred { margin-top: 3rem; display: grid; gap: 1.25rem; }
.eq-cred__item { display: flex; gap: 1.25rem; align-items: baseline; border-left: 2px solid var(--accent-a40); padding-left: 1.25rem; }
.eq-cred__year { font-family: var(--font-serif); font-style: italic; color: var(--accent-text); font-size: 1.5rem; white-space: nowrap; min-width: 5.5rem; }
.eq-cred__what { color: var(--foreground-strong); font-family: var(--font-poppins); font-weight: 400; font-size: 1rem; line-height: 1.6; }
.eq-cred__what small { display: block; color: var(--muted-foreground); font-weight: 300; margin-top: 0.25rem; }

/* ------------------------------------------------------------------ forms */
.eq-form { margin-top: 2.5rem; display: grid; gap: 1.25rem; text-align: left; }
.eq-form label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); font-weight: 600; display: block; margin-bottom: 0.5rem; }
.eq-form input[type="text"], .eq-form input[type="email"], .eq-form input[type="tel"], .eq-form textarea {
  width: 100%; border-radius: 0.5rem;
  border: 1px solid var(--accent-a25);
  background: var(--background);
  color: var(--foreground); font-family: var(--font-sans); font-size: 1rem;
  padding: 0.875rem 1rem; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.eq-form input:focus, .eq-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-a15);
}
.eq-form input::placeholder, .eq-form textarea::placeholder { color: var(--muted-foreground); }
.eq-form textarea { min-height: 9rem; resize: vertical; }
.eq-form .eq-btn { justify-self: start; border: 0; font-family: var(--font-sans); }
.eq-form .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.eq-form__card { border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 2.5rem; }
.eq-notice { border-radius: 0.75rem; padding: 1rem 1.25rem; font-size: 0.9375rem; margin-top: 2rem; }
.eq-notice--ok { background: var(--accent-a15); border: 1px solid var(--accent-a40); color: var(--foreground); }
.eq-notice--err { background: var(--error-surface); border: 1px solid var(--border-control); color: var(--foreground); }

/* -------------------------------------------- self-editable content layer */
/* Single responsive loop layout (replaces desktop/mobile duplicate markup) */
.eq-loop-grid { display: grid; gap: 2.5rem; grid-template-areas: "l" "r" "svg" "b"; justify-items: center; margin-top: 4rem; }
.eq-loop-grid > .area-l { grid-area: l; }
.eq-loop-grid > .area-r { grid-area: r; }
.eq-loop-grid > .area-svg { grid-area: svg; width: 100%; }
.eq-loop-grid > .area-b { grid-area: b; }
.eq-loop-grid .eq-loop-label { text-align: center; max-width: 360px; }
@media (min-width: 1024px) {
  .eq-loop-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "l r" "svg svg" "b b"; }
  .eq-loop-grid > .area-l { justify-self: start; }
  .eq-loop-grid > .area-l .eq-loop-label { text-align: left; max-width: 300px; }
  .eq-loop-grid > .area-r { justify-self: end; }
  .eq-loop-grid > .area-r .eq-loop-label { text-align: right; max-width: 300px; }
  .eq-loop-grid > .area-b { grid-column: 1 / -1; justify-self: center; }
}
.eq-loop-label p.eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-text); font-family: var(--font-poppins); }

/* Native-block equivalents of element-styled pieces */
.eq-ownership__quote { margin-top: 1.5rem; font-family: var(--font-serif); font-size: clamp(1.875rem, 4vw, 2.8rem); line-height: 1.2; color: var(--foreground); }
.eq-ownership__quote em { font-style: italic; color: var(--accent-text); }
.eq-testimonial__quote { margin-top: 1rem; font-style: italic; color: var(--muted-foreground); line-height: 1.65; font-size: 15px; }
.eq-phero .eq-body { margin-top: 1rem; }
.eq-phero h1 + .eq-body, .eq-phero .eq-eyebrow + h1 { margin-top: 1.25rem; }
.eq-band .eq-close, .eq-plain .eq-close { margin-top: 2.5rem; }

/* Width / spacing utilities for editable blocks */
.eq-maxw-680 { max-width: 680px; }
.eq-maxw-720 { max-width: 720px; }
.eq-maxw-42r { max-width: 42rem; }
.eq-maxw-48r { max-width: 48rem; }
.eq-maxw-56r { max-width: 56rem; }
.eq-mt-1r { margin-top: 1rem; }
.eq-mt-2r { margin-top: 2rem; }
.eq-mt-25r { margin-top: 2.5rem; }
.eq-mt-3r { margin-top: 3rem; }
.eq-mt-35r { margin-top: 3.5rem; }
.eq-mt-4r { margin-top: 4rem; }
.eq-pb-4r { padding-bottom: 4rem; }
.eq-pt-0 { padding-top: 0; }

/* Neutralize core group layout spacing — our classes own all spacing */
:where(.wp-block-group.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }

/* ------------------------------------------------- process flow (3 stages) */
.eq-flow { margin-top: 4rem; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .eq-flow { grid-template-columns: repeat(3, 1fr); gap: 2.75rem; } }
.eq-flow__step { position: relative; display: flex; }
.eq-flow__card { flex: 1; display: flex; flex-direction: column; padding: 2rem 1.75rem; border-radius: 1rem; }
.eq-flow__stage { display: flex; align-items: baseline; gap: 0.75rem; }
.eq-flow__num { font-family: var(--font-serif); font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--accent-text); }
.eq-flow__label { font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; color: var(--muted-foreground); }
.eq-flow__card h3 { margin: 1.25rem 0 0; font-family: var(--font-serif); color: var(--heading); font-size: 22px; line-height: 1.25; }
.eq-flow__card p { margin: 0.5rem 0 1.75rem; font-size: 15px; line-height: 1.6; color: var(--muted-foreground); }
.eq-flow__list { margin: auto 0 0; padding: 1.25rem 0 0; list-style: none; border-top: 1px solid var(--border); }
.eq-flow__list li { position: relative; padding-left: 1.1rem; font-size: 14px; line-height: 1.5; color: var(--foreground); }
.eq-flow__list li + li { margin-top: 0.625rem; }
.eq-flow__list li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.eq-flow__list strong { color: var(--accent-text); font-weight: 600; }
@media (min-width: 900px) {
  .eq-flow__step:not(:last-child)::after {
    content: ""; position: absolute; top: 3.25rem; right: -1.75rem;
    width: 0.55rem; height: 0.55rem;
    border-top: 1.5px solid var(--border); border-right: 1.5px solid var(--border);
    transform: translateX(50%) rotate(45deg);
  }
}

/* eq-steps: markup renders block-editor group divs, not <li>. The original
   selectors (.eq-steps li) never matched, so step indent and spacing were lost.
   Match both so this stays correct if the markup is ever converted to a list. */
.eq-steps > .wp-block-group,
.eq-steps > li { position: relative; padding-bottom: 3rem; }
@media (min-width: 640px) {
  .eq-steps > .wp-block-group,
  .eq-steps > li { padding-left: 4.5rem; }
}
.eq-steps > .wp-block-group:last-child,
.eq-steps > li:last-child { padding-bottom: 0; }

/* ------------------------------------------------------------ insights/blog */
.eq-posts__grid { display: grid; gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px)  { .eq-posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eq-posts__grid { grid-template-columns: repeat(3, 1fr); } }

.eq-post-card { display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; height: 100%; }
.eq-post-card__img { margin: 0; }
.eq-post-card__img img { width: 100%; height: 190px; object-fit: cover; display: block; }
.eq-post-card__body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.eq-post-card__title { margin: 0.875rem 0 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.3; }
.eq-post-card__title a { color: var(--heading); text-decoration: none; transition: color 0.2s ease; }
.eq-post-card__title a:hover { color: var(--primary); }
.eq-post-card__excerpt { margin: 0.75rem 0 0; font-size: 15px; line-height: 1.6; color: var(--muted-foreground); }
.eq-post-card__excerpt .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 0.75rem; color: var(--primary); text-decoration: none; font-size: 14px; }
.eq-post-card__excerpt .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

.eq-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
.eq-post-meta a { color: var(--primary); text-decoration: none; }
.eq-post-meta a:hover { text-decoration: underline; }

/* single article */
.eq-article { max-width: 44rem; margin-inline: auto; }
.eq-article__hero { margin: 0 auto 3rem; max-width: 56rem; }
.eq-article__hero img { width: 100%; height: auto; border-radius: 1rem; display: block; }
.eq-article > * + * { margin-top: 1.5rem; }
.eq-article p { font-size: 18px; line-height: 1.75; color: var(--foreground); }
.eq-article h2 { font-family: var(--font-serif); font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.25; color: var(--heading); margin-top: 3rem; }
.eq-article h3 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--heading); margin-top: 2.5rem; }
.eq-article a { color: var(--primary); }
.eq-article ul, .eq-article ol { padding-left: 1.25rem; color: var(--foreground); font-size: 18px; line-height: 1.75; }
.eq-article li + li { margin-top: 0.5rem; }
.eq-article blockquote { margin: 2.5rem 0; padding-left: 1.5rem; border-left: 2px solid var(--primary);
  font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.5; color: var(--foreground); }
.eq-article img { max-width: 100%; height: auto; border-radius: 0.75rem; }
.eq-article code { background: var(--accent-soft); padding: 0.15em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }

.eq-article__cta { max-width: 44rem; margin: 4rem auto 0; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.eq-article__cta .eq-body { margin-top: 0.75rem; }
.eq-article__cta .eq-phero__actions { margin-top: 1.5rem; }

/* pagination */
.eq-pagination { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding-top: 2rem; border-top: 1px solid var(--border); font-family: var(--font-poppins); font-size: 0.875rem; }
.eq-pagination a { color: var(--primary); text-decoration: none; }
.eq-pagination a:hover { text-decoration: underline; }
.eq-pagination .page-numbers { padding: 0 0.35rem; color: var(--muted-foreground); }
.eq-pagination .page-numbers.current { color: var(--foreground); font-weight: 600; }
/* post content renders inside .entry-content, so spacing must target that too */
.eq-article .entry-content > * + * { margin-top: 1.5rem; }
.eq-article .entry-content > h2 { margin-top: 3rem; }
.eq-article .entry-content > h3 { margin-top: 2.5rem; }
.eq-article .entry-content > blockquote { margin-top: 2.5rem; margin-bottom: 2.5rem; }

/* proofbar caption + feedback-loop card additions */
.eq-proofbar__caption { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.eq-loop-label .eq-flow__list { margin-top: 1.25rem; }
.eq-loop-link { margin-top: 1rem; }
.eq-loop-link a { color: var(--primary); text-decoration: none; font-family: var(--font-poppins); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; }
.eq-loop-link a:hover { text-decoration: underline; }

/* form select styling to match inputs */
.eq-form select { width: 100%; appearance: none; -webkit-appearance: none; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.7rem 2.5rem 0.7rem 0.9rem; color: var(--foreground); font-family: var(--font-sans); font-size: 0.9375rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23636871' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; }
.eq-form select:focus { outline: none; border-color: var(--primary); }
.eq-form select:invalid { color: var(--muted-foreground); }

.eq-stat__caption { margin-top: 1rem; font-size: 0.8125rem; color: var(--muted-foreground); }

/* insights subscribe */
.eq-subscribe { margin: 4rem auto 0; max-width: 44rem; padding: 2rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); }
.eq-subscribe__t { font-family: var(--font-serif); font-size: 1.375rem; color: var(--heading); }
.eq-subscribe__d { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.6; }
.eq-subscribe__err { margin-top: 0.75rem; font-size: 0.875rem; color: var(--error-text); }
.eq-subscribe__form { margin-top: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.eq-subscribe__form input[type="email"] { flex: 1; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.7rem 0.9rem; color: var(--foreground); font-family: var(--font-sans); font-size: 0.9375rem; }
.eq-subscribe__form input[type="email"]:focus { outline: none; border-color: var(--primary); }

/* positive feedback loop: figure above, three equal cards below */
.eq-loop-figure { margin-top: 3.5rem; }
.eq-loop-figure .eq-loop-svg { max-width: 720px; }
.eq-flow--loop { margin-top: 1.5rem; text-align: left; }
.eq-flow__card p strong { color: var(--foreground-strong); font-weight: 500; }
.eq-flow__card .eq-loop-link { margin: 1rem 0 0; }

/* feedback loop: heading copy left, infinity figure right */
.eq-loop-head { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .eq-loop-head { grid-template-columns: 5fr 4fr; gap: 4rem; } }
.eq-loop-head__copy { text-align: left; max-width: 36rem; }
.eq-loop-head__figure .eq-loop-svg { max-width: 100%; }
.eq-flow--loop { margin-top: 3.5rem; }
@media (max-width: 1023px) {
  .eq-loop-head__copy { text-align: center; margin-inline: auto; }
  .eq-loop-head__figure { max-width: 480px; margin-inline: auto; width: 100%; }
}

/* outro sits directly under the loop cards — needs its own breathing room.
   The .eq-why-outro margin is unreliable here (block-editor group margin reset),
   so space the container instead. */
.eq-flow--loop { margin-bottom: 0; }
.eq-flow--loop + .wp-block-group { margin-top: 5rem; padding-top: 0; }
.eq-flow--loop + .wp-block-group .eq-why-outro { margin-top: 0; }

/* ==========================================================================
   HERO — clean split. No tint, no scrim, no text-shadow.

   Text sits on the white canvas and never overlaps the photograph, so nothing
   has to be washed out to keep it legible: Blue on #FFFFFF = 6.07:1, flat.
   The image occupies the right side at full fidelity.

   The shipped asset was pre-dimmed for a dark backdrop (max channel 178, p99
   159) which made the laptop's eqLend branding look muddy on a light page.
   eqlend-cover-light.jpg is the same frame with levels restored (0.5/99.5
   percentile stretch, +6% contrast, +15% saturation) so the logo reads clearly.
   Remaining softness in the background is the photograph's own depth of field.
   ========================================================================== */

/* Image panel: right side only, no overlap with the copy. */

/* Crisp type on canvas — no shadow, no halo, no blur. */

/* Nav: solid canvas, no backdrop blur. */
.eq-nav { background: var(--background); }
.eq-nav.scrolled { background: var(--background); border-bottom: 1px solid var(--border); }

/* ==========================================================================
   Positive Feedback Loop — the infinity figure.
   The inline SVG was authored for the dark build: its animated highlight stroke
   is a bright teal (oklch(0.88 0.13 192)) that is effectively invisible on Ash,
   so the existing stroke-dashoffset animation has been running unseen.
   Recolour via CSS (the inline <animate> keeps driving it) and pulse the three
   nodes so the cycle plainly reads as motion.
   ========================================================================== */
.eq-loop-svg path { stroke: var(--accent) !important; }
.eq-loop-svg path + path { stroke: var(--primary) !important; stroke-width: 4; }
.eq-loop-svg circle { fill: var(--accent); }
.eq-loop-svg g circle:first-child { fill: var(--accent-a25); }
.eq-loop-svg g circle:last-child {
  fill: var(--primary);
  animation: eq-node-pulse 2.6s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.eq-loop-svg g:nth-of-type(2) circle:last-child { animation-delay: 0.85s; }
.eq-loop-svg g:nth-of-type(3) circle:last-child { animation-delay: 1.7s; }
@keyframes eq-node-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .eq-loop-svg g circle:last-child { animation: none; }
}

/* ==========================================================================
   HERO — full-bleed photograph, white type on the left. Matches the reference
   treatment (and the shipped asset, which was pre-dimmed precisely for this).

   Measured on eqlend-cover.jpg, text region (left 45%):
     mean backdrop #7A7673  -> white text 4.50:1  (right on the AA floor)
     brightest 5%  #9E9E9E  -> white text 2.68:1  (fails on its own)
   Note the region must be sampled from the COVER-CROPPED area actually shown,
   not from the raw file — the crop reveals the bright window, not the desk.
   A 52% scrim on the left puts the worst case at 8.19:1 and the mean at 11.15:1,
   which is what the reference treatment does too: its left side is markedly
   dark. White type then clears AA everywhere it sits, with headroom. The scrim is a flat
   darkening of the photo, not a blur, and it clears entirely by 62% so the
   laptop and the eqLend screen stay at full brightness.

   Headline is set in the sans at 700 rather than the display serif: the serif's
   hairlines are what read as "soft" at this size over a photograph.
   ========================================================================== */
.eq-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 88vh; display: flex; align-items: center;
  padding-top: 9rem; padding-bottom: 6rem;
  background: var(--background);
}
@media (min-width: 1024px) { .eq-hero { padding-top: 10rem; padding-bottom: 8rem; } }

/* Full-bleed image. */
.eq-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("../img/eqlend-cover.jpg");
  background-size: cover;
  background-position: center;
}
.eq-hero__bg img { display: none; }

/* Flat left-side darkening so white type clears AA. No blur. */
.eq-hero__overlay {
  display: block; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgb(0 0 0 / 0.52) 0%,
    rgb(0 0 0 / 0.46) 40%,
    rgb(0 0 0 / 0.22) 55%,
    rgb(0 0 0 / 0) 70%);
}
.eq-hero__fade { display: none; }

.eq-hero__content {
  position: relative; z-index: 1;
  margin-inline: auto; max-width: 80rem; padding-inline: 1.5rem;
  width: 100%; text-align: left;
}
.eq-hero__copy { max-width: 33rem; }

.eq-hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px; padding: 0.375rem 0.875rem;
  font-size: 0.75rem; font-weight: 500;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.45);
  color: var(--primary-foreground);
}
.eq-hero__title {
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.12;
  color: var(--primary-foreground);
}
.eq-hero__title em { font-style: normal; color: var(--primary-foreground); }
.eq-hero__sub {
  margin-top: 1.5rem; max-width: 33rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--primary-foreground); line-height: 1.6;
  display: block;
}
.eq-hero__sub strong { color: var(--primary-foreground); font-weight: 700; }
.eq-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; }

/* Outlined pill buttons, as in the reference. */
.eq-hero .eq-btn--primary,
.eq-hero .eq-btn--ghost {
  background: transparent;
  color: var(--primary-foreground);
  border: 1px solid rgb(255 255 255 / 0.85);
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  box-shadow: none;
}
.eq-hero .eq-btn--primary:hover,
.eq-hero .eq-btn--ghost:hover {
  background: var(--primary-foreground);
  color: var(--heading);
  border-color: var(--primary-foreground);
}

@media (max-width: 1023px) {
  .eq-hero__overlay { background: rgb(0 0 0 / 0.42); }
  .eq-hero__copy, .eq-hero__sub { max-width: none; }
}

/* Nav.
   The transparent/white treatment belongs ONLY to the front page, which is the
   only page with a photographic hero behind the bar. Every other page has a
   light canvas at the top, where white marks would be invisible. Scoped on the
   WordPress .home body class. */
.eq-nav { background: var(--background); border-bottom: 1px solid var(--border); }
.eq-nav .eq-nav__link { color: var(--muted-foreground); }
.eq-nav .eq-nav__link:hover { color: var(--heading); }
.eq-nav .eq-btn--primary { background: var(--primary); color: var(--primary-foreground); }
.eq-nav__logo {
  display: inline-block;
  background: url("../img/eqlend-logo.svg") left center / contain no-repeat;
}
.eq-nav__logo img { visibility: hidden; }

/* Front page only: bar sits over the hero photograph until scrolled. */
.home .eq-nav:not(.scrolled) { background: transparent; border-bottom: 0; }
.home .eq-nav:not(.scrolled) .eq-nav__logo { background-image: url("../img/eqlend-logo-white.svg"); }
.home .eq-nav:not(.scrolled) .eq-nav__link { color: rgb(255 255 255 / 0.92); }
.home .eq-nav:not(.scrolled) .eq-nav__link:hover { color: var(--primary-foreground); }
.home .eq-nav:not(.scrolled) .eq-btn--primary { background: var(--primary-foreground); color: var(--heading); }

/* ---------------------------------------------------------------- docs */
.eq-page__content .eq-doc-todo {
  margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: 0.5rem;
  border: 1px solid var(--border-control); border-left: 3px solid var(--accent-text);
  background: var(--surface); color: var(--foreground-strong);
  font-size: 0.9375rem; line-height: 1.6;
}
.eq-page__content .eq-doc-todo strong { color: var(--accent-text); }
.eq-doc-cards { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .eq-doc-cards { grid-template-columns: repeat(3, 1fr); } }
.eq-doc-cards a {
  display: block; height: 100%; padding: 1.25rem;
  border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.eq-doc-cards a:hover { border-color: var(--accent); box-shadow: 0 4px 12px var(--shadow-card); }
.eq-doc-cards strong { display: block; color: var(--heading); font-size: 1rem; }
.eq-doc-cards span { display: block; margin-top: 0.35rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.5; }
.eq-doc-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.eq-doc-table th, .eq-doc-table td { padding: 0.75rem 0.875rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.eq-doc-table th { background: var(--surface); color: var(--heading); font-weight: 600; }
.eq-doc-next { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: baseline; }
.eq-doc-next span { font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
.eq-doc-next a { color: var(--primary); font-weight: 500; }
.eq-doc-next a:hover { text-decoration: underline; }

/* ------------------------------------------------------- value model / ROI */
.eq-calc { font-size: 14px; }
.eq-calc .wrap { max-width: 100%; padding: 0; }
.eq-calc .disc { margin-bottom: 1.25rem; }
.eq-wp-kpis { display: grid; gap: 1rem; margin: 2rem 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .eq-wp-kpis { grid-template-columns: repeat(3, 1fr); } }
.eq-wp-kpis li { padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0.75rem; background: var(--card); }
.eq-wp-kpis .v { display: block; font-family: var(--font-serif); font-size: 2rem; line-height: 1; color: var(--heading); }
.eq-wp-kpis .l { display: block; margin-top: 0.5rem; font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }
.eq-pull { margin: 2.5rem 0; padding: 1.5rem 0 1.5rem 1.75rem; border-left: 3px solid var(--accent); }
.eq-pull blockquote { margin: 0; }
.eq-pull blockquote p { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.35; color: var(--heading); }
.eq-pull figcaption { margin-top: 0.75rem; font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }
.eq-wp-note { margin: 1.5rem 0; padding: 0.875rem 1.125rem; border-left: 3px solid var(--border-control); background: var(--surface); font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); border-radius: 0 0.5rem 0.5rem 0; }
.eq-wp-cta { margin: 2.5rem 0; padding: 1.75rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); text-align: center; }
.eq-wp-cta__t { font-family: var(--font-serif); font-size: 1.375rem; color: var(--heading); }
.eq-wp-cta__sub { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted-foreground); }
.eq-wp-cta .eq-btn { margin-top: 1.25rem; }

/* sticky result bar + capture */
.eq-calc-bar { position: sticky; bottom: 0; z-index: 30; margin-top: 2rem; padding: 0.875rem 1.25rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card); box-shadow: 0 -6px 18px var(--shadow-card); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.eq-calc-bar__figs { display: flex; flex-wrap: wrap; gap: 1.5rem; font-family: var(--font-poppins); font-size: 0.8125rem; color: var(--muted-foreground); }
.eq-calc-bar__figs b { display: block; font-family: var(--font-serif); font-size: 1.375rem; color: var(--heading); line-height: 1.1; }
.eq-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgb(0 0 0 / 0.45); }
.eq-modal.open { display: flex; }
.eq-modal__box { width: 100%; max-width: 30rem; background: var(--card); border-radius: 1rem; padding: 2rem; }
.eq-modal__box h3 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--heading); }
.eq-modal__box p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.6; }
.eq-modal__box label { display: block; margin-top: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); font-weight: 600; }
.eq-modal__box input { width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border-control); border-radius: 0.5rem; font-family: var(--font-sans); font-size: 0.9375rem; }
.eq-modal__actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: center; }
.eq-modal__close { background: none; border: 0; color: var(--muted-foreground); cursor: pointer; font-family: inherit; font-size: 0.875rem; }

/* --------------------------------------------------------- business case */
.eq-bc { max-width: 46rem; margin-inline: auto; }
.eq-bc__loading { color: var(--muted-foreground); }
.eq-bc__head { padding-bottom: 1.5rem; border-bottom: 2px solid var(--accent); }
.eq-bc__eyebrow { font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
.eq-bc h1 { margin-top: 0.75rem; font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; color: var(--heading); }
.eq-bc__sub { margin-top: 0.75rem; color: var(--muted-foreground); line-height: 1.6; }
.eq-bc__kpis { display: grid; gap: 1rem; margin: 2rem 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .eq-bc__kpis { grid-template-columns: repeat(3, 1fr); } }
.eq-bc__kpis li { padding: 1.25rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0.75rem; }
.eq-bc__kpis .v { display: block; font-family: var(--font-serif); font-size: 1.875rem; line-height: 1; color: var(--heading); }
.eq-bc__kpis .l { display: block; margin-top: 0.5rem; font-family: var(--font-poppins); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }
.eq-bc h2 { margin-top: 2.5rem; font-family: var(--font-serif); font-size: 1.5rem; color: var(--heading); }
.eq-bc p { margin-top: 0.875rem; line-height: 1.7; color: var(--foreground); }
.eq-bc__t { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: 0.9375rem; }
.eq-bc__t th, .eq-bc__t td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.eq-bc__t th { background: var(--surface); color: var(--heading); font-weight: 600; font-size: 0.8125rem; }
.eq-bc__t td + td, .eq-bc__t th + th { text-align: right; font-variant-numeric: tabular-nums; }
.eq-bc__t tr.tot td { border-top: 2px solid var(--border-control); }
.eq-bc__list { margin-top: 1rem; padding-left: 1.1rem; }
.eq-bc__list li { margin-top: 0.6rem; line-height: 1.65; color: var(--foreground); }
.eq-bc__note { margin-top: 2rem; padding: 1rem 1.25rem; border-left: 3px solid var(--border-control); background: var(--surface); border-radius: 0 0.5rem 0.5rem 0; font-size: 0.9375rem; line-height: 1.6; color: var(--muted-foreground); }
.eq-bc__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.eq-bc__foot { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--muted-foreground); }
@media print {
  .eq-nav, .eq-footer, .no-print { display: none !important; }
  .eq-page { padding-top: 0 !important; }
  .eq-bc { max-width: none; }
  .eq-bc__kpis { grid-template-columns: repeat(3, 1fr); }
  .eq-bc h2 { break-after: avoid; }
  .eq-bc__t { break-inside: avoid; }
}

/* -------------------------------------------------- homepage economics band */
.eq-econ { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .eq-econ { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.eq-econ__copy .eq-h2 { margin-top: 1rem; }
.eq-econ__copy .eq-lead + .eq-lead { margin-top: 1rem; }
.eq-econ__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.eq-econ__note { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }
.eq-econ__figs { display: grid; gap: 1rem; }
.eq-econ__fig { padding: 1.5rem 1.75rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0.75rem; background: var(--card); }
.eq-econ__fig .v { display: block; font-family: var(--font-serif); font-size: 2.25rem; line-height: 1; color: var(--heading); }
.eq-econ__fig .l { display: block; margin-top: 0.5rem; font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }
.eq-econ__src { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.55; color: var(--muted-foreground); }
.eq-proofbar__link { display: inline-block; margin-left: 0.35rem; color: var(--primary); font-weight: 500; }
.eq-proofbar__link:hover { text-decoration: underline; }

/* ------------------------------------------------ ROI calculator layout
   The tool was authored for a 1340px canvas; the default content column
   squeezes it. Give this page room, lead with the trajectory chart, and
   demote the headline figures to supporting weight — a large positive curve
   invites the reader to interrogate the model, whereas a wall of big dollar
   figures invites them to dismiss it. */
.page-roi-calculator .eq-container-5xl { max-width: 84rem; }
.page-roi-calculator .eq-page { padding-top: 7rem; padding-bottom: 4rem; }
.page-roi-calculator .eq-page__content > .eq-lead { margin-bottom: 1.5rem; }

.eq-calc-hero { margin: 0 0 1.25rem; padding: 1.75rem 1.75rem 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: 0 1px 2px var(--shadow-card); }
.eq-calc-hero__head h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--heading); text-transform: none; letter-spacing: normal; font-weight: 400; padding: 0; border: 0; }
.eq-calc-hero__head p { margin-top: 0.4rem; margin-bottom: 1rem; font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.55; }
.eq-calc-hero .chart { width: 100%; height: auto; max-height: 250px; }
.eq-calc-hero .lg { margin-top: 0.5rem; }

/* headline figures: supporting, not shouting */
.eq-calc .kpis { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.eq-calc .kpi { padding: 0.85rem 1rem; }
.eq-calc .kpi .v { font-size: 1.25rem; letter-spacing: -0.3px; color: var(--heading); }
.eq-calc .kpi .l { font-size: 9.5px; }
.eq-calc .kpi .f { font-size: 10.5px; }

/* two-column body gets the extra room */
@media (min-width: 1100px) { .eq-calc .cols { grid-template-columns: 360px 1fr; gap: 1.5rem; } }

/* Outcome comes after the tool: the reader sets their own inputs and watches the
   loop-maturity curve first, then meets the money. Leading with the result read
   as a pitch; leading with the instrument reads as an invitation. */
.eq-calc-outcome { margin-top: 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.eq-calc-outcome__lead { font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); margin-bottom: 0.75rem; }
.eq-calc-outcome .eq-calc-hero { margin-bottom: 1rem; }

/* The accent phrase wraps naturally with the headline. (A nowrap rule lived here
   for the previous three-clause headline; with the current line it orphaned the
   word "become" onto its own line.) */
@media (min-width: 1024px) { .eq-hero__copy { max-width: 36rem; } }

/* ================================================================
   EVENT-DRIVEN NARRATIVE
   Execution-loop section, chain reaction, the bridge, and the
   feedback-loop counter-rotation.
   ================================================================ */

.eq-chain { margin-top: 3rem; }
.eq-chain > li > p { margin-top: 0.5rem; }

/* Step 4 carries the entire argument: the extraction is itself the
   next event, which is what makes this a loop rather than a branch.
   Rendered with equal weight it reads as one more bullet. */
.eq-chain li.is-pivot .eq-chain__pivot {
  margin-top: 0.6rem;
  padding: 1.35rem 1.5rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 0.75rem 0.75rem 0;
  background: var(--accent-soft);
}
.eq-chain__pivot p { margin: 0; max-width: 46rem; color: var(--foreground-strong); }
.eq-chain__pivot p + p {
  margin-top: 0.7rem; font-size: 1rem; color: var(--foreground);
}
/* --accent is too light to carry white text (2.27:1). --accent-text
   is 5.67:1. Do not "brighten" this back to --accent. */
.eq-chain li.is-pivot .eq-steps__num {
  background: var(--accent-text); color: #FFFFFF; border-color: var(--accent-text);
}

.eq-pull {
  margin-top: 3.5rem; padding-left: 1.5rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.35; color: var(--foreground-strong); max-width: 46rem;
}
.eq-pull em { font-style: italic; color: var(--accent-text); }

/* The seam between the two sections. Speed is the visible benefit;
   the argument is that a linear workflow can grow a checklist but
   cannot compound a loop. */
.eq-bridge {
  margin-top: 3.5rem; border-radius: 1rem;
  border: 1px solid var(--border); background: var(--surface);
  padding: 2rem 2.25rem;
}
.eq-bridge p { margin: 0; color: var(--foreground); line-height: 1.7; max-width: 54rem; }
.eq-bridge p + p { margin-top: 1rem; }
.eq-bridge strong { color: var(--heading); font-weight: 600; }

/* Loans move forward, knowledge moves back. The loop has to be seen
   turning both ways or the headline is only a slogan. */
.eq-loop-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.75rem 1.75rem; margin-top: 0.75rem;
}
.eq-loop-legend span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-poppins); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground);
}
.eq-loop-legend i { width: 1.75rem; height: 3px; border-radius: 2px; display: inline-block; }
.eq-loop-legend .is-fwd i  { background: var(--primary); }
.eq-loop-legend .is-back i { background: var(--accent-text); }

/* .eq-loop-svg path + path already claims --primary !important for the
   forward traveller. This wins on specificity (0,2,1 vs 0,1,2). */
.eq-loop-svg path.eq-loop-back { stroke: var(--accent-text) !important; stroke-width: 3.5; }

.eq-loop-mech { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .eq-loop-mech { grid-template-columns: repeat(2, 1fr); } }
.eq-loop-mech article { padding: 1.75rem; }
.eq-loop-mech h3 { margin: 0 0 0.75rem; font-size: 1.25rem; color: var(--heading); }
.eq-loop-mech p { margin: 0; color: var(--foreground); line-height: 1.65; }
.eq-loop-mech p + p { margin-top: 0.75rem; }
.eq-loop-mech strong { color: var(--heading); font-weight: 600; }

/* Connector line as a pseudo-element: .eq-steps__line is a <span>, which
   is invalid inside the <ol> the chain uses. Same geometry (22px = centre
   of the 2.75rem marker). */
.eq-chain { position: relative; }
.eq-chain::before {
  content: ""; position: absolute; left: 22px; top: 0.5rem; bottom: 0.5rem;
  width: 1px; background: var(--border); display: none;
}
@media (min-width: 640px) { .eq-chain::before { display: block; } }

/* The hero headline is two sentences; letting sentence two start mid-line
   ("...the same path. Every rule...") loses the parallel. Break only where
   there is room for it. */
.eq-hero__title .eq-brk { display: none; }
@media (min-width: 1024px) { .eq-hero__title .eq-brk { display: inline; } }

/* Two travellers now share the figure. At full strength the base loop
   (--accent, bright teal) swallows the reverse traveller (--accent-text,
   same hue family). Fading the base makes both read. Scoped to the
   homepage figure so the loop graphic on other pages is untouched. */
.eq-loop-head__figure .eq-loop-svg > path:first-of-type { opacity: 0.4; }
/* :where(.wp-block-group.is-layout-flow) > * { margin-block: 0 } zeroes the
   outro's own margin, so the gap has to come from this side. */
.eq-loop-mech { margin-bottom: 3.5rem; }

/* The embedded calculators ship their own link and button colours. Without this
   exemption, .eq-page__content a:not([class*="eq-btn"]) (0,2,1) outranks
   .eq-scalc .btn (0,2,0) and paints a button label the same colour family as
   its own fill. That is the third time this trap has bitten - value model,
   business case, and now the calculator hand-off - so the whole component is
   scoped out rather than the one button patched. */
.eq-page__content .eq-scalc a,
.eq-page__content .eq-calc  a { color: inherit; }
.eq-page__content .eq-scalc a.btn,
.eq-page__content .eq-calc  a.btn { color: #FFFFFF; }

/* The simple calculator styles headings and spacing purely by inheritance on
   top of its own `* { margin: 0 }` reset. The .eq-page__content rules above
   are (0,1,1) and outrank that reset, which forces --foreground onto every
   heading - unreadable where the component paints its own gradient behind
   them - and reintroduces margins it deliberately zeroed. Reset the properties
   the wrapper imposes rather than chasing each symptom.
   Scoped to .eq-scalc only: .eq-calc predates this and is already verified. */
.eq-page__content .eq-scalc :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  margin-top: 0;
  margin-bottom: 0;
}
.eq-page__content .eq-scalc p { margin-bottom: 0; }