/* Ehsan Lab UI — generated from the design preview (redesign/preview-home.html), scoped to body.ehl-page. */

/* ------------------------------------------------------------------ tokens */
body.ehl-page {
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: 1240px;
}
/* Light: a cool off-white page, ink text, the brand's own blue
   (#1B6EF3, from the logo) with a mint signal colour for "secure". */
body.ehl-page .sec, body.ehl-page .sec.tone-light {
  --bg: #f7f8fb;
  --bg-alt: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f2f5f9;
  --line: #e2e7ee;
  --line-strong: #cbd3de;
  --text: #0a1222;
  --muted: #536073;
  --accent: #1b6ef3;
  --accent-2: #0aa88f;
  --accent-ink: #ffffff;
  --ok: #0f9f78;
  --warn: #e8890c;
  --glow: rgba(27, 110, 243, .18);
  --spot: rgba(27, 110, 243, .09);
  --grid: rgba(10, 18, 34, .05);
  --net: 27, 110, 243;
  --shadow: 0 1px 2px rgba(10, 18, 34, .04), 0 14px 34px -14px rgba(10, 18, 34, .14);
  --glass: rgba(247, 248, 251, .8);
}
/* Dark: deep ink, a brighter brand blue and the mint at full strength.
   The footer is always dark. */
body.ehl-dark .sec, body.ehl-page .sec.always-dark, body.ehl-page .sec.tone-dark {
  --bg: #060a12;
  --bg-alt: #0a101c;
  --surface: rgba(140, 170, 255, .04);
  --surface-2: rgba(140, 170, 255, .07);
  --line: rgba(150, 170, 210, .14);
  --line-strong: rgba(150, 170, 210, .26);
  --text: #eaf0fa;
  --muted: #8f9db3;
  --accent: #3a86ff;
  --accent-2: #1fe0c0;
  --accent-ink: #ffffff;
  --ok: #2fd8a8;
  --warn: #ffb547;
  --glow: rgba(58, 134, 255, .4);
  --spot: rgba(31, 224, 192, .12);
  --grid: rgba(150, 170, 210, .07);
  --net: 90, 150, 255;
  --shadow: 0 0 0 1px rgba(150, 170, 210, .06), 0 20px 50px -20px rgba(0, 0, 0, .8);
  --glass: rgba(8, 12, 22, .66);
}

/* ------------------------------------------------------------------- base */
body.ehl-page *, body.ehl-page *::before, body.ehl-page *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.ehl-page { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; background: #060a12; color: #eaf0fa; -webkit-font-smoothing: antialiased; transition: background-color .35s var(--ease); }
body.ehl-page.ehl-light { background: #f7f8fb; }
body.ehl-page img, body.ehl-page svg { display: block; }
body.ehl-page a { color: inherit; text-decoration: none; }
body.ehl-page button { font: inherit; color: inherit; cursor: pointer; }
body.ehl-page h1, body.ehl-page h2, body.ehl-page h3, body.ehl-page h4 { font-family: var(--font-display); margin: 0; letter-spacing: -.025em; line-height: 1.08; font-weight: 700; }
body.ehl-page p { margin: 0; }
body.ehl-page ul { margin: 0; padding: 0; list-style: none; }
body.ehl-page .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
body.ehl-page .sec { position: relative; background: var(--bg); color: var(--text); padding: clamp(72px, 9vw, 128px) 0; overflow: hidden; transition: background-color .35s var(--ease), color .35s var(--ease); }
body.ehl-page .sec.alt { background: var(--bg-alt); }
body.ehl-page .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* section heads */
body.ehl-page .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
body.ehl-page .eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
body.ehl-page .head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
body.ehl-page .head.center { margin-inline: auto; text-align: center; justify-items: center; }
body.ehl-page .head h2 { font-size: clamp(34px, 4.4vw, 58px); }
body.ehl-page .head p { color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); max-width: 620px; }
body.ehl-page .grad { background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 45%, var(--accent) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* buttons */
body.ehl-page .btn { --b: var(--accent); position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; overflow: hidden; isolation: isolate; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
body.ehl-page .btn .ico { width: 18px; height: 18px; transition: transform .2s var(--ease); }
body.ehl-page .btn:hover .ico { transform: translateX(3px); }
body.ehl-page .btn-primary { color: #fff; background: linear-gradient(110deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2))); box-shadow: 0 10px 30px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
body.ehl-page .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); }
body.ehl-page .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
body.ehl-page .btn-primary:hover::after { transform: translateX(120%); }
body.ehl-page .btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--text); backdrop-filter: blur(8px); }
body.ehl-page .btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }
body.ehl-page .link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; font-size: 15px; }
body.ehl-page .link .ico { width: 17px; height: 17px; transition: transform .2s var(--ease); }
body.ehl-page .link:hover .ico { transform: translateX(4px); }

/* cards with a cursor spotlight and a glowing edge */
body.ehl-page .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .25s var(--ease), border-color .25s var(--ease); }
body.ehl-page .spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), var(--spot), transparent 60%); opacity: 0; transition: opacity .3s var(--ease); }
body.ehl-page .spot::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -20%), var(--accent-2), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s var(--ease); }
body.ehl-page .spot:hover::before, body.ehl-page .spot:hover::after { opacity: 1; }
body.ehl-page .lift:hover { transform: translateY(-4px); }
body.ehl-page .badge-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }

/* ----------------------------------------------------------------- header */
body.ehl-page .top { position: sticky; top: 0; z-index: 50; }
body.ehl-page .top.sec { padding: 0; background: transparent; overflow: visible; }
body.ehl-page .top .bar { display: flex; align-items: center; gap: 32px; height: 76px; }
body.ehl-page .top-bg { position: absolute; inset: 0; background: var(--glass); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); opacity: .0; transition: opacity .3s var(--ease); }
body.ehl-page .top.scrolled .top-bg { opacity: 1; }
body.ehl-page .top { color: var(--text); }
body.ehl-page .logo { display: flex; align-items: center; gap: 12px; position: relative; }
body.ehl-page .logo-mark { width: 34px; height: 30px; }
body.ehl-page .logo-word { display: grid; line-height: 1; }
body.ehl-page .logo-word b { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .22em; }
body.ehl-page .logo-word small { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .32em; color: var(--muted); margin-top: 5px; }
body.ehl-page .nav { display: flex; gap: 6px; margin-left: auto; position: relative; }
body.ehl-page .nav a { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color .2s var(--ease), background-color .2s var(--ease); }
body.ehl-page .nav a:hover { color: var(--text); background: var(--surface-2); }
body.ehl-page .top .btn { height: 44px; padding: 0 20px; font-size: 14px; position: relative; }
body.ehl-page .burger { display: none; position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); margin-left: auto; }
body.ehl-page .burger span, body.ehl-page .burger span::before, body.ehl-page .burger span::after { position: absolute; left: 12px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s var(--ease); }
body.ehl-page .burger span { top: 21px; }
body.ehl-page .burger span::before, body.ehl-page .burger span::after { content: ""; left: 0; }
body.ehl-page .burger span::before { top: -6px; }
body.ehl-page .burger span::after { top: 6px; }
body.ehl-page .menu { display: none; }

/* ------------------------------------------------------------------- hero */
body.ehl-page .hero { padding: 0 0 clamp(64px, 8vw, 110px); margin-top: -76px; padding-top: calc(76px + clamp(48px, 7vw, 96px)); min-height: min(100vh, 980px); display: flex; flex-direction: column; justify-content: center; }
body.ehl-page .hero-fx { position: absolute; inset: 0; pointer-events: none; }
body.ehl-page .hero-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
body.ehl-page .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
body.ehl-page .orb.a { width: 520px; height: 520px; left: -140px; top: -120px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%); animation: drift 18s var(--ease) infinite alternate; }
body.ehl-page .orb.b { width: 460px; height: 460px; right: -120px; top: 120px; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 70%); animation: drift 22s var(--ease) infinite alternate-reverse; }
body.ehl-light .orb { opacity: .28; }
@keyframes drift { to { transform: translate(80px, 60px) scale(1.12); } }
body.ehl-page .floor { position: absolute; left: -10%; right: -10%; bottom: -2px; height: 46%; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(600px) rotateX(62deg); transform-origin: bottom; -webkit-mask: linear-gradient(to top, #000 10%, transparent 85%); mask: linear-gradient(to top, #000 10%, transparent 85%); animation: floor 6s linear infinite; }
@keyframes floor { to { background-position: 0 64px, 0 0; } }
body.ehl-page .hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
body.ehl-page .chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); backdrop-filter: blur(8px); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--muted); }
body.ehl-page .pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
body.ehl-page .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { to { transform: scale(3); opacity: 0; } }
body.ehl-page .hero h1 { font-size: clamp(40px, 5.2vw, 76px); font-weight: 800; letter-spacing: -.04em; line-height: .98; margin: 26px 0 26px; }
body.ehl-page .hero h1 .grad { display: inline; }
body.ehl-page .hero .lede { font-size: clamp(17px, 1.45vw, 20px); color: var(--muted); max-width: 560px; }
body.ehl-page .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
body.ehl-page .hero-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 36px; color: var(--muted); font-size: 14px; }
body.ehl-page .hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
body.ehl-page .hero-meta .ico { width: 17px; height: 17px; color: var(--accent-2); }

/* the console beside the headline: decoration that never holds the words back */
body.ehl-page .console { position: relative; border-radius: 22px; background: var(--glass); border: 1px solid var(--line-strong); backdrop-filter: blur(18px); box-shadow: 0 40px 80px -30px rgba(2, 6, 23, .65), 0 0 0 1px rgba(255, 255, 255, .03) inset; overflow: hidden; transform: perspective(1400px) rotateY(-9deg) rotateX(4deg); transition: transform .6s var(--ease); }
body.ehl-page .console:hover { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); }
body.ehl-page .console-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
body.ehl-page .console-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
body.ehl-page .console-bar i:nth-child(1) { background: #ff5f57; } body.ehl-page .console-bar i:nth-child(2) { background: var(--warn); } body.ehl-page .console-bar i:nth-child(3) { background: var(--ok); }
body.ehl-page .console-bar span { margin-left: 8px; }
body.ehl-page .live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--ok); font-weight: 500; letter-spacing: .1em; }
body.ehl-page .console-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 22px; align-items: center; }
body.ehl-page .radar { position: relative; width: 180px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 0 33%, var(--line) 33.5% 34%, transparent 34.5% 66%, var(--line) 66.5% 67%, transparent 67.5%), conic-gradient(from 0deg, transparent 0 75%, color-mix(in srgb, var(--accent-2) 55%, transparent) 100%); border: 1px solid var(--line-strong); overflow: hidden; }
body.ehl-page .radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, color-mix(in srgb, var(--accent-2) 50%, transparent) 100%); animation: sweep 3.2s linear infinite; }
body.ehl-page .radar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); box-shadow: 0 0 0 0; }
body.ehl-page .radar-x { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line); }
@keyframes sweep { to { transform: rotate(360deg); } }
body.ehl-page .blip { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); animation: blip 3.2s var(--ease) infinite; }
body.ehl-page .blip.warn { background: var(--warn); box-shadow: 0 0 12px var(--warn); }
@keyframes blip { 0%, 100% { opacity: .25; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.25); } 40% { opacity: .9; transform: scale(1); } }
body.ehl-page .feed { height: 200px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
body.ehl-page .feed ul { animation: feed 16s linear infinite; }
body.ehl-page .feed li { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; line-height: 2.05; color: var(--muted); white-space: nowrap; }
body.ehl-page .feed li b { font-weight: 500; color: var(--accent-2); min-width: 58px; }
body.ehl-page .feed li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.ehl-page .feed li em { font-style: normal; color: var(--ok); }
@keyframes feed { to { transform: translateY(-50%); } }
body.ehl-page .console-foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
body.ehl-page .console-foot > div { padding: 16px 20px; border-left: 1px solid var(--line); }
body.ehl-page .console-foot > div:first-child { border-left: 0; }
body.ehl-page .console-foot strong { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; }
body.ehl-page .console-foot small { color: var(--muted); font-size: 12px; }
body.ehl-page .meter { height: 4px; border-radius: 4px; background: var(--surface-2); margin-top: 10px; overflow: hidden; }
body.ehl-page .meter i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); position: relative; }
body.ehl-page .meter i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: scan 2.4s linear infinite; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ------------------------------------------------------------ trust strip */
body.ehl-page .trust { padding: 40px 0 48px; }
body.ehl-page .trust p { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--muted); margin-bottom: 26px; }
body.ehl-page .marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
body.ehl-page .marquee-track { display: flex; width: max-content; gap: 64px; animation: marquee 34s linear infinite; }
body.ehl-page .marquee:hover .marquee-track { animation-play-state: paused; }
body.ehl-page .marquee-track span { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--muted); opacity: .75; white-space: nowrap; transition: color .2s, opacity .2s; }
body.ehl-page .marquee-track span:hover { color: var(--text); opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ stats */
body.ehl-page .stats { padding: 0 0 clamp(72px, 9vw, 120px); }
body.ehl-page .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); overflow: hidden; }
body.ehl-page .stat { position: relative; padding: 34px 30px; border-left: 1px solid var(--line); }
body.ehl-page .stat:first-child { border-left: 0; }
body.ehl-page .stat strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 4vw, 56px); letter-spacing: -.04em; line-height: 1; }
body.ehl-page .stat span { display: block; margin-top: 14px; font-weight: 600; }
body.ehl-page .stat small { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
body.ehl-page .stat::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); opacity: 0; transition: opacity .3s; }
body.ehl-page .stat:hover::after { opacity: 1; }

