/* Random Target AI — viewport-fit heroes + section color rhythm
   Global refinement layer for redesigned public marketing pages. */

/* ---------- Shared header + page grid standard ---------- */
/* Every redesigned public page uses the exact same centered 1200px content grid.
   This protects the header from page-specific layout rules and keeps hero copy
   aligned with the logo/primary navigation rather than drifting to the viewport edge. */
.redesign .site-header > .wrap.nav {
  width: min(calc(100% - 32px), var(--max));
  max-width: var(--max);
  margin-inline: auto;
  min-height: 70px;
}

/* The generic .nav-links > a rule intentionally strips backgrounds from normal
   navigation links. Restore the Login CTA explicitly so it renders identically
   on every redesigned page instead of inheriting the transparent link treatment. */
.redesign .site-header .nav-links > a.btn.btn-primary {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--signal);
  color: var(--on-signal);
  box-shadow: 0 8px 24px -12px rgba(62,224,196,.7);
}

.redesign .site-header .nav-links > a.btn.btn-primary:hover {
  background: #54e9d0;
  color: var(--on-signal);
}

@media (min-width: 760px) {
  .redesign .site-header > .wrap.nav {
    width: min(calc(100% - 40px), var(--max));
  }
}

/* ---------- Header finish + section heading rhythm ---------- */
/* Keep the public header visually stable on every page: one solid brand surface,
   no image/section color showing through, and a clearly readable Login action. */
.redesign .site-header {
  background: #0b1220;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(155, 180, 214, .18);
}

.redesign .site-header .nav-links > a.btn.btn-primary {
  background: var(--signal);
  color: #052019;
  border-color: transparent;
  box-shadow: 0 10px 28px -14px rgba(62, 224, 196, .9);
}

.redesign .site-header .nav-links > a.btn.btn-primary:hover,
.redesign .site-header .nav-links > a.btn.btn-primary:focus-visible {
  background: #54e9d0;
  color: #052019;
}

/* Use the strongest light CTA section as the sitewide spacing benchmark: clear
   hierarchy, generous breathing room, balanced line lengths and deliberate
   alignment. We do not flatten every section into the same layout; normal
   content sections anchor left while explicit showcase/proof/CTA sections stay
   centered. */
.redesign main > .section {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}

/* Pages authored with inline padding-top:0 were visually collapsing one section
   into the next. Restore the same breathing room without rewriting every page. */
.redesign main > .section[style*="padding-top:0"] {
  padding-top: clamp(72px, 8vw, 112px) !important;
}

.redesign main > .section > .wrap > .section-head {
  width: min(100%, 46rem);
  max-width: 46rem;
  margin: 0 auto clamp(44px, 5vw, 68px) 0;
  text-align: left;
}

.redesign main > .section > .wrap > .section-head .eyebrow {
  margin-bottom: 0;
}

