:root {
  --primary: #4F46E5;
  --button: #F97316;
  --bg: #EEF2FF;
  --surface: #FFFFFF;
  --secondary: #818CF8;
  --text: #1E1B4B;
  --muted: #475569;
  --line: #C7D2FE;
  --accent: #22C55E;
  --paper: #FFFFFF;
  --heading-font: Manrope, Inter, ui-sans-serif, system-ui;
  --body-font: Inter, ui-sans-serif, system-ui;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 48%, #eef4f8 100%);
  font-family: var(--body-font);
  line-height: 1.6;
  overflow-x: hidden;
}
body.direction-editorial-trust {
  background: linear-gradient(180deg, #fbfdff 0%, #f6f8fb 58%, #edf3f7 100%);
}
body.direction-conversion-system {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 42%, #eef6fb 100%);
}
body.industry-professional-trust {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 52%, #eef2f7 100%);
}
body.industry-wellness-care {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 56%, #edf7ee 100%);
}
body.industry-commerce-catalog {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 48%, #eef8f5 100%);
}
body.industry-learning-library {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 48%, #eef0ff 100%);
}
body.industry-saas-product {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 44%, #edf6ff 100%);
}
body.industry-local-service {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 48%, #edf7f4 100%);
}
a { color: inherit; }
img { max-width: 100%; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: 24px;
  align-items: center;
  padding: 18px clamp(18px, 5vw, 72px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  max-width: 100%;
}
.brand-mark {
  font-weight: 850;
  color: var(--primary);
  text-decoration: none;
  font-size: 22px;
}
nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
nav a {
  text-decoration: none;
  padding: 9px 11px;
  border-radius: 7px;
  color: #334155;
  font-size: 14px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
nav a:hover,
nav a:focus-visible {
  background: #edf6f8;
  color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 94, 117, .16);
}
nav a[aria-current="page"] {
  background: #e8f3f6;
  color: var(--primary);
}
.app-hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding: clamp(58px, 7vw, 104px) clamp(18px, 5vw, 72px) 52px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.72)),
    linear-gradient(135deg, rgba(37,99,235,.08), rgba(249,115,22,.07));
}
body.direction-editorial-trust .app-hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.58fr);
  min-height: 620px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,251,.92));
}
body.direction-conversion-system .app-hero {
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.74fr);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(110deg, rgba(255,255,255,.98), rgba(255,255,255,.74)),
    radial-gradient(circle at 80% 20%, rgba(194,65,12,.13), transparent 34%),
    linear-gradient(135deg, rgba(21,94,117,.12), rgba(37,99,235,.06));
}
.app-hero.plugin-device-showcase {
  position: relative;
  overflow: hidden;
}
.app-hero.layout-product-lab {
  min-height: 720px;
  grid-template-columns: minmax(0, .88fr) minmax(360px, .78fr);
  background:
    linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.82)),
    radial-gradient(circle at 76% 18%, rgba(21,94,117,.14), transparent 31%),
    linear-gradient(135deg, rgba(14,165,233,.1), rgba(248,113,113,.08));
}
.app-hero.plugin-device-showcase::before {
  content: "";
  position: absolute;
  inset: 72px clamp(18px, 5vw, 72px) auto auto;
  width: min(36vw, 520px);
  height: 260px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .06), transparent),
    linear-gradient(135deg, rgba(21, 94, 117, .12), rgba(194, 65, 12, .1));
  transform: rotate(-8deg);
  pointer-events: none;
}
.app-hero.plugin-proof-led {
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(255,255,255,.98), rgba(248,250,252,.86)),
    linear-gradient(135deg, rgba(37,99,235,.1), rgba(15,23,42,.05));
}
body.industry-saas-product .app-hero.layout-product-console {
  grid-template-columns: minmax(0, .82fr) minmax(360px, .82fr);
  background:
    linear-gradient(105deg, rgba(255,255,255,.98), rgba(255,255,255,.72)),
    linear-gradient(135deg, rgba(37,99,235,.13), rgba(20,184,166,.1));
}
body.industry-professional-trust .app-hero.layout-briefing-room {
  grid-template-columns: minmax(0, .94fr) minmax(320px, .58fr);
  background:
    linear-gradient(90deg, rgba(255,255,255,.98), rgba(248,250,252,.92)),
    linear-gradient(180deg, rgba(30,58,138,.08), rgba(180,83,9,.05));
}
body.industry-wellness-care .app-hero.layout-care-studio {
  grid-template-columns: minmax(0, .9fr) minmax(320px, .68fr);
  background:
    linear-gradient(120deg, rgba(255,255,255,.98), rgba(248,251,247,.78)),
    linear-gradient(135deg, rgba(15,118,110,.11), rgba(190,18,60,.07));
}
body.industry-commerce-catalog .app-hero.layout-market-shelf {
  grid-template-columns: minmax(0, .82fr) minmax(340px, .78fr);
  background:
    linear-gradient(100deg, rgba(255,255,255,.98), rgba(255,255,255,.74)),
    linear-gradient(135deg, rgba(15,118,110,.12), rgba(234,88,12,.1));
}
body.industry-learning-library .app-hero.layout-curriculum-map {
  grid-template-columns: minmax(0, .86fr) minmax(320px, .72fr);
  background:
    linear-gradient(110deg, rgba(255,255,255,.98), rgba(247,247,255,.78)),
    linear-gradient(135deg, rgba(67,56,202,.12), rgba(20,184,166,.08));
}
body.industry-local-service .app-hero.layout-service-map {
  grid-template-columns: minmax(0, .88fr) minmax(320px, .7fr);
  background:
    linear-gradient(110deg, rgba(255,255,255,.98), rgba(247,250,252,.78)),
    linear-gradient(135deg, rgba(15,118,110,.13), rgba(245,158,11,.08));
}
.app-hero.compact {
  min-height: 430px;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .5fr);
}
.hero-copy {
  max-width: 760px;
  min-width: 0;
  width: 100%;
}
.eyebrow {
  display: inline-flex;
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
h1 {
  font-family: var(--heading-font);
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: 0;
  margin: 0 0 20px;
  max-width: 12ch;
  overflow-wrap: break-word;
}
body.direction-editorial-trust h1 {
  max-width: 15ch;
  font-size: clamp(38px, 5vw, 68px);
}
body.direction-conversion-system h1 {
  max-width: 11ch;
}
.hero-copy p {
  color: var(--muted);
  font-size: 18px;
  max-width: 720px;
}
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.hero-proof span {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.82);
}
.hero-proof strong {
  color: var(--text);
  font-size: 14px;
}
.hero-proof span {
  color: var(--muted);
  font-size: 13px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.app-store-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.app-store-meta span {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}
.app-store-meta strong {
  color: var(--text);
  font-size: 12px;
}
.app-store-meta em {
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 7px;
  padding: 12px 17px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}
.button.primary { background: var(--button); color: #fff; }
.button.secondary { background: #e2e8f0; color: #0f172a; }
body.direction-conversion-system .button.primary {
  box-shadow: 0 18px 34px rgba(194, 65, 12, .22);
}
body.direction-editorial-trust .button.primary {
  background: var(--secondary);
}
.device-frame {
  margin: 0;
  min-height: 520px;
  border-radius: 34px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(15,23,42,.16)),
    #0b1220;
  border: 10px solid #111827;
  box-shadow: 0 30px 70px rgba(15, 23, 42, .24);
  position: relative;
}
.device-frame.layout-product-lab {
  isolation: isolate;
  transform: rotate(1.5deg);
  border-color: #07111f;
  box-shadow:
    0 34px 84px rgba(15, 23, 42, .28),
    -18px 18px 0 rgba(21, 94, 117, .12);
}
body.direction-editorial-trust .device-frame {
  min-height: 430px;
  border-radius: 12px;
  border-width: 1px;
  background: #fff;
  box-shadow: 0 20px 46px rgba(15, 23, 42, .14);
}
body.direction-conversion-system .device-frame {
  box-shadow: 0 34px 80px rgba(15, 23, 42, .28), 0 0 0 10px rgba(255,255,255,.7);
}
.device-bar {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  width: 92px;
  height: 22px;
  display: flex;
  justify-content: center;
  gap: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(15, 23, 42, .86);
}
.device-bar span {
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: #475569;
}
.device-status {
  position: absolute;
  top: 48px;
  left: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(15, 23, 42, .76);
  color: #fff;
  backdrop-filter: blur(10px);
}
.device-status strong {
  font-size: 13px;
}
.device-status span {
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 800;
}
.device-frame img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}
.device-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(15,23,42,.64));
  pointer-events: none;
}
.device-frame figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
  font-weight: 850;
}
.device-frame-fallback {
  display: grid;
  place-items: center;
  color: #fff;
  padding: 24px;
  font-size: 34px;
  font-weight: 850;
}
.screen-skeleton {
  display: grid;
  gap: 14px;
  width: min(78%, 340px);
  margin-top: 70px;
}
.screen-skeleton span {
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
}
.hero-product-console,
.hero-briefing,
.hero-wellness,
.hero-catalog,
.hero-learning,
.hero-local-service,
.hero-editorial,
.hero-answer-hub,
.hero-contact-intake {
  margin: 0;
  min-height: 460px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 28px 68px rgba(15, 23, 42, .16);
  position: relative;
}
.hero-product-console {
  padding: 18px;
  background: #0f172a;
  color: #e2e8f0;
}
.console-top {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
}
.console-grid {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.console-grid aside,
.console-grid main {
  min-height: 350px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.console-grid aside {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
}
.console-grid aside span,
.console-chart i {
  display: block;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
}
.console-grid main img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.console-chart {
  display: grid;
  gap: 14px;
  padding: 42px 24px;
}
.console-chart i {
  height: 52px;
}
.console-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px;
}
.console-status b {
  padding: 12px;
  border-radius: 8px;
  background: rgba(20,184,166,.18);
  color: #ccfbf1;
  font-size: 13px;
}
.hero-briefing {
  display: grid;
  align-content: end;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(15,23,42,.08)),
    #fff;
}
.hero-briefing img,
.hero-wellness img,
.hero-catalog img,
.hero-learning img,
.hero-local-service img,
.hero-editorial img,
.hero-contact-intake img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-briefing figcaption,
.hero-wellness figcaption,
.hero-catalog figcaption,
.hero-learning figcaption,
.hero-local-service figcaption,
.hero-answer-hub figcaption {
  position: relative;
  z-index: 1;
  margin: 18px;
  padding: 18px;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  color: var(--text);
  backdrop-filter: blur(10px);
}
.hero-briefing figcaption {
  display: grid;
  gap: 6px;
  border-left: 4px solid var(--accent);
}
.hero-briefing span,
.hero-briefing em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}
.hero-briefing strong,
.hero-wellness strong {
  font-family: var(--heading-font);
  font-size: 28px;
  line-height: 1.1;
}
.hero-wellness {
  border-radius: 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, white), color-mix(in srgb, var(--cta) 8%, white));
}
.hero-wellness::after {
  content: "";
  position: absolute;
  inset: auto 20px 20px auto;
  width: 140px;
  height: 140px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, white);
  border-radius: 50%;
}
.hero-catalog {
  display: grid;
  align-content: end;
  background: #fff;
}
.catalog-shelves {
  position: absolute;
  inset: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  opacity: .82;
}
.catalog-shelves span {
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, white);
  border: 1px solid var(--line);
}
.hero-learning {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, white), color-mix(in srgb, var(--accent) 10%, white));
}
.learning-map {
  position: absolute;
  inset: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.learning-map span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--primary);
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(15,23,42,.1);
}
.hero-local-service {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, white), #fff);
}
.service-map-pin {
  position: absolute;
  inset: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.service-map-pin span {
  min-height: 92px;
  border: 1px dashed color-mix(in srgb, var(--primary) 42%, white);
  border-radius: 12px;
  background: rgba(255,255,255,.7);
}
.hero-editorial {
  display: grid;
  align-content: end;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--secondary) 12%, white), color-mix(in srgb, var(--primary) 8%, white));
}
.editorial-stack {
  position: relative;
  z-index: 1;
  margin: 18px;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  display: grid;
  gap: 10px;
}
.editorial-stack span {
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
}
.editorial-stack strong {
  font-family: var(--heading-font);
  font-size: 28px;
}
.editorial-stack i {
  display: block;
  height: 12px;
  width: 82%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, white);
}
.editorial-stack i:nth-of-type(2) {
  width: 58%;
}
.editorial-stack i:nth-of-type(3) {
  width: 70%;
}
.hero-answer-hub {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, white), #fff);
}
.answer-orbit {
  width: min(82%, 360px);
  display: grid;
  gap: 14px;
}
.answer-orbit span {
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--text);
  font-weight: 850;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}