/* --------------------------------------------------------------- services */
body.ehl-page .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.ehl-page .svc { padding: clamp(28px, 3vw, 44px); overflow: hidden; }
body.ehl-page .svc .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--accent); }
body.ehl-page .svc h3 { font-size: clamp(26px, 2.4vw, 34px); margin: 20px 0 14px; }
body.ehl-page .svc > p { color: var(--muted); max-width: 520px; }
body.ehl-page .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 30px 0 32px; }
body.ehl-page .checks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; }
body.ehl-page .checks .ico { width: 18px; height: 18px; color: var(--accent-2); margin-top: 2px; }
body.ehl-page .svc-art { position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 1px dashed var(--line-strong); opacity: .7; animation: sweep 40s linear infinite; }
body.ehl-page .svc-art::before { content: ""; position: absolute; inset: 36px; border-radius: 50%; border: 1px solid var(--line); }
body.ehl-page .svc-art::after { content: ""; position: absolute; top: 18px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); }

/* ------------------------------------------------------------- difference */
body.ehl-page .bento { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.ehl-page .bento .card { padding: 34px; }
body.ehl-page .bento .wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; padding: 40px; }
body.ehl-page .bento h3 { font-size: 24px; margin: 22px 0 12px; }
body.ehl-page .bento p { color: var(--muted); }
body.ehl-page .matrix { display: grid; gap: 10px; }
body.ehl-page .mrow { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; }
body.ehl-page .mrow b { font-weight: 500; color: var(--text); letter-spacing: .06em; }
body.ehl-page .mrow em { font-style: normal; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
body.ehl-page .mrow em .ico { width: 15px; height: 15px; }
body.ehl-page .mrow .meter { margin-top: 0; }
body.ehl-page .regs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 34px; }
body.ehl-page .regs span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 12.5px; color: var(--text); background: var(--surface-2); transition: border-color .2s, color .2s; }
body.ehl-page .regs span:hover { border-color: var(--accent); color: var(--accent); }
body.ehl-page .embed { display: flex; align-items: center; margin-top: 30px; }
body.ehl-page .av { display: grid; place-items: center; width: 52px; height: 52px; margin-left: -12px; border-radius: 50%; font-family: var(--font-mono); font-size: 11px; color: var(--text); background: var(--surface-2); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line-strong); transition: transform .25s var(--ease); }
body.ehl-page .av:first-child { margin-left: 0; }
body.ehl-page .card:hover .av { transform: translateX(calc(var(--i, 0) * 4px)); }
body.ehl-page .av:nth-child(2) { --i: 1; } body.ehl-page .av:nth-child(3) { --i: 2; } body.ehl-page .av:nth-child(4) { --i: 3; }
body.ehl-page .av.you { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 0 1px transparent, 0 0 24px var(--glow); }
body.ehl-page .embed small { margin-left: 18px; color: var(--muted); font-size: 14px; }
body.ehl-page .big-num { font-family: var(--font-display); font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-top: 22px; }
body.ehl-page .bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin-top: 20px; }
body.ehl-page .bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, var(--accent), var(--accent-2)); opacity: .85; height: var(--h); animation: bar 2.6s var(--ease) infinite alternate; animation-delay: var(--d); }
@keyframes bar { to { height: calc(var(--h) * .55); opacity: .5; } }

/* ---------------------------------------------------------------- process */
body.ehl-page .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
body.ehl-page .rail { position: absolute; left: 28px; right: 28px; top: 25px; height: 7px; overflow: hidden; background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat; }
body.ehl-page .rail::after { content: ""; position: absolute; top: 0; left: -120px; width: 120px; height: 7px; border-radius: 7px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); filter: drop-shadow(0 0 6px var(--accent-2)); animation: travel 4.5s var(--ease) infinite; }
@keyframes travel { to { left: 100%; } }
body.ehl-page .step { position: relative; }
body.ehl-page .step .node { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--bg-alt); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 15px; color: var(--accent-2); box-shadow: 0 0 0 6px var(--bg-alt); transition: border-color .25s, box-shadow .25s; }
body.ehl-page .sec:not(.alt) .step .node { background: var(--bg); box-shadow: 0 0 0 6px var(--bg); }
body.ehl-page .step:hover .node { border-color: var(--accent-2); box-shadow: 0 0 0 6px var(--bg-alt), 0 0 26px var(--glow); }
body.ehl-page .step small { display: block; margin: 26px 0 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--accent); }
body.ehl-page .step h3 { font-size: 21px; margin-bottom: 10px; }
body.ehl-page .step p { color: var(--muted); font-size: 15px; }
body.ehl-page .process-cta { margin-top: 56px; }

/* ------------------------------------------------------------- industries */
body.ehl-page .ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.ehl-page .ind { padding: 26px; display: grid; gap: 14px; }
body.ehl-page .ind h3 { font-size: 18px; letter-spacing: -.01em; }
body.ehl-page .ind p { color: var(--muted); font-size: 14.5px; margin-top: -6px; }

/* -------------------------------------------------------------- toolset */
body.ehl-page .tools .marquee + .marquee { margin-top: 16px; }
body.ehl-page .tools .marquee-track { gap: 14px; animation-duration: 40s; }
body.ehl-page .tools .rev .marquee-track { animation-direction: reverse; }
body.ehl-page .tool { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; white-space: nowrap; transition: border-color .2s, color .2s; }
body.ehl-page .tool:hover { border-color: var(--accent); color: var(--accent); }
body.ehl-page .tool i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent-2); transform: rotate(45deg); }
body.ehl-page .tool.sec-tool i { background: #ff7a59; }
body.ehl-page .tools-legend { display: flex; justify-content: center; gap: 28px; margin-top: 30px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--muted); }
body.ehl-page .tools-legend span { display: inline-flex; align-items: center; gap: 8px; }
body.ehl-page .tools-legend i { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--accent-2); }
body.ehl-page .tools-legend span + span i { background: #ff7a59; }

/* ------------------------------------------------------------ service tabs */
body.ehl-page .tabs { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
body.ehl-page .tab-list { display: grid; gap: 6px; position: sticky; top: 100px; }
body.ehl-page .tab { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--muted); font-weight: 600; font-size: 15.5px; transition: background-color .2s, color .2s, border-color .2s; }
body.ehl-page .tab .ico { width: 20px; height: 20px; }
body.ehl-page .tab:hover { color: var(--text); background: var(--surface-2); }
body.ehl-page .tab[aria-selected="true"] { color: var(--text); background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow); }
body.ehl-page .tab[aria-selected="true"] .ico { color: var(--accent); }
body.ehl-page .tab-panel { padding: clamp(28px, 3vw, 44px); min-height: 420px; }
body.ehl-page .tab-panel .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--accent); }
body.ehl-page .tab-panel h3 { font-size: clamp(26px, 2.6vw, 36px); margin: 16px 0 14px; max-width: 640px; }
body.ehl-page .tab-panel > p { color: var(--muted); max-width: 640px; }
body.ehl-page .tab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px; }
body.ehl-page .tab-cols h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); font-weight: 500; margin-bottom: 16px; }
body.ehl-page .tab-cols li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
body.ehl-page .tab-cols .ico { width: 18px; height: 18px; color: var(--accent-2); margin-top: 3px; }
body.ehl-page .outcomes li { justify-content: space-between; }
body.ehl-page .outcomes b { font-family: var(--font-display); color: var(--text); }
body.ehl-page .appear { animation: appear .18s var(--ease); }
@keyframes appear { from { opacity: .35; transform: translateY(4px); } }

/* ----------------------------------------------------------- testimonials */
body.ehl-page .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
body.ehl-page .quote { padding: 34px; display: flex; flex-direction: column; gap: 24px; }
body.ehl-page .quote .stars { display: flex; gap: 4px; color: var(--warn); }
body.ehl-page .quote .stars svg { width: 17px; height: 17px; fill: currentColor; }
body.ehl-page .quote blockquote { margin: 0; font-size: 16.5px; line-height: 1.65; }
body.ehl-page .who { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
body.ehl-page .avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--font-display); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
body.ehl-page .who b { display: block; font-size: 15px; }
body.ehl-page .who small { color: var(--muted); font-size: 13px; }

/* --------------------------------------------------------------- standard */
/* The section's colour follows the letter on show: one registered colour
   eased between pillars, so every glow, ring and edge moves together. */
@property --pc { syntax: '<color>'; inherits: true; initial-value: #2f7bff; }
body.ehl-page .std { --pc: #2f7bff; transition: --pc .7s var(--ease), background-color .35s var(--ease); isolation: isolate; }
body.ehl-page .std::before { content: ""; position: absolute; left: 50%; top: 46%; width: 1300px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--pc) 20%, transparent), transparent 72%); pointer-events: none; z-index: -1; }
body.ehl-page .std::after { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 65%); mask: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 65%); pointer-events: none; }
body.ehl-page .std .head { margin-bottom: 0; }
body.ehl-page .std-lede b { color: var(--text); font-weight: 600; }