.redesign main > .section > .wrap > .section-head h2 {
  max-width: 18ch;
  margin-top: clamp(18px, 2vw, 24px);
  font-size: clamp(2.15rem, 4vw, 3.45rem);
  line-height: 1.03;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.redesign main > .section > .wrap > .section-head p {
  max-width: 54ch;
  margin-top: clamp(18px, 2vw, 24px);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.68;
}

.redesign main > .section > .wrap > .section-head.center {
  width: min(100%, 52rem);
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.redesign main > .section > .wrap > .section-head.center .eyebrow {
  justify-content: center;
}

.redesign main > .section > .wrap > .section-head.center h2,
.redesign main > .section > .wrap > .section-head.center p,
.redesign .prod-proof h2,
.redesign .prod-proof p,
.redesign .invest-close-inner h2,
.redesign .invest-close-inner p {
  margin-left: auto;
  margin-right: auto;
}

/* Showcase/proof blocks inherit the same polished center rhythm as the approved
   homepage CTA: ample interior space, controlled line length and separation from
   surrounding sections. */
.redesign .prod-proof,
.redesign .invest-close-inner {
  padding: clamp(52px, 7vw, 88px) clamp(24px, 5vw, 64px);
}

.redesign .prod-proof h2,
.redesign .invest-close-inner h2 {
  max-width: 18ch;
  margin-top: clamp(18px, 2vw, 24px);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.04;
  text-wrap: balance;
}

.redesign .prod-proof p,
.redesign .invest-close-inner p {
  max-width: 52ch;
  margin-top: clamp(18px, 2vw, 24px);
  line-height: 1.68;
}

/* The homepage CTA is the visual benchmark; make its spacing resilient across
   wide screens and phones without changing its approved composition. */
.marketing-home main > .cta {
  padding-top: clamp(76px, 9vw, 124px);
  padding-bottom: clamp(76px, 9vw, 124px);
}

.marketing-home main > .cta > .wrap {
  width: min(calc(100% - 32px), 56rem);
}

.marketing-home main > .cta h2 {
  max-width: 16ch;
  font-size: clamp(2.2rem, 4.6vw, 3.65rem);
  line-height: 1.03;
  text-wrap: balance;
}

.marketing-home main > .cta p {
  max-width: 50ch;
  line-height: 1.65;
}

@media (min-width: 760px) {
  .marketing-home main > .cta > .wrap {
    width: min(calc(100% - 40px), 56rem);
  }
}

@media (max-width: 759px) {
  .redesign main > .section,
  .redesign main > .section[style*="padding-top:0"] {
    padding-top: 64px !important;
    padding-bottom: 64px;
  }

  .redesign main > .section > .wrap > .section-head {
    margin-bottom: 40px;
  }

  .redesign main > .section > .wrap > .section-head h2,
  .redesign .prod-proof h2,
  .redesign .invest-close-inner h2 {
    max-width: 20ch;
  }
}

/* ---------- Hero viewport standard ---------- */
.redesign main > .hero,
.redesign main > .subhero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 70px);
  overflow: hidden;
}

.redesign main > .hero {
  padding-top: clamp(28px, 5vh, 64px);
  padding-bottom: clamp(28px, 5vh, 64px);
}

.redesign main > .subhero {
  padding-top: clamp(36px, 6vh, 72px);
  padding-bottom: clamp(36px, 6vh, 72px);
}

.redesign main > .hero > .wrap,
.redesign main > .subhero > .wrap {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
}

/* Several simple subheroes put .wrap and .subhero-inner on the same element and
   then applied an inline max-width. That centered the whole hero block on some
   pages and a later image rule pushed Platform/Contact all the way to x=0.
   Keep the container on the canonical site grid; h1/p already carry readable
   line-length limits, so only the container needs normalizing. */
.redesign main > .subhero > .wrap.subhero-inner {
  width: min(calc(100% - 32px), var(--max));
  max-width: var(--max) !important;
  margin-inline: auto !important;
}

@media (min-width: 760px) {
  .redesign main > .hero > .wrap,
  .redesign main > .subhero > .wrap,
  .redesign main > .subhero > .wrap.subhero-inner {
    width: min(calc(100% - 40px), var(--max));
  }
}

/* Product heroes use the same canonical site grid. A previous width:100% rule
   overrode .wrap and pushed product hero copy to the viewport edge. */
.redesign main > .subhero.prod-hero .prod-hero-grid {
  width: min(calc(100% - 32px), var(--max));
  max-width: var(--max);
  margin-inline: auto;
  align-items: center;
}

@media (min-width: 760px) {
  .redesign main > .subhero.prod-hero .prod-hero-grid {
    width: min(calc(100% - 40px), var(--max));
  }
}

/* Crisp image treatment for any hero background/media introduced on a page. */
.redesign .hero-bg,
.redesign .subhero-bg,
.redesign .hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.redesign .hero-bg img,
.redesign .subhero-bg img,
.redesign .hero-media img,
.redesign img.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  filter: none;
}

.redesign .hero-copy,
.redesign .prod-hero-copy,
.redesign .subhero-inner {
  position: relative;
  z-index: 2;
}

