/* ==========================================================================
   Strix — landing.css
   Reusable spoke / landing template (service-detail + audience pages).
   Built on base.css tokens + components.css; dark theme.
   ========================================================================== */

.landing-container {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* ---- Hero band ---- */
.landing-hero {
  position: relative;
  padding: clamp(6rem, 12vw, 9rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
}
.landing-hero-glow {
  inset-block-start: -20%;
  inset-inline-end: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgba(47, 212, 190, .14), transparent 62%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.landing-hero > .landing-container { position: relative; z-index: 1; }

/* .landing-eyebrow shares the theme-wide eyebrow rule in components.css. */
.landing-title {
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 1.1rem;
  max-width: 100%;
}
.landing-lead {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  line-height: 1.7;
  color: #B9C0CE;
  max-width: 60ch;
  margin: 0 0 1.8rem;
}

/* ---- CTA buttons (shared hero + band) ---- */
.landing-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.landing-cta-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent, #2FD4BE); color: #04140F; font-weight: 600; font-size: 1rem;
  padding: .8rem 1.5rem; border-radius: 999px;
  transition: transform .2s, box-shadow .2s;
}
.landing-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(47, 212, 190, .65); color: #04140F; }
.landing-cta-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(255, 255, 255, .18); color: #ECEFF4; font-size: 1rem;
  padding: .8rem 1.4rem; border-radius: 999px;
  transition: border-color .2s, background .2s;
}
.landing-cta-secondary:hover { border-color: var(--accent, #2FD4BE); background: rgba(47, 212, 190, .06); color: #ECEFF4; }

/* ---- Hero media ---- */
.landing-hero-media {
  margin-top: clamp(2rem, 5vw, 3rem);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
  background: #0E1116;
}
.landing-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- Body prose (the_content) ---- */
.landing-body { padding: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 7vw, 5rem); }
/* No max-width here: .landing-prose / .landing-steps / .landing-faq share the
   .landing-container edges so every block lines up in one full-width column. */
.landing-prose > :first-child { margin-top: 0; }
.landing-prose h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 600; color: #fff; letter-spacing: -.01em; line-height: 1.2;
  margin: 2.6rem 0 1rem;
}
.landing-prose h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 600; color: #ECEFF4; margin: 1.8rem 0 .7rem;
}
.landing-prose p { font-size: 1.06rem; line-height: 1.8; color: #B9C0CE; margin: 0 0 1.1rem; }
.landing-prose a { color: var(--accent, #2FD4BE); text-decoration: underline; text-underline-offset: 3px; }
.landing-prose ul, .landing-prose ol { margin: 0 0 1.3rem; padding-inline-start: 1.3rem; color: #B9C0CE; }
.landing-prose li { font-size: 1.05rem; line-height: 1.75; margin-bottom: .55rem; }
.landing-prose ul li::marker { color: var(--accent, #2FD4BE); }
.landing-prose strong { color: #ECEFF4; font-weight: 600; }
.landing-prose table { width: 100%; border-collapse: collapse; margin: .4rem 0 1.5rem; font-size: .86rem; }
.landing-prose thead th { text-align: start; background: rgba(255, 255, 255, .04); color: #ECEFF4; font-weight: 600; padding: .55rem .6rem; border-bottom: 2px solid color-mix(in srgb, var(--accent, #2FD4BE) 45%, transparent); }
.landing-prose tbody td { padding: .55rem .6rem; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #B9C0CE; line-height: 1.6; vertical-align: top; }
.landing-prose tbody td:first-child { color: #ECEFF4; font-weight: 500; }
.landing-prose tbody tr:last-child td { border-bottom: 0; }

/* ---- Closing CTA band ---- */
.landing-cta-band {
  position: relative;
  padding: clamp(3rem, 7vw, 4.5rem) 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
  overflow: hidden;
}
.landing-cta-glow {
  inset-block-end: -40%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 70vw; height: 40vw; max-width: 800px;
  background: radial-gradient(circle, rgba(47, 212, 190, .12), transparent 60%);
  pointer-events: none;
}
.landing-cta-band > .landing-container { position: relative; z-index: 1; }
.landing-cta-title { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 600; color: #fff; margin: 0 0 .7rem; }
.landing-cta-lead { font-size: 1.1rem; color: #B9C0CE; max-width: 48ch; margin: 0 auto 1.6rem; }
.landing-cta-band .landing-hero-cta { justify-content: center; }

/* Breadcrumb styling is shared with every other view — see components.css.
   (The link's accent hover comes from the global a:hover in base.css.) */

/* ==========================================================================
   Content-driven modules (per-service accent via --la)
   ========================================================================== */
.landing-hero .landing-eyebrow { color: var(--la, var(--accent, #2FD4BE)); }

.landing-mod { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.landing-sec-title,
.landing-related-title {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; color: #fff; letter-spacing: -.01em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.2rem); position: relative; padding-bottom: .7rem;
}
.landing-sec-title::after,
.landing-related-title::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 44px; height: 3px; border-radius: 3px; background: var(--la, var(--accent, #2FD4BE));
}

/* ---- feature grid ---- */
/* Balanced grid — tops out at 3 per row (max 6 tiles, never a lonely orphan row). */
.landing-features { border-top: 1px solid rgba(255, 255, 255, .06); }
.landing-feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.landing-feature-card {
  background: #0E1116; border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px;
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .55rem;
  transition: border-color .2s, transform .2s;
}
/* !important on transform: the card is a scroll-reveal target, so GSAP leaves an
   inline transform behind when the reveal lands and that outranks a plain rule. */
.landing-feature-card:hover { border-color: color-mix(in srgb, var(--la, #2FD4BE) 45%, transparent); transform: translateY(-3px) !important; }
.landing-feature-dot { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--la, #2FD4BE) 16%, transparent); position: relative; flex: none; margin-bottom: .3rem; }
.landing-feature-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 4px; background: var(--la, var(--accent, #2FD4BE)); }
.landing-feature-title { font-size: 1.1rem; font-weight: 600; color: #ECEFF4; margin: 0; }
.landing-feature-text { font-size: .98rem; line-height: 1.65; color: #B9C0CE; margin: 0; }

/* ---- process steps ---- */
.landing-steps-sec { border-top: 1px solid rgba(255, 255, 255, .06); }
.landing-steps { display: grid; gap: 1rem; }
.landing-step { display: flex; gap: 1.1rem; align-items: flex-start; background: #0E1116; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 1.2rem 1.3rem; }
.landing-step-num { flex: none; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--la, var(--accent, #2FD4BE)); width: 2.4rem; height: 2.4rem; border: 1.5px solid var(--la, var(--accent, #2FD4BE)); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.landing-step-title { font-size: 1.08rem; font-weight: 600; color: #ECEFF4; margin: 0 0 .25rem; }
.landing-step-text { font-size: .98rem; line-height: 1.65; color: #B9C0CE; margin: 0; }

/* ---- faq (native accordion) ---- */
.landing-faq { display: grid; gap: .7rem; }
.landing-faq .faq-item { background: #0E1116; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; overflow: hidden; }
.landing-faq .faq-q { width: 100%; text-align: start; background: none; border: none; cursor: pointer; padding: 1.05rem 1.3rem; font-family: inherit; font-size: 1.05rem; font-weight: 600; color: #ECEFF4; display: flex; align-items: center; gap: 1rem; }
.landing-faq .faq-icon { flex: none; width: 22px; height: 22px; transition: transform .3s; color: var(--la, var(--accent, #2FD4BE)); display: inline-flex; }
.landing-faq .faq-icon svg { width: 22px; height: 22px; display: block; }
.landing-faq .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.landing-faq .faq-a p { font-size: 1rem; line-height: 1.7; color: #B9C0CE; margin: 0 1.3rem 1.2rem; }

/* ==========================================================================
   Feature icon + hero product mockup
   ========================================================================== */
.landing-feature-ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: color-mix(in srgb, var(--la, #2FD4BE) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--la, #2FD4BE) 25%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--la, #2FD4BE); margin-bottom: .5rem;
}
.landing-feature-ico svg { width: 22px; height: 22px; display: block; }

.landing-hero-visual { margin-top: clamp(2rem, 5vw, 3.2rem); }
.lhv-window {
  max-width: 760px; margin-inline: auto;
  background: #0C0F14; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px;
  overflow: hidden; box-shadow: 0 40px 100px -34px rgba(0, 0, 0, .75);
  text-align: start;
}
.lhv-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .07); background: #0E1116; }
.lhv-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.lhv-dot:first-child { background: var(--warn, #E0906E); opacity: .85; }
.lhv-addr { margin-inline-start: auto; font-family: 'Fredoka', sans-serif; font-size: .72rem; letter-spacing: .02em; color: #6C7A75; background: rgba(255, 255, 255, .04); padding: .22rem .7rem; border-radius: 6px; }
.lhv-grid { display: grid; grid-template-columns: 68px 1fr; min-height: 0; }
.lhv-side { border-inline-end: 1px solid rgba(255, 255, 255, .06); padding: 1.1rem .9rem; display: flex; flex-direction: column; gap: .85rem; align-items: center; }
.lhv-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--la, #2FD4BE); opacity: .9; }
.lhv-nav { width: 32px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .09); }
.lhv-nav.lhv-on { background: var(--la, #2FD4BE); opacity: .55; }
.lhv-main { padding: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.lhv-cards { display: grid; grid-template-columns: 1fr; gap: .85rem; }
.lhv-card { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: .95rem; display: flex; flex-direction: column; gap: .55rem; }
.lhv-k { width: 55%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .13); }
.lhv-v { width: 78%; height: 15px; border-radius: 4px; background: var(--la, #2FD4BE); opacity: .55; }
.lhv-chart { display: flex; align-items: flex-end; gap: .5rem; height: 96px; padding: .6rem; background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .05); border-radius: 10px; }
.lhv-chart i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, var(--la, #2FD4BE), transparent); opacity: .6; }
.lhv-rows { display: flex; flex-direction: column; gap: .6rem; }
.lhv-rows span { height: 11px; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.lhv-rows span:nth-child(1) { width: 92%; }
.lhv-rows span:nth-child(2) { width: 68%; }
.lhv-rows span:nth-child(3) { width: 80%; }

/* ---- Website-build visual: a landing page inside the browser ---- */
.lhv-site { padding: 1.1rem 1.2rem 1.35rem; display: flex; flex-direction: column; gap: 1.05rem; min-height: 320px; }
.lhv-topnav { display: flex; align-items: center; gap: .7rem; padding-bottom: .85rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lhv-logo.sm { width: 22px; height: 22px; border-radius: 6px; }
.lhv-links { display: flex; gap: .5rem; margin-inline-start: .3rem; }
.lhv-links i { width: 26px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.lhv-pill { margin-inline-start: auto; width: 62px; height: 22px; border-radius: 11px; background: var(--la, #2FD4BE); opacity: .85; }
.lhv-web-hero { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; padding: .3rem 0; }
.lhv-web-copy { display: flex; flex-direction: column; gap: .58rem; }
.lhv-line { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .12); }
.lhv-line.lg { height: 15px; width: 90%; background: rgba(255, 255, 255, .2); }
.lhv-line.lg.sh { width: 62%; }
.lhv-line.sm { height: 8px; width: 84%; }
.lhv-line.sm.w60 { width: 54%; }
.lhv-pill.big { margin-top: .5rem; width: 98px; height: 26px; border-radius: 13px; background: var(--la, #2FD4BE); opacity: .9; }
.lhv-web-art { position: relative; height: 92px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(150deg, color-mix(in srgb, var(--la, #2FD4BE) 26%, transparent), rgba(255, 255, 255, .02)); }
.lhv-web-art-glow { position: absolute; width: 92px; height: 92px; border-radius: 50%; background: var(--la, #2FD4BE); opacity: .3; filter: blur(26px); inset: auto -12px -16px auto; }
.lhv-web-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.lhv-web-tiles span { height: 46px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }

/* ---- Store visual: product grid + cart ---- */
.lhv-shop { padding: 1.1rem 1.2rem 1.35rem; display: flex; flex-direction: column; gap: 1rem; min-height: 320px; }
.lhv-shop-bar { display: flex; align-items: center; gap: .7rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lhv-search { flex: 1; max-width: 210px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.lhv-cart { position: relative; margin-inline-start: auto; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--la, #2FD4BE) 22%, transparent); display: inline-flex; align-items: center; justify-content: center; }
.lhv-cart i { width: 13px; height: 10px; border: 2px solid var(--la, #2FD4BE); border-top: 0; border-radius: 0 0 4px 4px; }
.lhv-cart::after { content: ""; position: absolute; top: 5px; inset-inline-end: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--la, #2FD4BE); }
.lhv-prods { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.lhv-prod { position: relative; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: .55rem; display: flex; flex-direction: column; gap: .5rem; }
.lhv-prod-img { height: 56px; border-radius: 7px; background: linear-gradient(155deg, color-mix(in srgb, var(--la, #2FD4BE) 26%, transparent), rgba(255, 255, 255, .03)); }
.lhv-prod .lhv-line.sm { width: 80%; height: 7px; }
.lhv-prod-buy { display: flex; align-items: center; gap: .4rem; margin-top: auto; }
.lhv-price { width: 30px; height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.lhv-add { margin-inline-start: auto; width: 28px; height: 16px; border-radius: 5px; background: var(--la, #2FD4BE); opacity: .9; }
.lhv-tagsale { position: absolute; top: 6px; inset-inline-start: 6px; z-index: 1; font: 600 .52rem/1 'Fredoka', sans-serif; letter-spacing: .04em; color: #04140F; background: var(--la, #2FD4BE); padding: .16rem .34rem; border-radius: 4px; }

/* ---- Organic-SEO visual: search results with a #1 ranking + climb ---- */
.lhv-serp { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .85rem; min-height: 320px; }
.lhv-serp-search { display: flex; align-items: center; gap: .6rem; height: 34px; padding: 0 .8rem; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.lhv-serp-q { width: 46%; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .16); }
.lhv-serp-mag { position: relative; margin-inline-start: auto; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--la, #2FD4BE); }
.lhv-serp-mag::after { content: ""; position: absolute; width: 6px; height: 2px; background: var(--la, #2FD4BE); border-radius: 2px; transform: rotate(45deg); bottom: -2px; inset-inline-end: -3px; }
.lhv-serp-list { display: flex; flex-direction: column; gap: .55rem; }
.lhv-serp-item { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .05); }
.lhv-serp-item.lhv-top { background: color-mix(in srgb, var(--la, #2FD4BE) 12%, transparent); border-color: color-mix(in srgb, var(--la, #2FD4BE) 42%, transparent); }
.lhv-rank { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--la, #2FD4BE); color: #04140F; font: 600 .8rem/24px 'Fredoka', sans-serif; text-align: center; }
.lhv-rank.sm { background: rgba(255, 255, 255, .1); color: #8b97a3; }
.lhv-serp-lines { flex: 1; display: flex; flex-direction: column; gap: .38rem; }
.lhv-serp-lines i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.lhv-serp-lines i.t { width: 66%; height: 10px; background: color-mix(in srgb, var(--la, #2FD4BE) 55%, #cfd6dd); }
.lhv-serp-lines i.u { width: 40%; height: 6px; background: rgba(255, 255, 255, .07); }
.lhv-serp-item.lhv-top .lhv-serp-lines i.t { background: var(--la, #2FD4BE); }
.lhv-serp-trend { margin-top: auto; height: 52px; padding: .5rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .05); }
.lhv-serp-trend svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lhv-serp-trend .ln { fill: none; stroke: var(--la, #2FD4BE); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lhv-serp-trend .dt { fill: var(--la, #2FD4BE); }

/* ---- Paid-ads visual: campaign dashboard (Ad + KPIs + rising graph) ---- */
.lhv-ads { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; min-height: 320px; }
.lhv-ad-card { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.lhv-ad-badge { flex: none; margin-top: .1rem; font: 600 .58rem/1 'Fredoka', sans-serif; letter-spacing: .03em; color: #04140F; background: var(--la, #2FD4BE); padding: .22rem .4rem; border-radius: 4px; }
.lhv-ad-lines { flex: 1; display: flex; flex-direction: column; gap: .38rem; }
.lhv-ad-lines i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.lhv-ad-lines i.t { width: 60%; height: 10px; background: color-mix(in srgb, var(--la, #2FD4BE) 55%, #cfd6dd); }
.lhv-ad-lines i.u { width: 34%; height: 6px; background: rgba(255, 255, 255, .07); }
.lhv-ad-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.lhv-metric { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.lhv-metric-v { width: 58%; height: 16px; border-radius: 4px; background: var(--la, #2FD4BE); opacity: .8; }
.lhv-metric-k { width: 82%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.lhv-ad-graph { margin-top: auto; height: 74px; padding: .55rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .05); }
.lhv-ad-graph svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lhv-ad-graph .ar { fill: color-mix(in srgb, var(--la, #2FD4BE) 18%, transparent); stroke: none; }
.lhv-ad-graph .ln { fill: none; stroke: var(--la, #2FD4BE); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Onward navigation — complementary services + articles on the topic
   Card shell itself lives in components.css (.strix-related*), shared with the
   home, archive and single views; only the section frame is view-specific.
   ========================================================================== */
.landing-related {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-block-start: 1px solid rgba(255, 255, 255, .06);
}

/* ==========================================================================
   Breakpoints — ascending, one block per width
   ========================================================================== */
@media (min-width: 40em) {
  .landing-title { max-width: 22ch; }

  .landing-prose table { font-size: 1rem; }
  .landing-prose thead th { padding: .75rem .95rem; }
  .landing-prose tbody td { padding: .72rem .95rem; }

  .landing-feature-grid { grid-template-columns: repeat(2, 1fr); }

  /* Dashboard mockup gets its full height and 3-up KPI row from 40em up. */
  .lhv-grid { min-height: 320px; }
  .lhv-cards { grid-template-columns: repeat(3, 1fr); }

  .lhv-web-hero { grid-template-columns: 1fr .82fr; }
  .lhv-web-art { height: 128px; }

  .lhv-prods { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 64em) {
  .landing-feature-grid { grid-template-columns: repeat(3, 1fr); }
}