/* the word: five letters that read EHSAN and open their principle */
body.ehl-page .word { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; }
body.ehl-page .lt { --c: var(--accent); position: relative; display: grid; justify-items: center; gap: 12px; padding: 10px 0 26px; border: 0; background: none; border-radius: 24px; outline-offset: 6px; }
body.ehl-page .lt b { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 12.5vw, 184px); line-height: .9; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); transition: -webkit-text-stroke-color .3s var(--ease), transform .35s var(--ease), filter .35s var(--ease); }
body.ehl-page .lt:hover b { -webkit-text-stroke-color: var(--c); transform: translateY(-6px); }
body.ehl-page .lt[aria-selected="true"] b { background: linear-gradient(170deg, color-mix(in srgb, var(--c) 35%, #fff) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 55%, #000) 115%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke-color: transparent; filter: drop-shadow(0 18px 44px color-mix(in srgb, var(--c) 50%, transparent)); transform: translateY(-6px); }
body.ehl-page .lt span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .26em; color: var(--muted); transition: color .3s; }
body.ehl-page .lt[aria-selected="true"] span { color: var(--text); }
body.ehl-page .lt i { position: absolute; left: 26%; right: 26%; bottom: 8px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
body.ehl-page .lt i::after { content: ""; position: absolute; inset: 0; background: var(--c); box-shadow: 0 0 10px var(--c); transform: scaleX(0); transform-origin: left; }
body.ehl-page .lt[aria-selected="true"] i::after { transform: scaleX(1); }
body.ehl-page .std.auto .lt[aria-selected="true"] i::after { animation: fill var(--fill, 7s) linear forwards; }
body.ehl-page .std.auto.hold .lt[aria-selected="true"] i::after { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body.ehl-page .trace { position: absolute; left: 10%; right: 10%; bottom: -26px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent); }
body.ehl-page .trace b { position: absolute; top: -4px; left: calc(var(--k, 0) / var(--n, 4) * 100%); width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 22%, transparent), 0 0 22px var(--pc); transition: left .6s var(--ease); }
body.ehl-page .trace b::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 30px; background: linear-gradient(to top, var(--pc), transparent); }

/* the principle on show */
body.ehl-page .std-panel { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; margin-top: clamp(64px, 7vw, 92px); padding: clamp(28px, 3.6vw, 52px); border-radius: 30px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
body.ehl-page .std-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 340px at 12% 50%, color-mix(in srgb, var(--pc) 16%, transparent), transparent 70%); pointer-events: none; }
body.ehl-page .std-panel::after { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--pc), transparent); }
body.ehl-page .emblem { position: relative; width: 260px; aspect-ratio: 1; display: grid; place-items: center; margin-inline: auto; }
body.ehl-page .emblem .ring { position: absolute; border-radius: 50%; }
body.ehl-page .emblem .r1 { inset: 0; border: 1px dashed color-mix(in srgb, var(--pc) 45%, var(--line)); animation: sweep 40s linear infinite; }
body.ehl-page .emblem .r2 { inset: 20px; background: conic-gradient(from 0deg, transparent 0 58%, var(--pc) 100%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: sweep 4.5s linear infinite; }
body.ehl-page .emblem .r3 { inset: 20px; border: 1px solid var(--line); }
body.ehl-page .emblem .orbit { position: absolute; inset: 20px; animation: sweep 14s linear infinite reverse; }
body.ehl-page .emblem .orbit i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 18px var(--pc); }
body.ehl-page .emblem .orbit i:nth-child(1) { left: 50%; top: 0; }
body.ehl-page .emblem .orbit i:nth-child(2) { left: 93.3%; top: 75%; }
body.ehl-page .emblem .orbit i:nth-child(3) { left: 6.7%; top: 75%; }
body.ehl-page .core { position: relative; display: grid; place-items: center; align-content: center; width: 156px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--pc) 30%, var(--bg)), var(--bg) 78%); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); box-shadow: 0 0 70px color-mix(in srgb, var(--pc) 32%, transparent), inset 0 0 34px color-mix(in srgb, var(--pc) 18%, transparent); }
body.ehl-page .core b { font-family: var(--font-display); font-weight: 800; font-size: 82px; line-height: .95; letter-spacing: -.04em; background: linear-gradient(170deg, color-mix(in srgb, var(--pc) 30%, #fff), var(--pc) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.ehl-page .core small { margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .32em; color: var(--muted); }
body.ehl-page .std-copy small { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--pc); }
body.ehl-page .std-copy small::before { content: ""; width: 18px; height: 1px; background: currentColor; }
body.ehl-page .std-copy h3 { font-size: clamp(30px, 3.2vw, 44px); margin: 16px 0 10px; }
body.ehl-page .std-copy .vow { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--pc); margin-bottom: 18px; }
body.ehl-page .std-copy p:last-child { color: var(--muted); font-size: 16.5px; }
body.ehl-page .std-points { position: relative; display: grid; gap: 12px; }
body.ehl-page .std-point { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); transition: border-color .25s var(--ease), transform .25s var(--ease); }
body.ehl-page .std-point:hover { border-color: color-mix(in srgb, var(--pc) 55%, transparent); transform: translateX(4px); }
body.ehl-page .std-point > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--pc); background: color-mix(in srgb, var(--pc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 28%, transparent); }
body.ehl-page .std-point b { display: block; font-family: var(--font-display); font-size: 16.5px; margin-bottom: 3px; }
body.ehl-page .std-point p { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
body.ehl-page .swap { animation: appear .2s var(--ease); }
body.ehl-page .std-foot { margin-top: 26px; text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .16em; }
body.ehl-page .std-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 34px; color: var(--muted); font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; }
body.ehl-page .std-nav button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); transition: border-color .2s, color .2s; }
body.ehl-page .std-nav button:hover { border-color: var(--pc); color: var(--pc); }
body.ehl-page .std-nav .ico { width: 18px; height: 18px; }
body.ehl-page .std-nav button:first-child .ico { transform: scaleX(-1); }