.redesign main > .hero h1,
.redesign main > .subhero h1,
.redesign main > .section .section-head h2 {
  text-wrap: balance;
}

.redesign .prod-hero-copy {
  width: min(100%, 38rem);
  padding-block: clamp(8px, 1.5vw, 18px);
}

/* Very short desktop windows get tighter type/spacing instead of clipping content. */
@media (min-width: 760px) and (max-height: 760px) {
  .redesign main > .hero,
  .redesign main > .subhero {
    min-height: calc(100svh - 70px);
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .redesign .hero h1,
  .redesign .subhero h1,
  .redesign .prod-hero h1 {
    font-size: clamp(2rem, 5.2vw, 3.2rem);
  }
  .redesign .hero-lede,
  .redesign .subhero p,
  .redesign .prod-hero p {
    font-size: 1rem;
    line-height: 1.5;
  }
  .redesign .prod-visual {
    min-height: 250px;
  }
}

/* On phones, content must never be forced into a viewport that is shorter than the content. */
@media (max-width: 759px) {
  .redesign main > .hero,
  .redesign main > .subhero {
    min-height: auto;
    padding-top: clamp(44px, 10vw, 68px);
    padding-bottom: clamp(44px, 10vw, 68px);
  }
  .redesign .hero-inner,
  .redesign .prod-hero-grid {
    gap: clamp(28px, 8vw, 40px);
  }
}

/* ---------- Sitewide section rhythm ---------- */
/* First content section after a hero becomes a clean light surface. Variables are
   locally inverted so existing cards/components automatically use dark text. */
.redesign main > .section:nth-of-type(even) {
  --text: #0d1728;
  --muted: #46566d;
  --muted-2: #65758b;
  --line: rgba(11, 18, 32, .12);
  --line-strong: rgba(11, 18, 32, .22);
  --ink: #edf2f7;
  --ink-2: #ffffff;
  --panel: #e5ebf2;
  --panel-2: #d9e2ec;
  --signal: #087f72;
  --signal-deep: #06685f;
  --amber: #946000;
  --amber-deep: #7c5000;
  --violet: #5f50d7;
  --on-signal: #ffffff;
  color: var(--text);
  background:
    radial-gradient(100% 80% at 100% 0, rgba(8, 127, 114, .055), transparent 58%),
    #f4f7fa;
  border-top: 1px solid rgba(11, 18, 32, .07);
  border-bottom: 1px solid rgba(11, 18, 32, .07);
}

/* Alternating dark sections use a visibly different navy from the page canvas. */
.redesign main > .section:nth-of-type(odd):not(.subhero) {
  background:
    radial-gradient(90% 90% at 0 100%, rgba(143, 123, 255, .045), transparent 62%),
    var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Keep code/conversation/product mockups dark even when their parent section is light. */
.redesign main > .section:nth-of-type(even) :is(.product-visual,.prod-visual,.pv-code,.voice-conversation,.eco-diagram,.platform-diagram) {
  --text: #f4f7fb;
  --muted: #a7b6cd;
  --muted-2: #7d8fab;
  --line: rgba(155, 180, 214, .16);
  --line-strong: rgba(155, 180, 214, .28);
  --ink: #0b1220;
  --ink-2: #111b2e;
  --panel: #16243b;
  --panel-2: #1d2f4d;
  color: var(--text);
}

/* Home trust strip and closing CTA get their own surfaces so the page never reads
   as one continuous block of navy. */
.marketing-home .trust {
  background: #0f1a2c;
}

.marketing-home main > .cta {
  --text: #0d1728;
  --muted: #46566d;
  --muted-2: #65758b;
  --line: rgba(11, 18, 32, .12);
  --line-strong: rgba(11, 18, 32, .22);
  --signal: #087f72;
  --signal-deep: #06685f;
  --on-signal: #ffffff;
  color: var(--text);
  background: #eef3f7;
  border-top: 1px solid rgba(11, 18, 32, .08);
}

/* Documentation detail pages and legal pages also break away from the all-navy canvas. */
.marketing-docs.detail main > .section,
.marketing-legal .legal-wrap {
  --text: #0d1728;
  --muted: #46566d;
  --muted-2: #65758b;
  --line: rgba(11, 18, 32, .12);
  --line-strong: rgba(11, 18, 32, .22);
  --ink: #edf2f7;
  --ink-2: #ffffff;
  --panel: #e5ebf2;
  --panel-2: #d9e2ec;
  --signal: #087f72;
  --signal-deep: #06685f;
  --amber: #946000;
  --violet: #5f50d7;
  --on-signal: #ffffff;
  color: var(--text);
  background: #f4f7fa;
}

.marketing-legal .legal-wrap {
  box-shadow: 0 0 0 100vmax #f4f7fa;
  clip-path: inset(0 -100vmax);
}

.marketing-docs.detail .docs-content > section:nth-of-type(even),
.marketing-legal .legal-body > section:nth-of-type(even) {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(11, 18, 32, .10);
  border-radius: 16px;
  padding: 28px 24px;
  margin: 10px 0;
}

/* ---------- Footer brand statement ---------- */
/* Restore the oversized footer signature from the previous design while keeping
   the new footer information architecture. */
.redesign .site-footer .footer-wordmark {
  width: 100%;
  margin-top: clamp(48px, 6vw, 78px);
  margin-bottom: clamp(18px, 2vw, 30px);
  padding: .08em .06em .18em;
  overflow: visible;
  text-align: center;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(3.8rem, 10.4vw, 8.6rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: none;
  white-space: nowrap;
  color: rgba(244, 247, 251, .16);
  user-select: none;
  pointer-events: none;
}

@media (max-width: 600px) {
  .redesign .site-footer .footer-wordmark {
    margin-top: 40px;
    margin-bottom: 18px;
    padding-bottom: .2em;
    font-size: clamp(2.8rem, 11.5vw, 4.1rem);
    letter-spacing: -.035em;
    line-height: 1;
  }
}

/* ---------- Approved hero photography ---------- */
/* Final assets are named by destination page under assets/images/brand/heroes/.
   The source labels were removed before export; these rules never blur the image. */
.marketing-home main > .hero::before,
.marketing-platform main > .subhero::before,
.marketing-pricing main > .subhero::before,
.marketing-invest main > .subhero::before,
.marketing-docs:not(.detail) main > .subhero::before,
.marketing-agent main > .subhero::before,
.marketing-voice main > .subhero::before,
.marketing-ide main > .subhero::before,
.marketing-ai-qa main > .subhero::before,
.marketing-contact main > .subhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  image-rendering: auto;
  filter: none;
}

.marketing-home main > .hero::after,
.marketing-platform main > .subhero::after,
.marketing-pricing main > .subhero::after,
.marketing-invest main > .subhero::after,
.marketing-docs:not(.detail) main > .subhero::after,
.marketing-agent main > .subhero::after,
.marketing-voice main > .subhero::after,
.marketing-ide main > .subhero::after,
.marketing-ai-qa main > .subhero::after,
.marketing-contact main > .subhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(11,18,32,.98) 0%,
    rgba(11,18,32,.93) 24%,
    rgba(11,18,32,.76) 42%,
    rgba(11,18,32,.28) 66%,
    rgba(11,18,32,.08) 100%);
}