.hero-contact-intake {
  display: grid;
  align-content: end;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, white), color-mix(in srgb, var(--accent) 8%, white));
}
.contact-intake-card {
  position: relative;
  z-index: 1;
  margin: 18px;
  padding: 18px;
  display: grid;
  gap: 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  color: var(--text);
}
.contact-intake-card span,
.contact-intake-card small {
  color: var(--muted);
  font-weight: 800;
}
.contact-intake-card strong {
  font-family: var(--heading-font);
  font-size: 28px;
}
.download-action-row,
.screenshot-rail,
.compatibility-matrix,
.feature-card-grid,
.rating-summary,
.faq-list,
.route-focus-panel,
.install-checklist,
.contact-card-grid,
.article-grid,
.final-cta {
  padding: 0 clamp(18px, 5vw, 72px) 72px;
}
.download-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: -24px;
  position: relative;
  z-index: 2;
}
.download-action-row.plugin-store-badge-row {
  align-items: stretch;
}
.download-action {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 13px;
  align-items: center;
  padding: 17px;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.download-action:hover,
.download-action:focus-visible {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 22px 46px rgba(15, 23, 42, .13);
  outline: none;
}
.download-action small {
  grid-column: 2;
  color: var(--muted);
  font-size: 13px;
}
.component-icon {
  width: 42px;
  height: 42px;
  display: inline-block;
  border-radius: 12px;
  background:
    linear-gradient(135deg, var(--primary), var(--button));
  position: relative;
}
.component-icon::after {
  content: "";
  position: absolute;
  inset: 12px 13px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.section-heading {
  max-width: 780px;
  margin-bottom: 22px;
}
.section-heading h2 {
  font-family: var(--heading-font);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.08;
  margin: 8px 0 10px;
}
.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}
.screen-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.plugin-product-demo .screen-track {
  grid-template-columns: minmax(260px, 1.15fr) repeat(3, minmax(190px, .9fr));
  align-items: stretch;
}
.screen-card {
  min-height: 330px;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(15,23,42,.96), rgba(30,41,59,.9)),
    #0f172a;
  color: #fff;
  position: relative;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}