/* -------------------------------------------------------------------- cta */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
body.ehl-page .cta-box { position: relative; border-radius: 32px; padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); text-align: center; background: radial-gradient(900px 400px at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--surface); isolation: isolate; overflow: hidden; }
body.ehl-page .cta-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--angle), transparent 0 60%, var(--accent-2) 75%, var(--accent) 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; z-index: -1; }
body.ehl-page .cta-box::after { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask: radial-gradient(circle at 50% 0%, #000, transparent 70%); mask: radial-gradient(circle at 50% 0%, #000, transparent 70%); }
@keyframes spin { to { --angle: 360deg; } }
body.ehl-page .cta-box h2 { font-size: clamp(36px, 5vw, 68px); max-width: 860px; margin: 22px auto 20px; }
body.ehl-page .cta-box > p { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 18px; }
body.ehl-page .cta-box .cta-row { justify-content: center; }
body.ehl-page .assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 30px; color: var(--muted); font-size: 14.5px; }
body.ehl-page .assure span { display: inline-flex; align-items: center; gap: 8px; }
body.ehl-page .assure .ico { width: 17px; height: 17px; color: var(--ok); }

/* ----------------------------------------------------------------- footer */
body.ehl-page .foot { padding: 80px 0 36px; }
body.ehl-page .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
body.ehl-page .foot p { color: var(--muted); font-size: 15px; max-width: 340px; margin-top: 20px; }
body.ehl-page .foot h4 { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; color: var(--muted); margin-bottom: 18px; }
body.ehl-page .foot li + li { margin-top: 11px; }
body.ehl-page .foot li a { color: var(--text); opacity: .82; font-size: 15px; transition: opacity .2s, color .2s; }
body.ehl-page .foot li a:hover { opacity: 1; color: var(--accent-2); }
body.ehl-page .contact-lines { display: grid; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 14.5px; }
body.ehl-page .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
body.ehl-page .foot-bottom nav { display: flex; gap: 24px; }

/* ------------------------------------------------------- preview switcher */
body.ehl-page .switcher { position: fixed; left: 50%; bottom: 20px; z-index: 100; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(8, 12, 22, .82); border: 1px solid rgba(148, 163, 184, .25); backdrop-filter: blur(14px); box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .6); font-size: 13.5px; color: #cbd5e1; }
body.ehl-page .switcher > span { padding: 0 10px 0 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: #8d9bb3; }
body.ehl-page .switcher button { white-space: nowrap; height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: none; font-weight: 600; transition: background-color .2s, color .2s; }
body.ehl-page .switcher button:hover { color: #fff; }
body.ehl-page .switcher button[aria-pressed="true"] { background: linear-gradient(110deg, #3b82f6, #22d3ee); color: #fff; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  body.ehl-page .hero-grid { grid-template-columns: 1fr; }
  body.ehl-page .console { transform: none; max-width: 640px; }
  body.ehl-page .console:hover { transform: none; }
  body.ehl-page .ind-grid { grid-template-columns: repeat(2, 1fr); }
  body.ehl-page .tabs { grid-template-columns: 1fr; }
  body.ehl-page .tab-list { position: static; display: flex; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  body.ehl-page .tab { width: auto; white-space: nowrap; }
}
@media (max-width: 900px) {
  body.ehl-page .nav, body.ehl-page .top .bar > .btn { display: none; }
  body.ehl-page .burger { display: block; }
  body.ehl-page .menu.open { display: grid; gap: 4px; padding: 10px 24px 24px; position: relative; }
  body.ehl-page .menu a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; }
  body.ehl-page .menu .btn { margin-top: 14px; justify-content: center; border-bottom: 0; }
  body.ehl-page .top.menu-open .top-bg { opacity: 1; }
  body.ehl-page .svc-grid, body.ehl-page .quotes { grid-template-columns: 1fr; }
  body.ehl-page .bento { grid-template-columns: 1fr; }
  body.ehl-page .bento .wide { grid-template-columns: 1fr; gap: 28px; padding: 34px; }
  body.ehl-page .stat-grid { grid-template-columns: 1fr 1fr; }
  body.ehl-page .stat:nth-child(3) { border-left: 0; }
  body.ehl-page .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  body.ehl-page .steps { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  body.ehl-page .rail { display: none; }
  body.ehl-page .foot-grid { grid-template-columns: 1fr 1fr; }
  body.ehl-page .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body.ehl-page .wrap { padding: 0 18px; }
  body.ehl-page .console-body { grid-template-columns: 1fr; justify-items: center; }
  body.ehl-page .radar { width: 170px; }
  body.ehl-page .feed { width: 100%; height: 150px; }
  body.ehl-page .console-foot strong { font-size: 18px; }
  body.ehl-page .console-foot > div { padding: 14px; }
  body.ehl-page .checks, body.ehl-page .tab-cols { grid-template-columns: 1fr; }
  body.ehl-page .steps { grid-template-columns: 1fr; }
  body.ehl-page .ind-grid { grid-template-columns: 1fr; }
  body.ehl-page .ind { grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; }
  body.ehl-page .ind .badge-ico { grid-row: span 2; }
  body.ehl-page .ind p { margin-top: 0; }
  body.ehl-page .stat { padding: 24px 18px; }
  body.ehl-page .cta-row .btn { flex: 1 1 100%; justify-content: center; }
  body.ehl-page .switcher > span { display: none; }
  body.ehl-page .switcher button { padding: 0 12px; font-size: 12.5px; }
  body.ehl-page .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  body.ehl-page .std-panel { grid-template-columns: 240px 1fr; }
  body.ehl-page .std-points { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  body.ehl-page .emblem { width: 230px; }
}
@media (max-width: 760px) {
  body.ehl-page .std-panel { grid-template-columns: 1fr; text-align: left; }
  body.ehl-page .std-points { grid-template-columns: 1fr; }
  body.ehl-page .lt span { font-size: 9px; letter-spacing: .12em; }
  body.ehl-page .lt i { left: 18%; right: 18%; }
  body.ehl-page .emblem { width: 210px; }
  body.ehl-page .core { width: 126px; }
  body.ehl-page .core b { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ehl-page *, body.ehl-page *::before, body.ehl-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ---------------------------------------------------------- in WordPress */
body.ehl-page { margin: 0; }
body.ehl-page h1, body.ehl-page h2, body.ehl-page h3, body.ehl-page h4 { color: inherit; text-transform: none; }
body.ehl-page .elementor-widget-ehl-header { position: sticky; top: 0; z-index: 60; }
body.ehl-page.admin-bar .elementor-widget-ehl-header { top: 32px; }
@media (max-width: 782px) { body.ehl-page.admin-bar .elementor-widget-ehl-header { top: 46px; } }
body.ehl-page .std-slide { display: contents; }
body.ehl-page .std-slide[hidden], body.ehl-page .tab-panel[hidden] { display: none; }
body.ehl-page .quote { margin: 0; }
body.ehl-page .tab-stage { min-width: 0; }
body.ehl-page .switcher a { display: inline-flex; align-items: center; white-space: nowrap; height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 600; color: #cbd5e1; transition: background-color .2s, color .2s; }
body.ehl-page .switcher a:hover { color: #fff; }
body.ehl-page .switcher a[aria-current="page"] { background: linear-gradient(110deg, #3b82f6, #22d3ee); color: #fff; }
@media (max-width: 640px) { body.ehl-page .switcher a { padding: 0 12px; font-size: 12.5px; } }
body.ehl-page:has(.switcher) .foot { padding-bottom: 110px; }

/* -------------------------------------------------------------- section heads
   Numbered like chapters, so the page reads as one document; a heading
   with an intro sets the two side by side. */
body.ehl-page { counter-reset: ehl-sec; }
body.ehl-page .head .eyebrow { counter-increment: ehl-sec; }
body.ehl-page .head .eyebrow::before { content: counter(ehl-sec, decimal-leading-zero); width: auto; height: auto; background: none; color: var(--accent-2); padding-right: 12px; border-right: 1px solid var(--line-strong); }
@media (min-width: 901px) {
  body.ehl-page .head:not(.center):has(> p) { max-width: none; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: 72px; align-items: end; }
  body.ehl-page .head:not(.center):has(> p) > .eyebrow { grid-column: 1 / -1; }
  body.ehl-page .head:not(.center):has(> p) > h2 { grid-column: 1; }
  body.ehl-page .head:not(.center):has(> p) > p { grid-column: 2; padding: 2px 0 6px 24px; border-left: 1px solid var(--line-strong); }
}

/* ------------------------------------------------------------- dark / light */
body.ehl-page .mode { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); transition: border-color .2s var(--ease), color .2s var(--ease); }
body.ehl-page .mode:hover { border-color: var(--accent); color: var(--accent); }
body.ehl-page .mode .ico { position: absolute; width: 20px; height: 20px; transition: transform .35s var(--ease), opacity .25s var(--ease); }
body.ehl-dark .mode .moon, body.ehl-light .mode .sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
@media (max-width: 900px) {
  body.ehl-page .top .bar { gap: 10px; }
  body.ehl-page .mode { margin-left: auto; }
  body.ehl-page .burger { margin-left: 0; }
}

/* the hero's text column is wide enough for its headline in three lines */
body.ehl-page .hero-grid { grid-template-columns: 1.18fr .82fr; }
@media (max-width: 1100px) { body.ehl-page .hero-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Inner pages: shared chrome, page hero and the page sections
   ===================================================================== */

@view-transition { navigation: auto; }
body.ehl-dark { color-scheme: dark; }
body.ehl-light { color-scheme: light; }
body.ehl-page .sec:not(.std) { --pc: var(--accent); }

/* shared header and footer, from their own Elementor templates */
body.ehl-page .ehl-chrome-header { position: sticky; top: 0; z-index: 60; view-transition-name: ehl-header; }
body.ehl-page.admin-bar .ehl-chrome-header { top: 32px; }
@media (max-width: 782px) { body.ehl-page.admin-bar .ehl-chrome-header { top: 46px; } }
body.ehl-page .ehl-chrome-header .elementor-widget-ehl-header { position: static; }
body.ehl-page .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--accent, #1b6ef3); color: #fff; font-weight: 600; }
body.ehl-page .skip:focus { top: 12px; }
body.ehl-page main { display: block; }

/* ---------------------------------------------------------------- menu */
body.ehl-page .nav { gap: 2px; align-items: center; }
body.ehl-page .nav-item { position: relative; display: flex; align-items: center; }
body.ehl-page .nav .nav-link { padding: 8px 6px 8px 14px; }
body.ehl-page .nav .nav-item:not(.has-dd) .nav-link { padding: 8px 14px; }
body.ehl-page .dd-toggle { display: grid; place-items: center; width: 26px; height: 30px; margin-left: -2px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); }
body.ehl-page .dd-toggle .ico { width: 15px; height: 15px; transition: transform .2s var(--ease); }
body.ehl-page .nav-item:hover .dd-toggle .ico, body.ehl-page .nav-item.open .dd-toggle .ico { transform: rotate(180deg); }
body.ehl-page .dd { position: absolute; top: 100%; left: 50%; z-index: 70; padding-top: 14px; transform: translate(-50%, 6px); opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s; }
body.ehl-page .nav-item:hover > .dd, body.ehl-page .nav-item:focus-within > .dd, body.ehl-page .nav-item.open > .dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
body.ehl-page .nav-item.closed > .dd { opacity: 0; visibility: hidden; }
body.ehl-page .dd-inner { display: grid; grid-template-columns: repeat(var(--cols, 1), 232px); gap: 4px 10px; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -24px rgba(2, 6, 23, .55); }
body.ehl-page .dd-col { display: grid; align-content: start; gap: 2px; }
body.ehl-page .dd-head { margin: 4px 12px 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
body.ehl-page .nav .dd a.dd-link { display: grid; gap: 2px; padding: 9px 12px; border-radius: 11px; color: var(--text); font-size: 14px; }
body.ehl-page .nav .dd a.dd-link b { font-weight: 600; }
body.ehl-page .nav .dd a.dd-link small { color: var(--muted); font-size: 12.5px; font-weight: 400; }
body.ehl-page .nav .dd a.dd-link:hover { background: var(--surface-2); }
body.ehl-page .nav .dd a.dd-link:hover b { color: var(--accent); }

body.ehl-page .menu .m-link, body.ehl-page .menu summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; cursor: pointer; list-style: none; }
body.ehl-page .menu summary::-webkit-details-marker { display: none; }
body.ehl-page .menu summary .ico { width: 18px; height: 18px; transition: transform .2s var(--ease); }
body.ehl-page .menu details[open] summary .ico { transform: rotate(180deg); }
body.ehl-page .menu .m-sub { display: grid; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
body.ehl-page .menu .m-sub a { padding: 9px 4px 9px 14px; border: 0; font-weight: 500; color: var(--muted); }
body.ehl-page .menu .m-sub a:hover { color: var(--text); }
@media (max-width: 900px) {
  body.ehl-page .menu.open { max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ------------------------------------------------------------ page hero */
body.ehl-page .page-hero { min-height: 0; padding-top: calc(76px + clamp(36px, 5vw, 72px)); padding-bottom: clamp(56px, 7vw, 100px); }
body.ehl-page .page-hero h1 { font-size: clamp(36px, 4.6vw, 64px); margin: 22px 0 22px; letter-spacing: -.035em; line-height: 1.02; }
body.ehl-page .page-hero .lede { max-width: 620px; }
body.ehl-page .page-hero.solo .hero-grid { grid-template-columns: 1fr; max-width: 920px; }
body.ehl-page .page-hero .floor { height: 38%; }
body.ehl-page .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
body.ehl-page .crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
body.ehl-page .crumbs a:hover { color: var(--accent); }
body.ehl-page .crumbs [aria-current] { color: var(--text); }
body.ehl-page .crumbs + .chip { margin-top: 0; }
body.ehl-page .page-panel .pp-body { padding: 22px; display: grid; gap: 4px; }
body.ehl-page .pf-row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
body.ehl-page .pf-row:last-child { border-bottom: 0; }
body.ehl-page .pf-row strong { font-family: var(--font-display); font-size: 30px; letter-spacing: -.03em; min-width: 92px; }
body.ehl-page .pf-row span { color: var(--muted); font-size: 14.5px; }
body.ehl-page .pf-row .meter { grid-column: 1 / -1; margin-top: 4px; }
body.ehl-page .pf-checks { display: grid; gap: 12px; }
body.ehl-page .pf-checks li { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; }
body.ehl-page .pf-checks .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--accent-2); }
body.ehl-page .pf-log li { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 2.2; color: var(--muted); }
body.ehl-page .pf-log b { min-width: 64px; font-weight: 500; color: var(--accent-2); }
body.ehl-page .pf-log span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ehl-page .pf-log em { font-style: normal; color: var(--ok); }
body.ehl-page .pf-code { margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.95; counter-reset: none; overflow: hidden; }
body.ehl-page .pf-code li { display: flex; gap: 16px; white-space: pre; }
body.ehl-page .pf-code i { font-style: normal; color: var(--muted); opacity: .45; min-width: 18px; text-align: right; }
body.ehl-page .pf-code code { font: inherit; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
body.ehl-page .c-str { color: var(--ok); } body.ehl-page .c-key { color: var(--accent); } body.ehl-page .c-com { color: var(--muted); font-style: italic; }

/* section padding when the stats band stands on its own */
body.ehl-page .stats { padding: clamp(56px, 7vw, 100px) 0; }
body.ehl-page .elementor-widget-ehl-hero + .elementor-widget-ehl-stats .stats,
body.ehl-page .elementor-widget-ehl-logos + .elementor-widget-ehl-stats .stats { padding-top: 0; }
body.ehl-page .stat-grid { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
body.ehl-page .steps { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
body.ehl-page .steps[data-wrap] .rail { display: none; }
body.ehl-page .steps[data-wrap] { row-gap: 44px; }
body.ehl-page .ind-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
body.ehl-page .foot-grid { grid-template-columns: 1.4fr repeat(var(--cols, 3), minmax(0, 1fr)); }

/* --------------------------------------------------------------- cards */
body.ehl-page .cgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; }
body.ehl-page .ccard { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px; }
body.ehl-page .ccard h3 { font-size: 20px; letter-spacing: -.015em; line-height: 1.2; }
body.ehl-page .ccard > p { color: var(--muted); font-size: 15.5px; }
body.ehl-page .ccard .tag, body.ehl-page .cg .tag, body.ehl-page .post .tag, body.ehl-page .case .tag, body.ehl-page .res .tag, body.ehl-page .pf-body .tag, body.ehl-page .ev .tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
body.ehl-page .ccard .link { margin-top: auto; padding-top: 6px; }
body.ehl-page .ccard .num { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--accent-2); padding: 6px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
body.ehl-page .checks.one { grid-template-columns: 1fr; gap: 10px; margin: 2px 0 4px; }
body.ehl-page .checks.one li { font-size: 14.5px; }
body.ehl-page .cgrid.style-number .ccard { border-top: 2px solid color-mix(in srgb, var(--accent-2) 55%, transparent); }

/* -------------------------------------------------------- text & panel */
body.ehl-page .split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
body.ehl-page .split.rev .sp-panel { order: -1; }
body.ehl-page .split.solo { grid-template-columns: 1fr; max-width: 860px; }
body.ehl-page .sp-copy { display: grid; justify-items: start; gap: 18px; }
body.ehl-page .sp-copy h2 { font-size: clamp(30px, 3.6vw, 48px); }
body.ehl-page .sp-copy p { color: var(--muted); font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.7; }
body.ehl-page .sp-copy .checks.one { margin-top: 4px; }
body.ehl-page .sp-copy .cta-row { margin-top: 8px; }
body.ehl-page .sp-panel { padding: 28px; width: 100%; }
body.ehl-page .sp-title { margin-bottom: 18px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.ehl-page .sp-rows { display: grid; gap: 12px; }
body.ehl-page .sp-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 16px; overflow: hidden; }
body.ehl-page .sp-fig { display: grid; gap: 8px; padding: 26px 22px; background: var(--bg); }
body.ehl-page .sec.alt .sp-fig { background: var(--bg-alt); }
body.ehl-page .sp-fig strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 3.4vw, 46px); line-height: 1; letter-spacing: -.04em; }
body.ehl-page .sp-fig span { color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------- comparison */
body.ehl-page .cmp-wrap { padding: 0; overflow: hidden; }
body.ehl-page .cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
body.ehl-page .cmp th, body.ehl-page .cmp td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
body.ehl-page .cmp tbody tr:last-child > * { border-bottom: 0; }
body.ehl-page .cmp thead th { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
body.ehl-page .cmp tbody th { font-family: var(--font-display); font-weight: 600; color: var(--text); width: 22%; }
body.ehl-page .cmp td { color: var(--muted); }
body.ehl-page .cmp .hl { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); font-weight: 500; }
body.ehl-page .cmp thead .hl { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
@media (max-width: 760px) {
  body.ehl-page .cmp thead { display: none; }
  body.ehl-page .cmp, body.ehl-page .cmp tbody, body.ehl-page .cmp tr, body.ehl-page .cmp th, body.ehl-page .cmp td { display: block; width: 100%; }
  body.ehl-page .cmp tr { padding: 8px 0; border-bottom: 1px solid var(--line-strong); }
  body.ehl-page .cmp tbody th { padding: 14px 18px 6px; border: 0; }
  body.ehl-page .cmp td { display: grid; grid-template-columns: 40% 1fr; gap: 12px; padding: 8px 18px; border: 0; }
  body.ehl-page .cmp td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
  body.ehl-page .cmp td.hl { border-radius: 10px; margin: 4px 0; }
}

/* --------------------------------------------------------------- tiers */
body.ehl-page .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
body.ehl-page .tier { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 34px; }
body.ehl-page .tier h3 { font-size: 20px; }
body.ehl-page .tier .price { display: flex; align-items: baseline; gap: 6px; }
body.ehl-page .tier .price strong { font-family: var(--font-display); font-weight: 800; font-size: 46px; letter-spacing: -.04em; line-height: 1; }
body.ehl-page .tier .price span { color: var(--muted); }
body.ehl-page .tier-text { color: var(--muted); font-size: 15px; }
body.ehl-page .tier .checks.one { flex: 1; margin: 6px 0 10px; }
body.ehl-page .tier .btn { width: 100%; justify-content: center; }
body.ehl-page .tier.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 30px 70px -30px var(--glow); background: radial-gradient(420px 260px at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--surface); }
body.ehl-page .tier-badge { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(110deg, var(--accent), color-mix(in srgb, var(--accent) 50%, var(--accent-2))); }

/* -------------------------------------------------------------- badges */
body.ehl-page .badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
body.ehl-page .badge { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s var(--ease), transform .2s var(--ease); }
body.ehl-page .badge:hover { border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); transform: translateY(-2px); }
body.ehl-page .badge-mark { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
body.ehl-page .badge-mark .ico { width: 20px; height: 20px; }
body.ehl-page .badge b { font-family: var(--font-display); font-size: 16px; }
body.ehl-page .badge small { color: var(--muted); font-size: 13px; }

/* -------------------------------------------------------------- gauges */
body.ehl-page .gauges { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; }
body.ehl-page .gauge { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 34px 28px; }
body.ehl-page .ring { position: relative; display: grid; place-items: center; width: 156px; aspect-ratio: 1; margin-bottom: 12px; }
body.ehl-page .ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, var(--accent) 0, var(--accent-2) calc(var(--p) * 1%), var(--surface-2) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); }
body.ehl-page .ring::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed var(--line-strong); }
body.ehl-page .ring > div { display: grid; gap: 2px; }
body.ehl-page .ring strong { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.03em; }
body.ehl-page .ring small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); }
body.ehl-page .gauge h3 { font-size: 19px; }
body.ehl-page .gauge p { color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- team */
body.ehl-page .team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.ehl-page .person { padding: 0; overflow: hidden; }
body.ehl-page .photo { aspect-ratio: 4 / 3.2; overflow: hidden; background: var(--surface-2); }
body.ehl-page .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(.9) contrast(1.05); transition: filter .4s var(--ease), transform .6s var(--ease); }
body.ehl-page .person:hover .photo img { filter: none; transform: scale(1.03); }
body.ehl-page .person-body { display: grid; gap: 6px; padding: 22px 24px 26px; }
body.ehl-page .person-body h3 { font-size: 19px; }
body.ehl-page .person-body .role { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
body.ehl-page .person-body p:not(.role) { color: var(--muted); font-size: 14.5px; margin-top: 4px; }

/* ---------------------------------------------------------------- jobs */
body.ehl-page .jobs { padding: 6px; }
body.ehl-page .job { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-radius: 16px; transition: background-color .2s var(--ease); }
body.ehl-page .job + .job { box-shadow: 0 -1px 0 var(--line); }
body.ehl-page .job:hover { background: var(--surface-2); }
body.ehl-page .job h3 { font-size: 18px; }
body.ehl-page .job p { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; color: var(--muted); font-size: 14px; }
body.ehl-page .job p span { display: inline-flex; align-items: center; gap: 6px; }
body.ehl-page .job p .ico { width: 15px; height: 15px; }
body.ehl-page .job-go { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; white-space: nowrap; }
body.ehl-page .job-go .ico { width: 17px; height: 17px; transition: transform .2s var(--ease); }
body.ehl-page .job:hover .job-go .ico { transform: translateX(4px); }
body.ehl-page .jobs-note { margin-top: 22px; color: var(--muted); }
body.ehl-page .jobs-note a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
body.ehl-page .jobs-note .ico { width: 17px; height: 17px; }

/* --------------------------------------------------------- listings */
body.ehl-page .filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
body.ehl-page .fchips { display: flex; flex-wrap: wrap; gap: 8px; }
body.ehl-page .fchip { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font-weight: 600; font-size: 14px; transition: background-color .2s, color .2s, border-color .2s; }
body.ehl-page .fchip:hover { color: var(--text); border-color: var(--accent); }
body.ehl-page .fchip[aria-pressed="true"] { color: #fff; border-color: transparent; background: var(--accent); }
body.ehl-page .fsearch { display: flex; align-items: center; gap: 10px; height: 46px; min-width: 260px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); transition: border-color .2s; }
body.ehl-page .fsearch:focus-within { border-color: var(--accent); }
body.ehl-page .fsearch .ico { width: 18px; height: 18px; }
body.ehl-page .fsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 15px; }
body.ehl-page [data-hide] { display: none !important; }
body.ehl-page .empty { padding: 40px 0; text-align: center; color: var(--muted); }

/* drawn covers: no stock photography */
body.ehl-page .cover { position: relative; overflow: hidden; aspect-ratio: 16 / 9; color: #fff; background: radial-gradient(120% 90% at 88% 8%, hsl(var(--h) 92% 58% / .5), transparent 55%), radial-gradient(80% 70% at 0% 100%, hsl(calc(var(--h) + 40) 80% 50% / .25), transparent 60%), linear-gradient(160deg, hsl(var(--h) 55% 15%), hsl(calc(var(--h) + 24) 50% 7%)); }
body.ehl-page .cover-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: radial-gradient(ellipse at 75% 30%, #000, transparent 75%); mask: radial-gradient(ellipse at 75% 30%, #000, transparent 75%); }
body.ehl-page .cover-ring { position: absolute; right: -14%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 28px rgba(255, 255, 255, .03), inset 0 0 0 29px rgba(255, 255, 255, .08); transition: transform .8s var(--ease); }
body.ehl-page .card:hover .cover-ring { transform: rotate(25deg) scale(1.05); }
body.ehl-page .cover-ico { position: absolute; right: 9%; top: 18%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
body.ehl-page .cover-ico .ico { width: 30px; height: 30px; color: #fff; filter: drop-shadow(0 0 10px hsl(var(--h) 90% 65%)); }
body.ehl-page .cover-tag { position: absolute; left: 18px; bottom: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
body.ehl-page .cover-title { position: absolute; left: 28px; right: 34%; bottom: 52px; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
body.ehl-page .cover.big .cover-tag { left: 28px; bottom: 24px; }

body.ehl-page .post-feat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 0; overflow: hidden; margin-bottom: 22px; }
body.ehl-page .post-feat .cover { aspect-ratio: auto; min-height: 340px; }
body.ehl-page .pf-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(26px, 3.4vw, 44px); }
body.ehl-page .pf-body h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
body.ehl-page .pf-body > p:not(.tag) { color: var(--muted); }
body.ehl-page .byline { display: flex; align-items: center; gap: 12px; }
body.ehl-page .byline b { display: block; font-size: 14.5px; }
body.ehl-page .byline small { color: var(--muted); font-size: 13px; }
body.ehl-page .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.ehl-page .post { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
body.ehl-page .post-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 22px 24px 26px; }
body.ehl-page .post-body h3 { font-size: 19px; line-height: 1.25; }
body.ehl-page .post-body > p:not(.tag) { color: var(--muted); font-size: 14.5px; }
body.ehl-page .post-body .link { margin-top: auto; padding-top: 6px; }

/* events */
body.ehl-page .ev-feat { display: grid; justify-items: start; gap: 14px; padding: clamp(26px, 3.4vw, 44px); margin-bottom: 30px; background: radial-gradient(700px 300px at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--surface); }
body.ehl-page .ev-feat-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
body.ehl-page .ev-date-line { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; }
body.ehl-page .ev-date-line .ico { width: 17px; height: 17px; }
body.ehl-page .ev-feat h3 { font-size: clamp(24px, 2.6vw, 34px); max-width: 820px; }
body.ehl-page .ev-feat p { color: var(--muted); max-width: 760px; }
body.ehl-page .events { display: grid; gap: 14px; }
body.ehl-page .ev { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 26px; }
body.ehl-page .ev-date { display: grid; place-items: center; align-content: center; width: 84px; height: 84px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
body.ehl-page .ev-date small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--accent); }
body.ehl-page .ev-date strong { font-family: var(--font-display); font-size: 32px; line-height: 1; }
body.ehl-page .ev-body { display: grid; gap: 6px; }
body.ehl-page .ev-body h3 { font-size: 19px; }
body.ehl-page .ev-body > p:last-child:not(.ev-meta) { color: var(--muted); font-size: 14.5px; }
body.ehl-page .ev-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13.5px; }
body.ehl-page .ev-meta span { display: inline-flex; align-items: center; gap: 6px; }
body.ehl-page .ev-meta .ico { width: 15px; height: 15px; }

/* ----------------------------------------------------- case studies */
body.ehl-page .case { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); padding: 0; overflow: hidden; }
body.ehl-page .case-main { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(28px, 3.6vw, 48px); }
body.ehl-page .case-main h2 { font-size: clamp(26px, 2.8vw, 38px); }
body.ehl-page .case-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.ehl-page .case-cols h4, body.ehl-page .cform h4 { margin-bottom: 8px; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
body.ehl-page .case-cols p { color: var(--muted); font-size: 15px; }
body.ehl-page .case-metrics { display: grid; align-content: center; border-left: 1px solid var(--line); background: radial-gradient(420px 320px at 100% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%), var(--surface-2); }
body.ehl-page .case-metrics > div { display: grid; gap: 6px; padding: 24px clamp(24px, 3vw, 40px); }
body.ehl-page .case-metrics > div + div { border-top: 1px solid var(--line); }
body.ehl-page .case-metrics strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; letter-spacing: -.04em; }
body.ehl-page .case-metrics span { color: var(--muted); font-size: 14.5px; }
body.ehl-page .cg { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
body.ehl-page .cg .tag { display: flex; justify-content: space-between; width: 100%; }
body.ehl-page .cg .tag span { color: var(--muted); }
body.ehl-page .cg h3 { font-size: 20px; }
body.ehl-page .cg > p:not(.tag) { color: var(--muted); font-size: 14.5px; }
body.ehl-page .cg-metric { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
body.ehl-page .cg-metric strong { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.03em; }
body.ehl-page .cg-metric span { color: var(--muted); font-size: 14px; }

/* --------------------------------------------------------------- forms */
body.ehl-page .contact { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
body.ehl-page .cform { display: grid; gap: 16px; padding: clamp(26px, 3.4vw, 42px); }
body.ehl-page .cform h2 { font-size: clamp(28px, 3vw, 38px); }
body.ehl-page .cf-lede { color: var(--muted); }
body.ehl-page .assure.left { justify-content: flex-start; margin: 0 0 6px; }
body.ehl-page .fgrid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.ehl-page .fld { display: grid; gap: 7px; }
body.ehl-page .fld.full { grid-column: 1 / -1; }
body.ehl-page .fld > span { font-size: 13px; font-weight: 600; color: var(--muted); }
body.ehl-page .fld input, body.ehl-page .fld select, body.ehl-page .fld textarea { width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; outline: 0; transition: border-color .2s, box-shadow .2s; }
body.ehl-page .fld textarea { height: auto; min-height: 130px; padding: 12px 14px; resize: vertical; }
body.ehl-page .fld input:focus, body.ehl-page .fld select:focus, body.ehl-page .fld textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
body.ehl-page .fld [aria-invalid="true"] { border-color: #ef4444; }
body.ehl-page .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.ehl-page .cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
body.ehl-page .cf-note { color: var(--muted); font-size: 13.5px; }
body.ehl-page .cf-note a { text-decoration: underline; text-underline-offset: 3px; }
body.ehl-page .cf-status { padding: 12px 16px; border-radius: 12px; font-size: 14.5px; background: var(--surface-2); color: var(--text); }
body.ehl-page .cf-status[data-state="ok"] { background: color-mix(in srgb, var(--ok) 16%, transparent); }
body.ehl-page .cf-status[data-state="error"] { background: color-mix(in srgb, #ef4444 16%, transparent); }
body.ehl-page .cinfo { position: sticky; top: 104px; display: grid; gap: 12px; }
body.ehl-page .ci { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
body.ehl-page .ci small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
body.ehl-page .ci b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 16.5px; word-break: break-word; }
body.ehl-page .ci b a:hover { color: var(--accent); }
body.ehl-page .ci p { margin-top: 4px; color: var(--muted); font-size: 14px; }

body.ehl-page .news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 52px); background: radial-gradient(600px 300px at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--surface); }
body.ehl-page .news h2 { margin: 16px 0 12px; font-size: clamp(28px, 3vw, 40px); }
body.ehl-page .news p { color: var(--muted); }
body.ehl-page .news-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
body.ehl-page .news-form .fsearch { min-width: 0; height: 52px; }
body.ehl-page .news-form small, body.ehl-page .news-form .cf-status { grid-column: 1 / -1; }
body.ehl-page .news-form small { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------- the resource */
body.ehl-page .res { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 52px); }
body.ehl-page .book { perspective: 1200px; }
body.ehl-page .book-face { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4; padding: 28px 26px; border-radius: 6px 16px 16px 6px; overflow: hidden; color: #fff; background: radial-gradient(120% 80% at 90% 0%, rgba(58, 134, 255, .55), transparent 60%), linear-gradient(165deg, #10203f, #060a12); box-shadow: 30px 40px 60px -30px rgba(2, 6, 23, .8), inset 6px 0 0 rgba(255, 255, 255, .12); transform: rotateY(-16deg) rotateX(4deg); transition: transform .6s var(--ease); }
body.ehl-page .res:hover .book-face { transform: rotateY(-6deg) rotateX(2deg); }
body.ehl-page .book-brand { position: relative; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; color: rgba(255, 255, 255, .7); }
body.ehl-page .book-face b { position: relative; font-family: var(--font-display); font-size: 25px; line-height: 1.15; letter-spacing: -.02em; }
body.ehl-page .book-tag { position: relative; align-self: flex-start; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
body.ehl-page .res-body { display: grid; justify-items: start; gap: 14px; }
body.ehl-page .res-body h2 { font-size: clamp(26px, 2.8vw, 38px); }
body.ehl-page .res-body > p:not(.tag) { color: var(--muted); }
body.ehl-page .res-format { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
body.ehl-page .res-format .ico { width: 17px; height: 17px; }

/* ------------------------------------------------------------- legal */
body.ehl-page .doc-hero { padding-bottom: clamp(40px, 5vw, 64px); }
body.ehl-page .doc-hero h1 { margin-top: 6px; }
body.ehl-page .doc-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
body.ehl-page .doc-sec-wrap { padding-top: clamp(40px, 5vw, 64px); }
body.ehl-page .doc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
body.ehl-page .doc-toc { position: sticky; top: 104px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
body.ehl-page .doc-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
body.ehl-page .doc-toc a { display: flex; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: 14px; transition: background-color .2s, color .2s; }
body.ehl-page .doc-toc a:hover, body.ehl-page .doc-toc a.on { color: var(--text); background: var(--surface-2); }
body.ehl-page .doc-toc i, body.ehl-page .doc-sec h2 i { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); padding-top: 2px; }
body.ehl-page .doc-body { max-width: 780px; }
body.ehl-page .doc-sec { scroll-margin-top: 110px; padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
body.ehl-page .doc-sec:last-child { border-bottom: 0; }
body.ehl-page .doc-sec h2 { display: flex; align-items: baseline; gap: 14px; font-size: 23px; }
body.ehl-page .doc-sec p { margin-top: 14px; color: var(--muted); font-size: 16px; line-height: 1.75; }
body.ehl-page .doc-sec p b { color: var(--text); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  body.ehl-page .cgrid, body.ehl-page .posts, body.ehl-page .team, body.ehl-page .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ehl-page .cgrid[style*="--cols:1"] { grid-template-columns: 1fr; }
  body.ehl-page .split, body.ehl-page .contact { grid-template-columns: 1fr; }
  body.ehl-page .split.rev .sp-panel { order: 0; }
  body.ehl-page .cinfo { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ehl-page .case, body.ehl-page .post-feat, body.ehl-page .res, body.ehl-page .news { grid-template-columns: 1fr; }
  body.ehl-page .case-metrics { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  body.ehl-page .case-metrics > div + div { border-top: 0; }
  body.ehl-page .res .book { max-width: 280px; }
  body.ehl-page .doc { grid-template-columns: 1fr; }
  body.ehl-page .doc-toc { position: static; }
  body.ehl-page .gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ehl-page .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ehl-page .steps .rail { display: none; }
  body.ehl-page .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ehl-page .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body.ehl-page .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ehl-page .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ehl-page .gauges { grid-template-columns: 1fr; }
  body.ehl-page .gauge { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 24px; }
  body.ehl-page .gauge .ring { grid-row: span 2; width: 120px; margin: 0; }
  body.ehl-page .gauge .ring strong { font-size: 22px; }
  body.ehl-page .ev { grid-template-columns: 70px minmax(0, 1fr); gap: 18px; }
  body.ehl-page .ev-date { width: 70px; height: 70px; }
  body.ehl-page .ev .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 640px) {
  body.ehl-page .cgrid, body.ehl-page .posts, body.ehl-page .team, body.ehl-page .tiers, body.ehl-page .cinfo, body.ehl-page .fgrid, body.ehl-page .case-cols, body.ehl-page .steps, body.ehl-page .foot-grid { grid-template-columns: 1fr; }
  body.ehl-page .ind-grid { grid-template-columns: 1fr; }
  body.ehl-page .sp-figs { grid-template-columns: 1fr 1fr; }
  body.ehl-page .filters { flex-direction: column; align-items: stretch; }
  body.ehl-page .fsearch { min-width: 0; }
  body.ehl-page .fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
  body.ehl-page .fchip { flex: none; }
  body.ehl-page .news-form { grid-template-columns: 1fr; }
  body.ehl-page .job { flex-direction: column; align-items: flex-start; }
  body.ehl-page .gauge { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  body.ehl-page .gauge .ring { grid-row: auto; }
  body.ehl-page .page-hero .cta-row .btn { flex: 1 1 100%; justify-content: center; }
}

/* fixes after the first full review */
body.ehl-page .quotes { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
body.ehl-page .badges { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
body.ehl-page .fchips { flex: 1 1 auto; min-width: 0; }
body.ehl-page .filters .fsearch { flex: 0 0 250px; min-width: 0; }
@media (max-width: 1100px) { body.ehl-page .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { body.ehl-page .quotes { grid-template-columns: 1fr; } body.ehl-page .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.ehl-page .filters .fsearch { flex: 1 1 auto; } }
/* a hero's column is a flex item with auto margins, which would shrink it to its content */
body.ehl-page .hero > .wrap { width: 100%; }
/* Sections clip their decoration without becoming scroll containers, so
   sticky parts (contents lists, contact details, tab lists) follow the page. */
body.ehl-page .sec:not(.top) { overflow: clip; }
/* a hero standing alone keeps its text on the page's left edge */
/* the grid is also the page's .wrap: keep its width, narrow only the text column */
body.ehl-page .page-hero.solo .hero-grid { max-width: var(--wrap); grid-template-columns: minmax(0, 880px); }
/* every section takes exactly the page's width, whatever its content's minimum */
body.ehl-page .e-con > .elementor-element, body.ehl-page .e-con > .e-con-inner > .elementor-element { width: 100%; min-width: 0; max-width: 100%; }
body.ehl-page .filters { min-width: 0; }
@media (max-width: 640px) {
  body.ehl-page .cgrid, body.ehl-page .posts, body.ehl-page .team, body.ehl-page .tiers, body.ehl-page .cinfo, body.ehl-page .fgrid, body.ehl-page .case-cols, body.ehl-page .steps, body.ehl-page .foot-grid, body.ehl-page .ind-grid, body.ehl-page .quotes { grid-template-columns: minmax(0, 1fr); }
  body.ehl-page .fchips { width: auto; max-width: none; }
}
/* a wrapping column would size its line to the widest child: one line only */
@media (max-width: 640px) { body.ehl-page .filters { flex-wrap: nowrap; } }
/* hero panels never grow wider than the column they sit in */
body.ehl-page .pp-body { grid-template-columns: minmax(0, 1fr); }
body.ehl-page .pp-body > *, body.ehl-page .pf-log li { min-width: 0; }
body.ehl-page .hero-grid > * { min-width: 0; }

/* ------------------------------------------------------------- founder */
body.ehl-page .fd { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4.5vw, 64px); background: radial-gradient(520px 360px at 0% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--surface); }
body.ehl-page .fd-side { display: grid; justify-items: center; text-align: center; gap: 6px; }
body.ehl-page .fd-portrait { position: relative; display: grid; place-items: center; width: 220px; aspect-ratio: 1; margin-bottom: 18px; }
body.ehl-page .fd-ring { position: absolute; border-radius: 50%; }
body.ehl-page .fd-ring.r1 { inset: 0; border: 1px dashed color-mix(in srgb, var(--accent-2) 50%, var(--line)); animation: sweep 50s linear infinite; }
body.ehl-page .fd-ring.r2 { inset: 16px; background: conic-gradient(from 0deg, transparent 0 62%, var(--accent-2) 100%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: sweep 6s linear infinite; }
body.ehl-page .fd-mono { display: grid; place-items: center; width: 150px; aspect-ratio: 1; border-radius: 50%; font-family: var(--font-display); font-weight: 800; font-size: 54px; letter-spacing: -.03em; color: #fff; background: radial-gradient(circle at 30% 25%, #4f95ff, #1b6ef3 55%, #0b3a8c); box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 2px 0 rgba(255, 255, 255, .25); }
body.ehl-page .fd-portrait.photo img { width: 170px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
body.ehl-page .fd-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
body.ehl-page .fd-role { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
body.ehl-page .fd-body { display: grid; justify-items: start; gap: 18px; }
body.ehl-page .fd-quote { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.18; letter-spacing: -.025em; }
body.ehl-page .fd-quote::before { content: "“"; display: block; height: .5em; margin-bottom: 6px; font-size: 2.2em; line-height: 1; color: var(--accent-2); }
body.ehl-page .fd-body p { color: var(--muted); font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.75; max-width: 680px; }
body.ehl-page .fd-sign { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 20px; color: var(--text) !important; }
body.ehl-page .fd-sign::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--accent-2); }
@media (max-width: 900px) {
  body.ehl-page .fd { grid-template-columns: 1fr; }
  body.ehl-page .fd-portrait { width: 180px; }
  body.ehl-page .fd-mono { width: 124px; font-size: 44px; }
}

/* =====================================================================
   Responsive system (audit, 2026-10-20)
   Every collection is a balanced flex grid: its column count per width
   comes from ehl_bal() (--cd / --ct / --cs / --cp), and a short last row
   grows to fill, so no width leaves a lone card or a hole.
   ===================================================================== */
body.ehl-page .bal { display: flex; flex-wrap: wrap; align-items: stretch; --c: var(--cd, 3); gap: var(--g, 20px); }
body.ehl-page .bal > * { flex: 1 1 calc((100% - (var(--c) - 1) * var(--g, 20px)) / var(--c)); min-width: 0; max-width: 100%; }
@media (max-width: 1100px) { body.ehl-page .bal { --c: var(--ct, 2); } }
@media (max-width: 860px) { body.ehl-page .bal { --c: var(--cs, 2); } }
@media (max-width: 600px) { body.ehl-page .bal { --c: var(--cp, 1); } }
body.ehl-page .cgrid, body.ehl-page .gauges, body.ehl-page .tiers, body.ehl-page .team, body.ehl-page .posts { --g: 20px; }
body.ehl-page .ind-grid { --g: 18px; }
body.ehl-page .badges { --g: 14px; }
body.ehl-page .quotes, body.ehl-page .steps { --g: 24px; }
body.ehl-page .ci-list { --g: 12px; }
body.ehl-page .steps.bal { row-gap: 44px; }
@media (max-width: 860px) { body.ehl-page .tiers { max-width: 560px; margin-inline: auto; } }

/* process: the rail only runs under a single row */
body.ehl-page .steps .rail { display: none; }
@media (min-width: 1101px) { body.ehl-page .steps.one-row .rail { display: block; } }

/* figures: hairlines between cells, however they wrap */
body.ehl-page .stat-grid.bal { --g: 1px; background: var(--line); }
body.ehl-page .stat-grid .stat { border: 0 !important; background: linear-gradient(var(--surface), var(--surface)), var(--bg); }
body.ehl-page .sec.alt .stat-grid .stat { background: linear-gradient(var(--surface), var(--surface)), var(--bg-alt); }

/* header: the full menu needs about 1180px; below that, the menu button */
body.ehl-page .logo { flex: none; }
body.ehl-page .logo-word b, body.ehl-page .logo-word small { white-space: nowrap; }
body.ehl-page .top .bar > .btn { flex: none; white-space: nowrap; }
@media (max-width: 1180px) {
  body.ehl-page .nav { display: none; }
  body.ehl-page .burger { display: block; margin-left: 0; }
  body.ehl-page .mode { margin-left: auto; }
  body.ehl-page .top .bar { gap: 10px; }
  body.ehl-page .top .bar > .btn { display: inline-flex; }
  body.ehl-page .menu.open { display: grid; gap: 4px; padding: 10px 24px 24px; position: relative; max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; }
  body.ehl-page .menu .m-link, body.ehl-page .menu summary { font-weight: 600; }
  body.ehl-page .menu .btn { margin-top: 14px; justify-content: center; }
  body.ehl-page .top.menu-open .top-bg { opacity: 1; }
}
@media (max-width: 640px) { body.ehl-page .top .bar > .btn { display: none; } }

/* hero: text and panel side by side down to 900px, then stacked full width */
@media (max-width: 1100px) {
  body.ehl-page .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 36px; }
  body.ehl-page .hero h1 { font-size: clamp(34px, 4.8vw, 54px); }
  body.ehl-page .console { transform: none; max-width: none; }
  body.ehl-page .console:hover { transform: none; }
}
@media (max-width: 900px) {
  body.ehl-page .hero-grid { grid-template-columns: minmax(0, 1fr); }
  body.ehl-page .console { width: 100%; max-width: 680px; }
}

/* text beside its panel down to 900px */
@media (min-width: 901px) and (max-width: 1100px) {
  body.ehl-page .split:not(.solo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  body.ehl-page .split.rev .sp-panel { order: -1; }
}

/* service tabs: wrap as pills instead of running off the screen */
@media (max-width: 1100px) {
  body.ehl-page .tab-list { flex-wrap: wrap; overflow: visible; -webkit-mask: none; mask: none; gap: 8px; }
  body.ehl-page .tab { width: auto; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14.5px; }
  body.ehl-page .tab .ico { width: 18px; height: 18px; }
}

/* contact details beside the form, then in two columns under it */
body.ehl-page .cinfo { display: block; }
body.ehl-page .cinfo .sp-title { margin-bottom: 14px; }

/* footer: the brand on its own row, the link columns together */
@media (max-width: 1100px) {
  body.ehl-page .foot-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
  body.ehl-page .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) { body.ehl-page .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } }

/* headings break into even lines; paragraphs avoid a lone last word */
body.ehl-page h1, body.ehl-page h2, body.ehl-page h3, body.ehl-page .fd-quote { text-wrap: balance; }
body.ehl-page p, body.ehl-page li { text-wrap: pretty; }
body.ehl-page .pf-log b, body.ehl-page .pf-log em { flex: none; white-space: nowrap; }
body.ehl-page .tier-badge { letter-spacing: .05em; font-size: 11px; max-width: 100%; }

/* small screens: labels and buttons that run long wrap cleanly */
body.ehl-page .badge { grid-template-columns: auto minmax(0, 1fr); }
body.ehl-page .badge b, body.ehl-page .badge small { overflow-wrap: anywhere; }
body.ehl-page .btn { height: auto; min-height: 52px; padding-block: 12px; line-height: 1.3; text-align: center; }
body.ehl-page .top .btn { min-height: 44px; padding-block: 8px; }
@media (max-width: 600px) {
  body.ehl-page .chip { align-items: flex-start; border-radius: 14px; line-height: 1.6; letter-spacing: .1em; }
  body.ehl-page .chip .pulse { margin-top: 6px; flex: none; }
  body.ehl-page .lt span { font-size: 10px; letter-spacing: .06em; }
  body.ehl-page .pf-code li { white-space: pre-wrap; }
  body.ehl-page .pf-code code { overflow-wrap: anywhere; }
}

/* light: the mint carries small text too (labels, step numbers, console
   tags), so it is set deep enough to read on white */
body.ehl-light .sec:not(.always-dark):not(.tone-dark), body.ehl-page .sec.tone-light { --accent-2: #078a74; --ok: #07855f; }
/* a long plan label wraps as a tidy block rather than a stretched pill */
body.ehl-page .tier-badge { white-space: normal; border-radius: 8px; line-height: 1.45; text-align: left; padding: 6px 10px; }


/* the wordmark: EHSAN, then LAB in the accent */
body.ehl-page .logo-word b i { font-style: normal; color: var(--accent); }

/* link tiles: content starts at the top in every tile of a row; when the
   tiles sit two across (or one) the icon moves beside the text */
body.ehl-page .ind { align-content: start; }
@media (max-width: 1100px) {
  body.ehl-page .ind-grid[data-t="2"] .ind { grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; gap: 4px 18px; padding: 22px 24px; }
  body.ehl-page .ind-grid[data-t="2"] .ind .badge-ico { grid-row: span 2; }
  body.ehl-page .ind-grid[data-t="2"] .ind p { margin-top: 0; }
}
@media (max-width: 860px) {
  body.ehl-page .ind { grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; gap: 4px 18px; padding: 22px 24px; }
  body.ehl-page .ind .badge-ico { grid-row: span 2; }
  body.ehl-page .ind p { margin-top: 0; }
}

/* service cards two across on a laptop: one column of points */
@media (min-width: 901px) and (max-width: 1100px) {
  body.ehl-page .svc .checks { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* footer on a laptop or tablet: the address beside the about text, under
   the last link column, instead of a half-empty row */
@media (min-width: 761px) and (max-width: 1100px) {
  body.ehl-page .foot-grid > div:first-child { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: 40px; align-items: end; }
  body.ehl-page .foot-grid > div:first-child > .logo, body.ehl-page .foot-grid > div:first-child > p { grid-column: 1 / -2; }
  body.ehl-page .foot-grid > div:first-child > .contact-lines { grid-column: -2 / -1; grid-row: 1 / span 2; margin-top: 0; }
}

/* the team stack keeps its circles round, and its note drops below on a phone */
body.ehl-page .av { flex: none; }
body.ehl-page .embed { flex-wrap: wrap; row-gap: 14px; }
body.ehl-page .embed small { flex: 1 1 150px; }

/* figures two across on a phone: the longest one still fits its cell */
@media (max-width: 600px) { body.ehl-page .stat strong { font-size: min(38px, 8vw); } }

/* events on a phone: the date sits above as a short tag, the text takes the full width */
@media (max-width: 600px) {
  body.ehl-page .ev { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px; }
  body.ehl-page .ev-date { width: auto; height: auto; justify-self: start; grid-auto-flow: column; align-items: baseline; gap: 10px; padding: 8px 14px; border-radius: 12px; }
  body.ehl-page .ev-date strong { font-size: 22px; }
}

/* panel title: one line, shortened if the panel is narrow */
body.ehl-page .console-bar > i, body.ehl-page .console-bar .live { flex: none; }
body.ehl-page .console-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   Blog: the index, the article cards, and the reading layout
   ===================================================================== */
body.ehl-light { --art-bg: #ffffff; }
body.ehl-dark { --art-bg: #070b14; }

/* ---------------------------------------------------------- cards */
body.ehl-page .post-meta { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); }
body.ehl-page .post-body > p:not(.tag):not(.post-meta) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
body.ehl-page .latest-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 32px; margin-bottom: clamp(32px, 4vw, 52px); }
body.ehl-page .latest-head .head { margin-bottom: 0; }
body.ehl-page .latest-head > .link { flex: none; padding-bottom: 6px; }
@media (max-width: 760px) { body.ehl-page .latest-head > .link { margin-top: 18px; } }
@media (min-width: 601px) and (max-width: 860px) {
  body.ehl-page .latest-sec .posts > .post:last-child:nth-child(odd) { flex-direction: row; }
  body.ehl-page .latest-sec .posts > .post:last-child:nth-child(odd) > .cover { flex: 0 0 42%; aspect-ratio: auto; min-height: 220px; }
}

/* covers: a pattern of their own and, when large, the cover line */
body.ehl-page .cover.pat-1 .cover-grid { background-image: radial-gradient(rgba(255, 255, 255, .2) 1.2px, transparent 1.6px); background-size: 18px 18px; }
body.ehl-page .cover.pat-2 .cover-grid { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 15px); background-size: auto; }
body.ehl-page .cover.pat-3 .cover-grid { background-image: repeating-radial-gradient(circle at 85% 18%, rgba(255, 255, 255, .09) 0 1px, transparent 1px 24px); background-size: auto; }
body.ehl-page .cover.big .cover-title { left: 7%; right: 32%; bottom: 20%; font-size: clamp(24px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
body.ehl-page .cover.big .cover-ico { width: 72px; height: 72px; border-radius: 20px; }

/* ---------------------------------------------------------- the index */
body.ehl-page .blog-sec { padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 8vw, 110px); }
body.ehl-page .blog-mast { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; }
body.ehl-page .bm-kicker { margin-bottom: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
body.ehl-page .blog-mast h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.035em; }
body.ehl-page .bm-lede { max-width: 620px; margin-top: 12px; color: var(--muted); font-size: 17px; }
body.ehl-page .bm-search { flex: 0 1 320px; min-width: 0; }
body.ehl-page .blog-tabs { display: flex; flex-wrap: nowrap; gap: 0 28px; margin: 26px 0 clamp(28px, 3.5vw, 40px); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; -webkit-mask: none; mask: none; }
body.ehl-page .blog-tabs::-webkit-scrollbar { display: none; }
body.ehl-page .blog-tabs .fchip { flex: none; height: auto; margin-bottom: -1px; padding: 14px 0 13px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: 15px; white-space: nowrap; }
body.ehl-page .blog-tabs .fchip:hover { color: var(--text); }
body.ehl-page .blog-tabs .fchip[aria-pressed="true"] { color: var(--text); background: none; border-bottom-color: var(--text); }

/* the newest story, large */
body.ehl-page .post-lead { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 3.6vw, 52px); align-items: center; margin-bottom: clamp(36px, 5vw, 60px); color: inherit; }
body.ehl-page .post-lead .cover { border-radius: 18px; aspect-ratio: 16 / 10; }
body.ehl-page .pl-kicker { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
body.ehl-page .pl-kicker span { color: var(--accent); }
body.ehl-page .post-lead h2 { margin-top: 14px; font-size: clamp(27px, 2.9vw, 40px); line-height: 1.1; letter-spacing: -.03em; transition: color .2s var(--ease); }
body.ehl-page .post-lead:hover h2 { color: var(--accent); }
body.ehl-page .post-lead:hover .cover-ring { transform: rotate(25deg) scale(1.05); }
body.ehl-page .pl-ex { margin-top: 14px; color: var(--muted); font-size: 17px; line-height: 1.6; }
body.ehl-page .pl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; color: var(--muted); font-size: 13.5px; }
body.ehl-page .byline.sm .avatar { width: 32px; height: 32px; font-size: 12px; }
body.ehl-page .byline.sm small { display: none; }
body.ehl-page .post-lead .link { margin-top: 20px; }
@media (max-width: 860px) { body.ehl-page .post-lead { grid-template-columns: minmax(0, 1fr); } }

/* the feed and the side column */
body.ehl-page .blog-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; border-top: 1px solid var(--line); }
body.ehl-page .bf-title { padding: 26px 0 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.ehl-page .feed-item { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); color: inherit; }
body.ehl-page .feed-item:last-of-type { border-bottom: 0; }
body.ehl-page .fi-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
body.ehl-page .fi-by .avatar { width: 24px; height: 24px; font-size: 9.5px; }
body.ehl-page .fi-by b { color: var(--text); font-weight: 600; }
body.ehl-page .feed-item h3 { margin-top: 10px; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; letter-spacing: -.015em; transition: color .2s var(--ease); }
body.ehl-page .feed-item:hover h3 { color: var(--accent); }
body.ehl-page .feed-item:hover .cover-ring { transform: rotate(25deg) scale(1.05); }
body.ehl-page .feed-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
body.ehl-page .fi-ex { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
body.ehl-page .fi-meta { display: flex; gap: 14px; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
body.ehl-page .fi-thumb { border-radius: 10px; aspect-ratio: 4 / 3; }
body.ehl-page .fi-thumb .cover-tag { display: none; }
body.ehl-page .fi-thumb .cover-ico { right: 14%; top: 24%; width: 44px; height: 44px; border-radius: 12px; }
body.ehl-page .fi-thumb .cover-ico .ico { width: 22px; height: 22px; }
body.ehl-page .blog-feed .empty { padding: 40px 0; }

body.ehl-page .blog-side { position: sticky; top: 100px; display: grid; gap: 34px; padding-top: 30px; }
body.ehl-page .bs-title { margin-bottom: 14px; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
body.ehl-page .bs-picks { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: pick; }
body.ehl-page .bs-picks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); counter-increment: pick; }
body.ehl-page .bs-picks li::before { content: "0" counter(pick); padding-top: 2px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-2); }
body.ehl-page .bs-picks a { color: inherit; }
body.ehl-page .bs-picks b { display: block; font-size: 15px; line-height: 1.35; transition: color .2s var(--ease); }
body.ehl-page .bs-picks a:hover b { color: var(--accent); }
body.ehl-page .bs-picks span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
body.ehl-page .bs-topics { display: flex; flex-wrap: wrap; gap: 8px; }
body.ehl-page .bs-topics button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
body.ehl-page .bs-topics button:hover { border-color: var(--accent); color: var(--accent); }
body.ehl-page .bs-topics i { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
body.ehl-page .bs-news { padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
body.ehl-page .bs-text { margin-bottom: 14px; color: var(--muted); font-size: 14.5px; }
body.ehl-page .bs-form { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.ehl-page .bs-form .fsearch { height: 46px; }
body.ehl-page .bs-form .btn { min-height: 46px; justify-content: center; }
@media (max-width: 1100px) {
  body.ehl-page .blog-body { grid-template-columns: minmax(0, 1fr); }
  body.ehl-page .blog-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 8px; border-top: 1px solid var(--line); }
  body.ehl-page .blog-side .bs-block { padding-top: 22px; }
  body.ehl-page .bs-news { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  body.ehl-page .blog-side { grid-template-columns: minmax(0, 1fr); }
  body.ehl-page .bm-search { flex: 1 1 100%; }
  body.ehl-page .feed-item { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; padding: 22px 0; }
  body.ehl-page .fi-thumb { aspect-ratio: 1; }
  body.ehl-page .fi-thumb .cover-ico { right: 50%; top: 50%; transform: translate(50%, -50%); }
  body.ehl-page .fi-ex { display: none; }
  body.ehl-page .feed-item h3 { font-size: 18px; }
}

/* ---------------------------------------------------------- one article */
body.ehl-page .read-progress { position: fixed; inset: 0 0 auto; z-index: 70; height: 3px; pointer-events: none; }
body.ehl-page .read-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
body.ehl-article .ehl-chrome-header { transition: transform .2s var(--ease); }
body.ehl-article .ehl-chrome-header.tucked { transform: translateY(-100%); }
body.ehl-page .art-page .art-top, body.ehl-page .art-page .art-body { background: var(--art-bg); }
body.ehl-page .art-col { width: min(720px, 100% - 40px); margin-inline: auto; }

body.ehl-page .art-top { padding: clamp(32px, 5vw, 64px) 0 0; }
body.ehl-page .art-kicker { display: flex; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 14px; }
body.ehl-page .art-kicker a { color: var(--accent); font-weight: 600; }
body.ehl-page .art-kicker span { opacity: .5; }
body.ehl-page .art-top h1 { font-size: clamp(31px, 4.3vw, 48px); line-height: 1.1; letter-spacing: -.03em; }
body.ehl-page .art-sub { margin-top: 16px; color: var(--muted); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; }
body.ehl-page .art-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.ehl-page .art-byline .avatar { flex: none; width: 44px; height: 44px; font-size: 15px; }
body.ehl-page .art-byline > div { flex: 1; min-width: 0; }
body.ehl-page .art-byline b { display: block; font-size: 15px; }
body.ehl-page .art-byline > div > span { display: block; color: var(--muted); font-size: 13.5px; }
body.ehl-page .art-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.ehl-page .art-share a, body.ehl-page .art-share button { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
body.ehl-page .art-share a:hover, body.ehl-page .art-share button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 600px) { body.ehl-page .art-share.top { display: none; } }
body.ehl-page .art-cover { width: min(1080px, 100% - 40px); margin: clamp(28px, 4vw, 44px) auto 0; }
body.ehl-page .art-cover .cover { border-radius: 18px; aspect-ratio: 21 / 9; }
@media (max-width: 700px) { body.ehl-page .art-cover .cover { aspect-ratio: 16 / 10; } body.ehl-page .art-cover .cover-title { right: 26%; } }

body.ehl-page .art-body { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 100px); }
body.ehl-page .art-grid { display: grid; grid-template-columns: minmax(0, 1fr) min(720px, 100% - 40px) minmax(0, 1fr); }
body.ehl-page .art-grid > .art-main { grid-column: 2; grid-row: 1; width: auto; margin: 0; }
body.ehl-page .art-toc { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; position: sticky; top: 104px; width: 210px; margin-right: 52px; font-size: 13px; }
body.ehl-page .art-toc p { margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.ehl-page .art-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
body.ehl-page .art-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--muted); line-height: 1.4; transition: color .2s var(--ease), border-color .2s var(--ease); }
body.ehl-page .art-toc a:hover { color: var(--text); }
body.ehl-page .art-toc a.on { color: var(--text); border-left-color: var(--accent); }
@media (max-width: 1279px) { body.ehl-page .art-toc { display: none; } }

/* the text itself, set for reading */
body.ehl-page .prose { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.75; color: color-mix(in srgb, var(--text) 88%, var(--muted)); overflow-wrap: break-word; }
body.ehl-page .prose > * + * { margin-top: 1.35em; }
body.ehl-page .prose > :first-child { margin-top: 0; }
body.ehl-page .prose h2 { margin-top: 2em; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.22; letter-spacing: -.02em; color: var(--text); scroll-margin-top: 90px; }
body.ehl-page .prose h3 { margin-top: 1.7em; font-family: var(--font-display); font-size: 21px; line-height: 1.3; color: var(--text); scroll-margin-top: 90px; }
body.ehl-page .prose h2 + *, body.ehl-page .prose h3 + * { margin-top: .6em; }
body.ehl-page .prose strong { font-weight: 600; color: var(--text); }
body.ehl-page .prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s var(--ease); }
body.ehl-page .prose a:hover { color: var(--accent); }
body.ehl-page .prose ul, body.ehl-page .prose ol { padding-left: 1.25em; }
body.ehl-page .prose ul { list-style: disc; }
body.ehl-page .prose ol { list-style: decimal; }
body.ehl-page .prose li + li { margin-top: .45em; }
body.ehl-page .prose li::marker { color: var(--muted); }
body.ehl-page .prose :not(pre) > code { padding: .12em .38em; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); font-family: var(--font-mono); font-size: .78em; color: var(--text); white-space: break-spaces; }
body.ehl-page .prose pre { position: relative; margin-top: 1.6em; padding: 40px 22px 20px; overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: #0a1120; color: #d6e0f0; font-size: 14px; line-height: 1.65; tab-size: 2; }
body.ehl-page .prose pre code { font-family: var(--font-mono); font-size: inherit; white-space: pre; }
body.ehl-page .prose pre::before { content: "CODE"; position: absolute; left: 22px; top: 13px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; color: rgba(214, 224, 240, .45); }
body.ehl-page .prose pre.lang-http::before { content: "HTTP"; }
body.ehl-page .prose pre.lang-js::before { content: "JAVASCRIPT"; }
body.ehl-page .prose pre.lang-ts::before { content: "TYPESCRIPT"; }
body.ehl-page .prose pre.lang-python::before { content: "PYTHON"; }
body.ehl-page .prose pre.lang-bash::before { content: "SHELL"; }
body.ehl-page .prose pre.lang-powershell::before { content: "POWERSHELL"; }
body.ehl-page .prose pre.lang-yaml::before { content: "YAML"; }
body.ehl-page .prose pre.lang-sql::before { content: "SQL"; }
body.ehl-page .prose pre.lang-json::before { content: "JSON"; }
body.ehl-page .prose pre.lang-text::before { content: "OUTPUT"; }
body.ehl-page .prose pre.lang-kql::before { content: "KQL"; }
body.ehl-page .pre-copy { position: absolute; right: 12px; top: 8px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(214, 224, 240, .18); background: rgba(255, 255, 255, .04); color: rgba(214, 224, 240, .8); font-family: var(--font-mono); font-size: 11px; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
body.ehl-page .pre-copy:hover { border-color: rgba(214, 224, 240, .5); color: #fff; }
body.ehl-page .prose blockquote { margin-left: 0; padding-left: 22px; border-left: 3px solid var(--text); font-style: italic; }
body.ehl-page .prose blockquote > * + * { margin-top: .6em; }
body.ehl-page .prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }

/* pulled quote */
body.ehl-page .prose .wp-block-pullquote { margin: 2.2em 0; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.ehl-page .prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
body.ehl-page .prose .wp-block-pullquote p { color: var(--text); font-size: clamp(23px, 2.5vw, 29px); line-height: 1.38; letter-spacing: -.01em; font-style: italic; }

/* in short */
body.ehl-page .prose .takeaways { padding: 22px 26px; border-radius: 14px; border-left: 3px solid var(--accent); background: var(--surface-2); font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; }
body.ehl-page .prose .takeaways .tk-label { margin-bottom: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
body.ehl-page .prose .takeaways > * + * { margin-top: 0; }
body.ehl-page .prose .takeaways ul { padding-left: 1.1em; }
body.ehl-page .prose .takeaways li { color: var(--text); }

/* notes, warnings, tips */
body.ehl-page .prose .callout { padding: 18px 22px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; }
body.ehl-page .prose .callout > * + * { margin-top: .5em; }
body.ehl-page .prose .callout .co-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); }
body.ehl-page .prose .callout-warning { border-left-color: var(--warn); }
body.ehl-page .prose .callout-tip { border-left-color: var(--accent-2); }

/* figures in numbers */
body.ehl-page .prose .art-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); font-family: var(--font-body); }
body.ehl-page .prose .as-item { display: grid; align-content: start; gap: 6px; padding: 20px 22px; background: var(--art-bg); }
body.ehl-page .prose .as-item b { font-family: var(--font-display); font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -.03em; color: var(--accent); }
body.ehl-page .prose .as-item span { color: var(--text); font-size: 15px; line-height: 1.45; }
body.ehl-page .prose .as-item small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* a process, drawn as numbered steps on a line */
body.ehl-page .prose .art-flow { margin: 2em 0; font-family: var(--font-body); }
body.ehl-page .prose .art-flow ol { display: grid; margin: 0; padding: 0; list-style: none; }
body.ehl-page .prose .art-flow li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; margin: 0; padding-bottom: 20px; }
body.ehl-page .prose .art-flow li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
body.ehl-page .prose .art-flow li:last-child { padding-bottom: 0; }
body.ehl-page .prose .art-flow li:last-child::before { display: none; }
body.ehl-page .prose .art-flow li i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--art-bg); color: var(--accent); font-style: normal; font-family: var(--font-mono); font-size: 13px; }
body.ehl-page .prose .art-flow b { padding-top: 10px; color: var(--text); font-family: var(--font-display); font-size: 17px; line-height: 1.3; }
body.ehl-page .prose .art-flow li span { margin-top: 3px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
body.ehl-page .prose figcaption { margin-top: 14px; color: var(--muted); font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; }
body.ehl-page .prose figcaption small { display: block; margin-top: 2px; font-size: 12.5px; }

/* a comparison, drawn as bars */
body.ehl-page .prose .art-bars { margin: 2em 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; font-family: var(--font-body); }
body.ehl-page .prose .ab-row { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) 70px; gap: 14px; align-items: center; padding: 8px 0; }
body.ehl-page .prose .ab-label { color: var(--text); font-size: 15px; line-height: 1.35; }
body.ehl-page .prose .ab-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
body.ehl-page .prose .ab-track i { display: block; width: var(--v); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
body.ehl-page .prose .ab-row b { color: var(--text); font-family: var(--font-display); font-size: 16px; text-align: right; }
@media (max-width: 600px) {
  body.ehl-page .prose .ab-row { grid-template-columns: minmax(0, 1fr) 60px; gap: 6px 12px; }
  body.ehl-page .prose .ab-label { grid-column: 1 / -1; }
}

/* a list to tick off */
body.ehl-page .prose ul.checklist { padding-left: 0; list-style: none; font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
body.ehl-page .prose ul.checklist li { position: relative; padding-left: 34px; color: var(--text); }
body.ehl-page .prose ul.checklist li + li { margin-top: .7em; }
body.ehl-page .prose ul.checklist li::before { content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
body.ehl-page .prose ul.checklist li::after { content: ""; position: absolute; left: 7px; top: calc(.1em + 4px); width: 6px; height: 10px; border: solid var(--accent-2); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* tables */
body.ehl-page .prose .table-scroll { overflow-x: auto; margin-top: 1.6em; border: 1px solid var(--line); border-radius: 14px; }
body.ehl-page .prose figure.wp-block-table { margin: 0; }
body.ehl-page .prose table { width: 100%; min-width: 540px; border-collapse: collapse; font-family: var(--font-body); font-size: 15px; line-height: 1.55; }
body.ehl-page .prose th, body.ehl-page .prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
body.ehl-page .prose tr:last-child td { border-bottom: 0; }
body.ehl-page .prose th { background: var(--surface-2); color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
body.ehl-page .prose td { color: var(--text); }

/* the sources at the end */
body.ehl-page .prose h2#sources { margin-top: 2.6em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: 20px; }
body.ehl-page .prose ol.sources { padding-left: 1.4em; color: var(--muted); font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; }
body.ehl-page .prose ol.sources li + li { margin-top: .5em; }
body.ehl-page .prose ol.sources a { color: var(--text); }

@media (max-width: 600px) {
  body.ehl-page .prose { font-size: 18px; line-height: 1.7; }
  body.ehl-page .prose pre { margin-inline: -20px; border-radius: 0; border-inline: 0; font-size: 13px; }
  body.ehl-page .prose .takeaways, body.ehl-page .prose .callout { padding: 18px 18px; }
}

/* after the text: share, then who wrote it */
body.ehl-page .art-end { margin-top: 52px; }
body.ehl-page .art-end .art-share { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.ehl-page .art-end .art-share::before { content: "Share this article"; margin-right: auto; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.ehl-page .art-author { display: flex; align-items: flex-start; gap: 18px; margin-top: 32px; }
body.ehl-page .art-author .avatar { flex: none; width: 64px; height: 64px; font-size: 20px; }
body.ehl-page .aa-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
body.ehl-page .art-author b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 19px; }
body.ehl-page .art-author small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
body.ehl-page .art-author p:not(.aa-label) { margin-top: 10px; color: var(--muted); font-size: 15.5px; }

/* more articles, then a quiet way to talk to us */
body.ehl-page .art-more { padding: clamp(56px, 7vw, 88px) 0; }
body.ehl-page .art-more .head h2 { font-size: clamp(26px, 3vw, 36px); }
body.ehl-page .art-cta { padding: clamp(40px, 5vw, 64px) 0; }
body.ehl-page .ac-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(24px, 3.4vw, 40px); border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
body.ehl-page .ac-kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
body.ehl-page .ac-box h2 { margin-top: 8px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
body.ehl-page .ac-box p { max-width: 560px; margin-top: 8px; color: var(--muted); }
body.ehl-page .ac-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) { body.ehl-page .ac-actions .btn { flex: 1 1 100%; justify-content: center; } }

body.ehl-page .bs-form .cf-status:empty { display: none; }

/* topic tabs that run past the edge fade out, so the scroll is visible */
@media (max-width: 700px) { body.ehl-page .blog-tabs { -webkit-mask: linear-gradient(90deg, #000 82%, transparent); mask: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; } }

body.ehl-page .cover-title .nw { white-space: nowrap; }
body.ehl-page .art-byline > .art-share { flex: none; margin-left: auto; }

body.ehl-page .prose .ab-row b { white-space: nowrap; }
@media (max-width: 600px) { body.ehl-page .prose .ab-row { grid-template-columns: minmax(0, 1fr) auto; } }