.marketing-home main > .hero::before { background-image: url('/assets/images/brand/heroes/hero-index-random-target-ai.webp'); background-position: center; }
.marketing-platform main > .subhero::before { background-image: url('/assets/images/brand/heroes/hero-aria-platform.webp'); background-position: center; }
.marketing-pricing main > .subhero::before { background-image: url('/assets/images/brand/heroes/hero-pricing-random-target-ai.webp'); background-position: right center; }
.marketing-invest main > .subhero::before { background-image: url('/assets/images/brand/heroes/hero-invest-random-target-ai.webp'); background-position: right center; }
.marketing-docs:not(.detail) main > .subhero::before { background-image: url('/assets/images/brand/heroes/hero-docs-random-target-ai.webp'); background-size: 110% auto; background-position: 44% center; }
.marketing-agent main > .subhero::before { background-image: url('/assets/images/brand/heroes/hero-aria-agent.webp'); background-position: right center; }
.marketing-voice main > .subhero::before { background-image: url('/assets/images/brand/heroes/hero-aria-voice.webp'); background-position: right center; }
.marketing-ide main > .subhero::before { background-image: url('/assets/images/brand/heroes/hero-aria-ide.webp'); background-position: right center; }
.marketing-ai-qa main > .subhero::before { background-image: url('/assets/images/brand/heroes/hero-ai-qa-testing.webp'); background-position: center; }
.marketing-contact main > .subhero::before { background-image: url('/assets/images/brand/heroes/hero-contact.webp'); background-position: right center; }