.plugin-product-demo .screen-card {
  border: 1px solid rgba(148, 163, 184, .24);
  box-shadow: 0 22px 48px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255,255,255,.1);
}
.plugin-product-demo .screen-card:first-child {
  min-height: 380px;
}
.screen-card img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  display: block;
}
.screen-step {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.screen-card figcaption,
.screen-card strong {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  font-weight: 850;
}
.screen-card figcaption {
  display: grid;
  gap: 5px;
}
.screen-card figcaption span,
.screen-card-fallback p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}
.screen-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(15,23,42,.72));
}
.screen-card-fallback {
  display: grid;
  align-content: end;
  gap: 12px;
  padding: 22px;
}
.mini-device-lines {
  position: absolute;
  inset: 58px 24px auto;
  width: auto;
  display: grid;
  gap: 12px;
}
.mini-device-lines i {
  height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
}
.mini-device-lines i:first-child {
  width: 58%;
  background: rgba(167, 243, 208, .28);
}
.mini-device-lines i:nth-child(2) {
  width: 88%;
}
.mini-device-lines i:nth-child(3) {
  width: 72%;
}
.compatibility-matrix {
  display: grid;
  gap: 20px;
}
.matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.matrix-grid article {
  min-height: 176px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
}
.matrix-grid span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.matrix-grid strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.15;
}
.matrix-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.feature-card-grid.signature-device-showcase-hero .feature-grid,
.feature-card-grid.signature-feature-card-grid .feature-grid {
  grid-template-columns: minmax(260px, 1.05fr) repeat(2, minmax(190px, .95fr));
}
.feature-card {
  min-height: 230px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
  position: relative;
  overflow: hidden;
}
.plugin-icon-benefit-grid .feature-card:nth-child(1) {
  grid-row: span 2;
  background: linear-gradient(180deg, #ffffff, #f0f9ff);
}
.plugin-icon-benefit-grid .feature-card:nth-child(2),
.plugin-icon-benefit-grid .feature-card:nth-child(5) {
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.plugin-icon-benefit-grid .feature-card:nth-child(1) h3 {
  font-size: 24px;
}
.feature-index {
  position: absolute;
  top: 16px;
  right: 18px;
  color: rgba(15, 23, 42, .16);
  font-weight: 900;
  font-size: 28px;
}
.feature-card h3 {
  margin: 18px 0 8px;
  font-family: var(--heading-font);
  font-size: 22px;
  line-height: 1.2;
}
.feature-card p {
  margin: 0;
  color: var(--muted);
}
.industry-showcase,
.industry-panel {
  padding: 0 clamp(18px, 5vw, 72px) 72px;
}
.industry-showcase-layout {
  display: grid;
  grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
  gap: 18px;
  align-items: stretch;
}
.industry-visual {
  min-height: 360px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)),
    var(--surface);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
  position: relative;
}
.industry-visual img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}
.industry-visual figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--text);
  font-weight: 850;
  backdrop-filter: blur(10px);
}
.industry-visual-fallback {
  display: grid;
  align-content: end;
  gap: 12px;
  padding: 28px;
}
.industry-visual-fallback strong {
  font-size: 30px;
  line-height: 1.05;
}
.industry-visual-fallback span {
  color: var(--muted);
  font-weight: 800;
}
.industry-visual-fallback i {
  display: block;
  height: 18px;
  width: 78%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, white);
}
.industry-visual-fallback i:nth-of-type(2) {
  width: 56%;
}
.industry-visual-fallback i:nth-of-type(3) {
  width: 88%;
}
.industry-card-stack,
.industry-panel-grid {
  display: grid;
  gap: 14px;
}
.industry-panel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.industry-card {
  min-width: 0;
  min-height: 180px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
  position: relative;
  overflow: hidden;
}
.industry-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.industry-card span {
  display: inline-flex;
  margin-bottom: 18px;
  color: color-mix(in srgb, var(--primary) 72%, black);
  font-weight: 900;
  font-size: 12px;
}
.industry-card h3 {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 22px;
  line-height: 1.18;
}
.industry-card p {
  margin: 0;
  color: var(--muted);
}
.industry-panel.layout-timeline .industry-panel-grid {
  grid-template-columns: 1fr;
  counter-reset: timeline;
}
.industry-panel.layout-timeline .industry-card {
  min-height: auto;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.industry-panel.layout-timeline .industry-card span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, white);
  margin: 0;
}
body.industry-professional-trust .industry-card {
  border-radius: 4px;
  box-shadow: none;
}
body.industry-professional-trust .industry-showcase-layout {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
}
body.industry-wellness-care .industry-card,
body.industry-wellness-care .industry-visual {
  border-radius: 18px;
}
body.industry-commerce-catalog .industry-showcase-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
body.industry-commerce-catalog .industry-panel-grid {
  grid-template-columns: minmax(280px, 1.1fr) repeat(2, minmax(180px, .95fr));
}
body.industry-learning-library .industry-card span {
  color: var(--secondary);
}
body.industry-local-service .industry-card {
  border-left: 4px solid var(--primary);
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(0, 1.08fr);
  gap: 18px;
  align-items: stretch;
}
.article-list {
  display: grid;
  gap: 14px;
}
.article-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
  padding: 20px;
}
.article-card-featured {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 4vw, 38px);
  background:
    linear-gradient(135deg, rgba(21, 94, 117, .1), rgba(194, 65, 12, .08)),
    #fff;
}
.article-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.article-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf6f8;
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
}
.article-card h3 {
  margin: 0 0 9px;
  font-family: var(--heading-font);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.15;
}
.article-card p {
  margin: 0;
  color: var(--muted);
}
.rating-summary {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1fr);
  gap: 18px;
}
.rating-card,
.review-grid article,
.route-focus-panel,
.install-checklist,
.faq-items article,
.final-cta {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}
.rating-card {
  padding: 24px;
}
.plugin-review-scoreboard .rating-card {
  display: grid;
  gap: 12px;
  background:
    linear-gradient(145deg, #0f172a, #172554);
  color: #e2e8f0;
}
.plugin-review-scoreboard .rating-card .eyebrow,
.plugin-review-scoreboard .rating-card h2 {
  color: #e0f2fe;
}
.plugin-review-scoreboard .rating-card p {
  color: #cbd5e1;
}
.scoreboard-meter {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.scoreboard-meter strong {
  color: #facc15;
  font-size: 52px;
  line-height: 1;
}
.scoreboard-meter span {
  color: #bfdbfe;
  font-weight: 800;
}
.rating-card h2,
.route-focus-panel h2,
.final-cta h2 {
  font-family: var(--heading-font);
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.15;
}
.rating-card p,
.review-grid p,
.route-focus-panel p,
.final-cta p {
  margin: 0;
  color: var(--muted);
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.review-grid article {
  padding: 20px;
}
.faq-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.faq-items article {
  padding: 20px;
}
.faq-items h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.faq-items p {
  margin: 0;
  color: var(--muted);
}
.text-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--primary);
  font-weight: 850;
  text-decoration: none;
}
.route-focus-panel {
  margin: 0 clamp(18px, 5vw, 72px) 72px;
  padding: 28px;
  background:
    linear-gradient(90deg, #fff, rgba(255,255,255,.82)),
    linear-gradient(135deg, rgba(37,99,235,.08), rgba(249,115,22,.08));
}
.install-checklist ol {
  counter-reset: check;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.install-checklist li {
  counter-increment: check;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.install-checklist li::before {
  content: counter(check);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
}
.install-checklist strong {
  display: block;
  margin-bottom: 5px;
}
.install-checklist p {
  margin: 0;
  color: var(--muted);
}
.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.final-cta {
  margin: 0 clamp(18px, 5vw, 72px) 72px;
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  background: #0f172a;
  color: #e2e8f0;
}
.final-cta p {
  color: #cbd5e1;
}
.site-footer {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, .65fr));
  gap: 28px;
  padding: 42px clamp(18px, 5vw, 72px);
  background: #0f172a;
  color: #dbeafe;
}
.footer-brand strong {
  display: block;
  color: #fff;
  font-size: 24px;
  margin-bottom: 10px;
}
.footer-brand p {
  max-width: 520px;
  margin: 0;
  color: #b6c6db;
}
.footer-column span {
  display: block;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.footer-column nav,
.footer-contact {
  display: grid;
  justify-content: start;
  gap: 9px;
}
.footer-column a,
.footer-contact span {
  color: #dbeafe;
  text-decoration: none;
  font-size: 14px;
}
.footer-column a:hover,
.footer-column a:focus-visible {
  color: #fff;
  outline: none;
  text-decoration: underline;
}
@media (max-width: 860px) {
  .site-header,
  .app-hero,
  .download-action-row,
  .feature-grid,
  .matrix-grid,
  .industry-showcase-layout,
  .industry-panel-grid,
  .article-layout,
  .rating-summary,
  .review-grid,
  .faq-items,
  .compact-grid,
  .final-cta {
    grid-template-columns: 1fr;
  }
  .site-footer {
    grid-template-columns: 1fr;
  }
  nav {
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: 6px;
  }
  nav a {
    padding: 8px 9px;
    font-size: 13px;
    white-space: normal;
  }
  .site-header {
    padding-left: 24px;
    padding-right: 24px;
    overflow: hidden;
  }
  h1 {
    max-width: min(100%, 12ch);
    font-size: 38px;
    line-height: 1.08;
  }
  .app-hero.compact h1 {
    max-width: min(100%, 14ch);
  }
  .hero-copy p {
    width: min(100%, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    font-size: 16px;
    overflow-wrap: break-word;
  }
  .app-hero {
    min-height: auto;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .app-hero.compact {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .download-action-row,
  .screenshot-rail,
  .compatibility-matrix,
  .feature-card-grid,
  .industry-showcase,
  .industry-panel,
  .rating-summary,
  .faq-list,
  .route-focus-panel,
  .install-checklist,
  .contact-card-grid,
  .article-grid,
  .final-cta {
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .hero-copy,
  .section-heading,
  .download-action,
  .feature-card,
  .industry-card,
  .industry-visual,
  .rating-card,
  .review-grid article,
  .faq-items article,
  .final-cta > * {
    width: min(100%, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    min-width: 0;
  }
  h1,
  h2,
  h3,
  p,
  small,
  strong,
  .button,
  .download-action,
  .feature-card,
  .faq-items article {
    overflow-wrap: anywhere;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .button {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .hero-proof {
    grid-template-columns: 1fr;
  }
  .device-frame,
  .device-frame img,
  .hero-product-console,
  .hero-briefing,
  .hero-wellness,
  .hero-catalog,
  .hero-learning,
  .hero-local-service,
  .hero-editorial,
  .hero-answer-hub,
  .hero-contact-intake {
    min-height: 360px;
    width: 100%;
    max-width: 100%;
  }
  .console-grid {
    grid-template-columns: 1fr;
  }
  .console-grid aside {
    display: none;
  }
  .learning-map,
  .service-map-pin,
  .catalog-shelves {
    inset: 20px;
  }
  .device-frame {
    border-width: 8px;
    border-radius: 28px;
    min-width: 0;
  }
  .device-frame.layout-product-lab {
    transform: none;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .2);
  }
  .plugin-product-demo .screen-track,
  .feature-card-grid.signature-device-showcase-hero .feature-grid,
  .feature-card-grid.signature-feature-card-grid .feature-grid,
  body.industry-commerce-catalog .industry-panel-grid {
    grid-template-columns: 1fr;
  }
  .industry-panel.layout-timeline .industry-card {
    grid-template-columns: 1fr;
  }
  .industry-visual,
  .industry-visual img {
    min-height: 260px;
  }
  .screen-track {
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }
  .download-action-row {
    margin-top: 0;
  }
}