/* Put live content above the image treatment and reserve the right side for the subject. */
.marketing-home .hero-inner,
.marketing-platform main > .subhero > .wrap,
.marketing-pricing main > .subhero > .wrap,
.marketing-invest main > .subhero > .wrap,
.marketing-docs:not(.detail) main > .subhero > .wrap,
.marketing-product .prod-hero-grid,
.marketing-contact main > .subhero > .wrap {
  position: relative;
  z-index: 2;
}

@media (min-width: 960px) {
  .marketing-home .hero-inner {
    grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr);
  }
  .marketing-home .hero-copy { max-width: 34rem; }
  .marketing-home .hero .roster { display: none; }

  .marketing-agent .prod-hero-grid,
  .marketing-voice .prod-hero-grid,
  .marketing-ide .prod-hero-grid,
  .marketing-ai-qa .prod-hero-grid {
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  }
  .marketing-agent .prod-hero .prod-visual,
  .marketing-voice .prod-hero .prod-visual,
  .marketing-ide .prod-hero .prod-visual,
  .marketing-ai-qa .prod-hero .prod-visual {
    display: none;
  }

  .marketing-platform main > .subhero .subhero-inner > h1,
  .marketing-platform main > .subhero .subhero-inner > p,
  .marketing-platform main > .subhero .subhero-inner > .prod-actions,
  .marketing-contact main > .subhero .subhero-inner > h1,
  .marketing-contact main > .subhero .subhero-inner > p {
    max-width: 35rem;
  }
}

@media (min-width: 960px) {
  .marketing-pricing main > .subhero .subhero-inner > h1,
  .marketing-pricing main > .subhero .subhero-inner > p,
  .marketing-invest main > .subhero .subhero-inner > h1,
  .marketing-invest main > .subhero .subhero-inner > p,
  .marketing-invest main > .subhero .subhero-inner > .hero-actions,
  .marketing-docs:not(.detail) main > .subhero .subhero-inner > h1,
  .marketing-docs:not(.detail) main > .subhero .subhero-inner > p,
  .marketing-docs:not(.detail) main > .subhero .subhero-inner > .docs-search {
    max-width: 35rem;
  }
}

/* Platform and QA images carry important information near the centre, so their
   overlay fades earlier and avoids obscuring the main visual subject. */
.marketing-platform main > .subhero::after,
.marketing-ai-qa main > .subhero::after {
  background: linear-gradient(90deg,
    rgba(11,18,32,.98) 0%,
    rgba(11,18,32,.91) 25%,
    rgba(11,18,32,.62) 40%,
    rgba(11,18,32,.18) 58%,
    rgba(11,18,32,.04) 100%);
}

/* On mobile the copy stays readable without pretending the image can share the
   same space. The focal subject remains visible toward the right/bottom. */
@media (max-width: 759px) {
  .marketing-home main > .hero::after,
  .marketing-platform main > .subhero::after,
  .marketing-pricing main > .subhero::after,
  .marketing-invest main > .subhero::after,
  .marketing-docs:not(.detail) main > .subhero::after,
  .marketing-agent main > .subhero::after,
  .marketing-voice main > .subhero::after,
  .marketing-ide main > .subhero::after,
  .marketing-ai-qa main > .subhero::after,
  .marketing-contact main > .subhero::after {
    background: linear-gradient(180deg,
      rgba(11,18,32,.96) 0%,
      rgba(11,18,32,.89) 48%,
      rgba(11,18,32,.54) 72%,
      rgba(11,18,32,.26) 100%);
  }
  .marketing-home .hero .roster,
  .marketing-agent .prod-hero .prod-visual,
  .marketing-voice .prod-hero .prod-visual,
  .marketing-ide .prod-hero .prod-visual,
  .marketing-ai-qa .prod-hero .prod-visual {
    display: none;
  }
  .marketing-home main > .hero::before,
  .marketing-agent main > .subhero::before,
  .marketing-voice main > .subhero::before,
  .marketing-ide main > .subhero::before,
  .marketing-contact main > .subhero::before {
    background-position: 68% center;
  }
  .marketing-docs:not(.detail) main > .subhero::before {
    background-size: cover;
    background-position: 42% center;
  }
}

/* ---------- Composition variety: stop turning every idea into a card ---------- */
/* Capability grids appear across Voice, Agent, IDE, Sales, R.I., S.A., Probate
   and AI QA. Treat them as editorial capability rails instead of six repeated
   rounded rectangles. The number, heading and copy provide the hierarchy. */
.marketing-product .cap-grid,
.marketing-ai-qa .cap-grid {
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.marketing-product .cap-grid > .card.cap,
.marketing-ai-qa .cap-grid > .card.cap {
  min-height: 100%;
  padding: clamp(26px, 3vw, 38px) clamp(18px, 2.4vw, 30px);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.marketing-product .cap-grid > .card.cap:hover,
.marketing-ai-qa .cap-grid > .card.cap:hover {
  border-color: var(--line);
  transform: none;
}

.marketing-product .cap-grid > .card.cap .cap-n,
.marketing-ai-qa .cap-grid > .card.cap .cap-n {
  top: clamp(24px, 3vw, 34px);
  right: clamp(18px, 2.4vw, 30px);
  color: var(--signal);
  opacity: .78;
}

/* Two-column explanatory panels become an open split layout. The rule between
   columns replaces another pair of rounded boxes and gives the copy more room. */
.marketing-product .prod-split {
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.marketing-product .prod-split > .prod-panel {
  padding: clamp(28px, 3.5vw, 44px) clamp(8px, 3vw, 36px);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.marketing-product .prod-split > .prod-panel.accent {
  border-color: transparent;
}

@media (min-width: 640px) {
  .marketing-product .cap-grid > .card.cap,
  .marketing-ai-qa .cap-grid > .card.cap {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .marketing-product .cap-grid > .card.cap:nth-child(2n+1),
  .marketing-ai-qa .cap-grid > .card.cap:nth-child(2n+1) {
    border-left: 0;
  }
  .marketing-product .prod-split > .prod-panel + .prod-panel {
    border-left: 1px solid var(--line-strong);
  }
}

@media (min-width: 960px) {
  .marketing-product .cap-grid > .card.cap:nth-child(2n+1),
  .marketing-ai-qa .cap-grid > .card.cap:nth-child(2n+1) {
    border-left: 1px solid var(--line);
  }
  .marketing-product .cap-grid > .card.cap:nth-child(3n+1),
  .marketing-ai-qa .cap-grid > .card.cap:nth-child(3n+1) {
    border-left: 0;
  }
  .marketing-product .cap-grid > .card.cap:nth-child(n+4),
  .marketing-ai-qa .cap-grid > .card.cap:nth-child(n+4) {
    border-top: 1px solid var(--line);
  }
}

/* Platform: the architectural explanation should read as a spacious split
   composition, not content trapped inside one oversized rounded rectangle. */
.marketing-platform .platform-connect-section .eco-flow {
  padding: clamp(12px, 2vw, 24px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.marketing-platform .platform-connect-section .eco-flow > div:first-child {
  max-width: 38rem;
}

.marketing-platform .platform-connect-section .eco-flow h2,
.marketing-platform .platform-expand-section .eco-flow h2 {
  text-wrap: balance;
  line-height: 1.04;
}

/* Specialist products use open editorial columns with a strong top rule. */
.marketing-platform .platform-specialist-section .eco-specialists {
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.marketing-platform .platform-specialist-section .eco-specialists > .card {
  padding: clamp(26px, 3vw, 38px) clamp(16px, 2.4vw, 28px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Customer entitlement states become a status rail rather than four matching
   cards. On desktop, vertical separators make the progression immediately clear. */
.marketing-platform .platform-state-section .eco-specialists {
  gap: 0;
  margin-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.marketing-platform .platform-state-section .eco-specialists > .card {
  position: relative;
  padding: clamp(28px, 3vw, 42px) clamp(16px, 2.4vw, 30px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.marketing-platform .platform-state-section .eco-specialists > .card::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--signal);
  border-radius: 999px;
  opacity: .8;
}

.marketing-platform .platform-state-section .eco-specialists > .card:nth-child(2)::before { background: var(--amber); }
.marketing-platform .platform-state-section .eco-specialists > .card:nth-child(3)::before { background: var(--violet); }
.marketing-platform .platform-state-section .eco-specialists > .card:nth-child(4)::before { background: var(--muted-2); }

/* The closing platform architecture section gets a different treatment again:
   open copy on the left and a compact foundation callout instead of another
   full-width framed panel. */
.marketing-platform .platform-expand-section .eco-flow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.marketing-platform .platform-expand-section .eco-flow > .card {
  padding: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 36px) clamp(22px, 3vw, 34px);
  border: 0;
  border-left: 3px solid var(--signal);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 640px) {
  .marketing-platform .platform-specialist-section .eco-specialists > .card:nth-child(even),
  .marketing-platform .platform-state-section .eco-specialists > .card:nth-child(even) {
    border-left: 1px solid var(--line);
  }
}

@media (min-width: 960px) {
  .marketing-platform .platform-specialist-section .eco-specialists > .card,
  .marketing-platform .platform-state-section .eco-specialists > .card {
    border-left: 1px solid var(--line);
  }
  .marketing-platform .platform-specialist-section .eco-specialists > .card:first-child,
  .marketing-platform .platform-state-section .eco-specialists > .card:first-child {
    border-left: 0;
  }
}

/* Home specialist capabilities are supporting details, so let them read as a
   clean four-part strip instead of another row of mini cards. */
.marketing-home .specialist-strip {
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.marketing-home .specialist-strip > .specialist-card {
  padding: clamp(22px, 3vw, 32px) clamp(14px, 2vw, 24px);
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (min-width: 560px) {
  .marketing-home .specialist-strip > .specialist-card:nth-child(even) {
    border-left: 1px solid var(--line);
  }
}

@media (min-width: 960px) {
  .marketing-home .specialist-strip > .specialist-card {
    border-left: 1px solid var(--line);
  }
  .marketing-home .specialist-strip > .specialist-card:first-child {
    border-left: 0;
  }
}

/* Invest uses open numbered columns for strategy and capital allocation, while
   keeping deployment proof cards as true evidence objects. */
.marketing-invest .invest-thesis,
.marketing-invest .ask-grid {
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.marketing-invest .invest-thesis > .card,
.marketing-invest .ask-grid > .card {
  padding: clamp(28px, 3.4vw, 42px) clamp(16px, 2.6vw, 30px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 760px) {
  .marketing-invest .invest-thesis > .card + .card,
  .marketing-invest .ask-grid > .card + .card {
    border-left: 1px solid var(--line);
  }
}

/* Shared footer CTA keeps one component shell, but its content is now resolved
   per route in footer.php. Give the message enough width to feel editorial. */
.redesign .site-footer .footer-cta > div:first-child {
  max-width: 40rem;
}

.redesign .site-footer .footer-cta h3 {
  max-width: 22ch;
  text-wrap: balance;
  line-height: 1.04;
}