:root {
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --fg: #111111;
  --muted: #6B6B6B;
  --border: #E5E5E5;
  --accent: #2F6FEB;
  --success: #17A34A;
  --warn: #EAB308;
  --danger: #DC2626;
  --font-display: "Manrope", "Golos Text", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "Golos Text", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-ui: "Golos Text", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", monospace;
  --soft-accent: color-mix(in oklch, var(--accent) 9%, var(--surface));
  --soft-warn: color-mix(in oklch, var(--warn) 13%, var(--surface));
  --soft-good: color-mix(in oklch, var(--success) 10%, var(--surface));
  --soft-danger: color-mix(in oklch, var(--danger) 8%, var(--surface));
}

/* Homepage system pass: premium B2B orchestration, scoped to index.html. */
.home-page {
  --home-dark: #101828;
  --home-dark-2: #182230;
  --home-line: #D7DFEA;
  --home-soft: #F2F6FC;
  background: #FBFCFF;
}
.home-page h1 {
  font-size: clamp(42px, 5.6vw, 78px);
  line-height: 0.98;
  max-inline-size: 930px;
}
.home-page h2 {
  font-size: clamp(32px, 4.1vw, 56px);
  line-height: 1.02;
}
.home-page .lead {
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.55;
  color: #344054;
}
.home-page section {
  border-block-end: 1px solid var(--home-line);
}
.home-hero {
  min-block-size: calc(100vh - 68px);
  display: grid;
  align-items: center;
  padding-block: clamp(56px, 7vw, 108px) clamp(46px, 6vw, 88px);
  background: linear-gradient(180deg, #FBFCFF 0%, #F4F7FC 100%);
}
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.home-fit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 26px;
}
.home-fit-row span,
.home-ui-kicker,
.home-orchestration-label,
.home-format-card span,
.home-surface span {
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-fit-row span {
  border: 1px solid var(--home-line);
  border-radius: 999px;
  padding: 8px 10px;
  background: #FFFFFF;
  color: #344054;
}
.home-orchestration {
  min-block-size: 640px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  border: 1px solid var(--home-line);
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(circle at 26% 20%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 28%),
    linear-gradient(135deg, #FFFFFF 0%, #EDF3FC 100%);
  box-shadow: 0 28px 80px rgba(16, 24, 40, 0.10);
}
.home-orchestration::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(47,111,235,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(47,111,235,0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.home-orchestration-label {
  z-index: 1;
  grid-column: 1 / 8;
  grid-row: 1 / 2;
  color: #667085;
}
.home-screen,
.home-admin-panel,
.home-host-panel,
.home-player-phone {
  z-index: 1;
  display: grid;
  align-content: space-between;
  gap: 12px;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 16px;
  padding: 18px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}
.home-screen {
  grid-column: 1 / 10;
  grid-row: 3 / 10;
  background: var(--home-dark);
  color: #F8FAFC;
}
.home-screen p,
.home-screen span {
  color: #B9C6D8;
}
.home-screen strong {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.02;
  font-family: var(--font-display);
}
.home-admin-panel {
  grid-column: 7 / 13;
  grid-row: 2 / 5;
}
.home-host-panel {
  grid-column: 8 / 13;
  grid-row: 8 / 12;
}
.home-player-phone {
  grid-column: 2 / 5;
  grid-row: 9 / 13;
}
.home-ui-kicker,
.home-format-card span,
.home-surface span {
  color: var(--accent);
}
.home-reaction-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-reaction-rail span {
  border: 1px solid rgba(248,250,252,0.16);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(248,250,252,0.08);
  color: #F8FAFC;
  text-transform: none;
  letter-spacing: 0;
}
.home-thesis {
  padding-block: 32px;
  background: #FFFFFF;
}
.home-thesis-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 0.96fr) minmax(320px, 0.72fr);
  gap: 28px;
  align-items: start;
}
.home-thesis-grid h2 {
  font-size: clamp(28px, 3vw, 42px);
}
.home-thesis-grid p:last-child {
  color: #344054;
  font-size: 17px;
  line-height: 1.62;
}
.home-social-proof,
.home-system-section,
.home-formats-section,
.home-launch-section,
.home-audience-section,
.home-pricing-section,
.home-final-cta {
  padding-block: clamp(72px, 8vw, 118px);
}
.home-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(320px, 0.46fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-block-end: 34px;
}
.home-section-head.compact {
  display: block;
  max-inline-size: 900px;
}
.home-section-head > p:last-child {
  padding-block-start: 14px;
  border-block-start: 1px solid var(--home-line);
  color: #344054;
  font-size: 18px;
  line-height: 1.62;
}
.home-loop {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  gap: 18px;
  align-items: stretch;
}
.home-loop-stage {
  min-block-size: 560px;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 22px;
  background:
    radial-gradient(circle at 84% 18%, rgba(255,90,61,0.18), transparent 28%),
    linear-gradient(135deg, #101828, #172033);
  color: #F8FAFC;
}
.home-loop-stage::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(248,250,252,0.14);
  border-radius: 16px;
}
.home-loop-screen {
  position: relative;
  z-index: 1;
  max-inline-size: 600px;
  min-block-size: 330px;
  display: grid;
  align-content: end;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(248,250,252,0.16);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248,250,252,0.08) 1px, transparent 1px);
  background-size: 44px 44px;
}
.home-loop-screen strong {
  font: 700 clamp(26px, 3.4vw, 44px)/1.03 var(--font-display);
}
.home-loop-screen p,
.home-loop-stage span {
  color: #B9C6D8;
}
.home-loop-phone,
.home-loop-host {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(248,250,252,0.16);
  border-radius: 16px;
  padding: 16px;
  background: rgba(248,250,252,0.10);
}
.home-loop-phone {
  inline-size: 190px;
  inset-inline-end: 42px;
  inset-block-end: 42px;
}
.home-loop-host {
  inline-size: 230px;
  inset-inline-end: 250px;
  inset-block-end: 70px;
}
.home-loop-steps {
  display: grid;
  gap: 12px;
}
.home-loop-steps > div,
.home-launch-flow > div,
.home-pricing-table > div {
  display: grid;
  gap: 8px;
  border: 1px solid var(--home-line);
  border-radius: 14px;
  background: #FFFFFF;
  padding: 18px;
}
.home-loop-steps b,
.home-launch-flow b {
  color: var(--accent);
  font: 700 12px/1 var(--font-ui);
  letter-spacing: 0.04em;
}
.home-loop-steps strong,
.home-launch-flow strong,
.home-pricing-table strong {
  color: #111827;
  font: 700 20px/1.2 var(--font-display);
}
.home-loop-steps span,
.home-launch-flow span,
.home-pricing-table span {
  color: #667085;
}
.home-system-section {
  background: #FFFFFF;
}
.home-surfaces {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.home-surface {
  min-block-size: 260px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  border: 1px solid var(--home-line);
  border-radius: 18px;
  background: #FBFCFF;
  padding: 20px;
}
.home-surface strong {
  font: 700 26px/1.06 var(--font-display);
}
.home-surface p {
  color: #344054;
}
.home-surface.screen {
  grid-column: span 5;
  min-block-size: 340px;
  background: var(--home-dark);
  color: #F8FAFC;
}
.home-surface.screen p,
.home-surface.screen span {
  color: #B9C6D8;
}
.home-surface.admin {
  grid-column: span 4;
}
.home-surface.host {
  grid-column: span 3;
}
.home-surface.player {
  grid-column: span 7;
}
.home-formats-section {
  overflow: hidden;
}
.home-format-band {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) repeat(3, minmax(260px, 0.74fr));
  gap: 14px;
  padding-inline: clamp(18px, 3.4vw, 56px);
}
.home-format-card {
  min-block-size: 360px;
  display: grid;
  align-content: end;
  gap: 12px;
  border: 1px solid var(--home-line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(47,111,235,0.08), transparent 52%),
    #FFFFFF;
  padding: 20px;
}
.home-format-card.large {
  min-block-size: 440px;
  background:
    linear-gradient(135deg, rgba(47,111,235,0.15), transparent 48%),
    var(--home-dark);
  color: #F8FAFC;
}
.home-format-card.large p,
.home-format-card.large span {
  color: #B9C6D8;
}
.home-format-card strong {
  font: 700 28px/1.06 var(--font-display);
}
.home-launch-section {
  background: #FFFFFF;
}
.home-launch-grid,
.home-pricing-grid,
.home-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.home-launch-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.home-audience-section {
  background: var(--home-soft);
}
.home-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.home-route {
  min-block-size: 360px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  border: 1px solid var(--home-line);
  border-radius: 20px;
  background: #FFFFFF;
  padding: 26px;
}
.home-route strong {
  max-inline-size: 560px;
  font: 700 clamp(28px, 3.2vw, 44px)/1.04 var(--font-display);
}
.home-route p {
  max-inline-size: 560px;
  color: #344054;
  font-size: 17px;
}
.home-route span,
.home-route em {
  color: var(--accent);
  font: 700 13px/1.3 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: normal;
}
.home-pricing-section {
  background: #FFFFFF;
}
.home-pricing-table {
  display: grid;
  gap: 0;
  border: 1px solid var(--home-line);
  border-radius: 18px;
  overflow: hidden;
}
.home-pricing-table > div {
  border: 0;
  border-radius: 0;
}
.home-pricing-table > div + div {
  border-block-start: 1px solid var(--home-line);
}
.home-final-cta {
  background: var(--home-dark);
  color: #F8FAFC;
}
.home-final-cta .lead,
.home-final-cta p {
  color: #B9C6D8;
}
.home-form {
  background: var(--home-dark-2);
  border-color: rgba(248,250,252,0.16);
}
.home-form .field {
  background: rgba(248,250,252,0.06);
  border-color: rgba(248,250,252,0.14);
  color: #D7DFEA;
}

@media (max-width: 980px) {
  .home-hero-grid,
  .home-loop,
  .home-section-head,
  .home-thesis-grid,
  .home-launch-grid,
  .home-pricing-grid,
  .home-final-grid {
    grid-template-columns: 1fr;
  }
  .home-orchestration {
    min-block-size: 560px;
  }
  .home-surfaces,
  .home-format-band,
  .home-routes,
  .home-launch-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-surface,
  .home-surface.admin,
  .home-surface.host,
  .home-surface.screen,
  .home-surface.player {
    grid-column: auto;
  }
  .home-format-band {
    inline-size: auto;
    margin-inline: 0;
    padding-inline: 24px;
  }
}

/* Premium correction pass: calmer warm surfaces, no pink nav, tighter home format cards */
:root {
  --color-surface: #FFF8EF;
  --color-surface-strong: #FFF8EF;
  --color-surface-muted: #F7EADD;
  --color-surface-deep: #F2DFC5;
  --color-menu: #F7EADD;
  --color-menu-hover: #EAF1FF;
  --color-soft-blue: #EAF1FF;
  --color-soft-amber: #F6E8C9;
  --color-soft-green: #E7F0E6;
  --color-soft-neutral: #F4E4D0;
  --color-soft-line: rgba(10, 11, 13, 0.12);
  --surface: #FFF8EF;
  --surface-2: #F7EADD;
  --surface-3: #F2DFC5;
  --accent-soft: #EAF1FF;
}

.topbar {
  background: color-mix(in oklch, var(--color-bg) 94%, transparent);
  border-color: rgba(10, 11, 13, 0.12);
  box-shadow: 0 18px 42px rgba(66, 48, 28, 0.12);
}

.navlinks {
  background: var(--color-menu);
  border-color: rgba(10, 11, 13, 0.11);
}

.navlinks a {
  color: rgba(10, 11, 13, 0.68);
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
  background: var(--color-menu-hover);
  color: var(--color-primary);
}

.navlinks a[aria-current="page"]::after {
  background: var(--color-primary);
}

.card,
.link-card,
.mini-step,
.proof-card,
.feature-card,
.feature-v2-card,
.format-card,
.scenario-card,
.admin-card,
.player-card,
.screen-card,
.agency-card,
.company-card,
.pricing-card,
.accordion details,
.demo-form,
.home-case-card,
.home-option-card,
.home-outcome-card,
.home-journey-card,
.home-cta-panel,
.home-feature-card,
.features-builder-card,
.features-task-card,
.features-mechanic-card,
.features-host-card,
.features-brand-card,
.features-screen-player-card,
.formats-format-card,
.formats-template-card,
.formats-mechanic-card,
.formats-custom-card,
.agency-surface-card,
.agency-event-card,
.company-meaning-card,
.company-format-card,
.pricing-factor,
.pricing-scenario-card,
.pricing-choice-board article,
.pricing-include-card {
  background: color-mix(in oklch, var(--color-surface) 88%, var(--color-bg));
  border-color: var(--color-soft-line);
  box-shadow: 0 20px 56px rgba(75, 55, 29, 0.08);
}

.card h1,
.card h2,
.card h3,
.card h4,
.card strong,
.link-card h3,
.link-card strong,
.feature-card h3,
.format-card h3,
.scenario-card h3,
.home-format-card h3,
.home-format-card strong,
.home-case-card h3,
.home-option-card h3,
.home-outcome-card h3,
.home-feature-card h3,
.features-builder-card h3,
.features-task-card h3,
.features-mechanic-card h3,
.features-host-card h3,
.features-brand-card h3,
.features-screen-player-card h3,
.formats-format-card h3,
.formats-template-card h3,
.formats-mechanic-card h3,
.formats-custom-card h3,
.agency-surface-card h3,
.agency-event-card h3,
.company-meaning-card h3,
.company-format-card h3,
.pricing-factor strong,
.pricing-scenario-card h3,
.pricing-choice-board article h3,
.pricing-include-card h3 {
  color: var(--color-text);
}

.home-format-grid {
  gap: 16px;
}

.home-format-grid .home-format-card,
.home-format-grid .home-format-card.large {
  min-block-size: 220px;
  padding: 22px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--color-surface) 86%, var(--color-bg));
  border-color: var(--color-soft-line);
  box-shadow: 0 20px 52px rgba(75, 55, 29, 0.08);
}

.home-format-grid .home-format-card strong {
  max-inline-size: 20ch;
  font-size: clamp(1.08rem, 0.98rem + 0.26vw, 1.28rem);
  line-height: 1.22;
  letter-spacing: 0;
}

.home-format-grid .home-format-card p {
  max-inline-size: 34ch;
  font-size: 0.96rem;
  line-height: 1.52;
  color: rgba(10, 11, 13, 0.66);
}

.features-social-card.shared,
.features-task-card.is-active,
.features-task-matrix .risk,
.formats-mechanic-card:nth-child(4),
.pricing-v2 .pricing-choice-board article:nth-child(4),
.pricing-v2 .pricing-include-card:nth-child(4),
.audience-card:nth-child(4),
.mini-step:nth-child(4n),
.home-outcome-card:nth-child(4n),
.home-feature-card:nth-child(4n) {
  background: color-mix(in oklch, var(--color-soft-neutral) 72%, var(--color-surface));
  border-color: rgba(10, 11, 13, 0.12);
}

.features-social-card:nth-child(3n),
.formats-mechanic-card:nth-child(3n),
.company-meaning-card:nth-child(3n),
.pricing-include-card:nth-child(3n) {
  background: color-mix(in oklch, var(--color-soft-green) 62%, var(--color-surface));
}

.features-social-card:nth-child(3n + 1),
.formats-mechanic-card:nth-child(3n + 1),
.company-meaning-card:nth-child(3n + 1),
.pricing-include-card:nth-child(3n + 1) {
  background: color-mix(in oklch, var(--color-soft-blue) 64%, var(--color-surface));
}

.features-social-card:nth-child(3n + 2),
.formats-mechanic-card:nth-child(3n + 2),
.company-meaning-card:nth-child(3n + 2),
.pricing-include-card:nth-child(3n + 2) {
  background: color-mix(in oklch, var(--color-soft-amber) 62%, var(--color-surface));
}

.home-loop-stage,
.home-screen,
.home-final-cta,
.features-module-stage,
.features-social-proof,
.features-final-cta,
.formats-custom-stage,
.formats-final-cta,
.agency-stage-screen,
.agencies-v2 .agency-contact-dark,
.company-live-screen,
.companies-v2 .company-dark,
.pricing-v2 .pricing-final-cta,
.dark-showcase,
.asset-slot.dark {
  color: var(--color-inverse);
  background:
    linear-gradient(112deg, rgba(0, 82, 255, 0.18), transparent 42%),
    linear-gradient(138deg, var(--color-dark), var(--color-dark-panel));
}

.home-loop-stage h1,
.home-loop-stage h2,
.home-loop-stage h3,
.home-loop-stage h4,
.home-loop-stage strong,
.home-screen h1,
.home-screen h2,
.home-screen h3,
.home-screen h4,
.home-screen strong,
.home-final-cta h1,
.home-final-cta h2,
.home-final-cta h3,
.home-final-cta h4,
.home-final-cta strong,
.features-module-stage h1,
.features-module-stage h2,
.features-module-stage h3,
.features-module-stage h4,
.features-module-stage strong,
.features-social-proof h1,
.features-social-proof h2,
.features-social-proof h3,
.features-social-proof h4,
.features-social-proof strong,
.features-final-cta h1,
.features-final-cta h2,
.features-final-cta h3,
.features-final-cta h4,
.features-final-cta strong,
.formats-custom-stage h1,
.formats-custom-stage h2,
.formats-custom-stage h3,
.formats-custom-stage h4,
.formats-custom-stage strong,
.formats-final-cta h1,
.formats-final-cta h2,
.formats-final-cta h3,
.formats-final-cta h4,
.formats-final-cta strong,
.agency-stage-screen h1,
.agency-stage-screen h2,
.agency-stage-screen h3,
.agency-stage-screen h4,
.agency-stage-screen strong,
.agencies-v2 .agency-contact-dark h1,
.agencies-v2 .agency-contact-dark h2,
.agencies-v2 .agency-contact-dark h3,
.agencies-v2 .agency-contact-dark h4,
.agencies-v2 .agency-contact-dark strong,
.company-live-screen h1,
.company-live-screen h2,
.company-live-screen h3,
.company-live-screen h4,
.company-live-screen strong,
.companies-v2 .company-dark h1,
.companies-v2 .company-dark h2,
.companies-v2 .company-dark h3,
.companies-v2 .company-dark h4,
.companies-v2 .company-dark strong,
.pricing-v2 .pricing-final-cta h1,
.pricing-v2 .pricing-final-cta h2,
.pricing-v2 .pricing-final-cta h3,
.pricing-v2 .pricing-final-cta h4,
.pricing-v2 .pricing-final-cta strong,
.dark-showcase h1,
.dark-showcase h2,
.dark-showcase h3,
.dark-showcase h4,
.dark-showcase strong,
.asset-slot.dark h1,
.asset-slot.dark h2,
.asset-slot.dark h3,
.asset-slot.dark h4,
.asset-slot.dark strong {
  color: var(--color-inverse);
}

.home-loop-stage p,
.home-loop-stage li,
.home-screen p,
.home-screen li,
.home-final-cta p,
.home-final-cta li,
.features-module-stage p,
.features-module-stage li,
.features-social-proof p,
.features-social-proof li,
.features-final-cta p,
.features-final-cta li,
.formats-custom-stage p,
.formats-custom-stage li,
.formats-final-cta p,
.formats-final-cta li,
.agency-stage-screen p,
.agency-stage-screen li,
.agencies-v2 .agency-contact-dark p,
.agencies-v2 .agency-contact-dark li,
.company-live-screen p,
.company-live-screen li,
.companies-v2 .company-dark p,
.companies-v2 .company-dark li,
.pricing-v2 .pricing-final-cta p,
.pricing-v2 .pricing-final-cta li,
.dark-showcase p,
.dark-showcase li,
.asset-slot.dark p,
.asset-slot.dark li {
  color: rgba(255, 248, 239, 0.72);
}

@media (max-width: 820px) {
  .home-format-grid {
    gap: 12px;
  }

  .home-format-grid .home-format-card,
  .home-format-grid .home-format-card.large {
    min-block-size: 0;
    padding: 18px;
  }

  .home-format-grid .home-format-card strong {
    font-size: 1.04rem;
  }

  .home-format-grid .home-format-card p {
    font-size: 0.94rem;
  }
}

@media (max-width: 720px) {
  .home-page h1 {
    font-size: clamp(36px, 10vw, 46px);
  }
  .home-page h2 {
    font-size: clamp(28px, 8vw, 36px);
  }
  .home-hero {
    min-block-size: auto;
    padding-block: 42px 48px;
  }
  .home-orchestration {
    min-block-size: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .home-orchestration-label,
  .home-screen,
  .home-admin-panel,
  .home-host-panel,
  .home-player-phone {
    grid-column: auto;
    grid-row: auto;
  }
  .home-screen {
    min-block-size: 260px;
  }
  .home-thesis,
  .home-social-proof,
  .home-system-section,
  .home-formats-section,
  .home-launch-section,
  .home-audience-section,
  .home-pricing-section,
  .home-final-cta {
    padding-block: 48px;
  }
  .home-section-head {
    gap: 14px;
    margin-block-end: 24px;
  }
  .home-loop-stage {
    min-block-size: auto;
  }
  .home-loop-phone,
  .home-loop-host {
    position: static;
    margin-block-start: 12px;
    inline-size: auto;
  }
  .home-surfaces,
  .home-format-band,
  .home-routes,
  .home-launch-flow {
    grid-template-columns: 1fr;
  }
  .home-format-band {
    padding-inline: 16px;
  }
  .home-format-card,
  .home-format-card.large,
  .home-route {
    min-block-size: 260px;
  }
}

.features-section-head.compact {
  row-gap: 7px !important;
}

.features-section-head.compact > .eyebrow {
  margin-block: 0 12px !important;
}

.features-section-head.compact > p:not(.eyebrow) {
  margin-block-start: -12px !important;
}

/* Features page feedback pass: social proof first, host control as a concrete artifact. */
.features-page .features-social-cards-section {
  background: #FBFCFF;
  padding-block: clamp(48px, 6.5vw, 92px);
}
.features-social-head {
  margin-block-end: 34px;
}
.features-social-head h2 {
  max-inline-size: 1120px;
}
.features-social-cards {
  inline-size: 100vw;
  max-inline-size: none;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-inline: clamp(24px, 4.2vw, 80px);
}
.features-social-card {
  min-block-size: 390px;
  display: flex;
  flex-direction: column;
  border: 1px solid #D8E0EA;
  border-radius: 18px;
  padding: clamp(24px, 2.6vw, 32px);
}
.features-social-card.talk {
  background: #EEF5FF;
}
.features-social-card.rewards {
  background: #FFF6E8;
}
.features-social-card.inserts {
  background: #ECF8EF;
}
.features-social-card.shared {
  background: #FFF0EE;
}
.features-social-card h3 {
  max-inline-size: none;
  margin: 0;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.08;
}
.features-social-card p {
  margin-block: 18px 22px;
  color: #6B7280;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
}
.features-social-card .features-social-tags {
  margin-block-start: auto;
}
.features-social-card .features-social-tags span {
  border-color: #D7DFEA;
  background: rgba(255, 255, 255, 0.76);
  color: #111827;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 700;
}

.features-task-head {
  display: block;
  margin-block-end: 34px;
}
.features-task-head h2 {
  max-inline-size: none;
  white-space: nowrap;
}

.features-host-grid {
  inline-size: 100vw;
  max-inline-size: none;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(560px, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: stretch;
  padding-inline: clamp(24px, 4.2vw, 80px);
}
.features-host-copy h2 {
  max-inline-size: 680px;
  font-size: clamp(52px, 5vw, 76px);
  line-height: 1.02;
}
.features-host-copy > p {
  max-inline-size: 760px;
  margin-block-start: 28px;
  color: #6B7280;
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.45;
}
.features-host-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-block-start: 34px;
}
.features-host-actions article {
  min-block-size: 190px;
  display: grid;
  align-content: start;
  gap: 18px;
  border: 1px solid #D8E0EA;
  border-radius: 16px;
  background: #FFFFFF;
  padding: clamp(22px, 2.2vw, 30px);
}
.features-host-actions strong {
  font: 700 clamp(23px, 1.9vw, 29px)/1.08 var(--font-display);
}
.features-host-actions p {
  margin: 0;
  color: #6B7280;
  font-size: clamp(17px, 1.32vw, 21px);
  line-height: 1.44;
}
.features-host-visual {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  min-block-size: 900px;
  border: 1px dashed #D8E0EA;
  border-radius: 24px;
  background: #FFFFFF;
  padding: 32px;
}
.features-host-pill {
  border: 1px dashed #D8E0EA;
  border-radius: 999px;
  background: #FFFFFF;
  color: #8A8A8A;
  padding: 14px 18px;
  font: 700 16px/1.35 var(--font-ui);
  letter-spacing: 0.02em;
}
.features-host-screen {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid #D8E0EA;
  border-radius: 16px;
  background: #FCFCFD;
  padding: 24px;
}
.features-host-screen strong {
  color: #6B7280;
  font: 700 16px/1.2 var(--font-ui);
}
.features-host-screen span,
.features-host-mini-grid span {
  display: block;
  block-size: 14px;
  border-radius: 999px;
  background: #E5E7EB;
}
.features-host-screen span:nth-child(4) {
  inline-size: 62%;
}
.features-host-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.55fr;
  gap: 16px;
}
.features-host-mini-grid article {
  min-block-size: 144px;
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid #D8E0EA;
  border-radius: 16px;
  background: #FCFCFD;
  padding: 18px;
}
.features-host-mini-grid b {
  color: #7B7B7B;
  font: 700 15px/1.2 var(--font-ui);
}
.features-host-mini-grid article:nth-child(1) span {
  inline-size: 82%;
}
.features-host-mini-grid article:nth-child(2) span {
  inline-size: 54%;
}

.features-brand-stack {
  display: grid;
  gap: 34px;
}
.features-brand-head h2 {
  max-inline-size: 1060px;
}
.features-brand-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.features-brand-cards article {
  min-block-size: 236px;
  display: grid;
  align-content: start;
  gap: 18px;
  border: 1px solid #D8E0EA;
  border-radius: 16px;
  background: #FFFFFF;
  padding: clamp(22px, 2.2vw, 28px);
}
.features-brand-cards strong {
  font: 700 clamp(24px, 2vw, 30px)/1.08 var(--font-display);
}
.features-brand-cards p {
  margin: 0;
  color: #667085;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.45;
}

.features-screen-section {
  background: #FFFFFF;
  padding-block: clamp(72px, 8vw, 118px);
}
.features-screen-stack {
  display: grid;
  gap: 34px;
}
.features-screen-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.64fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: start;
}
.features-screen-head .eyebrow,
.features-screen-head h2 {
  grid-column: 1;
}
.features-screen-head .eyebrow {
  grid-row: 1;
}
.features-screen-head h2 {
  grid-row: 2;
  max-inline-size: 700px;
}
.features-screen-head > p {
  grid-column: 2;
  grid-row: 2;
  color: #667085;
  font-size: 18px;
  line-height: 1.58;
}
.features-screen-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.features-screen-cards article {
  border: 1px solid #D8E0EA;
  border-radius: 16px;
  background: #FFFFFF;
  padding: clamp(22px, 2.4vw, 30px);
}
.features-screen-cards h3 {
  margin: 0 0 8px;
  font: 700 clamp(24px, 2vw, 30px)/1.12 var(--font-display);
}
.features-screen-cards ul {
  margin: 0;
  padding-inline-start: 22px;
  color: #667085;
  font-size: 17px;
  line-height: 1.72;
}

@media (max-width: 1180px) {
  .features-social-cards,
  .features-brand-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features-host-grid {
    grid-template-columns: 1fr;
  }
  .features-host-visual {
    min-block-size: 720px;
  }
}

@media (max-width: 720px) {
  .features-social-cards,
  .features-brand-cards,
  .features-host-actions,
  .features-host-mini-grid {
    grid-template-columns: 1fr;
  }
  .features-social-card {
    min-block-size: auto;
  }
  .features-social-card p {
    font-size: 16px;
  }
  .features-social-card .features-social-tags span {
    font-size: 15px;
    padding: 9px 12px;
  }
  .features-task-head h2 {
    white-space: normal;
  }
  .features-host-copy h2 {
    font-size: clamp(34px, 9vw, 44px);
  }
  .features-host-copy > p,
  .features-host-actions p,
  .features-brand-cards p {
    font-size: 17px;
  }
  .features-host-actions article,
  .features-brand-cards article {
    min-block-size: auto;
  }
  .features-host-visual {
    min-block-size: 520px;
    padding: 16px;
    gap: 14px;
  }
  .features-host-pill {
    border-radius: 18px;
    font-size: 13px;
  }
  .features-host-screen {
    min-block-size: 260px;
  }
  .features-host-mini-grid article {
    min-block-size: 96px;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.06; font-weight: 700; }
h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; font-weight: 700; }
h3 { font-size: 20px; line-height: 1.22; font-weight: 700; }
p { color: var(--muted); text-wrap: pretty; }
ul { margin: 0; padding-inline-start: 20px; color: var(--muted); }
li + li { margin-block-start: 7px; }

.container {
  inline-size: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}
.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  border-block-end: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.nav {
  min-block-size: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
}
.navlinks {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 14px;
}
.navlinks a[aria-current="page"] { color: var(--fg); font-weight: 700; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.burger {
  display: none;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  place-items: center;
  font-size: 20px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-weight: 700;
  font-size: 15px;
}
.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}
.btn.mobile { display: none; min-block-size: 38px; padding-inline: 13px; }
.hero {
  padding-block: 58px 48px;
  border-block-end: 1px solid var(--border);
}
.hero.system-first {
  padding-block: 56px 42px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(480px, 1.14fr);
  gap: 48px;
  align-items: center;
}
.eyebrow {
  margin-block-end: 14px;
  color: var(--accent);
  font: 600 12px/1.4 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lead {
  margin-block-start: 20px;
  max-inline-size: 620px;
  font-size: 18px;
  line-height: 1.7;
}
.supporting-note {
  margin-block-start: 16px;
  max-inline-size: 620px;
  color: var(--muted);
  font-size: 15px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 28px;
}
.section {
  padding-block: 74px;
  border-block-end: 1px solid var(--border);
}
.page-nav-section {
  padding-block: 16px;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.page-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  color: var(--muted);
  font-size: 14px;
}
.page-nav strong {
  color: var(--fg);
  white-space: nowrap;
}
.page-nav a {
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--bg);
}
.page-nav a:hover {
  color: var(--fg);
  border-color: var(--accent);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-inline-size: 900px;
  margin-block-end: 34px;
}
.section-head > p:last-child {
  max-inline-size: 720px;
  font-size: 18px;
  line-height: 1.62;
}
.section-head > div > p {
  max-inline-size: 680px;
}
.section:not(.compact):not(.module-band) .section-head {
  grid-template-columns: minmax(0, 0.66fr) minmax(320px, 0.44fr);
  gap: 44px;
  max-inline-size: none;
  align-items: start;
}
.section:not(.compact):not(.module-band) .section-head > p:last-child {
  padding-block-start: 12px;
  border-block-start: 1px solid var(--border);
}
.module-band .section-head {
  grid-template-columns: minmax(0, 0.76fr) minmax(280px, 0.44fr);
  max-inline-size: none;
}
.module-band .section-head > p:last-child {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.section.compact .section-head {
  max-inline-size: none;
}
.section.compact .section-head > p:last-child {
  max-inline-size: 820px;
  padding: 16px 0 0;
  border-block-start: 1px solid var(--border);
}
.section.compact.module-band .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.section.compact.module-band .section-head > p:last-child {
  max-inline-size: none;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklch, var(--surface) 84%, var(--soft-accent));
}
.section:nth-of-type(4n + 1) .section-head > p:last-child {
  order: -1;
  max-inline-size: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
}
.section:nth-of-type(4n + 2) .section-head > p:last-child {
  align-self: end;
}
.section:nth-of-type(4n + 3) .section-head > p:last-child {
  max-inline-size: 640px;
}
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  min-block-size: 176px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 20px;
}
.card p { margin-block-start: 10px; }
.feature-label {
  margin-block-end: 8px;
  color: var(--accent);
  font: 600 12px/1.4 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card.soft-a { background: var(--soft-accent); }
.card.soft-b { background: var(--soft-warn); }
.card.soft-c { background: var(--soft-good); }
.card.soft-d { background: var(--soft-danger); }
.link-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.link-card strong { color: var(--accent); }
.placeholder {
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font: 500 12px/1.4 var(--font-ui);
}
.placeholder.pad { padding: 18px; }
.product-composite {
  min-block-size: 470px;
  padding: 22px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}
.visual-slot {
  margin-block: 24px 18px;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 5%, transparent), transparent 42%),
    var(--surface);
}
.visual-slot:first-child {
  margin-block-start: 0;
}
.visual-slot.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: 16px;
  align-items: stretch;
}
.visual-slot.lane {
  display: grid;
  gap: 14px;
}
.visual-slot.stack {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1fr);
  gap: 16px;
}
.visual-frame {
  min-block-size: 230px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--border) 50%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklch, var(--border) 50%, transparent) 1px, transparent 1px),
    var(--bg);
  background-size: 34px 34px;
  padding: 18px;
}
.visual-frame.video {
  aspect-ratio: 16 / 9;
  min-block-size: 250px;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 34%),
    var(--fg);
  color: var(--surface);
}
.visual-frame.video strong,
.visual-frame.video span {
  color: inherit;
}
.visual-frame strong,
.visual-cell strong {
  display: block;
  color: var(--fg);
}
.visual-frame span,
.visual-cell span {
  color: var(--muted);
  font-size: 13px;
}
.visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.visual-stack {
  display: grid;
  gap: 10px;
}
.visual-cell {
  min-block-size: 94px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 13px;
}
.visual-lane {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.visual-lane .visual-cell {
  min-block-size: 118px;
}
.system-composite {
  min-block-size: 510px;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--border) 48%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklch, var(--border) 48%, transparent) 1px, transparent 1px),
    var(--surface);
  background-size: 40px 40px;
}
.social-canvas,
.mechanics-map,
.format-picker,
.client-workflow,
.launch-flow,
.decision-map {
  grid-template-rows: auto 1fr auto;
}
.social-canvas .stage-screen,
.mechanics-map .stage-screen,
.format-picker .stage-screen,
.client-workflow .stage-screen,
.launch-flow .stage-screen,
.decision-map .stage-screen {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 18%, transparent);
}
.social-canvas .stage-screen p,
.mechanics-map .stage-screen p,
.format-picker .stage-screen p,
.client-workflow .stage-screen p,
.launch-flow .stage-screen p,
.decision-map .stage-screen p {
  color: var(--muted);
}
.system-composite .device {
  background: color-mix(in oklch, var(--surface) 80%, var(--bg));
}
.surface-stack {
  display: grid;
  gap: 12px;
}
.surface-stack .device-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.composite-label {
  display: inline-flex;
  width: fit-content;
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--bg);
  color: var(--muted);
}
.stage-screen {
  min-block-size: 210px;
  border: 1px solid var(--fg);
  border-radius: 12px;
  background: var(--fg);
  color: var(--surface);
  padding: 18px;
  display: grid;
  align-content: space-between;
}
.stage-screen p { color: color-mix(in oklch, var(--surface) 70%, var(--fg)); }
.device-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 12px;
}
.device {
  min-block-size: 128px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  padding: 12px;
}
.device strong { display: block; margin-block-end: 8px; }
.mini-line {
  display: block;
  block-size: 10px;
  margin-block-start: 8px;
  border-radius: 999px;
  background: var(--border);
}
.mini-line.short { inline-size: 62%; }
.proof {
  padding-block: 24px;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.proof-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: center;
}
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.logo-ph {
  min-block-size: 48px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--muted);
  font: 500 12px/1 var(--font-ui);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; }
.chip {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in oklch, var(--surface) 78%, transparent);
  color: var(--fg);
  font-size: 13px;
}
.scenario-strip {
  margin-block-start: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.scenario-strip span {
  min-block-size: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  text-align: center;
  font-size: 14px;
}
.scenario-strip span + span::before {
  content: "→";
  margin-inline-end: 8px;
  color: var(--accent);
  font-weight: 700;
}
.scenario-strip.wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.scenario-strip.summary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.module-band {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--accent) 4%, transparent), transparent 48%),
    var(--bg);
}
.section.compact {
  padding-block: 56px;
}
.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: stretch;
}
.mechanic-mosaic {
  grid-template-columns: 1.2fr 0.8fr 1fr;
  align-items: stretch;
}
.mechanic-mosaic .card:first-child {
  grid-row: span 2;
  min-block-size: 100%;
}
.mechanic-mosaic .card {
  min-block-size: 150px;
}
.proof-module {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  gap: 18px;
  align-items: stretch;
}
.proof-panel {
  min-block-size: 280px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 18px;
}
.proof-panel .scenario-strip {
  margin-block-start: 0;
}
.flow-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-block-start: 22px;
  position: relative;
}
.flow-rail::before {
  content: "";
  position: absolute;
  inset-block-start: 16px;
  inset-inline: 16px;
  block-size: 1px;
  background: var(--border);
}
.flow-rail .step {
  min-block-size: 150px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-block-start: 54px;
  padding-inline-start: 0;
}
.format-matrix {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}
.format-matrix .card {
  grid-column: span 2;
  min-block-size: 190px;
}
.format-matrix .card:nth-child(5n + 1) {
  grid-column: span 3;
  min-block-size: 250px;
}
.format-matrix .card:nth-child(5n + 2) {
  grid-column: span 3;
}
.format-matrix .card:nth-child(5n + 4) {
  background: var(--bg);
}
.format-matrix .card:nth-child(5n + 5) {
  border-style: dashed;
}
.wide-container {
  inline-size: 100vw;
  max-inline-size: none;
  margin-inline: 0;
  position: relative;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding-inline: clamp(18px, 3.4vw, 56px);
}
.theme-games-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
.theme-game-card {
  min-block-size: 360px;
  display: grid;
  grid-template-rows: 140px auto 1fr;
  gap: 14px;
  padding: 14px;
}
.theme-game-card h3,
.theme-game-card p {
  margin: 0;
}
.theme-game-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}
.theme-game-media,
.question-image-slot {
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 7%, transparent), transparent 52%),
    color-mix(in oklch, var(--surface) 70%, var(--bg));
  color: var(--muted);
  font: 600 12px/1.3 var(--font-ui);
  text-align: center;
}
.interactive-carousel-shell {
  position: relative;
  inline-size: 100vw;
  margin-inline: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin-block-start: 26px;
  padding: 18px clamp(18px, 3.4vw, 56px);
  border: 1px solid var(--border);
  border-inline: 0;
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 5%, transparent), transparent 42%),
    var(--surface);
  overflow: hidden;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-block-end: 14px;
}
.carousel-controls button {
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: 700 24px/1 var(--font-ui);
}
.carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.carousel-dots span {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--fg) 22%, var(--border));
}
.carousel-dots span:first-child {
  inline-size: 34px;
  background: var(--fg);
}
.interactive-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(340px, 420px);
  gap: 14px;
  margin-inline: -18px;
  padding-inline: 18px;
  padding-block: 4px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 72px), transparent 100%);
}
.interactive-carousel::-webkit-scrollbar {
  display: none;
}
.interactive-card {
  min-block-size: 280px;
  scroll-snap-align: start;
}
.question-type-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-block-start: 26px;
}
.question-type-card {
  min-block-size: 300px;
  display: grid;
  grid-template-rows: 118px auto 1fr;
  gap: 12px;
  padding: 12px;
}
.question-type-card h3,
.question-type-card p {
  margin: 0;
}
.question-type-card p {
  font-size: 14px;
  line-height: 1.48;
}
.system-surfaces {
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
}
.system-surfaces .card {
  min-block-size: 210px;
}
.system-surfaces .card:nth-child(1),
.system-surfaces .card:nth-child(4) {
  min-block-size: 260px;
  background: color-mix(in oklch, var(--accent) 6%, var(--surface));
}
.system-surfaces .card:nth-child(2) {
  transform: translateY(22px);
}
.system-surfaces .card:nth-child(3) {
  transform: translateY(-8px);
}
.section.compact .grid.cols-4:not(.mechanic-mosaic):not(.system-surfaces) {
  gap: 0;
  border-block: 1px solid var(--border);
}
.section.compact .grid.cols-4:not(.mechanic-mosaic):not(.system-surfaces) > .card {
  min-block-size: 150px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 20px;
}
.section.compact .grid.cols-4:not(.mechanic-mosaic):not(.system-surfaces) > .card + .card {
  border-inline-start: 1px solid var(--border);
}
.section:not(.compact) .grid.cols-3:not(.flow-rail):not(.format-matrix):not(.faq-grid) > .card:nth-child(even) {
  background: var(--bg);
}
.section:not(.compact) .grid.cols-3:not(.flow-rail):not(.format-matrix):not(.faq-grid) > .card:nth-child(3n) {
  border-style: dashed;
}
.route-split .link-card {
  min-block-size: 310px;
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.faq-item {
  min-block-size: auto;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--fg);
}
.faq-item p {
  margin-block-start: 12px;
}
.with-top-gap { margin-block-start: 22px; }
.steps { counter-reset: step; }
.step {
  position: relative;
  padding-inline-start: 52px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 20px;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--fg);
  color: var(--surface);
  font: 700 13px/1 var(--font-ui);
}
.price-placeholder {
  min-block-size: 76px;
  margin-block: 18px;
  display: grid;
  place-items: center;
}
.demo-form {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.field {
  min-block-size: 48px;
  display: flex;
  align-items: center;
  padding-inline: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
}
.footer {
  padding-block: 32px;
  color: var(--muted);
  font-size: 14px;
}
.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.footer-links a:hover { color: var(--fg); }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .navlinks, .btn.desktop { display: none; }
  .btn.mobile { display: inline-flex; }
  .burger { display: grid; }
  .topbar.nav-open .navlinks {
    position: absolute;
    inset-block-start: 68px;
    inset-inline: 16px;
    display: grid;
    gap: 4px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(17, 17, 17, 0.12);
  }
  .topbar.nav-open .navlinks a {
    min-block-size: 42px;
  }
}
@media (max-width: 980px) {
  .hero-grid, .section-head, .proof-inner, .layout-split, .proof-module, .system-surfaces { grid-template-columns: 1fr; }
  .section:not(.compact):not(.module-band) .section-head,
  .module-band .section-head,
  .section.compact.module-band .section-head {
    grid-template-columns: 1fr;
  }
  .hero-grid { gap: 34px; }
  .cols-4, .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mechanic-mosaic, .format-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-games-grid,
  .question-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .theme-game-card,
  .question-type-card {
    min-block-size: 280px;
  }
  .interactive-carousel {
    grid-auto-columns: minmax(280px, 72vw);
  }
  .mechanic-mosaic .card:first-child { grid-row: auto; }
  .format-matrix .card,
  .format-matrix .card:nth-child(5n + 1),
  .format-matrix .card:nth-child(5n + 2) {
    grid-column: auto;
    min-block-size: 180px;
  }
  .flow-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-rail::before { display: none; }
  .visual-slot.split,
  .visual-slot.stack {
    grid-template-columns: 1fr;
  }
  .visual-lane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .system-surfaces .card:nth-child(2),
  .system-surfaces .card:nth-child(3) {
    transform: none;
  }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .scenario-strip, .scenario-strip.wide, .scenario-strip.summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .container { inline-size: min(100% - 32px, 1200px); }
  h1 { font-size: clamp(32px, 8.4vw, 38px); line-height: 1.08; }
  h2 { font-size: clamp(25px, 7vw, 32px); }
  h3 { font-size: 19px; }
  .hero { padding-block: 40px; }
  .hero.system-first { padding-block: 40px 34px; }
  .hero-grid { gap: 24px; }
  .eyebrow { margin-block-end: 10px; font-size: 11px; }
  .lead { margin-block-start: 14px; font-size: 16px; line-height: 1.55; }
  .supporting-note { margin-block-start: 12px; font-size: 14px; line-height: 1.5; }
  .cta-row { margin-block-start: 18px; gap: 10px; }
  .btn { min-block-size: 42px; padding: 9px 14px; }
  .section { padding-block: 48px; }
  .product-composite { min-block-size: 340px; padding: 18px; }
  .system-composite { min-block-size: 360px; }
  .product-composite .stage-screen {
    min-block-size: 180px;
    padding: 14px;
  }
  .product-composite .device-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .product-composite .device {
    min-block-size: 104px;
    padding: 10px;
    font-size: 12px;
  }
  .visual-slot {
    margin-block: 18px;
    padding: 14px;
    border-radius: 12px;
  }
  .visual-frame {
    min-block-size: 180px;
    padding: 14px;
  }
  .visual-frame.video {
    min-block-size: 190px;
  }
  .visual-grid,
  .visual-lane {
    grid-template-columns: 1fr;
  }
  .visual-cell {
    min-block-size: 82px;
  }
  .section.compact .grid.cols-4:not(.mechanic-mosaic):not(.system-surfaces) > .card + .card {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
  .section-head,
  .section.compact .section-head,
  .section-head.centered,
  .section-head.stacked {
    max-inline-size: none;
    text-align: start;
    margin-block-end: 26px;
  }
  .section-head > p:last-child,
  .section.compact .section-head > p:last-child,
  .section-head.stacked > p:last-child,
  .section-head.centered > p:last-child,
  .module-band .section-head > p:last-child {
    max-inline-size: none;
    margin-block-start: 12px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .cols-4, .cols-3, .cols-2, .device-row, .logo-grid, .scenario-strip, .scenario-strip.wide, .scenario-strip.summary, .mechanic-mosaic, .format-matrix, .flow-rail, .faq-grid { grid-template-columns: 1fr; }
  .theme-games-grid,
  .question-type-grid {
    grid-template-columns: 1fr;
  }
  .theme-game-card,
  .question-type-card {
    min-block-size: auto;
    grid-template-rows: 150px auto auto;
  }
  .interactive-carousel-shell {
    padding: 12px;
    border-radius: 14px;
  }
  .carousel-controls button {
    inline-size: 38px;
    block-size: 38px;
  }
  .interactive-carousel {
    grid-auto-columns: minmax(260px, 86vw);
    margin-inline: -12px;
    padding-inline: 12px;
    mask-image: none;
  }
  .scenario-strip span + span::before { content: ""; margin: 0; }
}


/* Local review package: make top navigation behave like page tabs. */
.navlinks {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.navlinks a {
  display: inline-flex;
  align-items: center;
  min-block-size: 34px;
  padding-inline: 10px;
  border-radius: 8px;
}
.navlinks a:hover {
  color: var(--fg);
  background: var(--bg);
}
.navlinks a[aria-current="page"] {
  color: var(--surface);
  background: var(--fg);
}

/* Mockup craft system: media-first slots for future product visuals. */
.media-composition {
  margin-block: 28px;
  display: grid;
  gap: 18px;
}
.media-composition.hero-product {
  min-block-size: 560px;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.7fr);
  grid-template-rows: auto 1fr auto;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--border) 45%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklch, var(--border) 45%, transparent) 1px, transparent 1px),
    var(--surface);
  background-size: 42px 42px;
  box-shadow: 0 22px 60px rgba(17, 17, 17, 0.08);
}
.media-tag {
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 11px;
  background: color-mix(in oklch, var(--surface) 84%, var(--soft-accent));
  color: var(--muted);
  font: 600 12px/1.3 var(--font-ui);
}
.media-stage,
.media-panel,
.media-phone,
.media-photo,
.media-motion,
.media-diagram {
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 7%, transparent), transparent 42%),
    var(--surface);
  color: var(--muted);
  padding: 18px;
}
.media-stage {
  grid-row: span 2;
  min-block-size: 330px;
  display: grid;
  align-content: space-between;
  background:
    radial-gradient(circle at 70% 28%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 28%),
    var(--fg);
  color: var(--surface);
}
.media-stage p,
.media-stage span { color: color-mix(in oklch, var(--surface) 72%, var(--fg)); }
.media-panel,
.media-phone,
.media-motion,
.media-diagram {
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-block-size: 150px;
}
.media-phone {
  border-radius: 24px;
  min-block-size: 220px;
}
.media-photo {
  min-block-size: 280px;
  display: grid;
  align-content: end;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--fg) 78%, transparent), transparent),
    linear-gradient(90deg, color-mix(in oklch, var(--accent) 10%, transparent), transparent 65%),
    var(--bg);
}
.media-motion {
  background:
    repeating-linear-gradient(90deg, color-mix(in oklch, var(--accent) 18%, transparent) 0 8px, transparent 8px 18px),
    var(--surface);
}
.media-composition.hero-product .media-tag {
  grid-column: 1 / -1;
}
.media-composition.hero-product .media-stage {
  grid-column: 1;
}
.media-composition.hero-product .media-panel {
  grid-column: 2;
}
.media-composition.hero-product .media-phone {
  grid-column: 2;
}
.media-composition.hero-product .media-motion {
  grid-column: 1 / -1;
  min-block-size: 96px;
}
.visual-brief {
  margin-block: 26px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.55fr);
  gap: 18px;
  align-items: stretch;
}
.visual-brief.reverse {
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 0.95fr);
}
.visual-brief.reverse > :first-child {
  order: 2;
}
.visual-brief .media-stage,
.visual-brief .media-photo {
  min-block-size: 360px;
}
.asset-stack {
  display: grid;
  gap: 12px;
}
.asset-note {
  min-block-size: 92px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: color-mix(in oklch, var(--surface) 74%, var(--bg));
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
}
.asset-note strong {
  color: var(--fg);
  font-size: 14px;
}
.mechanics-evidence {
  margin-block: 28px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
}
.mechanics-evidence .media-stage {
  min-block-size: 420px;
}
.mechanics-evidence .asset-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.storyboard {
  margin-block: 28px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.story-card {
  grid-column: span 4;
  min-block-size: 220px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px;
  display: grid;
  align-content: space-between;
}
.story-card.wide {
  grid-column: span 6;
}
.story-card.media {
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 9%, transparent), transparent),
    var(--bg);
  border-style: dashed;
}
.page-feature {
  margin-block: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.68fr);
  gap: 20px;
  align-items: stretch;
}
.page-feature .card {
  min-block-size: 260px;
}
.media-grid {
  margin-block: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.media-grid .media-panel,
.media-grid .media-photo,
.media-grid .media-diagram,
.media-grid .media-motion {
  min-block-size: 190px;
}
.media-grid .wide {
  grid-column: span 2;
}
.dark-showcase {
  margin-block: 28px;
  border-radius: 18px;
  padding: 22px;
  background: var(--fg);
  color: var(--surface);
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 18px;
}
.dark-showcase p,
.dark-showcase span { color: color-mix(in oklch, var(--surface) 70%, var(--fg)); }
.dark-showcase .media-panel,
.dark-showcase .media-phone,
.dark-showcase .media-motion {
  border-color: color-mix(in oklch, var(--surface) 20%, var(--fg));
  background: color-mix(in oklch, var(--surface) 8%, var(--fg));
  color: var(--surface);
}
.section-head.stacked-strong {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-inline-size: 980px;
  margin-inline: auto;
  text-align: center;
}
.section-head.stacked-strong > p:last-child {
  max-inline-size: 760px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 19px;
}
.showcase-block {
  margin-block: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 24px;
  align-items: stretch;
}
.showcase-block.reverse {
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
}
.showcase-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.showcase-copy h3 {
  font-size: clamp(24px, 2.2vw, 34px);
}
.proof-list {
  display: grid;
  gap: 10px;
  margin-block-start: 12px;
}
.proof-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklch, var(--bg) 58%, var(--surface));
}
.proof-item::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  margin-block-start: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.proof-item:nth-child(2)::before { background: var(--warn); }
.proof-item:nth-child(3)::before { background: var(--success); }
.proof-item:nth-child(4)::before { background: var(--danger); }
.proof-item strong {
  display: block;
  color: var(--fg);
}
.proof-item span {
  color: var(--muted);
  font-size: 14px;
}
.feature-strip {
  margin-block: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.feature-strip .strip-item {
  min-block-size: 150px;
  padding: 20px;
  display: grid;
  align-content: space-between;
  gap: 12px;
}
.feature-strip .strip-item + .strip-item {
  border-inline-start: 1px solid var(--border);
}
.feature-strip .strip-item:nth-child(2) { background: var(--soft-accent); }
.feature-strip .strip-item:nth-child(3) { background: var(--soft-good); }
.feature-strip .strip-item:nth-child(4) { background: var(--soft-warn); }
.feature-strip strong {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 19px;
}
.feature-strip span {
  color: var(--muted);
  font-size: 14px;
}
.bento-board {
  margin-block: 28px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(130px, auto);
  gap: 14px;
}
.bento-item {
  grid-column: span 4;
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-block-size: 170px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 20px;
}
.bento-item.large {
  grid-column: span 7;
  grid-row: span 2;
  min-block-size: 320px;
}
.bento-item.tall {
  grid-column: span 5;
  grid-row: span 2;
}
.bento-item.wide {
  grid-column: span 6;
}
.bento-item.media {
  border-style: dashed;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 8%, transparent), transparent),
    var(--bg);
}
.bento-item strong {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 20px;
}
.bento-item span,
.bento-item p {
  color: var(--muted);
}
.split-editorial {
  margin-block: 28px;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: start;
}
.split-editorial .editorial-aside {
  position: sticky;
  top: 92px;
  padding-block-start: 8px;
}
.editorial-aside h3 {
  font-size: clamp(24px, 2.3vw, 36px);
}
.editorial-flow {
  display: grid;
  gap: 14px;
}
.editorial-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.38fr) minmax(0, 1fr);
  gap: 16px;
  padding-block: 18px;
  border-block-start: 1px solid var(--border);
}
.editorial-row strong {
  color: var(--fg);
  font-family: var(--font-display);
}
.page-system {
  margin-block: 30px;
  display: grid;
  gap: 18px;
}
.page-system.two-up {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}
.page-system.reverse {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}
.structure-map {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.structure-map h3 {
  font-size: clamp(22px, 2vw, 30px);
}
.structure-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklch, var(--bg) 62%, var(--surface));
}
.structure-step b {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--fg);
  color: var(--surface);
  font: 700 13px/1 var(--font-ui);
}
.structure-step strong {
  display: block;
  color: var(--fg);
}
.structure-step span {
  color: var(--muted);
  font-size: 14px;
}
.asset-layout {
  display: grid;
  gap: 14px;
}
.asset-layout.quad {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.asset-slot {
  min-block-size: 160px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 5%, transparent), transparent 46%),
    var(--surface);
}
.asset-slot.hero {
  min-block-size: 360px;
  border-style: solid;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--border) 38%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklch, var(--border) 38%, transparent) 1px, transparent 1px),
    var(--surface);
  background-size: 38px 38px;
}
.asset-slot.dark {
  background: var(--fg);
  color: var(--surface);
}
.asset-slot.dark span,
.asset-slot.dark p { color: color-mix(in oklch, var(--surface) 72%, var(--fg)); }
.asset-slot strong {
  color: inherit;
  font-family: var(--font-display);
  font-size: 18px;
}
.asset-slot span,
.asset-slot p {
  color: var(--muted);
}
.asset-label {
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in oklch, var(--surface) 84%, var(--soft-accent));
  color: var(--muted);
  font: 600 12px/1.3 var(--font-ui);
}
.content-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.content-strip > * {
  min-block-size: 150px;
  padding: 18px;
}
.content-strip > * + * {
  border-inline-start: 1px solid var(--border);
}
.content-strip strong {
  display: block;
  margin-block-end: 8px;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 18px;
}
.content-strip span {
  color: var(--muted);
  font-size: 14px;
}
.live-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 18px;
  margin-block: 32px;
  align-items: stretch;
}
.live-proof-stage {
  min-block-size: 520px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 18%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in oklch, var(--fg) 96%, var(--accent)), color-mix(in oklch, var(--fg) 88%, var(--surface)));
  color: var(--surface);
  padding: 22px;
}
.live-proof-stage p,
.live-proof-stage span { color: color-mix(in oklch, var(--surface) 72%, var(--fg)); }
.live-screen-slot {
  min-block-size: 280px;
  display: grid;
  align-content: end;
  gap: 14px;
  border: 1px solid color-mix(in oklch, var(--surface) 18%, transparent);
  border-radius: 14px;
  padding: 18px;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--surface) 11%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklch, var(--surface) 11%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
}
.live-device-stack {
  position: absolute;
  inset-inline-end: 22px;
  inset-block-end: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 160px));
  gap: 10px;
}
.live-device {
  min-block-size: 132px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  border: 1px solid color-mix(in oklch, var(--surface) 20%, transparent);
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in oklch, var(--surface) 10%, transparent);
}
.live-proof-steps {
  display: grid;
  gap: 12px;
}
.proof-step {
  min-block-size: 120px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
}
.proof-step strong,
.proof-step b { color: var(--fg); }
.proof-step b {
  font: 700 12px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.full-width-band {
  inline-size: 100vw;
  max-inline-size: none;
  position: relative;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding-inline: clamp(18px, 3.4vw, 56px);
}
.split-proof {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
  align-items: stretch;
  margin-block: 30px;
}
.split-proof.reverse {
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.72fr);
}
.proof-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 20px;
}
.proof-panel h3 {
  font-size: clamp(24px, 2.2vw, 34px);
}
.media-wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(130px, auto);
  gap: 12px;
}
.media-wall > * {
  display: grid;
  align-content: end;
  gap: 8px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--accent) 6%, transparent), transparent 48%),
    var(--surface);
  padding: 14px;
}
.media-wall .large { grid-column: span 7; grid-row: span 2; min-block-size: 300px; }
.media-wall .tall { grid-column: span 5; grid-row: span 2; }
.media-wall .small { grid-column: span 4; }
.mechanics-board {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-block: 28px;
}
.mechanics-board .center {
  min-block-size: 420px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle, color-mix(in oklch, var(--accent) 12%, transparent), transparent 48%),
    var(--surface);
  padding: 24px;
}
.mechanic-column {
  display: grid;
  gap: 12px;
}
.mechanic-tile {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
}
.decision-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  margin-block: 30px;
}
.decision-table {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.decision-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: 0;
}
.decision-row > * {
  padding: 16px;
  border-block-start: 1px solid var(--border);
}
.decision-row:first-child > * { border-block-start: 0; }
.decision-row > * + * { border-inline-start: 1px solid var(--border); }
.decision-row strong { color: var(--fg); }
.carousel-controls button:focus-visible,
.interactive-carousel:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--accent) 32%, transparent);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .media-composition.hero-product,
  .visual-brief,
  .visual-brief.reverse,
  .mechanics-evidence,
  .page-feature,
  .dark-showcase {
    grid-template-columns: 1fr;
  }
  .visual-brief.reverse > :first-child {
    order: 0;
  }
  .media-composition.hero-product .media-tag,
  .media-composition.hero-product .media-stage,
  .media-composition.hero-product .media-panel,
  .media-composition.hero-product .media-phone,
  .media-composition.hero-product .media-motion {
    grid-column: auto;
  }
  .story-card,
  .story-card.wide {
    grid-column: span 6;
  }
  .media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .showcase-block,
  .showcase-block.reverse,
  .split-editorial {
    grid-template-columns: 1fr;
  }
  .split-editorial .editorial-aside {
    position: static;
  }
  .feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-strip .strip-item:nth-child(3) {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
  .feature-strip .strip-item:nth-child(4) {
    border-block-start: 1px solid var(--border);
  }
  .bento-item,
  .bento-item.large,
  .bento-item.tall,
  .bento-item.wide {
    grid-column: span 6;
    grid-row: auto;
  }
  .page-system.two-up,
  .page-system.reverse,
  .live-proof,
  .split-proof,
  .split-proof.reverse,
  .mechanics-board,
  .decision-grid {
    grid-template-columns: 1fr;
  }
  .media-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .media-wall .large,
  .media-wall .tall,
  .media-wall .small {
    grid-column: auto;
    grid-row: auto;
    min-block-size: 220px;
  }
  .live-proof-stage {
    min-block-size: 460px;
  }
  .live-device-stack {
    position: static;
    margin-block-start: 14px;
  }
  .content-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .content-strip > *:nth-child(3) {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
  .content-strip > *:nth-child(4) {
    border-block-start: 1px solid var(--border);
  }
}

@media (max-width: 720px) {
  .media-composition.hero-product {
    min-block-size: auto;
    padding: 14px;
  }
  .media-stage,
  .visual-brief .media-stage,
  .visual-brief .media-photo,
  .mechanics-evidence .media-stage {
    min-block-size: 260px;
  }
  .mechanics-evidence .asset-stack,
  .media-grid,
  .storyboard {
    grid-template-columns: 1fr;
  }
  .story-card,
  .story-card.wide {
    grid-column: auto;
  }
  .feature-strip,
  .bento-board {
    grid-template-columns: 1fr;
  }
  .feature-strip .strip-item + .strip-item {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
  .bento-item,
  .bento-item.large,
  .bento-item.tall,
  .bento-item.wide {
    grid-column: auto;
  }
  .editorial-row {
    grid-template-columns: 1fr;
  }
  .asset-layout.quad,
  .content-strip,
  .media-wall,
  .mechanics-board,
  .decision-grid {
    grid-template-columns: 1fr;
  }
  .live-proof-stage {
    min-block-size: auto;
    padding: 16px;
  }
  .live-device-stack {
    grid-template-columns: 1fr;
  }
  .live-screen-slot {
    min-block-size: 220px;
  }
  .decision-row {
    grid-template-columns: 1fr;
  }
  .decision-row > * + * {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
  .content-strip > * + *,
  .content-strip > *:nth-child(3),
  .content-strip > *:nth-child(4) {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
}

/* Homepage final overrides: keep the index mockup disciplined after shared styles. */
.home-page h1,
.home-page h2 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.home-page h1 {
  max-inline-size: 780px;
  font-size: clamp(38px, 4.3vw, 60px);
  line-height: 1.03;
}
.home-hero {
  min-block-size: auto;
  padding-block: clamp(48px, 5.2vw, 72px) clamp(40px, 4.4vw, 58px);
}
.home-hero-grid {
  grid-template-columns: minmax(0, 1.14fr) minmax(500px, 0.86fr);
  gap: clamp(28px, 3.8vw, 52px);
}
.home-orchestration {
  block-size: 620px;
  min-block-size: 0;
}
.home-screen {
  grid-column: 1 / 9;
}
.home-screen strong,
.home-screen p {
  max-inline-size: 330px;
}
.home-admin-panel {
  grid-column: 8 / 13;
  grid-row: 2 / 6;
}
.home-player-phone {
  grid-row: 8 / 12;
  align-content: start;
  padding: 14px;
}
.home-section-head {
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.54fr);
}
.home-section-head .eyebrow {
  grid-column: 1 / -1;
}
.home-section-head h2 {
  grid-column: 1;
  grid-row: 2;
  max-inline-size: 820px;
}
.home-section-head > p:not(.eyebrow) {
  grid-column: 2;
  grid-row: 2;
}
.home-section-head.compact .eyebrow,
.home-section-head.compact h2,
.home-section-head.compact > p:not(.eyebrow) {
  grid-column: auto;
  grid-row: auto;
}
.home-form.demo-form {
  background: var(--home-dark-2);
  border-color: rgba(248,250,252,0.16);
  border-radius: 16px;
}
.home-form .field {
  background: rgba(248,250,252,0.06);
  border-color: rgba(248,250,252,0.14);
  color: #D7DFEA;
}
.home-fit-row {
  flex-wrap: nowrap;
}
.home-fit-row span {
  white-space: nowrap;
  padding: 7px 9px;
  font-size: 11px;
}
.home-thesis {
  padding-block: clamp(58px, 7vw, 96px);
}
.home-thesis-grid {
  display: block;
}
.home-thesis-grid h2 {
  max-inline-size: 1120px;
  font-size: clamp(42px, 6.2vw, 86px);
  line-height: 0.98;
}
.home-social-intro {
  max-inline-size: 1120px;
  margin-block-end: 34px;
}
.home-social-intro > p:last-child {
  max-inline-size: 1040px;
  color: #111827;
  font: 700 clamp(30px, 4.2vw, 58px)/1.04 var(--font-display);
  text-wrap: balance;
}
.home-mechanic-visual {
  min-block-size: 360px;
  align-content: stretch;
}
.home-visual-state {
  position: absolute;
  inset: 20px;
  display: grid;
  align-content: end;
  gap: 14px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.home-visual-state.chat {
  opacity: 1;
}
.home-loop:has(.home-mechanic-card.support:hover) .home-visual-state,
.home-loop:has(.home-mechanic-card.risk:hover) .home-visual-state,
.home-loop:has(.home-mechanic-card.result:hover) .home-visual-state {
  opacity: 0;
}
.home-loop:has(.home-mechanic-card.chat:hover) .home-visual-state.chat,
.home-loop:has(.home-mechanic-card.support:hover) .home-visual-state.support,
.home-loop:has(.home-mechanic-card.risk:hover) .home-visual-state.risk,
.home-loop:has(.home-mechanic-card.result:hover) .home-visual-state.result {
  opacity: 1;
}
.home-mechanic-card {
  min-block-size: 132px;
  cursor: default;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.home-mechanic-card:hover {
  border-color: color-mix(in oklch, var(--accent) 42%, var(--home-line));
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.08);
}
.home-formats-head h2 {
  max-inline-size: 920px;
}
.home-formats-head > p:not(.eyebrow) {
  max-inline-size: 720px;
  margin-block-start: 14px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--home-line);
  color: #344054;
  font-size: 18px;
  line-height: 1.62;
}
.home-format-showcase {
  grid-template-columns: minmax(520px, 1.08fr) minmax(420px, 0.92fr);
  gap: 16px;
  align-items: stretch;
}
.home-format-hero,
.home-format-side > div {
  border: 1px solid var(--home-line);
  border-radius: 18px;
  padding: 22px;
}
.home-format-hero {
  min-block-size: 520px;
  display: grid;
  align-content: end;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(47,111,235,0.16), transparent 48%),
    linear-gradient(90deg, rgba(248,250,252,0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248,250,252,0.06) 1px, transparent 1px),
    var(--home-dark);
  background-size: auto, 44px 44px, 44px 44px, auto;
  color: #F8FAFC;
}
.home-format-hero span,
.home-format-hero p {
  color: #B9C6D8;
}
.home-format-hero strong {
  max-inline-size: 660px;
  font: 700 clamp(34px, 4.2vw, 62px)/1.02 var(--font-display);
}
.home-format-side {
  display: grid;
  gap: 16px;
}
.home-format-side > div {
  min-block-size: 162px;
  display: grid;
  align-content: end;
  gap: 10px;
  background:
    linear-gradient(135deg, rgba(47,111,235,0.08), transparent 54%),
    #FFFFFF;
}
.home-format-side span,
.home-format-hero span {
  color: var(--accent);
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-format-side strong {
  font: 700 28px/1.08 var(--font-display);
}
.home-format-side p {
  color: #667085;
}

@media (max-width: 980px) {
  .home-hero {
    min-block-size: auto;
  }
  .home-hero-grid,
  .home-section-head {
    grid-template-columns: 1fr;
  }
  .home-section-head h2,
  .home-section-head > p:not(.eyebrow) {
    grid-column: auto;
    grid-row: auto;
  }
  .home-orchestration {
    block-size: auto;
    min-block-size: 540px;
  }
  .home-fit-row {
    flex-wrap: wrap;
  }
  .home-format-showcase {
    grid-template-columns: 1fr;
    inline-size: auto;
    margin-inline: 0;
    padding-inline: 24px;
  }
  .home-format-hero {
    min-block-size: 420px;
  }
}

@media (max-width: 720px) {
  .home-page h1 {
    font-size: clamp(34px, 9.4vw, 44px);
  }
  .home-fit-row {
    display: none;
  }
  .home-thesis {
    padding-block: 48px;
  }
  .home-thesis-grid h2 {
    font-size: clamp(34px, 10vw, 46px);
  }
  .home-social-intro > p:last-child {
    font-size: clamp(28px, 8.6vw, 38px);
  }
  .home-mechanic-visual {
    min-block-size: 300px;
  }
  .home-visual-state {
    position: relative;
    inset: auto;
  }
  .home-visual-state:not(.chat) {
    display: none;
  }
  .home-format-showcase {
    padding-inline: 16px;
  }
  .home-format-hero,
  .home-format-side > div {
    min-block-size: 260px;
  }
  .home-format-hero strong {
    font-size: clamp(28px, 8vw, 36px);
  }
  .home-orchestration {
    min-block-size: auto;
    gap: 10px;
    padding: 14px;
  }
  .home-screen {
    min-block-size: 220px;
    padding: 16px;
  }
  .home-screen strong {
    font-size: 32px;
  }
  .home-admin-panel,
  .home-host-panel,
  .home-player-phone {
    padding: 14px;
  }
  .home-admin-panel p,
  .home-host-panel p,
  .home-player-phone p,
  .home-screen p {
    font-size: 14px;
    line-height: 1.42;
  }
  .home-reaction-rail span {
    padding: 6px 8px;
  }
}

/* Homepage comment pass: tighten hierarchy and make product proof less card-grid-like. */
.home-social-intro {
  display: grid;
  grid-template-columns: minmax(150px, 0.25fr) minmax(0, 0.75fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: start;
  padding-block: 22px;
  border-block: 1px solid var(--home-line);
}
.home-social-intro .eyebrow {
  margin-block: 0;
}
.home-social-intro > p:last-child {
  max-inline-size: 900px;
  color: #344054;
  font: 500 clamp(18px, 1.65vw, 24px)/1.5 var(--font-body);
  text-wrap: pretty;
}

.home-mechanic-visual {
  overflow: hidden;
  padding: 0;
  background: #101828;
}
.home-visual-state {
  inset: 0;
  padding: 24px;
  border-radius: 15px;
  isolation: isolate;
}
.home-visual-state::before,
.home-visual-state::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.home-visual-state::before {
  background:
    linear-gradient(90deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248,250,252,0.08) 1px, transparent 1px);
  background-size: 42px 42px;
}
.home-visual-state::after {
  opacity: 0.9;
}
.home-visual-state.chat {
  background:
    radial-gradient(circle at 18% 20%, rgba(34,184,207,0.32), transparent 30%),
    linear-gradient(135deg, #101828, #15283A);
}
.home-visual-state.chat::after {
  background:
    linear-gradient(90deg, rgba(34,184,207,0.22), transparent 44%),
    radial-gradient(circle at 74% 34%, rgba(248,250,252,0.14), transparent 13%);
}
.home-visual-state.support {
  background:
    radial-gradient(circle at 72% 22%, rgba(255,90,61,0.34), transparent 31%),
    linear-gradient(135deg, #101828, #301D25);
}
.home-visual-state.support::after {
  background:
    radial-gradient(circle at 28% 72%, rgba(255,90,61,0.24), transparent 20%),
    linear-gradient(135deg, transparent 0%, rgba(248,250,252,0.12) 100%);
}
.home-visual-state.risk {
  background:
    radial-gradient(circle at 22% 28%, rgba(124,92,255,0.34), transparent 28%),
    linear-gradient(135deg, #111827, #241E40);
}
.home-visual-state.risk::after {
  background:
    radial-gradient(circle at 76% 70%, rgba(245,184,75,0.22), transparent 22%),
    linear-gradient(90deg, rgba(124,92,255,0.18), transparent 58%);
}
.home-visual-state.result {
  background:
    radial-gradient(circle at 72% 22%, rgba(0,168,132,0.32), transparent 31%),
    linear-gradient(135deg, #101828, #14302D);
}
.home-visual-state.result::after {
  background:
    radial-gradient(circle at 24% 74%, rgba(163,230,53,0.20), transparent 19%),
    linear-gradient(135deg, rgba(0,168,132,0.20), transparent 52%);
}
.home-loop:has(.home-mechanic-card.support:hover) .home-loop-stage {
  background:
    radial-gradient(circle at 84% 18%, rgba(255,90,61,0.24), transparent 28%),
    linear-gradient(135deg, #101828, #2C1C25);
}
.home-loop:has(.home-mechanic-card.risk:hover) .home-loop-stage {
  background:
    radial-gradient(circle at 84% 18%, rgba(124,92,255,0.26), transparent 28%),
    linear-gradient(135deg, #101828, #211F3C);
}
.home-loop:has(.home-mechanic-card.result:hover) .home-loop-stage {
  background:
    radial-gradient(circle at 84% 18%, rgba(0,168,132,0.24), transparent 28%),
    linear-gradient(135deg, #101828, #17302D);
}

.home-system-map {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
  gap: 18px;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(47,111,235,0.05), transparent 44%),
    #FBFCFF;
  padding: 18px;
}
.home-system-stage {
  position: relative;
  min-block-size: 520px;
  display: grid;
  align-content: end;
  gap: 16px;
  overflow: hidden;
  border-radius: 18px;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(90deg, rgba(248,250,252,0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248,250,252,0.07) 1px, transparent 1px),
    radial-gradient(circle at 80% 18%, rgba(255,90,61,0.24), transparent 26%),
    linear-gradient(135deg, #101828, #172033);
  background-size: 44px 44px, 44px 44px, auto, auto;
  color: #F8FAFC;
}
.home-system-stage::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(248,250,252,0.14);
  border-radius: 14px;
  pointer-events: none;
}
.home-system-stage > * {
  position: relative;
  z-index: 1;
}
.home-system-stage strong {
  max-inline-size: 720px;
  font: 700 clamp(34px, 4vw, 60px)/1.02 var(--font-display);
}
.home-system-stage p {
  max-inline-size: 620px;
  color: #B9C6D8;
  font-size: 18px;
}
.home-system-screen-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 8px;
}
.home-system-screen-row span {
  border: 1px solid rgba(248,250,252,0.16);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(248,250,252,0.08);
  color: #F8FAFC;
  font: 600 13px/1.25 var(--font-ui);
}
.home-system-rail {
  position: relative;
  display: grid;
  gap: 12px;
}
.home-system-rail::before {
  content: "";
  position: absolute;
  inset-block: 42px;
  inset-inline-start: 41px;
  inline-size: 1px;
  background: var(--home-line);
}
.home-system-node {
  position: relative;
  z-index: 1;
  min-block-size: 158px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border: 1px solid var(--home-line);
  border-radius: 16px;
  background: #FFFFFF;
  padding: 18px;
}
.home-system-node b {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--home-dark);
  color: #F8FAFC;
  font: 700 12px/1 var(--font-ui);
}
.home-system-node.admin b {
  background: var(--accent);
}
.home-system-node.host b {
  background: #7C5CFF;
}
.home-system-node.player b {
  background: #00A884;
}
.home-system-node strong {
  display: block;
  margin-block-end: 8px;
  color: #111827;
  font: 700 21px/1.14 var(--font-display);
}
.home-system-node p {
  color: #344054;
}

.home-final-cta .lead {
  margin-block-start: 0;
}
.home-form .field:nth-child(3) {
  min-block-size: 132px;
  align-items: flex-start;
  padding-block: 14px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .home-social-intro,
  .home-system-map {
    grid-template-columns: 1fr;
  }
  .home-system-stage {
    min-block-size: 420px;
  }
  .home-format-band {
    inline-size: auto;
    margin-inline: 0;
    padding-inline: 24px;
  }
}

@media (max-width: 720px) {
  .home-social-intro {
    gap: 10px;
    padding-block: 18px;
  }
  .home-social-intro > p:last-child {
    font-size: 18px;
    line-height: 1.55;
  }
  .home-mechanic-visual {
    min-block-size: 300px;
  }
  .home-visual-state {
    position: absolute;
    inset: 0;
    padding: 18px;
  }
  .home-visual-state:not(.chat) {
    display: grid;
  }
  .home-system-map {
    padding: 12px;
  }
  .home-system-stage {
    min-block-size: 320px;
    padding: 18px;
  }
  .home-system-stage strong {
    font-size: clamp(28px, 8vw, 36px);
  }
  .home-system-stage p,
  .home-system-node p {
    font-size: 14px;
    line-height: 1.45;
  }
  .home-system-node {
    min-block-size: auto;
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 14px;
  }
  .home-system-node b {
    inline-size: 42px;
    block-size: 42px;
  }
  .home-format-band {
    padding-inline: 16px;
  }
}

/* Homepage refinement pass from markup comments. */
.home-thesis-grid h2 {
  max-inline-size: 980px;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.04;
}
.home-social-intro {
  display: block;
  max-inline-size: 900px;
  padding-block: 0 28px;
  border-block: 0 1px solid var(--home-line);
}
.home-social-intro > p:last-child {
  max-inline-size: 880px;
  font: 500 clamp(18px, 1.55vw, 23px)/1.5 var(--font-body);
  color: #344054;
}

.home-loop-stage {
  min-block-size: 560px;
  padding: 0;
  background: #101828;
}
.home-loop-stage::before {
  display: none;
}
.home-stage-state {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: clamp(34px, 8vw, 120px);
  padding: clamp(24px, 3.2vw, 42px);
  opacity: 0;
  overflow: hidden;
  transition: opacity 180ms ease;
  isolation: isolate;
}
.home-stage-state.chat {
  opacity: 1;
}
.home-stage-state::before,
.home-stage-state::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.home-stage-state::before {
  background:
    linear-gradient(90deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248,250,252,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}
.home-stage-state::after {
  inset: 22px;
  border: 1px solid rgba(248,250,252,0.14);
  border-radius: 16px;
}
.home-stage-state.chat {
  background:
    radial-gradient(circle at 22% 18%, rgba(34,184,207,0.34), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(248,250,252,0.10), transparent 22%),
    linear-gradient(135deg, #101828, #16283A);
}
.home-stage-state.support {
  background:
    radial-gradient(circle at 72% 18%, rgba(255,90,61,0.36), transparent 30%),
    radial-gradient(circle at 18% 78%, rgba(245,184,75,0.14), transparent 20%),
    linear-gradient(135deg, #101828, #301D25);
}
.home-stage-state.risk {
  background:
    radial-gradient(circle at 25% 20%, rgba(124,92,255,0.36), transparent 28%),
    radial-gradient(circle at 82% 76%, rgba(245,184,75,0.22), transparent 22%),
    linear-gradient(135deg, #111827, #241E40);
}
.home-stage-state.result {
  background:
    radial-gradient(circle at 76% 20%, rgba(0,168,132,0.34), transparent 29%),
    radial-gradient(circle at 22% 78%, rgba(163,230,53,0.18), transparent 20%),
    linear-gradient(135deg, #101828, #14302D);
}
.home-loop:has(.home-mechanic-card.support:hover) .home-stage-state,
.home-loop:has(.home-mechanic-card.risk:hover) .home-stage-state,
.home-loop:has(.home-mechanic-card.result:hover) .home-stage-state {
  opacity: 0;
}
.home-loop:has(.home-mechanic-card.chat:hover) .home-stage-state.chat,
.home-loop:has(.home-mechanic-card.support:hover) .home-stage-state.support,
.home-loop:has(.home-mechanic-card.risk:hover) .home-stage-state.risk,
.home-loop:has(.home-mechanic-card.result:hover) .home-stage-state.result {
  opacity: 1;
}
.home-stage-copy {
  max-inline-size: 650px;
}
.home-stage-copy strong {
  display: block;
  margin-block-start: 12px;
  color: #F8FAFC;
  font: 700 clamp(32px, 4.2vw, 62px)/1.02 var(--font-display);
}
.home-stage-copy p {
  max-inline-size: 560px;
  margin-block-start: 16px;
  color: #D7DFEA;
  font-size: 18px;
}
.home-stage-minis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.home-stage-minis span {
  min-block-size: 92px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(248,250,252,0.16);
  border-radius: 14px;
  background: rgba(248,250,252,0.10);
  color: #F8FAFC;
  padding: 14px;
  font: 700 15px/1.25 var(--font-ui);
}

.home-system-map {
  grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
}
.home-system-rail {
  align-content: stretch;
}
.home-system-stage {
  min-block-size: 520px;
}

.home-format-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-block-start: 36px;
}
.home-format-grid .home-format-card,
.home-format-grid .home-format-card.large {
  min-block-size: 252px;
  align-content: start;
  border-radius: 12px;
  background: #FFFFFF;
  color: #111827;
  padding: 28px;
}
.home-format-grid .home-format-card strong {
  font: 700 clamp(25px, 2.3vw, 34px)/1.1 var(--font-display);
}
.home-format-grid .home-format-card p {
  margin-block-start: 18px;
  color: #667085;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.52;
}

@media (max-width: 980px) {
  .home-thesis-grid h2 {
    font-size: clamp(32px, 7vw, 46px);
  }
  .home-stage-minis,
  .home-format-grid {
    grid-template-columns: 1fr;
  }
  .home-system-map {
    grid-template-columns: 1fr;
  }
  .home-system-stage {
    order: 2;
  }
  .home-system-rail {
    order: 1;
  }
}

@media (max-width: 720px) {
  .home-thesis-grid h2 {
    font-size: clamp(30px, 8.5vw, 38px);
  }
  .home-social-intro > p:last-child {
    font-size: 18px;
  }
  .home-loop-stage {
    min-block-size: 430px;
  }
  .home-stage-state {
    padding: 18px;
    gap: 20px;
  }
  .home-stage-state::after {
    inset: 12px;
  }
  .home-stage-copy strong {
    font-size: clamp(28px, 8vw, 36px);
  }
  .home-stage-copy p {
    font-size: 14px;
    line-height: 1.45;
  }
  .home-stage-minis {
    gap: 8px;
  }
  .home-stage-minis span {
    min-block-size: 54px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .home-format-grid .home-format-card {
    min-block-size: auto;
    padding: 22px;
  }
  .home-format-grid .home-format-card p {
    font-size: 17px;
  }
}

/* Features page craft pass: capabilities as product proof, not documentation. */
.features-page {
  --features-dark: #101828;
  --features-dark-2: #182230;
  --features-line: #D7DFEA;
  --features-soft: #F2F6FC;
  background: #FBFCFF;
  color: #111827;
}
.features-page section {
  border-block-end: 1px solid var(--features-line);
}
.features-page h1,
.features-page h2,
.features-page h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.features-page h1 {
  max-inline-size: 860px;
  font-size: clamp(40px, 5.1vw, 72px);
  line-height: 1.01;
}
.features-page h2 {
  max-inline-size: 920px;
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: 1.04;
}
.features-page .lead {
  max-inline-size: 760px;
  color: #344054;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.56;
}
.features-hero {
  padding-block: clamp(56px, 6.5vw, 92px) clamp(48px, 5.5vw, 76px);
  background:
    radial-gradient(circle at 78% 18%, rgba(40,93,255,0.12), transparent 30%),
    linear-gradient(180deg, #FBFCFF 0%, #F4F7FC 100%);
}
.features-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(520px, 0.98fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.features-hero-copy {
  display: grid;
  align-content: center;
}
.features-hero-orbit {
  position: relative;
  min-block-size: 620px;
  overflow: hidden;
  border: 1px solid var(--features-line);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #FFFFFF, #ECF3FF);
  background-size: 44px 44px, 44px 44px, auto;
  box-shadow: 0 28px 80px rgba(16, 24, 40, 0.10);
  padding: 22px;
}
.features-orbit-center {
  position: absolute;
  inset: 128px 82px 128px 82px;
  display: grid;
  align-content: end;
  gap: 14px;
  border: 1px solid rgba(248,250,252,0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 76% 20%, rgba(255,90,61,0.20), transparent 27%),
    linear-gradient(135deg, #101828, #172033);
  color: #F8FAFC;
  padding: 28px;
}
.features-orbit-center span,
.features-orbit-card b,
.features-module-stage span,
.features-social-screen span,
.features-brand-visual span {
  color: #8EA4FF;
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.features-orbit-center strong {
  max-inline-size: 520px;
  font: 700 clamp(28px, 3.6vw, 48px)/1.02 var(--font-display);
}
.features-orbit-center p {
  max-inline-size: 480px;
  color: #B9C6D8;
}
.features-orbit-card {
  position: absolute;
  display: grid;
  gap: 9px;
  inline-size: 210px;
  min-block-size: 126px;
  border: 1px solid rgba(16,24,40,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.94);
  padding: 18px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.09);
}
.features-orbit-card span {
  color: #344054;
}
.features-orbit-card.admin { inset-block-start: 34px; inset-inline-end: 42px; }
.features-orbit-card.host { inset-block-end: 44px; inset-inline-end: 42px; }
.features-orbit-card.screen { inset-block-start: 58px; inset-inline-start: 36px; }
.features-orbit-card.player { inset-block-end: 52px; inset-inline-start: 58px; }
.features-orbit-card.admin b { color: #285DFF; }
.features-orbit-card.host b { color: #7C5CFF; }
.features-orbit-card.screen b { color: #101828; }
.features-orbit-card.player b { color: #00A884; }

.features-index {
  background: #FFFFFF;
  padding-block: 18px;
}
.features-index-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--features-line);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
}
.features-index-grid a {
  min-block-size: 96px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
}
.features-index-grid a + a {
  border-inline-start: 1px solid var(--features-line);
}
.features-index-grid span {
  color: #285DFF;
  font: 700 12px/1 var(--font-ui);
}
.features-index-grid strong {
  font: 700 19px/1.2 var(--font-display);
}

.features-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.42fr);
  gap: clamp(26px, 5vw, 70px);
  align-items: start;
  margin-block-end: 34px;
}
.features-section-head .eyebrow,
.features-section-head h2 {
  grid-column: 1;
}
.features-section-head .eyebrow {
  margin-block-end: 0;
}
.features-section-head > p {
  grid-column: 2;
  grid-row: 2;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--features-line);
  color: #344054;
  font-size: 18px;
  line-height: 1.6;
}
.features-section-head.compact {
  display: block;
  margin-block-end: 0;
}
.features-section-head.compact > p {
  max-inline-size: 650px;
  margin-block-start: 18px;
}

.features-task-section,
.features-modules-section,
.features-social-section,
.features-live-section,
.features-brand-section,
.features-final-cta {
  padding-block: clamp(72px, 8vw, 118px);
}
.features-task-section {
  overflow: hidden;
  background: #FBFCFF;
}
.features-task-grid {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 16px;
  padding-inline: clamp(18px, 3.4vw, 56px);
}
.features-task-grid article {
  min-block-size: 360px;
  display: grid;
  grid-template-rows: 130px auto 1fr;
  gap: 14px;
  border: 1px solid var(--features-line);
  border-radius: 14px;
  background: #FFFFFF;
  padding: 14px;
}
.features-card-media {
  display: grid;
  place-items: center;
  border: 1px dashed #C9D3E1;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(40,93,255,0.07), transparent 54%),
    #F7F9FD;
  color: #667085;
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.features-card-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.features-task-grid strong {
  font: 700 22px/1.12 var(--font-display);
}
.features-task-grid p {
  color: #667085;
  font-size: 15px;
  line-height: 1.5;
}

.features-modules-section {
  background: #FFFFFF;
  overflow: hidden;
}
.features-modules-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: stretch;
}
.features-module-stage {
  min-block-size: 520px;
  display: grid;
  align-content: end;
  gap: 16px;
  overflow: hidden;
  border-radius: 22px;
  padding: clamp(24px, 3.2vw, 42px);
  background:
    linear-gradient(90deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    radial-gradient(circle at 72% 20%, rgba(34,184,207,0.28), transparent 26%),
    radial-gradient(circle at 20% 78%, rgba(124,92,255,0.22), transparent 22%),
    linear-gradient(135deg, #101828, #182230);
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
  color: #F8FAFC;
}
.features-module-stage strong {
  max-inline-size: 760px;
  font: 700 clamp(34px, 4vw, 58px)/1.03 var(--font-display);
}
.features-module-stage p {
  max-inline-size: 660px;
  color: #B9C6D8;
  font-size: 18px;
}
.features-module-list {
  margin-block-start: 20px;
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 0;
  border: 1px solid var(--features-line);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
}
.features-module-list article {
  min-block-size: 210px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
}
.features-module-list article + article {
  border-inline-start: 1px solid var(--features-line);
}
.features-module-list span {
  color: #285DFF;
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.features-module-list strong {
  font: 700 20px/1.16 var(--font-display);
}
.features-module-list p {
  color: #667085;
  font-size: 14px;
  line-height: 1.48;
}

.features-social-section {
  background: #F2F6FC;
}
.features-social-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: center;
}
.features-social-copy p:not(.eyebrow) {
  max-inline-size: 620px;
  color: #344054;
  font-size: 18px;
  line-height: 1.62;
}
.features-social-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 28px;
}
.features-social-tags span {
  border: 1px solid #C9D3E1;
  border-radius: 999px;
  background: #FFFFFF;
  color: #344054;
  padding: 8px 11px;
  font: 700 13px/1.25 var(--font-ui);
}
.features-social-proof {
  position: relative;
  min-block-size: 560px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 18%, rgba(255,90,61,0.28), transparent 27%),
    linear-gradient(135deg, #101828, #2C1C25);
  color: #F8FAFC;
  padding: 24px;
}
.features-social-screen {
  position: absolute;
  inset: 28px 120px 132px 28px;
  display: grid;
  align-content: end;
  gap: 14px;
  border: 1px solid rgba(248,250,252,0.16);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248,250,252,0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  padding: 24px;
}
.features-social-screen strong {
  max-inline-size: 620px;
  font: 700 clamp(32px, 4vw, 58px)/1.03 var(--font-display);
}
.features-social-screen p,
.features-social-phone span,
.features-social-host span {
  color: #B9C6D8;
}
.features-social-phone,
.features-social-host {
  position: absolute;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(248,250,252,0.16);
  border-radius: 16px;
  background: rgba(248,250,252,0.10);
  padding: 18px;
}
.features-social-phone {
  inline-size: 210px;
  inset-inline-end: 34px;
  inset-block-end: 42px;
}
.features-social-host {
  inline-size: 230px;
  inset-inline-start: 70px;
  inset-block-end: 54px;
}

.features-live-section {
  background: #FFFFFF;
}
.features-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.features-live-panel {
  position: sticky;
  top: 96px;
}
.features-live-panel p:not(.eyebrow) {
  max-inline-size: 600px;
  color: #344054;
  font-size: 18px;
  line-height: 1.62;
}
.features-surface-stack {
  display: grid;
  border: 1px solid var(--features-line);
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
}
.features-surface-stack article {
  display: grid;
  grid-template-columns: 80px minmax(0, 0.52fr) minmax(0, 0.7fr);
  gap: 18px;
  align-items: center;
  min-block-size: 132px;
  padding: 20px;
}
.features-surface-stack article + article {
  border-block-start: 1px solid var(--features-line);
}
.features-surface-stack b {
  inline-size: 54px;
  block-size: 54px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #285DFF;
  color: #FFFFFF;
  font: 700 12px/1 var(--font-ui);
}
.features-surface-stack article:nth-child(2) b { background: #7C5CFF; }
.features-surface-stack article:nth-child(3) b { background: #101828; }
.features-surface-stack article:nth-child(4) b { background: #00A884; }
.features-surface-stack strong {
  font: 700 24px/1.12 var(--font-display);
}
.features-surface-stack p {
  color: #667085;
}

.features-brand-section {
  background: #F2F6FC;
}
.features-brand-grid,
.features-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.features-brand-grid p {
  max-inline-size: 650px;
  color: #344054;
  font-size: 18px;
  line-height: 1.62;
}
.features-brand-visual {
  min-block-size: 390px;
  display: grid;
  align-content: end;
  gap: 14px;
  border: 1px dashed #C9D3E1;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    #FFFFFF;
  background-size: 42px 42px;
  padding: 24px;
}
.features-brand-visual span {
  color: #285DFF;
}
.features-brand-visual strong {
  font: 700 clamp(28px, 3vw, 42px)/1.06 var(--font-display);
}

.features-final-cta {
  background: #101828;
  color: #F8FAFC;
}
.features-final-cta h2 {
  max-inline-size: 720px;
}
.features-final-cta p {
  max-inline-size: 620px;
  color: #B9C6D8;
  font-size: 18px;
  line-height: 1.62;
}
.features-form {
  background: #182230;
  border-color: rgba(248,250,252,0.16);
  border-radius: 16px;
}
.features-form .field {
  background: rgba(248,250,252,0.06);
  border-color: rgba(248,250,252,0.14);
  color: #D7DFEA;
}
.features-form .field:nth-child(3) {
  min-block-size: 126px;
  align-items: flex-start;
  padding-block: 14px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .features-task-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
  .features-module-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .features-module-list article:nth-child(4) {
    border-inline-start: 0;
  }
  .features-module-list article:nth-child(n + 4) {
    border-block-start: 1px solid var(--features-line);
  }
}

@media (max-width: 980px) {
  .features-hero-grid,
  .features-section-head,
  .features-modules-grid,
  .features-social-layout,
  .features-live-grid,
  .features-brand-grid,
  .features-final-grid {
    grid-template-columns: 1fr;
  }
  .features-section-head .eyebrow,
  .features-section-head h2,
  .features-section-head > p {
    grid-column: auto;
    grid-row: auto;
  }
  .features-hero-orbit {
    min-block-size: 560px;
  }
  .features-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features-index-grid a:nth-child(3) {
    border-inline-start: 0;
    border-block-start: 1px solid var(--features-line);
  }
  .features-index-grid a:nth-child(4) {
    border-block-start: 1px solid var(--features-line);
  }
  .features-module-stage,
  .features-social-proof {
    min-block-size: 440px;
  }
  .features-live-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  .features-page h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
  .features-page h2 {
    font-size: clamp(28px, 8vw, 36px);
  }
  .features-hero,
  .features-task-section,
  .features-modules-section,
  .features-social-section,
  .features-live-section,
  .features-brand-section,
  .features-final-cta {
    padding-block: 48px;
  }
  .features-hero-orbit {
    min-block-size: auto;
    display: grid;
    gap: 10px;
    padding: 14px;
  }
  .features-orbit-center,
  .features-orbit-card {
    position: static;
    inline-size: auto;
  }
  .features-orbit-center {
    min-block-size: 260px;
    padding: 18px;
  }
  .features-index-grid,
  .features-task-grid,
  .features-module-list {
    grid-template-columns: 1fr;
  }
  .features-index-grid a + a,
  .features-module-list article + article {
    border-inline-start: 0;
    border-block-start: 1px solid var(--features-line);
  }
  .features-task-grid {
    inline-size: auto;
    margin-inline: 0;
    padding-inline: 16px;
  }
  .features-task-grid article {
    min-block-size: auto;
  }
  .features-module-stage,
  .features-social-proof,
  .features-brand-visual {
    min-block-size: 320px;
  }
  .features-module-stage,
  .features-brand-visual {
    padding: 18px;
  }
  .features-social-screen,
  .features-social-phone,
  .features-social-host {
    position: static;
    inline-size: auto;
    margin: 0;
  }
  .features-social-proof {
    display: grid;
    gap: 10px;
    padding: 14px;
  }
  .features-social-screen {
    min-block-size: 220px;
    padding: 18px;
  }
  .features-surface-stack article {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }
  .features-surface-stack article p {
    grid-column: 2;
  }
  .features-surface-stack b {
    inline-size: 44px;
    block-size: 44px;
  }
}

/* Features page final override: the social proof cards intentionally break out of the base container. */
.features-page .features-social-cards {
  inline-size: 100vw;
  max-inline-size: none;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  box-sizing: border-box;
}
.features-page .features-social-cards {
  padding-inline: clamp(24px, 4.2vw, 80px);
}
.features-page .features-host-grid {
  inline-size: min(1200px, calc(100% - 48px));
  max-inline-size: 1200px;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 0;
}
.features-page .features-social-card h3 {
  max-inline-size: none;
  margin: 0;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.08;
}

@media (max-width: 980px) {
  .features-screen-head {
    grid-template-columns: 1fr;
  }
  .features-screen-head .eyebrow,
  .features-screen-head h2,
  .features-screen-head > p {
    grid-column: auto;
    grid-row: auto;
  }
  .features-screen-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .features-page .features-social-cards {
    inline-size: min(100% - 32px, 1200px);
    margin-inline: auto;
    padding-inline: 0;
  }
  .features-page .features-host-grid {
    inline-size: min(100% - 32px, 1200px);
  }
  .features-screen-section {
    padding-block: 48px;
  }
}

/* Formats page craft pass: catalog, carousel and mechanics layer. */
.formats-page {
  --formats-dark: #101828;
  --formats-dark-2: #182230;
  --formats-line: #D8E0EA;
  --formats-soft: #F3F7FC;
  --formats-blue: #285DFF;
  background: #FBFCFF;
  color: #111827;
}
.formats-page section {
  border-block-end: 1px solid var(--formats-line);
}
.formats-page h1,
.formats-page h2,
.formats-page h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.formats-page h1 {
  max-inline-size: 860px;
  font-size: clamp(42px, 5.1vw, 76px);
  line-height: 1.01;
}
.formats-page h2 {
  max-inline-size: 1020px;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.04;
}
.formats-page .lead {
  max-inline-size: 760px;
  color: #344054;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.56;
}
.formats-hero {
  padding-block: clamp(58px, 6.5vw, 96px);
  background:
    radial-gradient(circle at 74% 16%, rgba(40,93,255,0.12), transparent 30%),
    linear-gradient(180deg, #FBFCFF 0%, #F4F7FC 100%);
}
.formats-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(520px, 1.02fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.formats-hero-visual {
  position: relative;
  min-block-size: 620px;
  overflow: hidden;
  border: 1px solid var(--formats-line);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #FFFFFF, #EEF5FF);
  background-size: 44px 44px, 44px 44px, auto;
  box-shadow: 0 28px 80px rgba(16, 24, 40, 0.10);
  padding: 22px;
}
.formats-hero-screen {
  position: absolute;
  inset: 86px 96px 112px 54px;
  display: grid;
  align-content: end;
  gap: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 80% 18%, rgba(255,183,77,0.20), transparent 28%),
    linear-gradient(135deg, #101828, #172033);
  color: #F8FAFC;
  padding: clamp(24px, 3vw, 36px);
}
.formats-hero-screen span,
.formats-hero-card b,
.formats-card-media,
.formats-featured-visual span,
.formats-build-visual span,
.formats-mechanics-stage span {
  color: #8EA4FF;
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.formats-hero-screen strong {
  max-inline-size: 620px;
  font: 700 clamp(34px, 3.8vw, 54px)/1.02 var(--font-display);
}
.formats-hero-screen p {
  max-inline-size: 560px;
  color: #B9C6D8;
}
.formats-hero-card {
  position: absolute;
  display: grid;
  gap: 8px;
  inline-size: 220px;
  min-block-size: 118px;
  border: 1px solid rgba(16,24,40,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.94);
  padding: 18px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.09);
}
.formats-hero-card span {
  color: #344054;
}
.formats-hero-card.ready { inset-block-start: 36px; inset-inline-end: 44px; }
.formats-hero-card.live { inset-block-end: 42px; inset-inline-start: 42px; }
.formats-hero-card.custom { inset-block-end: 72px; inset-inline-end: 38px; }
.formats-hero-card.ready b { color: #285DFF; }
.formats-hero-card.live b { color: #00A884; }
.formats-hero-card.custom b { color: #7C5CFF; }

.formats-hero-visual-image {
  padding: 0;
  background: transparent;
}

.formats-hero-visual-image > img {
  border-radius: inherit;
}

.formats-path-section {
  background: #FFFFFF;
  padding-block: 18px;
}
.formats-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--formats-line);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
}
.formats-path-grid article {
  min-block-size: 132px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
}
.formats-path-grid article + article {
  border-inline-start: 1px solid var(--formats-line);
}
.formats-path-grid span {
  color: var(--formats-blue);
  font: 700 12px/1 var(--font-ui);
}
.formats-path-grid strong {
  font: 700 22px/1.12 var(--font-display);
}
.formats-path-grid p {
  max-inline-size: 360px;
  color: #667085;
  line-height: 1.5;
}

.formats-theme-section,
.formats-interactive-section,
.formats-fit-section,
.formats-build-section,
.formats-mechanics-section,
.formats-final-cta {
  padding-block: clamp(72px, 8vw, 118px);
}
.formats-theme-section {
  overflow: hidden;
  background: #FBFCFF;
}
.formats-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.52fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: start;
  margin-block-end: 34px;
}
.formats-section-head h2 {
  grid-column: 1;
}
.formats-section-head > p {
  grid-column: 2;
  grid-row: 1;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--formats-line);
  color: #344054;
  font-size: 18px;
  line-height: 1.6;
}
.formats-section-head.split .eyebrow,
.formats-section-head.split h2 {
  grid-column: auto;
}
.formats-section-head.split > p {
  grid-row: 2;
}
.formats-theme-board {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap: 16px;
  padding-inline: clamp(20px, 3.6vw, 64px);
  box-sizing: border-box;
}
.formats-theme-board article {
  min-block-size: 390px;
  display: grid;
  grid-template-rows: 150px auto 1fr;
  gap: 14px;
  border: 1px solid var(--formats-line);
  border-radius: 16px;
  background: #FFFFFF;
  padding: 14px;
}
.formats-card-media {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #C9D3E1;
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(40,93,255,0.08), transparent 56%),
    #F7F9FD;
  color: #667085;
}

.formats-card-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
}
.formats-theme-board h3 {
  margin: 0;
  font: 700 24px/1.12 var(--font-display);
}
.formats-theme-board p {
  color: #667085;
  font-size: 15px;
  line-height: 1.5;
}

.formats-interactive-section {
  overflow: hidden;
  background: #FFFFFF;
}
.formats-featured-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.18fr) minmax(320px, 0.82fr);
  gap: 18px;
  align-items: stretch;
  margin-block-end: 28px;
}
.formats-featured-visual {
  min-block-size: 430px;
  display: grid;
  align-content: end;
  gap: 14px;
  overflow: hidden;
  border-radius: 22px;
  padding: clamp(24px, 3vw, 38px);
  background:
    linear-gradient(90deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    radial-gradient(circle at 78% 18%, rgba(34,184,207,0.28), transparent 27%),
    linear-gradient(135deg, #101828, #182230);
  background-size: 44px 44px, 44px 44px, auto, auto;
  color: #F8FAFC;
}
.formats-featured-visual strong {
  max-inline-size: 760px;
  font: 700 clamp(34px, 4vw, 58px)/1.03 var(--font-display);
}
.formats-featured-visual p {
  max-inline-size: 620px;
  color: #B9C6D8;
  font-size: 18px;
}
.formats-preview-steps {
  display: grid;
  gap: 14px;
}
.formats-preview-steps article {
  display: grid;
  align-content: center;
  gap: 6px;
  min-block-size: 132px;
  border: 1px solid var(--formats-line);
  border-radius: 16px;
  background: #FFFFFF;
  padding: 22px;
}
.formats-preview-steps b {
  color: var(--formats-blue);
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.formats-preview-steps span {
  color: #344054;
  font: 700 22px/1.16 var(--font-display);
}
.formats-carousel-shell {
  margin-block-start: 18px;
}
.formats-carousel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-block-end: 14px;
}
.formats-carousel-top p {
  max-inline-size: 600px;
  color: #667085;
}
.formats-carousel-shell .carousel-controls {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.formats-carousel-shell .carousel-controls button {
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid var(--formats-line);
  border-radius: 999px;
  background: #FFFFFF;
  color: #111827;
  font: 700 24px/1 var(--font-display);
}
.formats-carousel {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  padding: 4px clamp(20px, 3.6vw, 64px) 18px;
  scrollbar-width: thin;
}
.formats-carousel .interactive-card {
  flex: 0 0 clamp(310px, 27vw, 430px);
  min-block-size: 310px;
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 18px;
  border: 1px solid var(--formats-line);
  border-radius: 16px;
  background: #FFFFFF;
  padding: 24px;
}
.formats-carousel .interactive-card:nth-child(3n + 1) {
  background: #F1F6FF;
}
.formats-carousel .interactive-card:nth-child(3n + 2) {
  background: #FFF7EA;
}
.formats-carousel .interactive-card:nth-child(3n) {
  background: #ECF8EF;
}
.formats-carousel .interactive-card h3 {
  margin: 0;
  font: 700 clamp(26px, 2.2vw, 34px)/1.08 var(--font-display);
}
.formats-carousel .interactive-card p {
  color: #667085;
  font-size: 17px;
  line-height: 1.52;
}

.formats-fit-section {
  background: #F3F7FC;
}
.formats-fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
.formats-fit-copy p:not(.eyebrow) {
  max-inline-size: 620px;
  color: #344054;
  font-size: 18px;
  line-height: 1.62;
}
.formats-fit-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.formats-fit-map article {
  min-block-size: 180px;
  display: grid;
  align-content: end;
  gap: 8px;
  border: 1px solid var(--formats-line);
  border-radius: 16px;
  background: #FFFFFF;
  padding: 20px;
}
.formats-fit-map article:first-child {
  grid-column: span 3;
  min-block-size: 260px;
  background: #101828;
  color: #F8FAFC;
}
.formats-fit-map article:nth-child(2),
.formats-fit-map article:nth-child(3) {
  grid-column: span 3;
}
.formats-fit-map article:nth-child(n + 4) {
  grid-column: span 2;
}
.formats-fit-map strong {
  font: 700 24px/1.1 var(--font-display);
}
.formats-fit-map span {
  color: #667085;
}
.formats-fit-map article:first-child span {
  color: #B9C6D8;
}

.formats-build-section {
  background: #FFFFFF;
}
.formats-build-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
.formats-build-visual {
  min-block-size: 560px;
  display: grid;
  align-content: end;
  gap: 14px;
  border: 1px dashed #C9D3E1;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    #FFFFFF;
  background-size: 42px 42px;
  padding: clamp(24px, 3vw, 38px);
}
.formats-build-visual span {
  color: var(--formats-blue);
}
.formats-build-visual strong {
  max-inline-size: 640px;
  font: 700 clamp(32px, 3.6vw, 54px)/1.04 var(--font-display);
}
.formats-build-copy p:not(.eyebrow) {
  max-inline-size: 640px;
  color: #344054;
  font-size: 18px;
  line-height: 1.62;
}
.formats-build-list {
  display: grid;
  gap: 12px;
  margin-block-start: 24px;
}
.formats-build-list article {
  display: grid;
  grid-template-columns: minmax(130px, 0.36fr) minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--formats-line);
  border-radius: 14px;
  background: #FFFFFF;
  padding: 18px;
}
.formats-build-list strong {
  font: 700 21px/1.12 var(--font-display);
}
.formats-build-list span {
  color: #667085;
  line-height: 1.45;
}

.formats-mechanics-section {
  background: #101828;
  color: #F8FAFC;
}
.formats-mechanics-section .formats-section-head > p {
  border-color: rgba(248,250,252,0.18);
  color: #B9C6D8;
}
.formats-mechanics-proof {
  display: grid;
  grid-template-columns: minmax(520px, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
  align-items: stretch;
}
.formats-mechanics-stage {
  min-block-size: 520px;
  display: grid;
  align-content: end;
  gap: 14px;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(248,250,252,0.08) 1px, transparent 1px),
    radial-gradient(circle at 78% 18%, rgba(255,90,61,0.24), transparent 28%),
    linear-gradient(135deg, #172033, #2C1C25);
  background-size: 44px 44px, 44px 44px, auto, auto;
  padding: clamp(24px, 3vw, 40px);
}
.formats-mechanics-stage strong {
  max-inline-size: 760px;
  font: 700 clamp(34px, 4vw, 58px)/1.03 var(--font-display);
}
.formats-mechanics-stage p {
  max-inline-size: 640px;
  color: #B9C6D8;
}
.formats-mechanics-list {
  display: grid;
  gap: 12px;
}
.formats-mechanics-list article {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(248,250,252,0.15);
  border-radius: 16px;
  background: rgba(248,250,252,0.06);
  padding: 20px;
}
.formats-mechanics-list strong {
  font: 700 23px/1.12 var(--font-display);
}
.formats-mechanics-list span {
  color: #B9C6D8;
  line-height: 1.45;
}
.formats-mechanics-section .cta-row {
  margin-block-start: 24px;
}
.formats-mechanics-section .btn {
  background: #FFFFFF;
  color: #101828;
}

.formats-final-cta {
  background: #101828;
  color: #F8FAFC;
}
.formats-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.formats-final-cta h2 {
  max-inline-size: 700px;
}
.formats-final-cta p {
  max-inline-size: 620px;
  color: #B9C6D8;
  font-size: 18px;
  line-height: 1.62;
}
.formats-form {
  background: #182230;
  border-color: rgba(248,250,252,0.16);
  border-radius: 16px;
}
.formats-form .field {
  background: rgba(248,250,252,0.06);
  border-color: rgba(248,250,252,0.14);
  color: #D7DFEA;
}
.formats-form .field:nth-child(3) {
  min-block-size: 126px;
  align-items: flex-start;
  padding-block: 14px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .formats-theme-board {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
  .formats-fit-grid,
  .formats-build-grid,
  .formats-mechanics-proof {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .formats-hero-grid,
  .formats-section-head,
  .formats-featured-grid,
  .formats-final-grid {
    grid-template-columns: 1fr;
  }
  .formats-section-head h2,
  .formats-section-head > p,
  .formats-section-head.split > p {
    grid-column: auto;
    grid-row: auto;
  }
  .formats-path-grid {
    grid-template-columns: 1fr;
  }
  .formats-path-grid article + article {
    border-inline-start: 0;
    border-block-start: 1px solid var(--formats-line);
  }
  .formats-hero-visual {
    min-block-size: 560px;
  }
  .formats-fit-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .formats-fit-map article,
  .formats-fit-map article:first-child,
  .formats-fit-map article:nth-child(2),
  .formats-fit-map article:nth-child(3),
  .formats-fit-map article:nth-child(n + 4) {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .formats-page h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
  .formats-page h2 {
    font-size: clamp(28px, 8vw, 36px);
  }
  .formats-hero,
  .formats-theme-section,
  .formats-interactive-section,
  .formats-fit-section,
  .formats-build-section,
  .formats-mechanics-section,
  .formats-final-cta {
    padding-block: 48px;
  }
  .formats-hero-visual {
    min-block-size: auto;
    display: grid;
    gap: 10px;
    padding: 14px;
  }
  .formats-hero-screen,
  .formats-hero-card {
    position: static;
    inline-size: auto;
  }
  .formats-hero-screen {
    min-block-size: 260px;
    padding: 18px;
  }
  .formats-theme-board {
    inline-size: auto;
    margin-inline: 0;
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }
  .formats-theme-board article {
    min-block-size: auto;
  }
  .formats-featured-visual,
  .formats-build-visual,
  .formats-mechanics-stage {
    min-block-size: 320px;
    padding: 18px;
  }
  .formats-carousel-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .formats-carousel {
    padding-inline: 16px;
  }
  .formats-carousel .interactive-card {
    flex-basis: min(82vw, 340px);
    min-block-size: 280px;
  }
  .formats-fit-map {
    grid-template-columns: 1fr;
  }
  .formats-build-list article {
    grid-template-columns: 1fr;
  }
}

.formats-interactive-section .formats-carousel-shell {
  margin-block-start: 0;
}
.formats-interactive-section .formats-carousel-top {
  margin-block-end: 18px;
}
.formats-carousel .interactive-card {
  flex-basis: clamp(360px, 31vw, 500px);
  min-block-size: 510px;
  align-content: stretch;
  grid-template-rows: 210px auto auto 1fr;
  gap: 16px;
  overflow: hidden;
  padding: 0;
  background: #FFFFFF;
}
.formats-carousel .interactive-card:nth-child(3n + 1),
.formats-carousel .interactive-card:nth-child(3n + 2),
.formats-carousel .interactive-card:nth-child(3n) {
  background: #FFFFFF;
}
.formats-interactive-media {
  display: grid;
  align-content: end;
  gap: 10px;
  min-block-size: 210px;
  padding: 20px;
  background:
    linear-gradient(90deg, rgba(16,24,40,0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16,24,40,0.06) 1px, transparent 1px),
    linear-gradient(135deg, #EEF5FF, #FFFFFF);
  background-size: 32px 32px, 32px 32px, auto;
  border-block-end: 1px solid var(--formats-line);
}
.formats-carousel .interactive-card:nth-child(3n + 2) .formats-interactive-media {
  background:
    linear-gradient(90deg, rgba(16,24,40,0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16,24,40,0.055) 1px, transparent 1px),
    linear-gradient(135deg, #FFF6E5, #FFFFFF);
  background-size: 32px 32px, 32px 32px, auto;
}
.formats-carousel .interactive-card:nth-child(3n) .formats-interactive-media {
  background:
    linear-gradient(90deg, rgba(16,24,40,0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16,24,40,0.055) 1px, transparent 1px),
    linear-gradient(135deg, #EAF8EF, #FFFFFF);
  background-size: 32px 32px, 32px 32px, auto;
}
.formats-interactive-media span {
  inline-size: fit-content;
  border: 1px dashed #B8C3D2;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  color: #667085;
  padding: 8px 12px;
  font: 700 12px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.formats-interactive-media b {
  max-inline-size: 330px;
  color: #111827;
  font: 700 23px/1.12 var(--font-display);
}
.formats-carousel .interactive-card h3,
.formats-carousel .interactive-card p,
.formats-format-tags {
  margin-inline: 24px;
}
.formats-carousel .interactive-card h3 {
  margin-block: 4px 0;
}
.formats-carousel .interactive-card p {
  margin-block: 0;
}
.formats-format-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: end;
  gap: 8px;
  margin-block-end: 24px;
}
.formats-format-tags span {
  border: 1px solid var(--formats-line);
  border-radius: 999px;
  background: #F8FAFC;
  color: #344054;
  padding: 8px 10px;
  font: 600 13px/1.1 var(--font-ui);
}

.formats-event-head {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(360px, 0.55fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-block-end: 28px;
}
.formats-event-head .eyebrow,
.formats-event-head h2 {
  grid-column: 1;
}
.formats-event-head p:not(.eyebrow) {
  grid-column: 2;
  grid-row: 2;
  max-inline-size: 620px;
  color: #344054;
  font-size: 18px;
  line-height: 1.62;
}
.formats-event-matrix {
  display: grid;
  gap: 12px;
}
.formats-event-matrix article {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(260px, 1.15fr) minmax(240px, 0.95fr) minmax(190px, 0.7fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--formats-line);
  border-radius: 16px;
  background: #FFFFFF;
  padding: 16px;
}
.formats-event-type,
.formats-event-media {
  display: grid;
  align-content: end;
  gap: 8px;
  min-block-size: 148px;
  border-radius: 12px;
  padding: 16px;
}
.formats-event-type {
  background: #101828;
  color: #F8FAFC;
}
.formats-event-type span {
  color: #8EA4FF;
  font: 700 12px/1 var(--font-ui);
}
.formats-event-type strong {
  font: 700 26px/1.08 var(--font-display);
}
.formats-event-matrix article > p {
  align-self: center;
  margin: 0;
  color: #344054;
  font-size: 17px;
  line-height: 1.55;
}
.formats-event-tags {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.formats-event-tags span {
  border: 1px solid var(--formats-line);
  border-radius: 999px;
  background: #F8FAFC;
  color: #344054;
  padding: 9px 11px;
  font: 600 13px/1.1 var(--font-ui);
}
.formats-event-media {
  place-items: center;
  align-content: center;
  border: 1px dashed #C9D3E1;
  background:
    linear-gradient(135deg, rgba(40,93,255,0.08), transparent 58%),
    #F7F9FD;
  color: #667085;
  text-align: center;
  font: 700 12px/1.35 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.formats-custom-section {
  background: #FFFFFF;
}
.formats-custom-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(520px, 1.04fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
.formats-custom-copy p:not(.eyebrow) {
  max-inline-size: 700px;
  color: #344054;
  font-size: 18px;
  line-height: 1.62;
}
.formats-custom-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-block-start: 26px;
}
.formats-custom-cards article {
  min-block-size: 180px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--formats-line);
  border-radius: 16px;
  background: #FBFCFF;
  padding: 20px;
}
.formats-custom-cards strong {
  font: 700 24px/1.08 var(--font-display);
}
.formats-custom-cards span {
  color: #667085;
  line-height: 1.5;
}
.formats-custom-visual {
  min-block-size: 560px;
  display: grid;
  align-content: end;
  gap: 18px;
  overflow: hidden;
  border: 1px solid var(--formats-line);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40,93,255,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #F5F9FF, #FFFFFF);
  background-size: 42px 42px, 42px 42px, auto;
  padding: clamp(24px, 3vw, 38px);
}

.formats-custom-visual.formats-custom-video {
  display: block !important;
  aspect-ratio: auto !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 22px 58px rgba(10, 11, 13, 0.12) !important;
}

.formats-builder-video {
  display: block !important;
  inline-size: 100% !important;
  block-size: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 22px;
}

.formats-custom-visual span {
  color: var(--formats-blue);
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.formats-custom-visual strong {
  max-inline-size: 640px;
  font: 700 clamp(32px, 3.6vw, 54px)/1.04 var(--font-display);
}
.formats-custom-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--formats-line);
  border-radius: 16px;
  background: rgba(255,255,255,0.88);
  padding: 14px;
}
.formats-custom-panel b {
  grid-column: 1 / -1;
  color: #111827;
  font: 700 15px/1.2 var(--font-ui);
}
.formats-custom-panel i {
  border-radius: 10px;
  background: #EEF5FF;
  color: #344054;
  padding: 12px 10px;
  font: 600 12px/1 var(--font-ui);
  text-align: center;
  font-style: normal;
}

@media (min-width: 981px) {
  .formats-hero-screen {
    inset: 82px 132px 122px 54px;
  }
  .formats-hero-screen strong {
    font-size: clamp(32px, 3.2vw, 46px);
  }
  .formats-hero-card.ready {
    inset-block-start: 14px;
    inset-inline-end: 32px;
  }
  .formats-hero-card.live {
    inset-block-end: 34px;
    inset-inline-start: 40px;
  }
  .formats-hero-card.custom {
    inset-block-end: 66px;
    inset-inline-end: 34px;
  }
}

@media (max-width: 1180px) {
  .formats-event-matrix article,
  .formats-custom-grid {
    grid-template-columns: 1fr;
  }
  .formats-event-type,
  .formats-event-media {
    min-block-size: auto;
  }
}

@media (max-width: 980px) {
  .formats-event-head {
    grid-template-columns: 1fr;
  }
  .formats-event-head .eyebrow,
  .formats-event-head h2,
  .formats-event-head p:not(.eyebrow) {
    grid-column: auto;
    grid-row: auto;
  }
  .formats-custom-cards {
    grid-template-columns: 1fr;
  }
  .formats-custom-visual {
    min-block-size: 430px;
  }
}

@media (max-width: 720px) {
  .formats-carousel .interactive-card {
    flex-basis: min(86vw, 350px);
    min-block-size: 500px;
  }
  .formats-interactive-media {
    min-block-size: 180px;
  }
  .formats-carousel .interactive-card h3,
  .formats-carousel .interactive-card p,
  .formats-format-tags {
    margin-inline: 18px;
  }
  .formats-event-matrix article,
  .formats-custom-cards article {
    padding: 14px;
  }
  .formats-custom-panel {
    grid-template-columns: 1fr;
  }
  .formats-custom-visual {
    min-block-size: 360px;
    padding: 18px;
  }
}

/* Formats feedback pass: image-led gallery, event cards and no eyebrow labels. */
.formats-section-head.single {
  display: block;
  margin-block-end: 34px;
}
.formats-section-head.single h2 {
  max-inline-size: 1160px;
}
.formats-gallery-head {
  margin-block-end: 28px;
}
.formats-gallery-shell {
  position: relative;
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
  box-sizing: border-box;
  --formats-gallery-gap: 18px;
  --formats-gallery-card-width: calc((100% - var(--formats-gallery-gap) - var(--formats-gallery-gap) - var(--formats-gallery-gap) - var(--formats-gallery-gap)) / 4.2);
  --formats-gallery-edge-peek: calc((100% - var(--formats-gallery-gap) - var(--formats-gallery-gap) - var(--formats-gallery-gap) - var(--formats-gallery-gap)) / 7 + var(--formats-gallery-gap));
}
.formats-gallery-track {
  display: flex;
  gap: var(--formats-gallery-gap);
  margin-inline: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--formats-gallery-edge-peek);
  padding: 4px 0 20px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--formats-gallery-edge-peek), #000 calc(100% - var(--formats-gallery-edge-peek)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--formats-gallery-edge-peek), #000 calc(100% - var(--formats-gallery-edge-peek)), transparent 100%);
}
.formats-gallery-track::-webkit-scrollbar {
  display: none;
}
.formats-gallery-track.is-programmatic-scroll {
  scroll-snap-type: none;
}
.formats-gallery-card {
  flex: 0 0 var(--formats-gallery-card-width);
  min-block-size: 468px;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--formats-line);
  border-radius: 18px;
  background: #FFFFFF;
}
.formats-gallery-card[aria-hidden="true"] {
  pointer-events: none;
}
.formats-gallery-image {
  position: relative;
  min-block-size: 468px;
  margin: 0;
  overflow: hidden;
  background: #F5F7FB;
}
.formats-gallery-image img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 468px;
  object-fit: cover;
  display: block;
}
.formats-gallery-image.placeholder {
  display: grid;
  align-items: end;
  background:
    linear-gradient(90deg, rgba(16,24,40,0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16,24,40,0.06) 1px, transparent 1px),
    linear-gradient(135deg, #F2F6FF, #FFFFFF);
  background-size: 36px 36px, 36px 36px, auto;
}
.formats-gallery-image.placeholder > div {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed #BAC6D6;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #667085;
  padding: 9px 13px;
  font: 700 12px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.formats-gallery-image figcaption,
.formats-gallery-meta {
  display: none;
}
.formats-gallery-image figcaption {
  position: absolute;
  inset-inline: 22px;
  inset-block-end: 22px;
  display: grid;
  gap: 10px;
  border-radius: 18px;
  background: rgba(16,24,40,0.72);
  color: #F8FAFC;
  padding: clamp(18px, 2vw, 28px);
}
.formats-gallery-image figcaption strong {
  font: 700 clamp(34px, 4vw, 58px)/0.98 var(--font-display);
}
.formats-gallery-image figcaption span {
  max-inline-size: 600px;
  color: #F8FAFC;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.35;
}
.formats-gallery-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 18px;
}
.formats-gallery-meta span {
  border: 1px solid var(--formats-line);
  border-radius: 999px;
  background: #F8FAFC;
  color: #344054;
  padding: 8px 11px;
  font: 600 13px/1.1 var(--font-ui);
}
.formats-gallery-nav {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--formats-line);
  border-radius: 999px;
  background: #FFFFFF;
  color: #101828;
  box-shadow: 0 14px 34px rgba(16,24,40,0.12);
  font: 700 28px/1 var(--font-display);
}
.formats-gallery-nav.prev {
  inset-inline-start: clamp(14px, 2vw, 28px);
}
.formats-gallery-nav.next {
  inset-inline-end: clamp(14px, 2vw, 28px);
}
.formats-gallery-image figcaption,
.formats-gallery-meta {
  display: none;
}
.formats-gallery-card {
  min-block-size: auto;
}
.formats-gallery-image {
  aspect-ratio: 1000 / 714;
  min-block-size: 0;
}
.formats-gallery-image img {
  block-size: 100%;
  min-block-size: 0;
  object-fit: cover;
}
.formats-mechanics-head {
  margin-block-end: 30px;
}
.formats-mechanics-head h2 {
  max-inline-size: 720px;
  color: #F8FAFC;
  font-size: clamp(24px, 2.35vw, 34px);
  line-height: 1.16;
}
.formats-event-head {
  display: block;
  margin-block-end: 28px;
}
.formats-event-head h2 {
  max-inline-size: 1120px;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.12;
}
.formats-event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.formats-event-grid article {
  min-block-size: 260px;
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid var(--formats-line);
  border-radius: 16px;
  background: #FFFFFF;
  padding: clamp(20px, 2vw, 28px);
}
.formats-event-grid article:nth-child(1),
.formats-event-grid article:nth-child(6) {
  background: #101828;
  color: #F8FAFC;
}
.formats-event-grid article:nth-child(2) {
  background: #F1F6FF;
}
.formats-event-grid article:nth-child(3) {
  background: #FFF7EA;
}
.formats-event-grid article:nth-child(4) {
  background: #ECF8EF;
}
.formats-event-grid article:nth-child(5) {
  background: #F2F4F3;
}
.formats-event-grid h3 {
  margin: 0;
  font: 700 clamp(25px, 2.3vw, 34px)/1.05 var(--font-display);
}
.formats-event-grid p {
  margin: 0;
  color: #667085;
  font-size: 18px;
  line-height: 1.52;
}
.formats-event-grid article:nth-child(1) p,
.formats-event-grid article:nth-child(6) p {
  color: #D7DFEA;
}
.formats-custom-copy h2 {
  max-inline-size: 760px;
}
.formats-final-cta .formats-final-grid {
  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 1fr);
}
.formats-final-cta .formats-final-grid > div {
  align-self: center;
}
.formats-final-cta .formats-final-grid > div p {
  max-inline-size: 720px;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.35;
  font-family: var(--font-display);
  font-weight: 600;
  color: #F8FAFC;
}

@media (max-width: 1180px) {
  .formats-gallery-shell {
    --formats-gallery-card-width: calc((100% - var(--formats-gallery-edge-peek) - var(--formats-gallery-edge-peek) - var(--formats-gallery-gap)) / 2);
  }
  .formats-gallery-card {
    flex-basis: var(--formats-gallery-card-width);
  }
  .formats-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .formats-gallery-shell {
    --formats-gallery-edge-peek: 48px;
  }
  .formats-gallery-card {
    flex-basis: min(74vw, 540px);
  }
  .formats-final-cta .formats-final-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .formats-gallery-shell {
    inline-size: 100%;
    margin-inline: 0;
    --formats-gallery-edge-peek: 26px;
    --formats-gallery-gap: 12px;
    --formats-gallery-card-width: calc(100% - var(--formats-gallery-edge-peek) - var(--formats-gallery-edge-peek));
  }
  .formats-gallery-card {
    flex-basis: var(--formats-gallery-card-width);
    min-block-size: auto;
  }
  .formats-gallery-image,
  .formats-gallery-image img {
    min-block-size: 0;
  }
  .formats-gallery-image figcaption {
    inset-inline: 12px;
    inset-block-end: 12px;
    padding: 14px;
  }
  .formats-gallery-image figcaption strong {
    font-size: clamp(26px, 8vw, 34px);
  }
  .formats-gallery-image figcaption span {
    font-size: 14px;
  }
  .formats-gallery-nav {
    inline-size: 40px;
    block-size: 40px;
  }
  .formats-gallery-nav.prev {
    inset-inline-start: 8px;
  }
  .formats-gallery-nav.next {
    inset-inline-end: 8px;
  }
  .formats-event-grid {
    grid-template-columns: 1fr;
  }
  .formats-event-grid article {
    min-block-size: auto;
  }
  .formats-final-cta .formats-final-grid > div p {
    font-size: clamp(22px, 6vw, 30px);
  }
}

/* Formats contextual heading system. */
.formats-page {
  --formats-title-size: clamp(38px, 3.4vw, 52px);
  --formats-statement-size: clamp(34px, 3vw, 46px);
  --formats-info-size: clamp(28px, 2.35vw, 36px);
  --formats-heading-line: 1.08;
}
.formats-gallery-head h2 {
  max-inline-size: 720px;
  font-size: var(--formats-title-size);
  line-height: var(--formats-heading-line);
}
.formats-section-head.single h2 {
  max-inline-size: 980px;
  font-size: var(--formats-statement-size);
  line-height: 1.1;
}
.formats-custom-copy h2 {
  max-inline-size: 760px;
  font-size: var(--formats-info-size);
  line-height: 1.15;
}
.formats-event-head h2 {
  max-inline-size: 860px;
  font-size: var(--formats-info-size);
  line-height: 1.16;
}
.formats-mechanics-head h2 {
  max-inline-size: 700px;
  color: #F8FAFC;
  font-size: clamp(26px, 2.15vw, 32px);
  line-height: 1.16;
}

@media (max-width: 720px) {
  .formats-page {
    --formats-title-size: clamp(31px, 8.5vw, 38px);
    --formats-statement-size: clamp(24px, 6.7vw, 28px);
    --formats-info-size: clamp(23px, 6.2vw, 28px);
  }
  .formats-gallery-head h2,
  .formats-section-head.single h2,
  .formats-custom-copy h2,
  .formats-event-head h2,
  .formats-mechanics-head h2 {
    max-inline-size: 100%;
    font-size: var(--formats-info-size);
  }
}

/* Agencies page craft pass: agency workflow, proof and constructor system. */
.agencies-page {
  --agencies-dark: #101828;
  --agencies-line: #D8E0EA;
  --agencies-soft: #F4F7FC;
  --agencies-blue: #2F6BFF;
  background: #FBFCFF;
  color: #111827;
}
.agencies-page .eyebrow {
  display: none;
}
.agencies-page h1,
.agencies-page h2,
.agencies-page h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.agencies-page h1 {
  max-inline-size: 860px;
  font-size: clamp(46px, 5vw, 76px);
  line-height: 1.02;
}
.agencies-page h2 {
  max-inline-size: 860px;
  font-size: clamp(30px, 2.75vw, 42px);
  line-height: 1.1;
}
.agencies-page h3 {
  font-size: clamp(22px, 1.7vw, 28px);
  line-height: 1.12;
}
.agencies-page .lead,
.agencies-page .section-head > p,
.agencies-page .grid > div > p,
.agencies-page .proof-panel p {
  max-inline-size: 720px;
  color: #344054;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.58;
}
.agencies-page .hero {
  padding-block: clamp(70px, 7vw, 112px);
  background:
    radial-gradient(circle at 76% 14%, rgba(47,107,255,0.12), transparent 30%),
    linear-gradient(180deg, #FBFCFF 0%, #F4F7FC 100%);
  border-block-end: 1px solid var(--agencies-line);
}
.agencies-page .section {
  padding-block: clamp(72px, 7.2vw, 112px);
  border-block-end: 1px solid var(--agencies-line);
}
.agencies-page .compact {
  padding-block: clamp(62px, 6vw, 92px);
}
.agencies-page .module-band {
  background: #F4F7FC;
}
.agencies-page .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(500px, 1.05fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.agencies-page .section-head {
  display: block;
  max-inline-size: 900px;
  margin-block-end: clamp(28px, 3.4vw, 44px);
}
.agencies-page .section-head > div {
  display: block;
}
.agencies-page .section-head > p {
  margin-block-start: 16px;
}
.agencies-page .media-composition,
.agencies-page .media-stage,
.agencies-page .asset-slot,
.agencies-page .media-wall .large,
.agencies-page .media-wall .small,
.agencies-page .live-screen-slot,
.agencies-page .dark-showcase {
  border: 1px solid var(--agencies-line);
  border-radius: 22px;
}
.agencies-page .media-composition {
  position: relative;
  min-block-size: 620px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(47,107,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(47,107,255,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #FFFFFF, #EEF5FF);
  background-size: 44px 44px, 44px 44px, auto;
  box-shadow: 0 28px 80px rgba(16,24,40,0.10);
  padding: 22px;
}
.agencies-page .media-tag,
.agencies-page .asset-label {
  color: var(--agencies-blue);
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agencies-page .hero-product .media-stage {
  position: absolute;
  inset: 92px 86px 116px 54px;
  display: grid;
  align-content: end;
  gap: 14px;
  border: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,183,77,0.20), transparent 27%),
    linear-gradient(135deg, #101828, #182230);
  color: #F8FAFC;
  padding: clamp(24px, 3vw, 38px);
}
.agencies-page .hero-product .media-stage strong {
  max-inline-size: 620px;
  font: 700 clamp(32px, 3.4vw, 50px)/1.02 var(--font-display);
}
.agencies-page .hero-product .media-stage p {
  max-inline-size: 540px;
  color: #B9C6D8;
}
.agencies-page .media-panel,
.agencies-page .media-phone,
.agencies-page .media-motion {
  position: absolute;
  display: grid;
  gap: 8px;
  inline-size: 210px;
  min-block-size: 112px;
  border: 1px solid rgba(16,24,40,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.94);
  color: #111827;
  padding: 18px;
  box-shadow: 0 18px 44px rgba(16,24,40,0.09);
}
.agencies-page .media-panel { inset-block-start: 34px; inset-inline-end: 34px; }
.agencies-page .media-phone { inset-block-end: 44px; inset-inline-start: 40px; }
.agencies-page .media-motion { inset-block-end: 72px; inset-inline-end: 36px; }
.agencies-page .media-panel span,
.agencies-page .media-phone span,
.agencies-page .media-motion span {
  color: #667085;
}
.agencies-page .page-system,
.agencies-page .split-proof,
.agencies-page .live-proof {
  display: grid;
  grid-template-columns: minmax(500px, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  margin-block-end: 28px;
}
.agencies-page .page-system.reverse,
.agencies-page .split-proof.reverse {
  grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);
}
.agencies-page .asset-slot.hero,
.agencies-page .media-stage,
.agencies-page .live-screen-slot {
  min-block-size: 450px;
  display: grid;
  align-content: end;
  gap: 14px;
  background:
    linear-gradient(90deg, rgba(47,107,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(47,107,255,0.08) 1px, transparent 1px),
    #FFFFFF;
  background-size: 42px 42px;
  padding: clamp(24px, 3vw, 38px);
}
.agencies-page .asset-slot.hero strong,
.agencies-page .media-stage strong,
.agencies-page .live-screen-slot strong {
  max-inline-size: 680px;
  font: 700 clamp(30px, 3vw, 46px)/1.05 var(--font-display);
}
.agencies-page .structure-map,
.agencies-page .proof-panel,
.agencies-page .live-proof-steps {
  border: 1px solid var(--agencies-line);
  border-radius: 18px;
  background: #FFFFFF;
  padding: clamp(20px, 2.4vw, 30px);
}
.agencies-page .structure-map {
  display: grid;
  align-content: center;
  gap: 14px;
}
.agencies-page .structure-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-top: 1px solid var(--agencies-line);
  padding-block-start: 14px;
}
.agencies-page .structure-step b,
.agencies-page .proof-step b {
  color: var(--agencies-blue);
  font: 700 12px/1 var(--font-ui);
}
.agencies-page .grid.cols-4,
.agencies-page .grid.cols-3,
.agencies-page .grid.cols-2 {
  gap: 14px;
}
.agencies-page .card {
  border-color: var(--agencies-line);
  border-radius: 16px;
  background: #FFFFFF;
  padding: clamp(20px, 2vw, 26px);
}
.agencies-page .card h3,
.agencies-page .card h2 {
  margin-block-start: 0;
}
.agencies-page .card p,
.agencies-page .card li {
  color: #667085;
  line-height: 1.52;
}
.agencies-page .mechanic-mosaic .card {
  min-block-size: 230px;
}
.agencies-page .soft-a { background: #EEF5FF; }
.agencies-page .soft-b { background: #FFF7EA; }
.agencies-page .soft-c { background: #ECF8EF; }
.agencies-page .soft-d { background: #F2F4F3; }
.agencies-page .media-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.agencies-page .media-wall .large {
  grid-column: 1 / -1;
  min-block-size: 320px;
}
.agencies-page .media-wall .small {
  min-block-size: 150px;
}
.agencies-page .media-wall .large,
.agencies-page .media-wall .small {
  display: grid;
  align-content: end;
  gap: 8px;
  background:
    linear-gradient(90deg, rgba(16,24,40,0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16,24,40,0.06) 1px, transparent 1px),
    #FFFFFF;
  background-size: 34px 34px;
  padding: 20px;
}
.agencies-page .proof-panel {
  display: grid;
  align-content: center;
  gap: 14px;
}
.agencies-page .live-proof {
  grid-template-columns: minmax(520px, 1.1fr) minmax(0, 0.9fr);
}
.agencies-page .live-proof-stage {
  min-block-size: 520px;
}
.agencies-page .live-screen-slot {
  min-block-size: 100%;
}
.agencies-page .live-proof-steps {
  display: grid;
  gap: 12px;
}
.agencies-page .proof-step {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--agencies-line);
  padding-block-end: 14px;
}
.agencies-page .proof-step:last-child {
  border-bottom: 0;
  padding-block-end: 0;
}
.agencies-page .mechanics-board {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(340px, 1fr) minmax(240px, 0.82fr);
  gap: 16px;
  align-items: center;
}
.agencies-page .mechanic-column {
  display: grid;
  gap: 16px;
}
.agencies-page .mechanic-tile {
  min-block-size: 205px;
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid var(--agencies-line);
  border-radius: 16px;
  background: #FFFFFF;
  padding: 22px;
}
.agencies-page .mechanic-tile strong {
  font: 700 20px/1.15 var(--font-display);
}
.agencies-page .mechanic-tile p {
  color: #667085;
  line-height: 1.5;
}
.agencies-page .mechanics-board .center {
  min-block-size: 430px;
  display: grid;
  place-items: center;
  border: 1px solid var(--agencies-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(47,107,255,0.12), transparent 38%),
    linear-gradient(90deg, rgba(47,107,255,0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(47,107,255,0.07) 1px, transparent 1px),
    #FFFFFF;
  background-size: auto, 42px 42px, 42px 42px, auto;
  padding: 34px;
  text-align: center;
}
.agencies-page .mechanics-board .center h3 {
  max-inline-size: 360px;
  margin-inline: auto;
}
.agencies-page .mechanics-board .center p {
  max-inline-size: 420px;
  margin-inline: auto;
  color: #667085;
}
.agencies-page .dark-showcase {
  position: relative;
  min-block-size: 430px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, rgba(47,107,255,0.22), transparent 30%),
    linear-gradient(135deg, #101828, #172033);
  color: #F8FAFC;
  padding: clamp(24px, 3vw, 38px);
  margin-block-end: 18px;
}
.agencies-page .dark-showcase .media-motion,
.agencies-page .dark-showcase .asset-stack {
  position: static;
  box-shadow: none;
}
.agencies-page .asset-stack {
  display: flex;
  gap: 12px;
  margin-block-start: 160px;
}
.agencies-page .asset-note {
  border: 1px solid rgba(248,250,252,0.14);
  border-radius: 14px;
  background: rgba(248,250,252,0.08);
  padding: 16px;
}
.agencies-page .route-split .link-card {
  display: grid;
  gap: 18px;
  min-block-size: 240px;
  text-decoration: none;
}
.agencies-page .faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.agencies-page .demo-form .field:nth-child(3) {
  min-block-size: 128px;
  align-items: flex-start;
  padding-block: 14px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .agencies-page .hero-grid,
  .agencies-page .page-system,
  .agencies-page .page-system.reverse,
  .agencies-page .split-proof,
  .agencies-page .split-proof.reverse,
  .agencies-page .live-proof,
  .agencies-page .mechanics-board {
    grid-template-columns: 1fr;
  }
  .agencies-page .mechanics-board .center {
    order: -1;
  }
}

@media (max-width: 980px) {
  .agencies-page .grid.cols-4,
  .agencies-page .grid.cols-3,
  .agencies-page .grid.cols-2,
  .agencies-page .faq-grid {
    grid-template-columns: 1fr;
  }
  .agencies-page .media-composition {
    min-block-size: 560px;
  }
}

@media (max-width: 720px) {
  .agencies-page h1 {
    font-size: clamp(36px, 10vw, 46px);
  }
  .agencies-page h2 {
    font-size: clamp(27px, 7.4vw, 34px);
  }
  .agencies-page .hero,
  .agencies-page .section,
  .agencies-page .compact {
    padding-block: 48px;
  }
  .agencies-page .media-composition {
    min-block-size: auto;
    display: grid;
    gap: 10px;
    padding: 14px;
  }
  .agencies-page .hero-product .media-stage,
  .agencies-page .media-panel,
  .agencies-page .media-phone,
  .agencies-page .media-motion {
    position: static;
    inline-size: auto;
  }
  .agencies-page .hero-product .media-stage {
    min-block-size: 270px;
    padding: 18px;
  }
  .agencies-page .asset-slot.hero,
  .agencies-page .media-stage,
  .agencies-page .live-screen-slot,
  .agencies-page .live-proof-stage,
  .agencies-page .mechanics-board .center {
    min-block-size: 320px;
  }
  .agencies-page .media-wall {
    grid-template-columns: 1fr;
  }
  .agencies-page .media-wall .large {
    min-block-size: 260px;
  }
  .agencies-page .mechanic-tile {
    min-block-size: auto;
  }
  .agencies-page .asset-stack {
    display: grid;
    margin-block-start: 60px;
  }
}

/* Agencies page rebuild: agency-specific mockup system. */
.agencies-v2 {
  --agency-ink: #101828;
  --agency-body: #344054;
  --agency-muted: #667085;
  --agency-line: #D8E0EA;
  --agency-soft: #F3F6FB;
  --agency-surface: #FEFFFF;
  --agency-blue: #285DFF;
  --agency-blue-soft: #EEF4FF;
  --agency-dark: #101828;
  --agency-h2: clamp(34px, 3.2vw, 48px);
  background: #FBFCFF;
}
.agencies-v2 .agency-hero,
.agencies-v2 .agency-section {
  border-block-end: 1px solid var(--agency-line);
}
.agencies-v2 .agency-hero {
  padding-block: clamp(82px, 8vw, 126px) clamp(76px, 7vw, 112px);
  background:
    radial-gradient(circle at 78% 20%, rgba(40,93,255,0.13), transparent 28%),
    linear-gradient(180deg, #FBFCFF 0%, #F3F6FB 100%);
}
.agencies-v2 .agency-section {
  padding-block: clamp(76px, 7.2vw, 112px);
}
.agencies-v2 .agency-light {
  background: var(--agency-soft);
}
.agencies-v2 .agency-hero-grid,
.agencies-v2 .agency-output-grid,
.agencies-v2 .agency-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1fr);
  gap: clamp(40px, 6vw, 86px);
  align-items: center;
}
.agencies-v2 .agency-hero-copy {
  max-inline-size: 760px;
}
.agencies-v2 h1,
.agencies-v2 h2,
.agencies-v2 h3 {
  color: var(--agency-ink);
  letter-spacing: 0;
}
.agencies-v2 h1 {
  max-inline-size: 780px;
  font-size: clamp(52px, 5.35vw, 78px);
  line-height: 1.02;
}
.agencies-v2 h2 {
  max-inline-size: 920px;
  font-size: var(--agency-h2);
  line-height: 1.08;
}
.agencies-v2 h3 {
  font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1.16;
}
.agencies-v2 .agency-lead,
.agencies-v2 .agency-section-head > p,
.agencies-v2 .agency-brand-column > p {
  max-inline-size: 720px;
  color: var(--agency-body);
  font-size: clamp(17px, 1.22vw, 20px);
  line-height: 1.58;
}
.agencies-v2 .agency-section-head {
  display: block;
  max-inline-size: 960px;
  margin-block-end: clamp(30px, 4vw, 52px);
}
.agencies-v2 .agency-section-head > p {
  margin-block-start: 16px;
}
.agencies-v2 .agency-hero-stage,
.agencies-v2 .agency-project-visual,
.agencies-v2 .agency-center-visual,
.agencies-v2 .agency-media-stack > div,
.agencies-v2 .agency-brand-visual,
.agencies-v2 .agency-workflow-visual {
  border: 1px solid var(--agency-line);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(40,93,255,0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40,93,255,0.07) 1px, transparent 1px),
    var(--agency-surface);
  background-size: 40px 40px;
}
.agencies-v2 .agency-hero-stage {
  position: relative;
  min-block-size: 610px;
  overflow: hidden;
  padding: 28px;
  box-shadow: 0 28px 78px rgba(16,24,40,0.11);
}
.agencies-v2 .agency-stage-screen {
  position: absolute;
  inset: 110px 72px 110px 58px;
  display: grid;
  align-content: end;
  gap: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 12%, rgba(245,184,75,0.22), transparent 25%),
    linear-gradient(135deg, #101828, #182230);
  color: #F8FAFC;
  padding: clamp(24px, 3vw, 38px);
}
.agencies-v2 .agency-stage-screen span,
.agencies-v2 .agency-stage-screen p {
  color: #C7D2E4;
}
.agencies-v2 .agency-stage-screen strong {
  max-inline-size: 430px;
  color: #F8FAFC;
  font: 700 clamp(32px, 2.9vw, 44px)/1.02 var(--font-display);
}
.agencies-v2 .agency-screen-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-block-start: 8px;
}
.agencies-v2 .agency-screen-row i {
  block-size: 34px;
  border-radius: 999px;
  background: rgba(248,250,252,0.16);
}
.agencies-v2 .agency-stage-panel {
  position: absolute;
  display: grid;
  gap: 8px;
  inline-size: 224px;
  border: 1px solid rgba(16,24,40,0.11);
  border-radius: 15px;
  background: rgba(254,255,255,0.96);
  padding: 17px;
  box-shadow: 0 18px 44px rgba(16,24,40,0.10);
}
.agencies-v2 .agency-stage-panel span {
  color: var(--agency-muted);
}
.agencies-v2 .panel-top { inset-block-start: 34px; inset-inline-end: 34px; }
.agencies-v2 .panel-right { inset-block-end: 70px; inset-inline-end: 34px; }
.agencies-v2 .panel-bottom { inset-block-end: 38px; inset-inline-start: 38px; }
.agencies-v2 .agency-project-board {
  display: grid;
  grid-template-columns: minmax(520px, 1.1fr) minmax(360px, 0.82fr);
  gap: 22px;
  align-items: stretch;
}
.agencies-v2 .agency-project-visual,
.agencies-v2 .agency-workflow-visual {
  min-block-size: 430px;
  display: grid;
  align-content: end;
  gap: 14px;
  padding: clamp(26px, 3vw, 42px);
}
.agencies-v2 .agency-project-visual strong,
.agencies-v2 .agency-workflow-visual strong {
  max-inline-size: 700px;
  font: 700 clamp(34px, 3.1vw, 48px)/1.05 var(--font-display);
  color: var(--agency-ink);
}
.agencies-v2 .agency-visual-note {
  width: fit-content;
  border: 1px solid var(--agency-line);
  border-radius: 999px;
  background: rgba(254,255,255,0.82);
  color: var(--agency-blue);
  padding: 8px 12px;
  font: 700 12px/1.1 var(--font-ui);
}
.agencies-v2 .agency-project-steps,
.agencies-v2 .agency-proof-callout,
.agencies-v2 .agency-two-lanes > article,
.agencies-v2 .agency-faq-grid details,
.agencies-v2 .agency-route-card {
  border: 1px solid var(--agency-line);
  border-radius: 16px;
  background: var(--agency-surface);
}
.agencies-v2 .agency-project-steps {
  display: grid;
  gap: 12px;
  align-content: center;
  padding: clamp(22px, 2.4vw, 32px);
}
.agencies-v2 .agency-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-block-start: 1px solid var(--agency-line);
  padding-block-start: 12px;
}
.agencies-v2 .agency-step > div {
  display: grid;
  gap: 4px;
}
.agencies-v2 .agency-step b,
.agencies-v2 .agency-workflow-steps b,
.agencies-v2 .agency-event-list span {
  color: var(--agency-blue);
  font: 700 12px/1 var(--font-ui);
}
.agencies-v2 .agency-step span,
.agencies-v2 article p,
.agencies-v2 details p {
  color: var(--agency-muted);
  line-height: 1.52;
}
.agencies-v2 .agency-benefit-strip {
  display: grid;
  grid-template-columns: 1.1fr 0.92fr 0.92fr 1.1fr;
  gap: 0;
  margin-block-start: 22px;
  border: 1px solid var(--agency-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--agency-surface);
}
.agencies-v2 .agency-benefit-strip article {
  min-block-size: 238px;
  padding: clamp(22px, 2.4vw, 32px);
  border-inline-end: 1px solid var(--agency-line);
}
.agencies-v2 .agency-benefit-strip article:last-child {
  border-inline-end: 0;
}
.agencies-v2 .agency-benefit-strip article:nth-child(1) { background: #EEF5FF; }
.agencies-v2 .agency-benefit-strip article:nth-child(2) { background: #FFF8EA; }
.agencies-v2 .agency-benefit-strip article:nth-child(3) { background: #ECF8EF; }
.agencies-v2 .agency-benefit-strip article:nth-child(4) { background: #F2F4F3; }
.agencies-v2 .agency-constructor-map {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(420px, 1.18fr) minmax(230px, 0.78fr);
  gap: 18px;
  align-items: center;
}
.agencies-v2 .agency-side-list {
  display: grid;
  gap: 18px;
}
.agencies-v2 .agency-side-list article {
  min-block-size: 210px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--agency-line);
  border-radius: 16px;
  background: var(--agency-surface);
  padding: clamp(20px, 2.1vw, 28px);
}
.agencies-v2 .agency-center-visual {
  min-block-size: 486px;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: clamp(28px, 4vw, 54px);
  background:
    radial-gradient(circle at 50% 48%, rgba(40,93,255,0.14), transparent 40%),
    linear-gradient(90deg, rgba(40,93,255,0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40,93,255,0.07) 1px, transparent 1px),
    var(--agency-surface);
  background-size: auto, 42px 42px, 42px 42px, auto;
}
.agencies-v2 .agency-center-visual strong {
  max-inline-size: 430px;
  font: 700 clamp(28px, 2.7vw, 42px)/1.08 var(--font-display);
}
.agencies-v2 .agency-center-visual p {
  max-inline-size: 440px;
  color: var(--agency-muted);
}
.agencies-v2 .agency-surface-orbit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-inline-size: 360px;
}
.agencies-v2 .agency-surface-orbit span {
  border: 1px solid var(--agency-line);
  border-radius: 999px;
  background: #FEFFFF;
  padding: 9px 12px;
  color: var(--agency-body);
  font-weight: 700;
}
.agencies-v2 .agency-output-grid {
  align-items: start;
}
.agencies-v2 .agency-media-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.agencies-v2 .agency-media-stack > div {
  min-block-size: 148px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 18px;
}
.agencies-v2 .agency-media-stack .agency-media-main {
  grid-column: 1 / -1;
  min-block-size: 340px;
}
.agencies-v2 .agency-brand-column {
  display: grid;
  gap: 18px;
}
.agencies-v2 .agency-brand-column > h2 {
  font-size: var(--agency-h2);
}
.agencies-v2 .agency-brand-visual {
  min-block-size: 360px;
  display: grid;
  align-content: end;
  gap: 12px;
  padding: clamp(24px, 2.6vw, 34px);
}
.agencies-v2 .agency-proof-callout {
  padding: clamp(22px, 2.4vw, 30px);
}
.agencies-v2 .agency-workflow {
  display: grid;
  grid-template-columns: minmax(520px, 1.08fr) minmax(0, 0.92fr);
  gap: 22px;
}
.agencies-v2 .agency-workflow-visual {
  min-block-size: 570px;
}
.agencies-v2 .agency-workflow-steps {
  display: grid;
  gap: 12px;
}
.agencies-v2 .agency-workflow-steps article {
  border: 1px solid var(--agency-line);
  border-radius: 16px;
  background: var(--agency-surface);
  padding: clamp(20px, 2vw, 26px);
}
.agencies-v2 .agency-two-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.agencies-v2 .agency-two-lanes > article {
  padding: clamp(24px, 2.8vw, 36px);
}
.agencies-v2 .agency-two-lanes ul {
  margin-block-end: 0;
  padding-inline-start: 20px;
  color: var(--agency-muted);
}
.agencies-v2 .agency-event-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--agency-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--agency-line);
}
.agencies-v2 .agency-event-list article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 8px;
  background: var(--agency-surface);
  padding: clamp(22px, 2.5vw, 34px);
}
.agencies-v2 .agency-event-list span {
  grid-row: span 2;
  padding-block-start: 6px;
}
.agencies-v2 .agency-event-list h3,
.agencies-v2 .agency-event-list p {
  margin: 0;
}
.agencies-v2 .agency-library-section {
  background: #101828;
}
.agencies-v2 .agency-library-section h2,
.agencies-v2 .agency-library-section h3,
.agencies-v2 .agency-library-section .agency-section-head > p {
  color: #F8FAFC;
}
.agencies-v2 .agency-library {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr);
  min-block-size: 390px;
  gap: 24px;
  border: 1px solid rgba(248,250,252,0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 18%, rgba(40,93,255,0.24), transparent 32%),
    linear-gradient(135deg, #101828, #172033);
  padding: clamp(24px, 3vw, 42px);
}
.agencies-v2 .agency-library-left {
  display: grid;
  align-content: space-between;
  gap: 24px;
  border-radius: 16px;
  background: #F8FAFC;
  color: var(--agency-ink);
  padding: 22px;
}
.agencies-v2 .agency-library-left span {
  color: var(--agency-muted);
}
.agencies-v2 .agency-client-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.agencies-v2 .agency-client-stack div {
  min-block-size: 170px;
  display: grid;
  align-content: end;
  gap: 8px;
  border: 1px solid rgba(248,250,252,0.12);
  border-radius: 16px;
  background: rgba(248,250,252,0.08);
  color: #F8FAFC;
  padding: 20px;
}
.agencies-v2 .agency-client-stack span {
  color: #B8C5D8;
}
.agencies-v2 .agency-library-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-end: 1px solid rgba(248,250,252,0.14);
  margin-block-start: 22px;
}
.agencies-v2 .agency-library-points article {
  border-inline-end: 1px solid rgba(248,250,252,0.14);
  padding: 24px 22px 28px;
}
.agencies-v2 .agency-library-points article:last-child {
  border-inline-end: 0;
}
.agencies-v2 .agency-library-points p {
  color: #B8C5D8;
}
.agencies-v2 .agency-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.agencies-v2 .agency-route-card {
  display: grid;
  gap: 14px;
  min-block-size: 230px;
  padding: clamp(24px, 2.8vw, 36px);
  text-decoration: none;
}
.agencies-v2 .agency-route-card h2 {
  font-size: clamp(28px, 2.6vw, 40px);
}
.agencies-v2 .agency-route-card p {
  color: var(--agency-muted);
}
.agencies-v2 .agency-route-card strong {
  color: var(--agency-blue);
}
.agencies-v2 .agency-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.agencies-v2 .agency-faq-grid details {
  padding: 20px;
}
.agencies-v2 .agency-faq-grid summary {
  color: var(--agency-ink);
  font-weight: 700;
}
.agencies-v2 .agency-demo-grid {
  align-items: start;
}
.agencies-v2 .demo-form {
  border-radius: 16px;
}
.agencies-v2 .demo-form .field:nth-child(3) {
  min-block-size: 136px;
  align-items: flex-start;
  padding-block: 14px;
}

@media (max-width: 1180px) {
  .agencies-v2 .agency-hero-grid,
  .agencies-v2 .agency-output-grid,
  .agencies-v2 .agency-demo-grid,
  .agencies-v2 .agency-project-board,
  .agencies-v2 .agency-workflow,
  .agencies-v2 .agency-constructor-map {
    grid-template-columns: 1fr;
  }
  .agencies-v2 .agency-center-visual {
    order: -1;
  }
  .agencies-v2 .agency-benefit-strip,
  .agencies-v2 .agency-library-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agencies-v2 .agency-benefit-strip article:nth-child(2) {
    border-inline-end: 0;
  }
}

@media (max-width: 820px) {
  .agencies-v2 {
    --agency-h2: clamp(28px, 7vw, 34px);
  }
  .agencies-v2 .agency-hero,
  .agencies-v2 .agency-section {
    padding-block: 52px;
  }
  .agencies-v2 h1 {
    font-size: clamp(38px, 10.5vw, 48px);
  }
  .agencies-v2 .agency-hero-stage {
    min-block-size: auto;
    display: grid;
    gap: 10px;
    padding: 14px;
  }
  .agencies-v2 .agency-stage-screen,
  .agencies-v2 .agency-stage-panel {
    position: static;
    inline-size: auto;
  }
  .agencies-v2 .agency-stage-screen {
    min-block-size: 288px;
  }
  .agencies-v2 .agency-project-visual,
  .agencies-v2 .agency-center-visual,
  .agencies-v2 .agency-workflow-visual,
  .agencies-v2 .agency-media-stack .agency-media-main,
  .agencies-v2 .agency-brand-visual {
    min-block-size: 300px;
  }
  .agencies-v2 .agency-benefit-strip,
  .agencies-v2 .agency-media-stack,
  .agencies-v2 .agency-two-lanes,
  .agencies-v2 .agency-event-list,
  .agencies-v2 .agency-library,
  .agencies-v2 .agency-client-stack,
  .agencies-v2 .agency-library-points,
  .agencies-v2 .agency-route-grid,
  .agencies-v2 .agency-faq-grid {
    grid-template-columns: 1fr;
  }
  .agencies-v2 .agency-benefit-strip article,
  .agencies-v2 .agency-library-points article {
    border-inline-end: 0;
    border-block-end: 1px solid var(--agency-line);
  }
  .agencies-v2 .agency-benefit-strip article:last-child,
  .agencies-v2 .agency-library-points article:last-child {
    border-block-end: 0;
  }
  .agencies-v2 .agency-event-list article {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 22px 18px;
  }
  .agencies-v2 .agency-library-points article {
    border-color: rgba(248,250,252,0.14);
  }
}

/* Agencies requested structure fixes. */
.agencies-v2 .agency-brief-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.58fr) minmax(0, 1.22fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.agencies-v2 .agency-brief-copy {
  display: grid;
  align-content: center;
  gap: 18px;
}
.agencies-v2 .agency-brief-copy h2,
.agencies-v2 .agency-brand-layout h2 {
  font-size: var(--agency-h2);
  line-height: 1.08;
}
.agencies-v2 .agency-brief-copy p,
.agencies-v2 .agency-brand-layout p {
  max-inline-size: 680px;
  color: var(--agency-body);
  font-size: clamp(17px, 1.22vw, 20px);
  line-height: 1.58;
}
.agencies-v2 .agency-brief-console {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(340px, 1fr);
  gap: 0;
  min-block-size: 490px;
  overflow: hidden;
  border: 1px solid var(--agency-line);
  border-radius: 22px;
  background: #FEFFFF;
  box-shadow: 0 24px 64px rgba(16,24,40,0.07);
}
.agencies-v2 .agency-brief-input {
  display: grid;
  align-content: center;
  gap: 22px;
  padding: clamp(26px, 3vw, 42px);
  border-inline-end: 1px solid var(--agency-line);
  background: #F8FAFC;
}
.agencies-v2 .agency-brief-input dl {
  display: grid;
  gap: 12px;
  margin: 0;
}
.agencies-v2 .agency-brief-input dl div {
  display: grid;
  gap: 5px;
  border-block-start: 1px solid var(--agency-line);
  padding-block-start: 12px;
}
.agencies-v2 .agency-brief-input dt {
  color: var(--agency-blue);
  font-weight: 700;
}
.agencies-v2 .agency-brief-input dd {
  margin: 0;
  color: var(--agency-body);
}
.agencies-v2 .agency-brief-output {
  display: grid;
  align-content: end;
  gap: 14px;
  padding: clamp(26px, 3.4vw, 48px);
  background:
    radial-gradient(circle at 78% 18%, rgba(40,93,255,0.13), transparent 30%),
    linear-gradient(90deg, rgba(40,93,255,0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40,93,255,0.07) 1px, transparent 1px),
    #FFFFFF;
  background-size: auto, 42px 42px, 42px 42px, auto;
}
.agencies-v2 .agency-brief-output strong {
  max-inline-size: 520px;
  font: 700 clamp(36px, 3.4vw, 52px)/1.02 var(--font-display);
  color: var(--agency-ink);
}
.agencies-v2 .agency-brief-output p {
  max-inline-size: 560px;
  color: var(--agency-body);
  font-size: 18px;
  line-height: 1.5;
}
.agencies-v2 .agency-brief-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-start: 24px;
  border-block-start: 1px solid var(--agency-line);
  border-block-end: 1px solid var(--agency-line);
}
.agencies-v2 .agency-brief-rail article {
  min-block-size: 230px;
  padding: clamp(22px, 2.5vw, 34px) clamp(18px, 2vw, 28px);
  border-inline-end: 1px solid var(--agency-line);
}
.agencies-v2 .agency-brief-rail article:last-child {
  border-inline-end: 0;
}
.agencies-v2 .agency-brief-rail span {
  color: var(--agency-blue);
  font: 700 12px/1 var(--font-ui);
}
.agencies-v2 .agency-output-showcase {
  display: grid;
  grid-template-columns: minmax(500px, 1.08fr) minmax(320px, 0.74fr);
  gap: 16px;
  align-items: stretch;
}
.agencies-v2 .agency-output-screen,
.agencies-v2 .agency-output-pieces > div,
.agencies-v2 .agency-output-note {
  border: 1px solid var(--agency-line);
  border-radius: 18px;
  background: #FEFFFF;
}
.agencies-v2 .agency-output-screen {
  min-block-size: 560px;
  display: grid;
  align-content: end;
  gap: 10px;
  padding: clamp(26px, 3vw, 42px);
  background:
    linear-gradient(90deg, rgba(40,93,255,0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(40,93,255,0.07) 1px, transparent 1px),
    #FFFFFF;
  background-size: 42px 42px;
}
.agencies-v2 .agency-output-screen strong {
  max-inline-size: 500px;
  font: 700 clamp(28px, 2.5vw, 38px)/1.08 var(--font-display);
}
.agencies-v2 .agency-output-pieces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.agencies-v2 .agency-output-pieces > div,
.agencies-v2 .agency-output-note {
  min-block-size: 166px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 22px;
}
.agencies-v2 .agency-output-note {
  grid-column: 2;
  margin-block-start: 16px;
  min-block-size: auto;
  align-content: start;
  background: #F8FAFC;
}
.agencies-v2 .agency-brand-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(500px, 1fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}
.agencies-v2 .agency-brand-layout .agency-brand-visual {
  min-block-size: 520px;
}
.agencies-v2 .agency-contact-dark {
  background:
    radial-gradient(circle at 86% 16%, rgba(40,93,255,0.25), transparent 32%),
    linear-gradient(135deg, #101828, #172033);
  color: #F8FAFC;
}
.agencies-v2 .agency-contact-dark .agency-lead {
  max-inline-size: 760px;
  color: #F8FAFC;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.25;
  font-family: var(--font-display);
  font-weight: 650;
}
.agencies-v2 .agency-contact-dark .demo-form {
  border-color: rgba(248,250,252,0.16);
  background: #FFFFFF;
}
.agencies-v2 .agency-simple-statement h2 {
  max-inline-size: 1200px;
  font-size: clamp(32px, 3.15vw, 46px);
  line-height: 1.1;
}
.agencies-v2 .agency-wide-statement h2 {
  max-inline-size: 1120px;
  font-size: clamp(30px, 2.65vw, 38px);
  line-height: 1.14;
}
.agencies-v2 .agency-simple-statement {
  margin-block-end: clamp(26px, 4vw, 48px);
}
.agencies-v2 .agency-wide-statement {
  max-inline-size: 1200px;
  margin-block-end: clamp(28px, 3.8vw, 46px);
}
.agencies-v2 .agency-section-head {
  max-inline-size: 1200px;
}
.agencies-v2 .agency-section-head > p {
  max-inline-size: 1200px;
  width: 100%;
}
.agencies-v2 .agency-constructor-compact {
  grid-template-columns: minmax(230px, 0.88fr) minmax(360px, 1.02fr) minmax(230px, 0.88fr);
  gap: 14px;
}
.agencies-v2 .agency-constructor-compact .agency-side-list {
  gap: 14px;
}
.agencies-v2 .agency-constructor-compact .agency-side-list article {
  min-block-size: 170px;
  padding: 20px;
}
.agencies-v2 .agency-constructor-compact .agency-center-visual {
  min-block-size: 360px;
  padding: 26px;
}
.agencies-v2 .agency-constructor-compact .agency-center-visual strong {
  max-inline-size: 340px;
  font-size: clamp(24px, 2.2vw, 34px);
}
.agencies-v2 .agency-constructor-compact .agency-center-visual p {
  max-inline-size: 390px;
}
.agencies-v2 .agency-output-showcase {
  grid-template-columns: minmax(520px, 1.12fr) minmax(340px, 0.82fr);
}
.agencies-v2 .agency-output-pieces {
  align-content: stretch;
}
.agencies-v2 .agency-output-pieces > div {
  min-block-size: 272px;
}

@media (max-width: 1180px) {
  .agencies-v2 .agency-brief-layout,
  .agencies-v2 .agency-brief-console,
  .agencies-v2 .agency-constructor-compact,
  .agencies-v2 .agency-output-showcase,
  .agencies-v2 .agency-brand-layout {
    grid-template-columns: 1fr;
  }
  .agencies-v2 .agency-brief-input {
    border-inline-end: 0;
    border-block-end: 1px solid var(--agency-line);
  }
  .agencies-v2 .agency-output-note {
    grid-column: auto;
    margin-block-start: 0;
  }
  .agencies-v2 .agency-brief-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .agencies-v2 .agency-brief-console,
  .agencies-v2 .agency-output-screen,
  .agencies-v2 .agency-brand-layout .agency-brand-visual {
    min-block-size: auto;
  }
  .agencies-v2 .agency-brief-input,
  .agencies-v2 .agency-brief-output {
    padding: 22px;
  }
  .agencies-v2 .agency-brief-output {
    min-block-size: 320px;
  }
  .agencies-v2 .agency-brief-output strong {
    font-size: clamp(30px, 8vw, 40px);
  }
  .agencies-v2 .agency-brief-rail,
  .agencies-v2 .agency-output-pieces {
    grid-template-columns: 1fr;
  }
  .agencies-v2 .agency-simple-statement h2 {
    font-size: clamp(27px, 7vw, 34px);
  }
  .agencies-v2 .agency-wide-statement h2 {
    font-size: clamp(26px, 6.4vw, 32px);
  }
  .agencies-v2 .agency-constructor-compact .agency-center-visual {
    min-block-size: 300px;
  }
  .agencies-v2 .agency-output-pieces > div {
    min-block-size: auto;
  }
  .agencies-v2 .agency-brief-rail article {
    min-block-size: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--agency-line);
  }
  .agencies-v2 .agency-brief-rail article:last-child {
    border-block-end: 0;
  }
  .agencies-v2 .agency-output-screen {
    min-block-size: 320px;
  }
  .agencies-v2 .agency-contact-dark .agency-lead {
    font-size: clamp(22px, 6.4vw, 28px);
  }
}

/* Companies page rebuild: corporate scenario mockup system. */
.companies-v2 {
  --company-ink: oklch(20% 0.035 257);
  --company-body: oklch(38% 0.04 257);
  --company-muted: oklch(52% 0.035 257);
  --company-line: oklch(88% 0.02 257);
  --company-soft: oklch(97% 0.014 257);
  --company-surface: oklch(99% 0.006 257);
  --company-blue: oklch(58% 0.22 258);
  --company-h2: clamp(34px, 3.2vw, 48px);
  color: var(--company-ink);
  background: oklch(98.5% 0.008 257);
}
.companies-v2 h1,
.companies-v2 h2,
.companies-v2 h3,
.companies-v2 p {
  letter-spacing: 0;
}
.companies-v2 h1,
.companies-v2 h2,
.companies-v2 h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.companies-v2 h1,
.companies-v2 h2,
.companies-v2 h3 {
  color: var(--company-ink);
}
.companies-v2 p {
  color: var(--company-body);
}
.companies-v2 .company-hero,
.companies-v2 .company-section {
  border-block-end: 1px solid var(--company-line);
}
.companies-v2 .company-hero {
  padding-block: clamp(80px, 9vw, 132px);
  background:
    radial-gradient(circle at 82% 20%, oklch(76% 0.15 258 / 0.16), transparent 30%),
    linear-gradient(180deg, oklch(99% 0.006 257), oklch(97% 0.015 257));
}
.companies-v2 .company-section {
  padding-block: clamp(76px, 8vw, 122px);
}
.companies-v2 .company-soft {
  background: var(--company-soft);
}
.companies-v2 .company-hero-grid {
  display: grid;
  grid-template-columns: minmax(540px, 1fr) minmax(480px, 0.96fr);
  gap: clamp(48px, 6vw, 90px);
  align-items: center;
}
.companies-v2 .company-hero-copy {
  max-inline-size: 780px;
}
.companies-v2 h1 {
  max-inline-size: 780px;
  font-size: clamp(52px, 4.85vw, 72px);
  line-height: 1.02;
}
.companies-v2 h2 {
  max-inline-size: 1120px;
  font-size: var(--company-h2);
  line-height: 1.08;
}
.companies-v2 h3 {
  font-size: clamp(21px, 1.55vw, 25px);
  line-height: 1.16;
}
.companies-v2 .company-lead,
.companies-v2 .company-section-head > p,
.companies-v2 .company-contact-lead {
  max-inline-size: 1200px;
  color: var(--company-body);
  font-size: clamp(18px, 1.25vw, 20px);
  line-height: 1.58;
}
.companies-v2 .company-lead {
  max-inline-size: 680px;
}
.companies-v2 .company-section-head {
  display: grid;
  gap: 16px;
  max-inline-size: 1200px;
  margin-block-end: clamp(30px, 4vw, 54px);
}
.companies-v2 .company-section-head.local {
  margin-block-end: 26px;
}
.companies-v2 .company-hero-visual,
.companies-v2 .company-admin-slot,
.companies-v2 .company-live-screen {
  border: 1px solid var(--company-line);
  border-radius: 22px;
  background:
    linear-gradient(90deg, oklch(58% 0.22 258 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(58% 0.22 258 / 0.08) 1px, transparent 1px),
    var(--company-surface);
  background-size: 42px 42px;
}
.companies-v2 .company-hero-visual {
  position: relative;
  min-block-size: 560px;
  overflow: hidden;
  padding: 30px;
  box-shadow: 0 30px 84px oklch(20% 0.035 257 / 0.12);
}
.companies-v2 .company-hero-visual-image {
  padding: 0;
  background: transparent;
}
.companies-v2 .company-hero-visual-image > img {
  border-radius: inherit;
}
.companies-v2 .company-screen-card {
  position: absolute;
  inset: 102px 72px 86px 58px;
  display: grid;
  align-content: end;
  gap: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 12%, oklch(78% 0.15 80 / 0.24), transparent 28%),
    linear-gradient(135deg, oklch(21% 0.04 257), oklch(27% 0.05 257));
  color: oklch(98% 0.006 257);
  padding: clamp(24px, 3vw, 38px);
}
.companies-v2 .company-screen-card span,
.companies-v2 .company-screen-card p {
  color: oklch(86% 0.03 257);
}
.companies-v2 .company-screen-card strong {
  max-inline-size: 430px;
  color: oklch(98% 0.006 257);
  font: 700 clamp(34px, 3vw, 46px)/1.02 var(--font-display);
}
.companies-v2 .company-screen-bars {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 0.72fr;
  gap: 9px;
  margin-block-start: 8px;
}
.companies-v2 .company-screen-bars i {
  block-size: 36px;
  border-radius: 999px;
  background: oklch(98% 0.006 257 / 0.14);
}
.companies-v2 .company-floating-card {
  position: absolute;
  display: grid;
  gap: 8px;
  inline-size: 232px;
  border: 1px solid var(--company-line);
  border-radius: 16px;
  background: oklch(99% 0.006 257 / 0.98);
  padding: 18px;
  box-shadow: 0 18px 44px oklch(20% 0.035 257 / 0.11);
}
.companies-v2 .company-floating-card span {
  color: var(--company-muted);
}
.companies-v2 .card-brief { inset-block-start: 34px; inset-inline-end: 34px; }
.companies-v2 .card-host { inset-block-end: 58px; inset-inline-end: 34px; }
.companies-v2 .card-player { inset-block-end: 42px; inset-inline-start: 38px; }
.companies-v2 .company-use-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.companies-v2 .company-use-board article {
  min-block-size: 230px;
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid var(--company-line);
  border-radius: 18px;
  background: var(--company-surface);
  padding: clamp(24px, 2.4vw, 34px);
}
.companies-v2 .company-content-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.companies-v2 .company-content-cards article,
.companies-v2 .company-mechanics-board article,
.companies-v2 .company-custom-grid article,
.companies-v2 .company-step-list article,
.companies-v2 .company-live-side article,
.companies-v2 .company-route-card {
  border: 1px solid var(--company-line);
  border-radius: 18px;
  background: var(--company-surface);
}
.companies-v2 .company-content-cards article {
  min-block-size: 260px;
  padding: clamp(24px, 2.4vw, 34px);
}
.companies-v2 .company-content-cards article:nth-child(1),
.companies-v2 .company-mechanics-board article:nth-child(1) { background: oklch(95% 0.035 258); }
.companies-v2 .company-content-cards article:nth-child(2),
.companies-v2 .company-mechanics-board article:nth-child(2) { background: oklch(96% 0.045 82); }
.companies-v2 .company-content-cards article:nth-child(3),
.companies-v2 .company-mechanics-board article:nth-child(3) { background: oklch(96% 0.04 148); }
.companies-v2 .company-content-cards article:nth-child(4),
.companies-v2 .company-mechanics-board article:nth-child(4) { background: #F2F4F3; }
.companies-v2 .company-flow-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-block-start: 28px;
  border: 1px dashed var(--company-line);
  border-radius: 20px;
  background: oklch(99% 0.006 257);
  padding: 16px;
}
.companies-v2 .company-flow-strip span {
  display: flex;
  min-block-size: 78px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--company-line);
  border-radius: 14px;
  background: var(--company-surface);
  color: var(--company-ink);
  font-size: clamp(17px, 1.3vw, 22px);
}
.companies-v2 .company-flow-strip span + span::before {
  content: "→";
  color: var(--company-blue);
  font-weight: 800;
}
.companies-v2 .company-flow-strip.social {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.companies-v2 .company-scenario-split {
  display: grid;
  grid-template-columns: minmax(440px, 0.92fr) minmax(480px, 1.08fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.companies-v2 .company-step-list {
  display: grid;
  gap: 12px;
}
.companies-v2 .company-step-list article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 22px;
}
.companies-v2 .company-step-list b {
  color: var(--company-blue);
  font: 700 12px/1 var(--font-ui);
  padding-block-start: 6px;
  grid-row: 1 / span 2;
}
.companies-v2 .company-step-list h3,
.companies-v2 .company-step-list p {
  grid-column: 2;
}
.companies-v2 .company-admin-slot {
  min-block-size: 560px;
  display: grid;
  align-content: end;
  gap: 14px;
  padding: clamp(26px, 3vw, 42px);
}
.companies-v2 .company-admin-slot > span,
.companies-v2 .company-live-screen > span {
  justify-self: start;
  border: 1px solid var(--company-line);
  border-radius: 999px;
  background: oklch(98% 0.012 258);
  color: var(--company-blue);
  padding: 8px 12px;
  font: 700 12px/1.1 var(--font-ui);
}
.companies-v2 .company-admin-slot strong,
.companies-v2 .company-live-screen strong {
  max-inline-size: 560px;
  font: 700 clamp(32px, 3.1vw, 48px)/1.04 var(--font-display);
  color: var(--company-ink);
}
.companies-v2 .company-mini-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 12px;
}
.companies-v2 .company-mini-tabs i {
  border: 1px solid var(--company-line);
  border-radius: 999px;
  background: var(--company-surface);
  padding: 9px 12px;
  color: var(--company-body);
  font-style: normal;
  font-weight: 700;
}
.companies-v2 .company-mechanics-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.companies-v2 .company-mechanics-board article {
  min-block-size: 236px;
  padding: clamp(24px, 2.4vw, 34px);
}
.companies-v2 .company-mechanics-board article:nth-child(5),
.companies-v2 .company-mechanics-board article:nth-child(6) {
  background: var(--company-surface);
}
.companies-v2 .company-dark {
  background: oklch(19% 0.04 257);
}
.companies-v2 .company-section-head.dark h2,
.companies-v2 .company-section-head.dark p,
.companies-v2 .company-dark h3 {
  color: oklch(98% 0.006 257);
}
.companies-v2 .company-live-system {
  display: grid;
  grid-template-columns: minmax(520px, 1.08fr) minmax(340px, 0.78fr);
  gap: 18px;
  align-items: stretch;
}
.companies-v2 .company-live-screen {
  min-block-size: 520px;
  align-content: end;
  gap: 14px;
  padding: clamp(28px, 3.2vw, 46px);
  background:
    radial-gradient(circle at 82% 18%, oklch(65% 0.18 258 / 0.22), transparent 32%),
    linear-gradient(135deg, oklch(23% 0.045 257), oklch(29% 0.055 257));
  color: oklch(98% 0.006 257);
}
.companies-v2 .company-live-screen,
.companies-v2 .company-live-side {
  display: grid;
}
.companies-v2 .company-live-screen strong,
.companies-v2 .company-live-screen p {
  color: oklch(98% 0.006 257);
}
.companies-v2 .company-live-side {
  gap: 18px;
}
.companies-v2 .company-live-side article {
  display: grid;
  align-content: end;
  gap: 12px;
  padding: clamp(24px, 2.4vw, 34px);
  background: oklch(98% 0.008 257);
}
.companies-v2 .company-custom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.companies-v2 .company-custom-grid article {
  min-block-size: 220px;
  padding: clamp(24px, 2.4vw, 34px);
}
.companies-v2 .company-content-lab {
  display: grid;
  grid-template-columns: minmax(560px, 1.08fr) minmax(340px, 0.72fr);
  gap: 18px;
  align-items: stretch;
}
.companies-v2 .company-content-visual,
.companies-v2 .company-social-stage,
.companies-v2 .company-brand-preview {
  border: 1px solid var(--company-line);
  border-radius: 22px;
}
.companies-v2 .company-content-visual {
  min-block-size: 560px;
  display: grid;
  align-content: end;
  gap: 16px;
  padding: clamp(28px, 3vw, 46px);
  background:
    radial-gradient(circle at 82% 18%, oklch(70% 0.15 258 / 0.16), transparent 32%),
    linear-gradient(90deg, oklch(58% 0.22 258 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(58% 0.22 258 / 0.08) 1px, transparent 1px),
    var(--company-surface);
  background-size: auto, 42px 42px, 42px 42px, auto;
}
.companies-v2 .company-content-visual > span,
.companies-v2 .company-social-stage > span,
.companies-v2 .company-brand-preview > span {
  justify-self: start;
  border: 1px solid var(--company-line);
  border-radius: 999px;
  background: oklch(98% 0.012 258);
  color: var(--company-blue);
  padding: 8px 12px;
  font: 700 12px/1.1 var(--font-ui);
}
.companies-v2 .company-content-visual strong,
.companies-v2 .company-social-stage strong,
.companies-v2 .company-brand-preview strong {
  max-inline-size: 680px;
  font: 700 clamp(32px, 3vw, 48px)/1.05 var(--font-display);
  color: var(--company-ink);
}
.companies-v2 .company-content-visual p,
.companies-v2 .company-brand-preview p {
  max-inline-size: 680px;
}
.companies-v2 .company-content-timeline,
.companies-v2 .company-social-chain {
  display: grid;
  gap: 10px;
  margin-block-start: 16px;
}
.companies-v2 .company-content-timeline {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.companies-v2 .company-content-timeline i,
.companies-v2 .company-social-chain i {
  display: flex;
  align-items: center;
  min-block-size: 62px;
  border: 1px solid var(--company-line);
  border-radius: 14px;
  background: oklch(99% 0.006 257 / 0.94);
  color: var(--company-ink);
  padding: 14px;
  font-style: normal;
  font-weight: 700;
}
.companies-v2 .company-content-timeline i + i::before,
.companies-v2 .company-social-chain i + i::before {
  content: "→";
  color: var(--company-blue);
  margin-inline-end: 10px;
}
.companies-v2 .company-content-modules {
  display: grid;
  border: 1px solid var(--company-line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--company-surface);
}
.companies-v2 .company-content-modules article {
  display: grid;
  align-content: center;
  gap: 8px;
  min-block-size: 140px;
  padding: clamp(20px, 2vw, 28px);
  border-block-end: 1px solid var(--company-line);
}
.companies-v2 .company-content-modules article:last-child {
  border-block-end: 0;
}
.companies-v2 .company-content-modules article:nth-child(1) { background: oklch(95% 0.035 258); }
.companies-v2 .company-content-modules article:nth-child(2) { background: oklch(96% 0.045 82); }
.companies-v2 .company-content-modules article:nth-child(3) { background: oklch(96% 0.04 148); }
.companies-v2 .company-content-modules article:nth-child(4) { background: #F2F4F3; }
.companies-v2 .company-social-proof {
  display: grid;
  grid-template-columns: minmax(560px, 1.1fr) minmax(360px, 0.76fr);
  gap: 18px;
  align-items: stretch;
}
.companies-v2 .company-social-stage {
  min-block-size: 650px;
  display: grid;
  align-content: end;
  gap: 16px;
  padding: clamp(30px, 3.4vw, 52px);
  background:
    radial-gradient(circle at 82% 16%, oklch(70% 0.16 258 / 0.2), transparent 32%),
    linear-gradient(135deg, oklch(20% 0.04 257), oklch(28% 0.055 257));
}
.companies-v2 .company-social-stage strong,
.companies-v2 .company-social-stage p {
  color: oklch(98% 0.006 257);
}
.companies-v2 .company-social-stage > span {
  border-color: oklch(98% 0.006 257 / 0.16);
  background: oklch(98% 0.006 257 / 0.08);
  color: oklch(92% 0.04 258);
}
.companies-v2 .company-social-chain {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.companies-v2 .company-social-chain i {
  border-color: oklch(98% 0.006 257 / 0.18);
  background: oklch(98% 0.006 257 / 0.08);
  color: oklch(98% 0.006 257);
}
.companies-v2 .company-social-rail {
  display: grid;
  border: 1px solid var(--company-line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--company-surface);
}
.companies-v2 .company-social-rail article {
  display: grid;
  grid-template-columns: minmax(120px, 0.38fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(18px, 1.8vw, 24px);
  border-block-end: 1px solid var(--company-line);
}
.companies-v2 .company-social-rail article:last-child {
  border-block-end: 0;
}
.companies-v2 .company-social-rail h3,
.companies-v2 .company-social-rail p {
  margin: 0;
}
.companies-v2 .company-brand-lab {
  display: grid;
  grid-template-columns: minmax(340px, 0.72fr) minmax(560px, 1.08fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.companies-v2 .company-brand-controls {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--company-line);
}
.companies-v2 .company-brand-controls article {
  display: grid;
  gap: 8px;
  padding-block: 24px;
  border-block-end: 1px solid var(--company-line);
}
.companies-v2 .company-brand-preview {
  min-block-size: 560px;
  display: grid;
  align-content: end;
  gap: 16px;
  padding: clamp(28px, 3vw, 46px);
  background:
    radial-gradient(circle at 82% 18%, oklch(75% 0.16 80 / 0.24), transparent 28%),
    linear-gradient(90deg, oklch(58% 0.22 258 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(58% 0.22 258 / 0.08) 1px, transparent 1px),
    var(--company-surface);
  background-size: auto, 42px 42px, 42px 42px, auto;
}
.companies-v2 .company-brand-swatches {
  display: flex;
  gap: 10px;
  margin-block-start: 10px;
}
.companies-v2 .company-brand-swatches i {
  inline-size: 54px;
  block-size: 54px;
  border: 1px solid var(--company-line);
  border-radius: 14px;
}
.companies-v2 .company-brand-swatches i:nth-child(1) { background: oklch(58% 0.22 258); }
.companies-v2 .company-brand-swatches i:nth-child(2) { background: oklch(78% 0.14 80); }
.companies-v2 .company-brand-swatches i:nth-child(3) { background: oklch(74% 0.13 150); }
.companies-v2 .company-brand-swatches i:nth-child(4) { background: oklch(30% 0.05 257); }
.companies-v2 .company-brand-preview-image {
  padding: 0;
  background: transparent;
}

.companies-v2 .company-brand-preview-image > img {
  border-radius: inherit;
}
.companies-v2 .company-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.companies-v2 .company-route-card {
  display: grid;
  gap: 14px;
  min-block-size: 230px;
  padding: clamp(28px, 3vw, 40px);
  text-decoration: none;
}
.companies-v2 .company-route-card strong {
  color: var(--company-blue);
}
.companies-v2 .company-contact {
  background:
    radial-gradient(circle at 86% 16%, oklch(60% 0.2 258 / 0.25), transparent 32%),
    linear-gradient(135deg, oklch(19% 0.04 257), oklch(24% 0.05 257));
  color: oklch(98% 0.006 257);
}
.companies-v2 .company-contact-grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(430px, 0.78fr);
  gap: clamp(42px, 6vw, 92px);
  align-items: start;
}
.companies-v2 .company-contact-lead {
  color: oklch(98% 0.006 257);
  font: 650 clamp(28px, 3vw, 42px)/1.14 var(--font-display);
}
.companies-v2 .company-contact .demo-form {
  border-color: oklch(98% 0.006 257 / 0.16);
  background: oklch(99% 0.006 257);
}
.companies-v2 .demo-form .field:nth-child(3) {
  min-block-size: 140px;
  align-items: flex-start;
  padding-block: 14px;
}

@media (max-width: 1180px) {
  .companies-v2 .company-hero-grid,
  .companies-v2 .company-content-lab,
  .companies-v2 .company-scenario-split,
  .companies-v2 .company-social-proof,
  .companies-v2 .company-live-system,
  .companies-v2 .company-brand-lab,
  .companies-v2 .company-contact-grid {
    grid-template-columns: 1fr;
  }
  .companies-v2 .company-use-board,
  .companies-v2 .company-mechanics-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .companies-v2 .company-content-cards,
  .companies-v2 .company-custom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .companies-v2 {
    --company-h2: clamp(28px, 7vw, 34px);
  }
  .companies-v2 .company-hero,
  .companies-v2 .company-section {
    padding-block: 52px;
  }
  .companies-v2 h1 {
    font-size: clamp(38px, 10.5vw, 48px);
  }
  .companies-v2 .company-hero-visual {
    min-block-size: auto;
    display: grid;
    gap: 10px;
    padding: 14px;
  }
  .companies-v2 .company-screen-card,
  .companies-v2 .company-floating-card {
    position: static;
    inline-size: auto;
  }
  .companies-v2 .company-screen-card {
    min-block-size: 300px;
  }
  .companies-v2 .company-use-board,
  .companies-v2 .company-content-cards,
  .companies-v2 .company-mechanics-board,
  .companies-v2 .company-custom-grid,
  .companies-v2 .company-route-grid,
  .companies-v2 .company-content-timeline,
  .companies-v2 .company-social-chain,
  .companies-v2 .company-flow-strip,
  .companies-v2 .company-flow-strip.social {
    grid-template-columns: 1fr;
  }
  .companies-v2 .company-use-board article,
  .companies-v2 .company-content-cards article,
  .companies-v2 .company-mechanics-board article,
  .companies-v2 .company-custom-grid article,
  .companies-v2 .company-route-card {
    min-block-size: auto;
  }
  .companies-v2 .company-admin-slot,
  .companies-v2 .company-live-screen,
  .companies-v2 .company-content-visual,
  .companies-v2 .company-social-stage,
  .companies-v2 .company-brand-preview {
    min-block-size: 320px;
  }
  .companies-v2 .company-social-rail article {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .companies-v2 .company-content-modules article {
    min-block-size: auto;
  }
  .companies-v2 .company-step-list article {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 20px;
  }
  .companies-v2 .company-flow-strip span {
    justify-content: flex-start;
    min-block-size: 64px;
    padding-inline: 18px;
  }
}

/* Pricing page rebuild: focused scenario pricing and calculator mockup. */
.pricing-v2 {
  --pricing-ink: oklch(20% 0.035 257);
  --pricing-text: var(--pricing-ink);
  --pricing-body: oklch(38% 0.04 257);
  --pricing-muted: oklch(52% 0.035 257);
  --pricing-line: oklch(88% 0.02 257);
  --pricing-soft: oklch(97% 0.014 257);
  --pricing-surface: oklch(99% 0.006 257);
  --pricing-blue: oklch(58% 0.22 258);
  --pricing-h2: clamp(34px, 3.2vw, 48px);
  color: var(--pricing-ink);
  background: oklch(98.5% 0.008 257);
}
.pricing-v2 h1,
.pricing-v2 h2,
.pricing-v2 h3 {
  color: var(--pricing-ink);
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.pricing-v2 p {
  color: var(--pricing-body);
  letter-spacing: 0;
}
.pricing-v2 .pricing-hero,
.pricing-v2 .pricing-section {
  border-block-end: 1px solid var(--pricing-line);
}
.pricing-v2 .pricing-hero {
  padding-block: clamp(80px, 8.5vw, 126px);
  background:
    radial-gradient(circle at 82% 18%, oklch(76% 0.15 258 / 0.14), transparent 30%),
    linear-gradient(180deg, oklch(99% 0.006 257), oklch(97% 0.015 257));
}
.pricing-v2 .pricing-section {
  padding-block: clamp(72px, 7vw, 112px);
  scroll-margin-top: 92px;
}

.pricing-v2 .pricing-hero + .pricing-section {
  padding-block-start: clamp(28px, 3.8vw, 54px);
}

.pricing-v2 .pricing-hero + .pricing-section .pricing-premium-plans {
  margin-block-start: 0;
}

.pricing-v2 .pricing-hero + .pricing-section .pricing-premium-head {
  border-block-start: 0;
  padding-block-start: 0;
}

.pricing-v2 .pricing-soft {
  background: var(--pricing-soft);
}
.pricing-v2 .pricing-hero-grid {
  display: grid;
  grid-template-columns: minmax(540px, 1fr) minmax(460px, 0.9fr);
  gap: clamp(48px, 6vw, 90px);
  align-items: center;
}
.pricing-v2 .pricing-hero-copy {
  max-inline-size: 780px;
}
.pricing-v2 h1 {
  max-inline-size: 780px;
  font-size: clamp(54px, 5vw, 74px);
  line-height: 1.02;
}
.pricing-v2 h2 {
  max-inline-size: 1120px;
  font-size: var(--pricing-h2);
  line-height: 1.08;
}
.pricing-v2 h3 {
  font-size: clamp(21px, 1.55vw, 25px);
  line-height: 1.16;
}
.pricing-v2 .pricing-lead,
.pricing-v2 .pricing-section-head > p,
.pricing-v2 .pricing-contact-lead {
  max-inline-size: 1200px;
  color: var(--pricing-body);
  font-size: clamp(18px, 1.25vw, 20px);
  line-height: 1.58;
}
.pricing-v2 .pricing-lead {
  max-inline-size: 720px;
}
.pricing-v2 .pricing-section-head {
  display: grid;
  gap: 16px;
  max-inline-size: 1200px;
  margin-block-end: clamp(30px, 4vw, 54px);
}
.pricing-v2 .pricing-section-head.split {
  grid-template-columns: minmax(420px, 0.82fr) minmax(360px, 0.72fr);
  column-gap: clamp(48px, 7vw, 120px);
  align-items: end;
}
.pricing-v2 .pricing-hero-visual,
.pricing-v2 .pricing-calc-main,
.pricing-v2 .pricing-calc-options {
  border: 1px solid var(--pricing-line);
  border-radius: 22px;
  background:
    linear-gradient(90deg, oklch(58% 0.22 258 / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, oklch(58% 0.22 258 / 0.08) 1px, transparent 1px),
    var(--pricing-surface);
  background-size: 42px 42px;
}
.pricing-v2 .pricing-hero-visual {
  min-block-size: 520px;
  display: grid;
  align-content: end;
  gap: 16px;
  padding: clamp(28px, 3vw, 46px);
  box-shadow: 0 30px 84px oklch(20% 0.035 257 / 0.11);
}
.pricing-v2 .pricing-hero-visual > span,
.pricing-v2 .pricing-calc-summary > span {
  justify-self: start;
  border: 1px solid var(--pricing-line);
  border-radius: 999px;
  background: oklch(98% 0.012 258);
  color: var(--pricing-blue);
  padding: 8px 12px;
  font: 700 12px/1.1 var(--font-ui);
}
.pricing-v2 .pricing-hero-visual strong {
  max-inline-size: 520px;
  font: 700 clamp(32px, 3vw, 48px)/1.04 var(--font-display);
}
.pricing-v2 .pricing-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 12px;
}
.pricing-v2 .pricing-hero-pills i,
.pricing-v2 .pricing-included-pills span {
  border: 1px solid var(--pricing-line);
  border-radius: 999px;
  background: var(--pricing-surface);
  padding: 9px 12px;
  color: var(--pricing-body);
  font-style: normal;
  font-weight: 700;
}
.pricing-v2 .pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pricing-v2 .pricing-plan-card {
  min-block-size: 560px;
  display: grid;
  grid-template-rows: 174px 168px 1fr;
  gap: 20px;
  border: 1px solid var(--pricing-line);
  border-radius: 22px;
  background: var(--pricing-surface);
  padding: clamp(26px, 2.8vw, 40px);
}
.pricing-v2 .pricing-plan-card > div:first-child {
  min-block-size: 0;
}
.pricing-v2 .pricing-run-tabs {
  display: grid;
  grid-template-columns: repeat(3, 32px);
  gap: 2px;
  border: 1px solid var(--pricing-line);
  border-radius: 999px;
  background: color-mix(in oklch, var(--pricing-blue) 5%, var(--pricing-surface));
  padding: 2px;
}
.pricing-v2 .pricing-run-tabs button {
  min-block-size: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pricing-body);
  cursor: pointer;
  font: 750 12px/1 var(--font-ui);
}
.pricing-v2 .pricing-run-tabs button.is-active {
  background: var(--pricing-blue);
  color: #F8FAFC;
  box-shadow: 0 6px 14px rgba(40, 93, 255, 0.2);
}
.pricing-v2 .pricing-run-tabs button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.pricing-v2 .pricing-run-tabs button:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--pricing-blue) 26%, transparent);
  outline-offset: 2px;
}
.pricing-v2 .pricing-package-tag {
  display: inline-flex;
  inline-size: fit-content;
  margin-block-end: 14px;
  border: 1px solid var(--pricing-line);
  border-radius: 999px;
  background: color-mix(in oklch, var(--pricing-blue) 8%, var(--pricing-surface));
  padding: 7px 10px;
  color: var(--pricing-blue);
  font: 700 12px/1.15 var(--font-ui);
}
.pricing-v2 .pricing-plan-card.emphasized {
  background: oklch(96% 0.04 82);
}
.pricing-v2 .pricing-price-slot {
  block-size: 168px;
  inline-size: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--pricing-line);
  border-radius: 18px;
  background: color-mix(in oklch, var(--pricing-blue) 5%, var(--pricing-surface));
  padding: 14px 16px 16px;
}
.pricing-v2 .pricing-price-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.pricing-v2 .pricing-price-switch > span {
  color: var(--pricing-muted);
  font: 750 11px/1.15 var(--font-ui);
}
.pricing-v2 .pricing-total-line {
  display: grid;
  gap: 4px;
}
.pricing-v2 .pricing-total-line span,
.pricing-v2 .pricing-unit-line span {
  color: var(--pricing-muted);
  font: 700 11px/1.15 var(--font-ui);
}
.pricing-v2 .pricing-total-line strong {
  color: var(--pricing-text);
  font: 700 clamp(26px, 2.2vw, 34px)/1 var(--font-display);
}
.pricing-v2 .pricing-unit-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-block-start: auto;
  border-block-start: 1px solid color-mix(in oklch, var(--pricing-blue) 12%, var(--pricing-line));
  padding-block-start: 10px;
}
.pricing-v2 .pricing-unit-line b {
  color: var(--pricing-body);
  font: 800 15px/1.1 var(--font-ui);
}
.pricing-v2 .pricing-plan-card ul,
.pricing-v2 .pricing-plan-card p {
  margin: 0;
}
.pricing-v2 .pricing-plan-card ul {
  display: grid;
  gap: 10px;
  padding-inline-start: 20px;
  color: var(--pricing-body);
  align-self: start;
}
.pricing-v2 .pricing-comparison {
  margin-block-start: clamp(28px, 4vw, 48px);
  border: 1px solid var(--pricing-line);
  border-radius: 22px;
  background: var(--pricing-surface);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: 0 22px 58px rgba(16, 24, 40, 0.08);
}
.pricing-v2 .pricing-comparison-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-block-end: 20px;
}
.pricing-v2 .pricing-comparison-head h3,
.pricing-v2 .pricing-comparison-head p {
  margin: 0;
}
.pricing-v2 .pricing-comparison-head h3 {
  font: 700 clamp(24px, 2vw, 32px)/1.1 var(--font-display);
}
.pricing-v2 .pricing-comparison-head p {
  margin-block-start: 8px;
  color: var(--pricing-body);
}
.pricing-v2 .pricing-comparison-panel {
  position: relative;
  max-block-size: none;
  overflow: visible;
  opacity: 0.46;
  transition: max-block-size 360ms ease, opacity 220ms ease;
}
.pricing-v2 .pricing-comparison-panel::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 48px;
  block-size: 84px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--pricing-surface) 76%);
}
.pricing-v2 .pricing-comparison-more {
  position: relative;
  z-index: 3;
  inset: auto;
  display: block;
  inline-size: fit-content;
  margin: 14px auto 0;
  border: 0;
  background: transparent;
  color: var(--pricing-blue);
  cursor: pointer;
  padding: 6px 8px;
  font: 850 15px/1.15 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.pricing-v2 .pricing-comparison-more:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--pricing-blue) 22%, transparent);
  outline-offset: 4px;
}
.pricing-v2 .pricing-comparison.is-open .pricing-comparison-panel {
  max-block-size: none;
  overflow: visible;
  opacity: 1;
}
.pricing-v2 .pricing-comparison.is-open .pricing-comparison-panel::after {
  opacity: 0;
}
.pricing-v2 .pricing-comparison.is-open .pricing-comparison-more {
  display: none;
}
.pricing-v2 .pricing-comparison-scroll {
  overflow: visible;
}

.pricing-v2 .pricing-comparison:not(.is-open) .pricing-comparison-scroll {
  max-block-size: 462px;
  overflow-x: auto;
  overflow-y: hidden;
}

.pricing-v2 .pricing-comparison.is-open .pricing-comparison-scroll {
  max-block-size: none;
  overflow: visible;
}

.pricing-v2 .pricing-comparison table {
  inline-size: 100%;
  min-inline-size: 1080px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}
.pricing-v2 .pricing-comparison-sticky-grid {
  position: sticky;
  inset-block-start: 68px;
  z-index: 18;
  min-inline-size: 1080px;
  display: grid;
  grid-template-columns: 1.18fr repeat(4, minmax(0, 1fr));
  border: 1px solid var(--pricing-line);
  border-block-end: 0;
  border-radius: 18px 18px 0 0;
  background: color-mix(in oklch, var(--pricing-blue) 6%, var(--pricing-surface));
  box-shadow: 0 1px 0 var(--pricing-line), 0 12px 28px rgba(10, 11, 13, 0.06);
}
.pricing-v2 .pricing-comparison-sticky-grid > div {
  min-inline-size: 0;
  padding: 13px 14px;
}
.pricing-v2 .pricing-comparison-sticky-grid > div + div {
  border-inline-start: 1px solid var(--pricing-line);
}
.pricing-v2 .pricing-comparison-param-col {
  inline-size: 24%;
}
.pricing-v2 .pricing-comparison th,
.pricing-v2 .pricing-comparison td {
  border-block-end: 1px solid var(--pricing-line);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}
.pricing-v2 .pricing-comparison-param-head {
  vertical-align: middle;
  color: var(--pricing-text);
  font-weight: 800;
}
.pricing-v2 .pricing-comparison-plan-head {
  display: grid;
  gap: 7px;
  min-inline-size: 128px;
}
.pricing-v2 .pricing-comparison-plan-head strong {
  color: var(--pricing-text);
  font: 800 14px/1.1 var(--font-ui);
}
.pricing-v2 .pricing-comparison-price {
  display: grid;
  gap: 2px;
}
.pricing-v2 .pricing-comparison-price b {
  color: var(--pricing-text);
  font: 800 clamp(24px, 2vw, 32px)/0.95 var(--font-display);
  white-space: nowrap;
}
.pricing-v2 .pricing-comparison-price span,
.pricing-v2 .pricing-comparison-plan-head em {
  color: var(--pricing-body);
  font: 700 11px/1.2 var(--font-ui);
  font-style: normal;
}
.pricing-v2 .pricing-comparison-plan-head [data-comparison-total] {
  color: var(--pricing-text);
  font-weight: 850;
}
.pricing-v2 .pricing-comparison-sticky-grid .pricing-run-tabs {
  inline-size: fit-content;
  grid-template-columns: repeat(3, 28px);
  padding: 1px;
}
.pricing-v2 .pricing-comparison-sticky-grid .pricing-run-tabs button {
  min-block-size: 24px;
  font-size: 11px;
}
.pricing-v2 .pricing-comparison tbody th {
  color: var(--pricing-text);
  font-weight: 750;
}
.pricing-v2 .pricing-comparison td {
  color: var(--pricing-body);
}
.pricing-v2 .pricing-choice-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.pricing-v2 .pricing-choice-board article,
.pricing-v2 .pricing-factor-grid article {
  border: 1px solid var(--pricing-line);
  border-radius: 18px;
  background: var(--pricing-surface);
  padding: clamp(24px, 2.4vw, 34px);
}
.pricing-v2 .pricing-choice-board article {
  min-block-size: 270px;
}
.pricing-v2 .pricing-choice-board article:nth-child(1) { background: oklch(95% 0.035 258); }
.pricing-v2 .pricing-choice-board article:nth-child(2) { background: oklch(96% 0.045 82); }
.pricing-v2 .pricing-choice-board article:nth-child(3) { background: oklch(96% 0.04 148); }
.pricing-v2 .pricing-choice-board article:nth-child(4) { background: #F2F4F3; }
.pricing-v2 .pricing-factor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pricing-v2 .pricing-factor-grid article {
  min-block-size: 230px;
}
.pricing-v2 .pricing-calculator {
  display: grid;
  grid-template-columns: minmax(540px, 1fr) minmax(360px, 0.72fr);
  gap: 18px;
  align-items: start;
}
.pricing-v2 .pricing-calc-main,
.pricing-v2 .pricing-calc-options {
  padding: clamp(22px, 2.6vw, 34px);
}
.pricing-v2 .pricing-calc-main {
  min-block-size: 0;
  display: grid;
  align-content: start;
  gap: 22px;
}
.pricing-v2 .pricing-calc-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
}
.pricing-v2 .pricing-calc-top strong {
  color: var(--pricing-ink);
  font: 700 clamp(48px, 5vw, 76px)/1 var(--font-display);
}
.pricing-v2 .pricing-range {
  inline-size: 100%;
  accent-color: var(--pricing-blue);
}
.pricing-v2 .pricing-range-labels {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  color: var(--pricing-muted);
  font-weight: 700;
  margin-block-start: -18px;
}
.pricing-v2 .pricing-range-labels span:last-child {
  text-align: end;
}
.pricing-v2 .pricing-included {
  display: grid;
  grid-template-columns: minmax(210px, 0.74fr) minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 8px;
  align-items: start;
  border-block-start: 1px solid var(--pricing-line);
  padding-block-start: 22px;
}
.pricing-v2 .pricing-included h3,
.pricing-v2 .pricing-included p {
  margin: 0;
}
.pricing-v2 .pricing-included-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 2;
  grid-row: 1 / span 2;
}
.pricing-v2 .pricing-calc-options {
  display: grid;
  gap: 12px;
}
.pricing-v2 .pricing-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pricing-v2 .pricing-option-row,
.pricing-v2 .pricing-option-card {
  border: 1px solid var(--pricing-line);
  border-radius: 14px;
  background: var(--pricing-surface);
  color: var(--pricing-ink);
  font-weight: 700;
}
.pricing-v2 .pricing-option-row {
  display: flex;
  min-block-size: 50px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.pricing-v2 .pricing-option-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
  padding: 14px;
}
.pricing-v2 .pricing-option-card > input {
  margin-block-start: 3px;
}
.pricing-v2 .pricing-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pricing-v2 .pricing-option-head i {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid var(--pricing-line);
  border-radius: 999px;
  color: var(--pricing-blue);
  background: oklch(98% 0.012 258);
  font: 800 13px/1 var(--font-ui);
  font-style: normal;
}
.pricing-v2 .pricing-option-list {
  grid-column: 2;
  color: var(--pricing-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.38;
}
.pricing-v2 .pricing-calc-options input {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--pricing-blue);
}
.pricing-v2 .pricing-calc-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 0.82fr);
  column-gap: 18px;
  gap: 8px;
  margin-block-start: 0;
  border-radius: 18px;
  background: oklch(95% 0.035 258);
  padding: 18px;
}
.pricing-v2 .pricing-calc-summary > span {
  grid-column: 1 / -1;
}
.pricing-v2 .pricing-calc-summary strong {
  font-size: clamp(20px, 1.45vw, 24px);
  line-height: 1.15;
}
.pricing-v2 .pricing-calc-summary p {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
}
.pricing-v2 .pricing-contact {
  background:
    radial-gradient(circle at 86% 16%, oklch(60% 0.2 258 / 0.25), transparent 32%),
    linear-gradient(135deg, oklch(19% 0.04 257), oklch(24% 0.05 257));
}
.pricing-v2 .pricing-contact-grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(430px, 0.78fr);
  gap: clamp(42px, 6vw, 92px);
  align-items: start;
}
.pricing-v2 .pricing-contact-lead {
  color: oklch(98% 0.006 257);
  font: 650 clamp(28px, 3vw, 42px)/1.14 var(--font-display);
}
.pricing-v2 .pricing-contact .demo-form {
  border-color: oklch(98% 0.006 257 / 0.16);
  background: oklch(99% 0.006 257);
}
.pricing-v2 .demo-form .field:nth-child(3) {
  min-block-size: 132px;
  align-items: flex-start;
  padding-block: 14px;
}

@media (max-width: 1180px) {
  .pricing-v2 .pricing-hero-grid,
  .pricing-v2 .pricing-section-head.split,
  .pricing-v2 .pricing-calculator,
  .pricing-v2 .pricing-contact-grid {
    grid-template-columns: 1fr;
  }
  .pricing-v2 .pricing-plan-grid,
  .pricing-v2 .pricing-factor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing-v2 .pricing-choice-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .pricing-v2 {
    --pricing-h2: clamp(28px, 7vw, 34px);
  }
  .pricing-v2 .pricing-hero,
  .pricing-v2 .pricing-section {
    padding-block: 52px;
  }
  .pricing-v2 h1 {
    font-size: clamp(38px, 10.2vw, 48px);
  }
  .pricing-v2 .pricing-hero-visual {
    min-block-size: 320px;
  }
  .pricing-v2 .pricing-plan-grid,
  .pricing-v2 .pricing-choice-board,
  .pricing-v2 .pricing-factor-grid {
    grid-template-columns: 1fr;
  }
  .pricing-v2 .pricing-comparison-head {
    display: grid;
  }
  .pricing-v2 .pricing-comparison-head .btn {
    inline-size: 100%;
    justify-content: center;
  }
  .pricing-v2 .pricing-plan-card {
    min-block-size: auto;
    grid-template-rows: auto auto 1fr;
  }
  .pricing-v2 .pricing-plan-card > div:first-child {
    min-block-size: auto;
  }
  .pricing-v2 .pricing-comparison-scroll {
    overflow-x: auto;
    padding-block-start: 1px;
  }
  .pricing-v2 .pricing-comparison table {
    min-inline-size: 980px;
  }
  .pricing-v2 .pricing-comparison-sticky-grid {
    min-inline-size: 980px;
    inset-block-start: 68px;
  }
  .pricing-v2 .pricing-calc-top {
    display: grid;
  }
  .pricing-v2 .pricing-range-labels {
    font-size: 12px;
  }
  .pricing-v2 .pricing-included {
    grid-template-columns: 1fr;
  }
  .pricing-v2 .pricing-included-pills {
    grid-column: auto;
    grid-row: auto;
  }
  .pricing-v2 .pricing-calc-summary {
    grid-template-columns: 1fr;
  }
  .pricing-v2 .pricing-option-grid {
    grid-template-columns: 1fr;
  }
}

/* Requested mockup pass: structure, quieter TOC, task matrix, FAQ, and mobile flow. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

.features-index {
  padding-block: 10px;
  background: #FBFCFF;
}
.features-index-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 0;
  border-block: 1px solid var(--features-line);
  border-radius: 0;
  background: transparent;
}
.features-index-grid a {
  min-block-size: 58px;
  gap: 5px;
  padding: 12px 10px;
  color: #344054;
}
.features-index-grid strong {
  font-size: 15px;
}

.features-task-grid.features-task-matrix {
  inline-size: min(1200px, calc(100% - 48px));
  margin-inline: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-inline: 0;
}
.features-task-matrix article {
  grid-template-rows: auto;
  min-block-size: 360px;
  align-content: start;
  padding: clamp(22px, 2.4vw, 32px);
}
.features-task-matrix span {
  color: #285DFF;
  font: 700 12px/1 var(--font-ui);
}
.features-task-matrix ul {
  display: grid;
  gap: 9px;
  margin-block-start: 10px;
  padding: 0;
  list-style: none;
}
.features-task-matrix li {
  margin: 0;
  border: 1px solid #D7DFEA;
  border-radius: 999px;
  background: #FFFFFF;
  padding: 9px 12px;
  color: #111827;
  font-weight: 700;
}
.features-task-matrix .answer { background: #EEF5FF; }
.features-task-matrix .visual { background: #FFF6E8; }
.features-task-matrix .media { background: #ECF8EF; }
.features-task-matrix .risk { background: #FFF0EE; }

.features-host-visual {
  min-block-size: 680px;
}

.features-faq-section,
.formats-faq-section {
  padding-block: clamp(64px, 7vw, 104px);
  background: #FBFCFF;
  border-block-end: 1px solid #D7DFEA;
}
.features-faq-grid,
.formats-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.features-faq-grid details,
.formats-faq-grid details {
  border: 1px solid #D7DFEA;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 20px;
}
.features-faq-grid summary,
.formats-faq-grid summary {
  color: #111827;
  cursor: pointer;
  font-weight: 700;
}
.features-faq-grid p,
.formats-faq-grid p {
  margin-block-start: 12px;
  color: #667085;
}

.seo-faq-section {
  padding-block: clamp(64px, 7vw, 104px);
  background: #FBFCFF;
  border-block-end: 1px solid #D7DFEA;
}

.seo-faq-head {
  max-inline-size: 820px;
  margin-block-end: clamp(24px, 3vw, 36px);
}

.seo-faq-head h2 {
  margin: 0;
}

.seo-faq-head p:not(.eyebrow) {
  margin: 12px 0 0;
  color: #667085;
  max-inline-size: 68ch;
}

.seo-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 14px;
}

.seo-faq-grid details {
  border: 1px solid #D7DFEA;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 20px;
  min-block-size: 104px;
  block-size: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.seo-faq-grid:has(details[open]) {
  grid-auto-rows: auto;
}

.seo-faq-grid details[open] {
  border-color: #BFD0EA;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.06);
}

.seo-faq-grid summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: #111827;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.32;
}

.seo-faq-grid summary::-webkit-details-marker {
  display: none;
}

.seo-faq-grid summary::marker {
  content: "";
}

.seo-faq-grid summary::after {
  content: "+";
  flex: 0 0 auto;
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #EEF3FF;
  color: #285DFF;
  font-weight: 700;
  line-height: 1;
}

.seo-faq-grid details[open] summary::after {
  content: "−";
}

.seo-faq-grid p {
  margin: 12px 0 0;
  color: #667085;
  font-size: 15.5px;
  line-height: 1.56;
}

.seo-faq-grid a {
  color: #285DFF;
  font-weight: 600;
  text-decoration: none;
}

.seo-faq-grid a:hover {
  color: #1746D6;
  text-decoration: underline;
}

.formats-theme-section .formats-section-head.single h2 {
  max-inline-size: 1120px;
}

@media (min-width: 721px) {
  .formats-theme-section > .container.formats-section-head.single {
    inline-size: min(1320px, calc(100% - 48px)) !important;
    max-inline-size: 1320px !important;
  }
}

.agencies-v2 .agency-surface-main {
  background: #FBFCFF;
}
.agencies-v2 .agency-surface-main .agency-center-visual {
  min-block-size: 480px;
  box-shadow: 0 26px 74px rgba(16,24,40,0.08);
}
.agencies-v2 .agency-event-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.agencies-v2 .agency-event-list article {
  min-block-size: 150px;
  padding: clamp(18px, 2vw, 24px);
}
.agencies-v2 .agency-event-list h3 {
  font-size: clamp(19px, 1.35vw, 22px);
}

.pricing-v2 .pricing-factor-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pricing-v2 .pricing-factor-grid article {
  min-block-size: 190px;
}

@media (max-width: 1180px) {
  .features-index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .features-task-grid.features-task-matrix,
  .pricing-v2 .pricing-factor-grid,
  .agencies-v2 .agency-event-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .container {
    inline-size: min(100% - 32px, 1200px);
  }
  .nav {
    min-inline-size: 0;
  }
  .brand {
    min-inline-size: 0;
  }
  .brand span:last-child {
    max-inline-size: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-actions {
    flex-shrink: 0;
    gap: 8px;
  }
  .btn.mobile {
    padding-inline: 12px;
  }
  .cta-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .cta-row .btn {
    inline-size: 100%;
    justify-content: center;
    min-block-size: 48px;
    text-align: center;
    white-space: normal;
  }
  .features-page h1,
  .formats-page h1,
  .agencies-v2 h1,
  .companies-v2 h1,
  .pricing-v2 h1 {
    max-inline-size: 100%;
    font-size: clamp(34px, 9.2vw, 44px);
    line-height: 1.06;
    text-wrap: balance;
  }
  .features-page h2,
  .formats-page h2,
  .agencies-v2 h2,
  .companies-v2 h2,
  .pricing-v2 h2 {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }
  .features-index-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border: 0;
    padding-inline: 16px;
    scroll-snap-type: x mandatory;
  }
  .features-index-grid a {
    flex: 0 0 auto;
    min-block-size: 50px;
    min-inline-size: 142px;
    border: 1px solid var(--features-line);
    border-radius: 999px;
    background: #FFFFFF;
    scroll-snap-align: start;
  }
  .features-index-grid a + a,
  .features-index-grid a:nth-child(3),
  .features-index-grid a:nth-child(4) {
    border-inline-start: 1px solid var(--features-line);
    border-block-start: 0;
  }
  .features-social-cards,
  .features-task-grid.features-task-matrix,
  .features-brand-cards,
  .features-faq-grid,
  .formats-faq-grid,
  .seo-faq-grid,
  .pricing-v2 .pricing-factor-grid {
    grid-template-columns: 1fr;
  }
  .features-social-card,
  .features-task-matrix article,
  .features-brand-cards article {
    min-block-size: auto;
  }
  .features-host-grid {
    inline-size: auto;
    margin-inline: auto;
    padding-inline: 0;
  }
  .features-host-visual {
    min-block-size: auto;
  }
  .features-host-actions {
    grid-template-columns: 1fr;
  }
  .features-screen-head {
    grid-template-columns: 1fr;
  }
  .features-screen-head .eyebrow,
  .features-screen-head h2,
  .features-screen-head > p {
    grid-column: auto;
    grid-row: auto;
  }
  .formats-theme-board,
  .companies-v2 .company-use-board,
  .agencies-v2 .agency-event-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    border: 0;
    background: transparent;
    scroll-snap-type: x mandatory;
  }
  .formats-theme-board article,
  .companies-v2 .company-use-board article,
  .agencies-v2 .agency-event-list article {
    flex: 0 0 min(82vw, 340px);
    min-block-size: auto;
    scroll-snap-align: start;
  }
  .formats-theme-board,
  .features-social-cards {
    padding-inline: 16px;
  }
  .agencies-v2 .agency-constructor-compact .agency-center-visual,
  .companies-v2 .company-content-visual,
  .pricing-v2 .pricing-hero-visual {
    min-block-size: auto;
  }
  .pricing-v2 .pricing-factor-grid article {
    min-block-size: auto;
  }
}

@media (max-width: 820px) {
  .home-format-band,
  .features-page .features-social-cards,
  .features-task-grid,
  .features-task-grid.features-task-matrix,
  .features-host-grid,
  .wide-container,
  .full-width-band,
  .interactive-carousel-shell,
  .formats-gallery-shell,
  .formats-carousel,
  .formats-theme-board {
    inline-size: auto;
    max-inline-size: 100%;
    margin-inline: 0;
    inset-inline-start: auto;
  }
  .interactive-carousel-shell,
  .formats-gallery-shell {
    padding-inline: 0;
  }
  .features-task-head h2 {
    white-space: normal;
  }
  .features-page h1,
  .features-page h2,
  .features-page h3,
  .formats-page h1,
  .formats-page h2,
  .formats-page h3,
  .agencies-v2 h1,
  .agencies-v2 h2,
  .agencies-v2 h3,
  .companies-v2 h1,
  .companies-v2 h2,
  .companies-v2 h3,
  .pricing-v2 h1,
  .pricing-v2 h2,
  .pricing-v2 h3,
  .features-page p,
  .formats-page p,
  .agencies-v2 p,
  .companies-v2 p,
  .pricing-v2 p {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .btn.mobile {
    display: none;
  }
  .nav {
    gap: 12px;
  }
  .burger {
    inline-size: 38px;
    block-size: 38px;
  }
}

/* User correction pass: desktop sticky nav, font stability, full-width headings, compact host block. */
html {
  scroll-padding-top: 92px;
}

body {
  font-synthesis-weight: none;
}

@media (min-width: 1101px) {
  body {
    padding-block-start: 68px;
  }

  .topbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1000;
  }
}

@media (min-width: 821px) {
  .section:not(.compact):not(.module-band) .section-head,
  .module-band .section-head,
  .section.compact.module-band .section-head,
  .home-section-head,
  .features-section-head,
  .features-social-head,
  .features-brand-head,
  .features-screen-head,
  .formats-section-head,
  .formats-section-head.split,
  .formats-section-head.single,
  .agencies-v2 .agency-section-head,
  .companies-v2 .company-section-head,
  .pricing-v2 .pricing-section-head,
  .pricing-v2 .pricing-section-head.split {
    display: block;
    max-inline-size: none;
  }

  .section-head > p:last-child,
  .section-head > div,
  .section-head > div > p,
  .home-section-head > p:last-child,
  .home-section-head > p:not(.eyebrow),
  .home-section-head h2,
  .features-section-head h2,
  .features-section-head > p,
  .features-social-head h2,
  .features-brand-head h2,
  .features-screen-head h2,
  .features-screen-head > p,
  .formats-section-head h2,
  .formats-section-head > p,
  .formats-section-head.split > p,
  .formats-section-head.single h2,
  .agencies-v2 .agency-section-head > p,
  .companies-v2 .company-section-head > p,
  .pricing-v2 .pricing-section-head > p {
    grid-column: auto;
    grid-row: auto;
    max-inline-size: none;
  }

  .section:not(.compact):not(.module-band) .section-head > p:last-child,
  .module-band .section-head > p:last-child,
  .section.compact.module-band .section-head > p:last-child,
  .features-section-head > p {
    margin-block-start: 16px;
  }
}

.features-page .features-host-grid {
  inline-size: min(1200px, calc(100% - 48px));
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: 0;
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
}

@media (min-width: 1181px) {
  .features-page .features-host-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.52fr);
  }
}

.features-host-copy h2 {
  max-inline-size: none;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.12;
}

.features-task-head h2 {
  white-space: normal;
}

.features-host-copy > p {
  max-inline-size: none;
  margin-block-start: 16px;
  font-size: 18px;
  line-height: 1.62;
}

.features-host-actions {
  gap: 16px;
  margin-block-start: 24px;
}

@media (min-width: 821px) {
  .features-host-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.features-host-actions article {
  min-block-size: 150px;
  gap: 10px;
  border-radius: 12px;
  padding: 20px;
}

.features-host-actions strong {
  font: 700 20px/1.22 var(--font-display);
}

.features-host-actions p {
  font-size: 15px;
  line-height: 1.5;
}

.features-host-visual {
  min-block-size: 480px;
  border-radius: 16px;
  padding: 20px;
  gap: 16px;
}

.features-host-pill {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
}

.features-host-mini-grid article {
  min-block-size: 104px;
}

@media (max-width: 1180px) {
  .features-page .features-host-grid {
    grid-template-columns: 1fr;
  }

  .features-host-visual {
    min-block-size: 420px;
  }
}

@media (max-width: 820px) {
  .features-host-actions {
    grid-template-columns: 1fr;
  }

  .features-host-visual {
    min-block-size: auto;
  }
}

/* Warm premium visual system pass for play.smartio.pro. */
:root {
  --bg: #FAF3E9;
  --surface: #FFFDF8;
  --fg: #0A0B0D;
  --muted: #5F625E;
  --border: rgba(10, 11, 13, 0.13);
  --accent: #0052FF;
  --success: #06906F;
  --warn: #C98500;
  --danger: #D14B35;

  --color-bg: #FAF3E9;
  --color-bg-alt: #FFF8EF;
  --color-surface: #FFFDF8;
  --color-surface-strong: #FFFFFF;
  --color-text: #0A0B0D;
  --color-muted: #5F625E;
  --color-border: rgba(10, 11, 13, 0.13);
  --color-border-soft: rgba(10, 11, 13, 0.08);
  --color-primary: #0052FF;
  --color-primary-hover: #003ECC;
  --color-primary-pressed: #002F99;
  --color-primary-soft: #EAF1FF;
  --color-dark: #101216;
  --color-dark-panel: #191B20;
  --color-dark-border: rgba(255, 248, 239, 0.16);

  --radius-card: 14px;
  --radius-panel: 18px;
  --radius-hero: 24px;
  --shadow-soft: 0 12px 34px rgba(10, 11, 13, 0.06);
  --shadow-panel: 0 22px 70px rgba(10, 11, 13, 0.10);
  --shadow-hero: 0 32px 90px rgba(10, 11, 13, 0.12);
  --pattern-line: rgba(10, 11, 13, 0.032);
  --pattern-blue-line: rgba(0, 82, 255, 0.035);
}

html {
  background: var(--color-bg);
}

body {
  background:
    linear-gradient(90deg, var(--pattern-line) 1px, transparent 1px),
    linear-gradient(0deg, var(--pattern-line) 1px, transparent 1px),
    var(--color-bg);
  background-size: 56px 56px, 56px 56px, auto;
  color: var(--color-text);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -18vh -10vw auto;
  block-size: 56vh;
  pointer-events: none;
  opacity: 0.68;
  background:
    repeating-linear-gradient(112deg, transparent 0 34px, rgba(0, 82, 255, 0.045) 35px 36px, transparent 37px 84px),
    linear-gradient(180deg, rgba(255, 248, 239, 0.78), transparent 72%);
  transform: perspective(900px) rotateX(58deg) scale(1.12);
  transform-origin: center top;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

h1,
h2,
h3 {
  color: var(--color-text);
  text-wrap: balance;
}

p,
li,
summary {
  color: var(--color-muted);
}

.lead,
.home-page .lead,
.features-page .lead,
.formats-page .lead,
.agencies-v2 .agency-lead,
.companies-v2 .company-lead,
.pricing-v2 .pricing-lead {
  max-inline-size: 760px;
  color: color-mix(in oklch, var(--color-text) 68%, var(--color-muted));
  font-size: clamp(18px, 1.38vw, 22px);
  line-height: 1.56;
}

.home-page h1,
.features-page h1,
.formats-page h1,
.agencies-v2 h1,
.companies-v2 h1,
.pricing-v2 h1 {
  max-inline-size: 980px;
  color: var(--color-text);
  font-size: clamp(50px, 4.65vw, 68px);
  line-height: 1;
  letter-spacing: -0.015em;
}

.features-page h1,
.formats-page h1,
.agencies-v2 h1,
.companies-v2 h1,
.pricing-v2 h1 {
  max-inline-size: 940px;
  font-size: clamp(50px, 4.55vw, 66px);
  line-height: 1.03;
}

.home-page h2,
.features-page h2,
.formats-page h2,
.agencies-v2 h2,
.companies-v2 h2,
.pricing-v2 h2,
.section-head h2,
.home-section-head h2 {
  color: var(--color-text);
  font-size: clamp(38px, 3.55vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.home-page h3,
.features-page h3,
.formats-page h3,
.agencies-v2 h3,
.companies-v2 h3,
.pricing-v2 h3,
.card h3 {
  color: var(--color-text);
  font-size: clamp(20px, 1.45vw, 24px);
  line-height: 1.2;
}

.eyebrow,
.home-ui-kicker,
.media-tag,
.features-index-grid span,
.features-module-list span,
.formats-hero-screen span,
.agencies-v2 .agency-step b,
.agencies-v2 .agency-workflow-steps b,
.agencies-v2 .agency-event-list span,
.companies-v2 .company-admin-slot > span,
.companies-v2 .company-live-screen > span,
.companies-v2 .company-content-visual > span,
.companies-v2 .company-social-stage > span,
.companies-v2 .company-brand-preview > span,
.pricing-v2 .pricing-hero-visual > span,
.pricing-v2 .pricing-calc-summary > span {
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

.topbar {
  background: color-mix(in oklch, var(--color-bg-alt) 88%, transparent);
  border-block-end: 1px solid var(--color-border-soft);
  box-shadow: 0 10px 32px rgba(10, 11, 13, 0.04);
}

.navlinks {
  border-color: var(--color-border-soft);
  background: color-mix(in oklch, var(--color-surface) 86%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.navlinks a {
  color: color-mix(in oklch, var(--color-text) 58%, var(--color-muted));
}

.navlinks a:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.navlinks a[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.btn {
  min-block-size: 46px;
  border-color: var(--color-border);
  background: color-mix(in oklch, var(--color-surface) 94%, var(--color-bg-alt));
  color: var(--color-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.btn:hover {
  border-color: color-mix(in oklch, var(--color-primary) 34%, var(--color-border));
  background: var(--color-primary-soft);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.btn.primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #FFFDF8;
  box-shadow: 0 14px 30px rgba(0, 82, 255, 0.20);
}

.btn.primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: #FFFDF8;
}

.btn.primary:active {
  border-color: var(--color-primary-pressed);
  background: var(--color-primary-pressed);
  transform: translateY(0);
}

.home-page,
.features-page,
.formats-page,
.agencies-v2,
.companies-v2,
.pricing-v2 {
  --home-dark: var(--color-dark);
  --home-dark-2: var(--color-dark-panel);
  --home-line: var(--color-border-soft);
  --home-soft: var(--color-bg-alt);
  --features-line: var(--color-border-soft);
  --features-soft: var(--color-bg-alt);
  --formats-line: var(--color-border-soft);
  --formats-soft: var(--color-bg-alt);
  --formats-blue: var(--color-primary);
  --agency-line: var(--color-border-soft);
  --agency-soft: var(--color-bg-alt);
  --agency-surface: var(--color-surface);
  --company-line: var(--color-border-soft);
  --company-soft: var(--color-bg-alt);
  --company-surface: var(--color-surface);
  --pricing-line: var(--color-border-soft);
  --pricing-soft: var(--color-bg-alt);
  --pricing-surface: var(--color-surface);
  background: var(--color-bg);
  color: var(--color-text);
}

.home-page section,
.features-page section,
.formats-page section,
.agencies-v2 .agency-hero,
.agencies-v2 .agency-section,
.companies-v2 .company-hero,
.companies-v2 .company-section,
.pricing-v2 .pricing-hero,
.pricing-v2 .pricing-section,
.section {
  border-block-end: 1px solid var(--color-border-soft);
}

.home-hero,
.features-hero,
.formats-hero,
.agencies-v2 .agency-hero,
.companies-v2 .company-hero,
.pricing-v2 .pricing-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--pattern-line) 1px, transparent 1px),
    linear-gradient(0deg, var(--pattern-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  background-size: 56px 56px, 56px 56px, auto;
}

.home-hero::before,
.features-hero::before,
.formats-hero::before,
.agencies-v2 .agency-hero::before,
.companies-v2 .company-hero::before,
.pricing-v2 .pricing-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34% -16% auto;
  block-size: 78%;
  opacity: 0.58;
  pointer-events: none;
  background:
    repeating-linear-gradient(112deg, transparent 0 34px, var(--pattern-blue-line) 35px 36px, transparent 37px 88px),
    linear-gradient(180deg, rgba(255, 253, 248, 0.74), transparent 72%);
  transform: perspective(900px) rotateX(58deg) scale(1.08);
  transform-origin: center top;
}

.home-hero > .container,
.features-hero > .container,
.formats-hero > .container,
.agencies-v2 .agency-hero > .container,
.companies-v2 .company-hero > .container,
.pricing-v2 .pricing-hero > .container {
  position: relative;
  z-index: 1;
}

.home-social-proof,
.home-formats-section,
.features-task-section,
.features-faq-section,
.formats-theme-section,
.formats-faq-section,
.agencies-v2 .agency-light,
.agencies-v2 .agency-surface-main,
.companies-v2 .company-soft,
.pricing-v2 .pricing-soft {
  background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.026) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.022) 1px, transparent 1px),
    var(--color-bg-alt);
  background-size: 72px 72px, 72px 72px, auto;
}

.home-thesis,
.home-system-section,
.home-launch-section,
.home-audience-section,
.features-social-section,
.features-modules-section,
.features-live-section,
.features-brand-section,
.features-screen-section,
.formats-path-section,
.formats-mechanics-section,
.formats-interactive-section,
.formats-fit-section,
.formats-build-section,
.agencies-v2 .agency-section,
.companies-v2 .company-section,
.pricing-v2 .pricing-section {
  background: var(--color-bg);
}

.card,
.link-card,
.demo-form,
.features-social-card,
.features-task-grid article,
.features-host-actions article,
.features-brand-cards article,
.features-screen-cards article,
.features-faq-grid details,
.formats-faq-grid details,
.formats-hero-card,
.formats-format-card,
.formats-theme-board article,
.formats-fit-card,
.formats-custom-panel,
.agencies-v2 .agency-project-steps,
.agencies-v2 .agency-proof-callout,
.agencies-v2 .agency-two-lanes > article,
.agencies-v2 .agency-faq-grid details,
.agencies-v2 .agency-route-card,
.agencies-v2 .agency-event-list article,
.agencies-v2 .agency-library-points article,
.companies-v2 .company-use-board article,
.companies-v2 .company-content-cards article,
.companies-v2 .company-mechanics-board article,
.companies-v2 .company-custom-grid article,
.companies-v2 .company-step-list article,
.companies-v2 .company-live-side article,
.companies-v2 .company-route-card,
.companies-v2 .company-social-rail article,
.pricing-v2 .pricing-plan-card,
.pricing-v2 .pricing-choice-board article,
.pricing-v2 .pricing-factor-grid article,
.pricing-v2 .pricing-option-row,
.pricing-v2 .pricing-option-card {
  border-color: var(--color-border-soft);
  border-radius: var(--radius-card);
  background: color-mix(in oklch, var(--color-surface) 92%, var(--color-bg-alt));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

.home-orchestration,
.home-loop-stage,
.home-system-demo,
.features-hero-orbit,
.features-module-stage,
.features-social-proof,
.features-host-visual,
.features-brand-visual,
.formats-hero-visual,
.formats-mechanics-stage,
.formats-custom-visual,
.agencies-v2 .agency-hero-stage,
.agencies-v2 .agency-project-visual,
.agencies-v2 .agency-center-visual,
.agencies-v2 .agency-media-stack > div,
.agencies-v2 .agency-brand-visual,
.agencies-v2 .agency-workflow-visual,
.agencies-v2 .agency-brief-console,
.agencies-v2 .agency-output-screen,
.companies-v2 .company-hero-visual,
.companies-v2 .company-admin-slot,
.companies-v2 .company-live-screen,
.companies-v2 .company-content-visual,
.companies-v2 .company-social-stage,
.companies-v2 .company-brand-preview,
.pricing-v2 .pricing-hero-visual,
.pricing-v2 .pricing-calc-main,
.pricing-v2 .pricing-calc-options {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-hero);
  background:
    linear-gradient(90deg, rgba(0, 82, 255, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #FFFDF8 0%, #FFF8EF 100%);
  background-size: 48px 48px, 48px 48px, auto;
  box-shadow: var(--shadow-panel);
}

.home-screen,
.features-social-proof,
.features-final-cta,
.formats-final-cta,
.agencies-v2 .agency-contact-dark,
.companies-v2 .company-dark,
.home-final-cta,
.pricing-v2 .pricing-contact {
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 248, 239, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, var(--color-dark), var(--color-dark-panel));
  background-size: 56px 56px, 56px 56px, auto;
  color: #FFF8EF;
}

.home-final-cta h2,
.features-final-cta h2,
.formats-final-cta h2,
.agencies-v2 .agency-contact-dark h2,
.companies-v2 .company-dark h2,
.pricing-v2 .pricing-contact h2,
.home-screen strong,
.features-social-proof strong,
.companies-v2 .company-live-screen strong {
  color: #FFF8EF;
}

.home-final-cta p,
.features-final-cta p,
.formats-final-cta p,
.agencies-v2 .agency-contact-dark p,
.companies-v2 .company-dark p,
.pricing-v2 .pricing-contact p,
.home-screen p,
.home-screen span,
.features-social-proof p,
.features-social-proof span {
  color: rgba(255, 248, 239, 0.74);
}

.home-section-head > p:last-child,
.section-head > p:last-child,
.features-section-head > p,
.formats-section-head > p,
.agencies-v2 .agency-section-head > p,
.companies-v2 .company-section-head > p,
.pricing-v2 .pricing-section-head > p {
  border-color: var(--color-border-soft);
  color: var(--color-muted);
}

.field,
input,
textarea,
select {
  border-color: var(--color-border);
  background: color-mix(in oklch, var(--color-surface) 96%, var(--color-bg-alt));
  color: var(--color-muted);
}

.demo-form {
  box-shadow: var(--shadow-soft);
}

.features-form,
.agencies-v2 .agency-contact-dark .demo-form,
.pricing-v2 .pricing-contact .demo-form {
  border-color: var(--color-dark-border);
  background: color-mix(in oklch, var(--color-dark-panel) 72%, #FFF8EF);
}

.features-form .field,
.agencies-v2 .agency-contact-dark .field,
.pricing-v2 .pricing-contact .field {
  border-color: rgba(255, 248, 239, 0.18);
  background: rgba(255, 248, 239, 0.06);
  color: rgba(255, 248, 239, 0.74);
}

.features-card-media,
.theme-game-media,
.question-image-slot,
.media-stage,
.asset-slot,
.formats-gallery-shell,
.interactive-carousel-shell {
  border-color: color-mix(in oklch, var(--color-primary) 18%, var(--color-border));
  background:
    linear-gradient(135deg, rgba(0, 82, 255, 0.075), transparent 54%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.025) 1px, transparent 1px),
    var(--color-surface);
  background-size: auto, 42px 42px, auto;
  color: color-mix(in oklch, var(--color-text) 50%, var(--color-muted));
}

.home-fit-row span,
.features-social-tags span,
.pricing-v2 .pricing-hero-pills i,
.pricing-v2 .pricing-included-pills span,
.companies-v2 .company-mini-tabs i,
.agencies-v2 .agency-surface-orbit span,
.formats-carousel-tag,
.page-nav a {
  border-color: var(--color-border-soft);
  background: color-mix(in oklch, var(--color-surface) 88%, var(--color-primary-soft));
  color: var(--color-text);
}

.features-social-card.talk,
.features-task-grid article:nth-child(1),
.agencies-v2 .agency-benefit-strip article:nth-child(1),
.companies-v2 .company-content-cards article:nth-child(1),
.companies-v2 .company-mechanics-board article:nth-child(1),
.pricing-v2 .pricing-choice-board article:nth-child(1),
.pricing-v2 .pricing-calc-summary {
  background: color-mix(in oklch, var(--color-primary-soft) 62%, var(--color-surface));
}

.features-social-card.rewards,
.agencies-v2 .agency-benefit-strip article:nth-child(2),
.companies-v2 .company-content-cards article:nth-child(2),
.companies-v2 .company-mechanics-board article:nth-child(2),
.pricing-v2 .pricing-choice-board article:nth-child(2),
.pricing-v2 .pricing-plan-card.emphasized {
  background: color-mix(in oklch, #FFF0C2 54%, var(--color-surface));
}

.features-social-card.inserts,
.agencies-v2 .agency-benefit-strip article:nth-child(3),
.companies-v2 .company-content-cards article:nth-child(3),
.companies-v2 .company-mechanics-board article:nth-child(3),
.pricing-v2 .pricing-choice-board article:nth-child(3) {
  background: color-mix(in oklch, #E6F7EE 58%, var(--color-surface));
}

.features-social-card.shared,
.agencies-v2 .agency-benefit-strip article:nth-child(4),
.companies-v2 .company-content-cards article:nth-child(4),
.companies-v2 .company-mechanics-board article:nth-child(4),
.pricing-v2 .pricing-choice-board article:nth-child(4) {
  background: color-mix(in oklch, #EEF1F2 58%, var(--color-surface));
}

.features-index {
  background: color-mix(in oklch, var(--color-bg-alt) 70%, var(--color-bg));
}

.features-index-grid {
  border-color: var(--color-border-soft);
}

.features-index-grid a {
  color: var(--color-muted);
}

.features-index-grid a:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.formats-hero-card.ready b,
.formats-hero-card.live b,
.formats-hero-card.custom b,
.link-card strong,
.agency-route-card strong,
.company-route-card strong,
.pricing-v2 .pricing-option-head i {
  color: var(--color-primary);
}

.pricing-v2 .pricing-range {
  accent-color: var(--color-primary);
}

@media (max-width: 820px) {
  body {
    background-size: 76px 76px, 76px 76px, auto;
  }

  body::before,
  .home-hero::before,
  .features-hero::before,
  .formats-hero::before,
  .agencies-v2 .agency-hero::before,
  .companies-v2 .company-hero::before,
  .pricing-v2 .pricing-hero::before {
    opacity: 0.28;
    transform: none;
  }

  .home-page h1,
  .features-page h1,
  .formats-page h1,
  .agencies-v2 h1,
  .companies-v2 h1,
  .pricing-v2 h1 {
    font-size: clamp(36px, 10vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.01em;
  }

  .home-page h2,
  .features-page h2,
  .formats-page h2,
  .agencies-v2 h2,
  .companies-v2 h2,
  .pricing-v2 h2,
  .section-head h2,
  .home-section-head h2 {
    font-size: clamp(29px, 8vw, 36px);
    line-height: 1.12;
  }

  .lead,
  .home-page .lead,
  .features-page .lead,
  .formats-page .lead,
  .agencies-v2 .agency-lead,
  .companies-v2 .company-lead,
  .pricing-v2 .pricing-lead {
    font-size: 17px;
  }

  .home-hero,
  .features-hero,
  .formats-hero,
  .agencies-v2 .agency-hero,
  .companies-v2 .company-hero,
  .pricing-v2 .pricing-hero {
    background:
      linear-gradient(90deg, rgba(10, 11, 13, 0.026) 1px, transparent 1px),
      linear-gradient(0deg, rgba(10, 11, 13, 0.022) 1px, transparent 1px),
      var(--color-bg);
    background-size: 76px 76px, 76px 76px, auto;
  }
}

/* Final correction layer requested after visual pass. Keep this at the end of the file. */
:root {
  --color-surface: #F8EAD6;
  --color-surface-strong: #FFF8EF;
  --color-surface-muted: #F0DEC4;
  --color-surface-deep: #E8D2B3;
  --color-menu: #EFE0C8;
  --color-menu-hover: #EAF1FF;
  --color-soft-amber: #F0DDAA;
  --color-soft-green: #E3EEDB;
  --color-soft-neutral: #EDDDC6;
  --color-inverse: #FFF8EF;
  --surface: #F8EAD6;
  --surface-2: #F0DEC4;
  --surface-3: #E8D2B3;
}

.topbar {
  background: color-mix(in oklch, var(--color-bg) 94%, transparent);
  border-color: rgba(10, 11, 13, 0.12);
  box-shadow: 0 18px 42px rgba(66, 48, 28, 0.12);
}

.navlinks {
  background: var(--color-menu);
  border-color: rgba(10, 11, 13, 0.11);
}

.navlinks a {
  color: rgba(10, 11, 13, 0.68);
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
  background: var(--color-menu-hover);
  color: var(--color-primary);
}

.navlinks a[aria-current="page"]::after {
  background: var(--color-primary);
}

.card,
.link-card,
.mini-step,
.proof-card,
.feature-card,
.feature-v2-card,
.format-card,
.scenario-card,
.admin-card,
.player-card,
.screen-card,
.agency-card,
.company-card,
.pricing-card,
.accordion details,
.demo-form,
.home-case-card,
.home-option-card,
.home-outcome-card,
.home-journey-card,
.home-cta-panel,
.home-feature-card,
.features-builder-card,
.features-task-card,
.features-mechanic-card,
.features-host-card,
.features-brand-card,
.features-screen-player-card,
.formats-format-card,
.formats-template-card,
.formats-mechanic-card,
.formats-custom-card,
.agency-surface-card,
.agency-event-card,
.company-meaning-card,
.company-format-card,
.pricing-factor,
.pricing-scenario-card,
.pricing-choice-board article,
.pricing-include-card {
  background: var(--color-surface);
  border-color: rgba(70, 51, 27, 0.16);
  box-shadow: 0 20px 56px rgba(75, 55, 29, 0.08);
}

.home-format-grid {
  gap: 16px;
}

.home-format-grid .home-format-card,
.home-format-grid .home-format-card.large {
  min-block-size: 220px;
  padding: 22px;
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid rgba(70, 51, 27, 0.16);
  color: var(--color-text);
  box-shadow: 0 20px 52px rgba(75, 55, 29, 0.08);
}

.home-format-grid .home-format-card strong {
  max-inline-size: 20ch;
  color: var(--color-text);
  font: 700 clamp(17px, 1.22vw, 20px)/1.22 var(--font-display);
  letter-spacing: 0;
}

.home-format-grid .home-format-card p {
  max-inline-size: 34ch;
  margin-block-start: 12px;
  color: rgba(10, 11, 13, 0.66);
  font-size: 15.5px;
  line-height: 1.52;
}

.features-social-card.shared,
.agencies-v2 .agency-benefit-strip article:nth-child(4),
.companies-v2 .company-content-cards article:nth-child(4),
.companies-v2 .company-mechanics-board article:nth-child(4),
.pricing-v2 .pricing-choice-board article:nth-child(4),
.pricing-v2 .pricing-include-card:nth-child(4),
.formats-mechanic-card:nth-child(4),
.features-task-matrix .risk,
.features-task-card.is-active {
  background: color-mix(in oklch, var(--color-soft-neutral) 72%, var(--color-surface));
}

.features-social-card.rewards,
.agencies-v2 .agency-benefit-strip article:nth-child(2),
.companies-v2 .company-content-cards article:nth-child(2),
.companies-v2 .company-mechanics-board article:nth-child(2),
.pricing-v2 .pricing-choice-board article:nth-child(2),
.pricing-v2 .pricing-plan-card.emphasized {
  background: color-mix(in oklch, var(--color-soft-amber) 62%, var(--color-surface));
}

.features-social-card.inserts,
.agencies-v2 .agency-benefit-strip article:nth-child(3),
.companies-v2 .company-content-cards article:nth-child(3),
.companies-v2 .company-mechanics-board article:nth-child(3),
.pricing-v2 .pricing-choice-board article:nth-child(3) {
  background: color-mix(in oklch, var(--color-soft-green) 62%, var(--color-surface));
}

.home-loop-stage,
.home-screen,
.home-final-cta,
.features-module-stage,
.features-social-proof,
.features-final-cta,
.formats-custom-stage,
.formats-final-cta,
.agency-stage-screen,
.agencies-v2 .agency-contact-dark,
.company-live-screen,
.companies-v2 .company-dark,
.pricing-v2 .pricing-contact,
.pricing-v2 .pricing-final-cta,
.dark-showcase,
.asset-slot.dark {
  color: var(--color-inverse);
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 248, 239, 0.045) 1px, transparent 1px),
    linear-gradient(112deg, rgba(0, 82, 255, 0.18), transparent 42%),
    linear-gradient(138deg, var(--color-dark), var(--color-dark-panel));
}

.home-final-cta .demo-form,
.features-final-cta .demo-form,
.formats-final-cta .demo-form,
.agencies-v2 .agency-contact-dark .demo-form,
.companies-v2 .company-dark .demo-form,
.pricing-v2 .pricing-contact .demo-form {
  color: var(--color-inverse);
  background: var(--color-dark-panel);
  border-color: rgba(255, 248, 239, 0.16);
}

.home-loop-stage h1,
.home-loop-stage h2,
.home-loop-stage h3,
.home-loop-stage h4,
.home-loop-stage strong,
.home-screen h1,
.home-screen h2,
.home-screen h3,
.home-screen h4,
.home-screen strong,
.home-final-cta h1,
.home-final-cta h2,
.home-final-cta h3,
.home-final-cta h4,
.home-final-cta strong,
.features-module-stage h1,
.features-module-stage h2,
.features-module-stage h3,
.features-module-stage h4,
.features-module-stage strong,
.features-social-proof h1,
.features-social-proof h2,
.features-social-proof h3,
.features-social-proof h4,
.features-social-proof strong,
.features-final-cta h1,
.features-final-cta h2,
.features-final-cta h3,
.features-final-cta h4,
.features-final-cta strong,
.formats-custom-stage h1,
.formats-custom-stage h2,
.formats-custom-stage h3,
.formats-custom-stage h4,
.formats-custom-stage strong,
.formats-final-cta h1,
.formats-final-cta h2,
.formats-final-cta h3,
.formats-final-cta h4,
.formats-final-cta strong,
.agency-stage-screen h1,
.agency-stage-screen h2,
.agency-stage-screen h3,
.agency-stage-screen h4,
.agency-stage-screen strong,
.agencies-v2 .agency-contact-dark h1,
.agencies-v2 .agency-contact-dark h2,
.agencies-v2 .agency-contact-dark h3,
.agencies-v2 .agency-contact-dark h4,
.agencies-v2 .agency-contact-dark strong,
.company-live-screen h1,
.company-live-screen h2,
.company-live-screen h3,
.company-live-screen h4,
.company-live-screen strong,
.companies-v2 .company-dark h1,
.companies-v2 .company-dark h2,
.companies-v2 .company-dark h3,
.companies-v2 .company-dark h4,
.companies-v2 .company-dark strong,
.pricing-v2 .pricing-contact h1,
.pricing-v2 .pricing-contact h2,
.pricing-v2 .pricing-contact h3,
.pricing-v2 .pricing-contact h4,
.pricing-v2 .pricing-contact strong,
.pricing-v2 .pricing-final-cta h1,
.pricing-v2 .pricing-final-cta h2,
.pricing-v2 .pricing-final-cta h3,
.pricing-v2 .pricing-final-cta h4,
.pricing-v2 .pricing-final-cta strong,
.dark-showcase h1,
.dark-showcase h2,
.dark-showcase h3,
.dark-showcase h4,
.dark-showcase strong,
.asset-slot.dark h1,
.asset-slot.dark h2,
.asset-slot.dark h3,
.asset-slot.dark h4,
.asset-slot.dark strong {
  color: var(--color-inverse);
}

.home-loop-stage p,
.home-loop-stage li,
.home-loop-stage span,
.home-screen p,
.home-screen li,
.home-screen span,
.home-final-cta p,
.home-final-cta .lead,
.home-final-cta li,
.features-module-stage p,
.features-module-stage li,
.features-module-stage span,
.features-social-proof p,
.features-social-proof li,
.features-social-proof span,
.features-final-cta p,
.features-final-cta .lead,
.features-final-cta li,
.formats-custom-stage p,
.formats-custom-stage li,
.formats-final-cta p,
.formats-final-cta .lead,
.formats-final-cta li,
.agency-stage-screen p,
.agency-stage-screen li,
.agency-stage-screen span,
.agencies-v2 .agency-contact-dark p,
.agencies-v2 .agency-contact-dark .agency-lead,
.agencies-v2 .agency-contact-dark li,
.company-live-screen p,
.company-live-screen li,
.company-live-screen span,
.companies-v2 .company-dark p,
.companies-v2 .company-dark .company-lead,
.companies-v2 .company-dark li,
.pricing-v2 .pricing-contact p,
.pricing-v2 .pricing-contact .pricing-lead,
.pricing-v2 .pricing-contact li,
.pricing-v2 .pricing-final-cta p,
.pricing-v2 .pricing-final-cta .pricing-lead,
.pricing-v2 .pricing-final-cta li,
.dark-showcase p,
.dark-showcase li,
.asset-slot.dark p,
.asset-slot.dark li {
  color: rgba(255, 248, 239, 0.72);
}

@media (max-width: 820px) {
  .home-format-grid {
    gap: 12px;
  }

  .home-format-grid .home-format-card,
  .home-format-grid .home-format-card.large {
    min-block-size: 0;
    padding: 18px;
  }

  .home-format-grid .home-format-card strong {
    font-size: 17px;
  }

  .home-format-grid .home-format-card p {
    font-size: 15px;
  }
}

/* Premium hardening pass: stricter CTAs, quieter pattern, unified cards, fewer tints. */
:root {
  --premium-paper: #FAF3E9;
  --premium-surface: #F8EAD6;
  --premium-surface-soft: #FFF8EF;
  --premium-surface-deep: #EFE0C8;
  --premium-border: rgba(70, 51, 27, 0.16);
  --premium-border-soft: rgba(70, 51, 27, 0.11);
  --premium-muted: rgba(10, 11, 13, 0.66);
  --premium-soft-blue: #EAF1FF;
  --premium-soft-amber: #F0DDAA;
  --premium-soft-green: #E3EEDB;
  --premium-soft-neutral: #EDDDC6;
  --premium-shadow-card: 0 16px 42px rgba(75, 55, 29, 0.065);
  --premium-shadow-button: 0 8px 18px rgba(0, 82, 255, 0.14);
}

body {
  background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(180deg, var(--premium-paper) 0%, var(--premium-surface-soft) 100%);
  background-size: 66px 66px, 66px 66px, auto;
}

body::before,
.home-hero::before,
.features-hero::before,
.formats-hero::before,
.agencies-v2 .agency-hero::before,
.companies-v2 .company-hero::before,
.pricing-v2 .pricing-hero::before {
  opacity: 0.18;
}

.home-hero,
.features-hero,
.formats-hero,
.agencies-v2 .agency-hero,
.companies-v2 .company-hero,
.pricing-v2 .pricing-hero {
  background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    var(--premium-paper);
  background-size: 84px 84px, 84px 84px, auto;
}

.btn {
  min-block-size: 42px;
  padding: 9px 16px;
  border-radius: 10px;
  box-shadow: none;
  font-weight: 750;
  letter-spacing: 0;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.btn.primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-inverse);
  box-shadow: var(--premium-shadow-button);
}

.btn.primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: var(--color-inverse);
  box-shadow: 0 10px 20px rgba(0, 82, 255, 0.16);
}

.btn.primary:active {
  border-color: var(--color-primary-pressed);
  background: var(--color-primary-pressed);
  box-shadow: none;
  transform: translateY(0);
}

.topbar .btn.primary {
  min-block-size: 44px;
  border-radius: 9px;
}

.home-format-grid,
.features-task-grid,
.features-social-grid,
.features-host-actions,
.features-brand-grid,
.features-screen-player-grid,
.formats-format-grid,
.formats-template-grid,
.formats-mechanic-grid,
.formats-custom-grid,
.agencies-v2 .agency-benefit-strip,
.agencies-v2 .agency-event-list,
.agencies-v2 .agency-library-points,
.companies-v2 .company-use-board,
.companies-v2 .company-content-cards,
.companies-v2 .company-mechanics-board,
.companies-v2 .company-custom-grid,
.pricing-v2 .pricing-plan-grid,
.pricing-v2 .pricing-choice-board,
.pricing-v2 .pricing-factor-grid,
.pricing-v2 .pricing-included {
  gap: 16px;
}

.home-format-grid .home-format-card,
.features-task-card,
.features-social-card,
.features-mechanic-card,
.features-host-actions article,
.features-brand-card,
.features-screen-player-card,
.formats-format-card,
.formats-template-card,
.formats-mechanic-card,
.formats-custom-card,
.agencies-v2 .agency-benefit-strip article,
.agencies-v2 .agency-event-list article,
.agencies-v2 .agency-library-points article,
.companies-v2 .company-use-board article,
.companies-v2 .company-content-cards article,
.companies-v2 .company-mechanics-board article,
.companies-v2 .company-custom-grid article,
.pricing-v2 .pricing-plan-card,
.pricing-v2 .pricing-choice-board article,
.pricing-v2 .pricing-factor-grid article,
.pricing-v2 .pricing-include-card {
  min-block-size: auto;
  padding: clamp(18px, 1.75vw, 22px);
  border-radius: 14px;
  border-color: var(--premium-border);
  background: var(--premium-surface);
  box-shadow: var(--premium-shadow-card);
}

.pricing-v2 .pricing-plan-card,
.formats-template-card,
.companies-v2 .company-content-cards article,
.companies-v2 .company-mechanics-board article,
.agencies-v2 .agency-benefit-strip article {
  min-block-size: 0;
}

.features-task-card.is-active,
.pricing-v2 .pricing-calc-summary,
.pricing-v2 .pricing-choice-board article:nth-child(1),
.agencies-v2 .agency-benefit-strip article:nth-child(1),
.companies-v2 .company-content-cards article:nth-child(1),
.companies-v2 .company-mechanics-board article:nth-child(1),
.features-social-card:nth-child(3n + 1),
.formats-mechanic-card:nth-child(3n + 1) {
  background: color-mix(in oklch, var(--premium-soft-blue) 62%, var(--premium-surface));
}

.pricing-v2 .pricing-choice-board article:nth-child(2),
.pricing-v2 .pricing-plan-card.emphasized,
.agencies-v2 .agency-benefit-strip article:nth-child(2),
.companies-v2 .company-content-cards article:nth-child(2),
.companies-v2 .company-mechanics-board article:nth-child(2),
.features-social-card:nth-child(3n + 2),
.formats-mechanic-card:nth-child(3n + 2) {
  background: color-mix(in oklch, var(--premium-soft-amber) 58%, var(--premium-surface));
}

.pricing-v2 .pricing-choice-board article:nth-child(3),
.agencies-v2 .agency-benefit-strip article:nth-child(3),
.companies-v2 .company-content-cards article:nth-child(3),
.companies-v2 .company-mechanics-board article:nth-child(3),
.features-social-card:nth-child(3n),
.formats-mechanic-card:nth-child(3n) {
  background: color-mix(in oklch, var(--premium-soft-green) 58%, var(--premium-surface));
}

.pricing-v2 .pricing-choice-board article:nth-child(4),
.pricing-v2 .pricing-include-card:nth-child(4),
.agencies-v2 .agency-benefit-strip article:nth-child(4),
.companies-v2 .company-content-cards article:nth-child(4),
.companies-v2 .company-mechanics-board article:nth-child(4),
.features-social-card.shared,
.formats-mechanic-card:nth-child(4),
.features-task-matrix .risk {
  background: color-mix(in oklch, var(--premium-soft-neutral) 68%, var(--premium-surface));
}

.home-final-cta,
.features-final-cta,
.formats-final-cta,
.agencies-v2 .agency-contact-dark,
.companies-v2 .company-contact,
.pricing-v2 .pricing-contact,
.pricing-v2 .pricing-final-cta {
  color: var(--color-text);
  background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(180deg, var(--premium-surface-soft) 0%, var(--premium-paper) 100%);
  background-size: 72px 72px, 72px 72px, auto;
  border-block: 1px solid var(--premium-border-soft);
}

.home-final-cta h1,
.home-final-cta h2,
.home-final-cta h3,
.home-final-cta h4,
.home-final-cta strong,
.features-final-cta h1,
.features-final-cta h2,
.features-final-cta h3,
.features-final-cta h4,
.features-final-cta strong,
.formats-final-cta h1,
.formats-final-cta h2,
.formats-final-cta h3,
.formats-final-cta h4,
.formats-final-cta strong,
.agencies-v2 .agency-contact-dark h1,
.agencies-v2 .agency-contact-dark h2,
.agencies-v2 .agency-contact-dark h3,
.agencies-v2 .agency-contact-dark h4,
.agencies-v2 .agency-contact-dark strong,
.companies-v2 .company-contact h1,
.companies-v2 .company-contact h2,
.companies-v2 .company-contact h3,
.companies-v2 .company-contact h4,
.companies-v2 .company-contact strong,
.pricing-v2 .pricing-contact h1,
.pricing-v2 .pricing-contact h2,
.pricing-v2 .pricing-contact h3,
.pricing-v2 .pricing-contact h4,
.pricing-v2 .pricing-contact strong,
.pricing-v2 .pricing-final-cta h1,
.pricing-v2 .pricing-final-cta h2,
.pricing-v2 .pricing-final-cta h3,
.pricing-v2 .pricing-final-cta h4,
.pricing-v2 .pricing-final-cta strong {
  color: var(--color-text);
}

.home-final-cta p,
.home-final-cta .lead,
.features-final-cta p,
.features-final-cta .lead,
.formats-final-cta p,
.formats-final-cta .lead,
.agencies-v2 .agency-contact-dark p,
.agencies-v2 .agency-contact-dark .agency-lead,
.companies-v2 .company-contact p,
.companies-v2 .company-contact .company-contact-lead,
.pricing-v2 .pricing-contact p,
.pricing-v2 .pricing-contact .pricing-contact-lead,
.pricing-v2 .pricing-final-cta p,
.pricing-v2 .pricing-final-cta .pricing-lead {
  color: var(--premium-muted);
}

.home-final-cta .demo-form,
.features-final-cta .demo-form,
.formats-final-cta .demo-form,
.agencies-v2 .agency-contact-dark .demo-form,
.companies-v2 .company-contact .demo-form,
.pricing-v2 .pricing-contact .demo-form,
.pricing-v2 .pricing-final-cta .demo-form {
  color: var(--color-text);
  background: var(--premium-surface);
  border-color: var(--premium-border);
  box-shadow: 0 18px 48px rgba(75, 55, 29, 0.075);
}

.home-final-cta .field,
.features-final-cta .field,
.formats-final-cta .field,
.agencies-v2 .agency-contact-dark .field,
.companies-v2 .company-contact .field,
.pricing-v2 .pricing-contact .field,
.pricing-v2 .pricing-final-cta .field {
  color: var(--premium-muted);
  background: color-mix(in oklch, var(--premium-surface-soft) 64%, var(--premium-surface));
  border-color: var(--premium-border-soft);
}

.home-final-cta .lead,
.formats-final-cta .formats-final-grid > div > p,
.agencies-v2 .agency-contact-dark .agency-lead,
.companies-v2 .company-contact .company-contact-lead,
.pricing-v2 .pricing-contact .pricing-contact-lead {
  max-inline-size: 25ch;
  color: var(--color-text);
  font: 650 clamp(21px, 1.85vw, 28px)/1.24 var(--font-display);
  letter-spacing: 0;
}

.home-final-cta .lead {
  max-inline-size: 58ch;
  color: var(--premium-muted);
  font: 500 clamp(18px, 1.28vw, 20px)/1.62 var(--font-body);
}

.features-final-cta p {
  max-inline-size: 56ch;
  color: var(--premium-muted);
  font-size: clamp(17px, 1.1vw, 19px);
  line-height: 1.58;
}

.home-loop-stage,
.home-screen,
.features-module-stage,
.features-social-proof,
.formats-custom-stage,
.agency-stage-screen,
.company-live-screen,
.companies-v2 .company-dark,
.dark-showcase,
.asset-slot.dark {
  color: var(--color-inverse);
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.042) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 248, 239, 0.034) 1px, transparent 1px),
    linear-gradient(112deg, rgba(0, 82, 255, 0.16), transparent 42%),
    linear-gradient(138deg, var(--color-dark), var(--color-dark-panel));
  background-size: 68px 68px, 68px 68px, auto, auto;
}

.home-loop-stage h1,
.home-loop-stage h2,
.home-loop-stage h3,
.home-loop-stage h4,
.home-loop-stage strong,
.home-screen h1,
.home-screen h2,
.home-screen h3,
.home-screen h4,
.home-screen strong,
.features-module-stage h1,
.features-module-stage h2,
.features-module-stage h3,
.features-module-stage h4,
.features-module-stage strong,
.features-social-proof h1,
.features-social-proof h2,
.features-social-proof h3,
.features-social-proof h4,
.features-social-proof strong,
.formats-custom-stage h1,
.formats-custom-stage h2,
.formats-custom-stage h3,
.formats-custom-stage h4,
.formats-custom-stage strong,
.agency-stage-screen h1,
.agency-stage-screen h2,
.agency-stage-screen h3,
.agency-stage-screen h4,
.agency-stage-screen strong,
.company-live-screen h1,
.company-live-screen h2,
.company-live-screen h3,
.company-live-screen h4,
.company-live-screen strong,
.companies-v2 .company-dark h1,
.companies-v2 .company-dark h2,
.companies-v2 .company-dark h3,
.companies-v2 .company-dark h4,
.companies-v2 .company-dark strong,
.dark-showcase h1,
.dark-showcase h2,
.dark-showcase h3,
.dark-showcase h4,
.dark-showcase strong,
.asset-slot.dark h1,
.asset-slot.dark h2,
.asset-slot.dark h3,
.asset-slot.dark h4,
.asset-slot.dark strong {
  color: var(--color-inverse);
}

.home-loop-stage p,
.home-loop-stage li,
.home-loop-stage span,
.home-screen p,
.home-screen li,
.home-screen span,
.features-module-stage p,
.features-module-stage li,
.features-module-stage span,
.features-social-proof p,
.features-social-proof li,
.features-social-proof span,
.formats-custom-stage p,
.formats-custom-stage li,
.agency-stage-screen p,
.agency-stage-screen li,
.agency-stage-screen span,
.company-live-screen p,
.company-live-screen li,
.company-live-screen span,
.companies-v2 .company-dark p,
.companies-v2 .company-dark li,
.dark-showcase p,
.dark-showcase li,
.asset-slot.dark p,
.asset-slot.dark li {
  color: rgba(255, 248, 239, 0.72);
}

.home-visual-state.support,
.home-system-stage,
.features-orbit-center,
.features-social-proof,
.features-social-screen,
.formats-mechanics-stage,
.home-loop:has(.home-mechanic-card.support:hover) .home-loop-stage {
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.042) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 248, 239, 0.034) 1px, transparent 1px),
    linear-gradient(112deg, rgba(0, 82, 255, 0.16), transparent 42%),
    linear-gradient(138deg, var(--color-dark), var(--color-dark-panel));
  background-size: 68px 68px, 68px 68px, auto, auto;
}

.home-visual-state.support::after {
  background:
    radial-gradient(circle at 26% 72%, rgba(240, 221, 170, 0.14), transparent 20%),
    linear-gradient(135deg, transparent 0%, rgba(255, 248, 239, 0.10) 100%);
}

.formats-event-grid article:nth-child(5),
.agencies-page .soft-d,
.agencies-v2 .agency-benefit-strip article:nth-child(4),
.companies-v2 .company-content-cards article:nth-child(4),
.companies-v2 .company-mechanics-board article:nth-child(4),
.companies-v2 .company-content-modules article:nth-child(4),
.pricing-v2 .pricing-choice-board article:nth-child(4) {
  background: color-mix(in oklch, var(--premium-soft-neutral) 68%, var(--premium-surface));
}

@media (max-width: 820px) {
  body {
    background-size: 84px 84px, 84px 84px, auto;
  }

  body::before,
  .home-hero::before,
  .features-hero::before,
  .formats-hero::before,
  .agencies-v2 .agency-hero::before,
  .companies-v2 .company-hero::before,
  .pricing-v2 .pricing-hero::before {
    opacity: 0.12;
  }

  .home-hero,
  .features-hero,
  .formats-hero,
  .agencies-v2 .agency-hero,
  .companies-v2 .company-hero,
  .pricing-v2 .pricing-hero {
    background-size: 96px 96px, 96px 96px, auto;
  }

  .home-format-grid,
  .features-task-grid,
  .features-social-grid,
  .formats-format-grid,
  .formats-template-grid,
  .formats-mechanic-grid,
  .agencies-v2 .agency-benefit-strip,
  .agencies-v2 .agency-event-list,
  .companies-v2 .company-content-cards,
  .companies-v2 .company-mechanics-board,
  .pricing-v2 .pricing-plan-grid,
  .pricing-v2 .pricing-choice-board,
  .pricing-v2 .pricing-factor-grid {
    gap: 12px;
  }

  .btn {
    min-block-size: 42px;
  }
}

/* Calm background correction: less cream, neutral menu, continuous page flow. */
:root {
  --color-bg: #F8F5EF;
  --color-bg-alt: #FBF8F2;
  --color-surface: #FBF7F0;
  --color-surface-strong: #FFFCF6;
  --color-surface-muted: #F0EEE8;
  --color-surface-deep: #E8E3D8;
  --color-menu: #F0EEE8;
  --color-menu-hover: #EAF1FF;
  --premium-paper: #F8F5EF;
  --premium-surface: #FBF7F0;
  --premium-surface-soft: #FFFCF6;
  --premium-surface-deep: #F0EEE8;
  --premium-border: rgba(38, 34, 28, 0.115);
  --premium-border-soft: rgba(38, 34, 28, 0.075);
  --premium-muted: rgba(10, 11, 13, 0.64);
  --premium-soft-blue: #EAF1FF;
  --premium-soft-amber: #F3E7C9;
  --premium-soft-green: #EAF1E7;
  --premium-soft-neutral: #F0EEE8;
  --surface: #FBF7F0;
  --surface-2: #F0EEE8;
  --surface-3: #E8E3D8;
}

html,
body {
  background-color: var(--color-bg);
}

body {
  background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.008) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.007) 1px, transparent 1px),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  background-size: 104px 104px, 104px 104px, auto;
}

body::before,
.home-hero::before,
.features-hero::before,
.formats-hero::before,
.agencies-v2 .agency-hero::before,
.companies-v2 .company-hero::before,
.pricing-v2 .pricing-hero::before {
  opacity: 0.1;
}

.home-hero,
.features-hero,
.formats-hero,
.agencies-v2 .agency-hero,
.companies-v2 .company-hero,
.pricing-v2 .pricing-hero,
.home-final-cta,
.features-final-cta,
.formats-final-cta,
.agencies-v2 .agency-contact-dark,
.companies-v2 .company-contact,
.pricing-v2 .pricing-contact,
.pricing-v2 .pricing-final-cta {
  background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.008) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.007) 1px, transparent 1px),
    var(--color-bg);
  background-size: 112px 112px, 112px 112px, auto;
}

.topbar {
  background: color-mix(in oklch, var(--color-bg-alt) 92%, transparent);
  border-color: rgba(38, 34, 28, 0.10);
  box-shadow: 0 16px 36px rgba(45, 39, 31, 0.075);
}

.navlinks {
  background: color-mix(in oklch, #F0EEE8 94%, #FFFFFF);
  border-color: rgba(38, 34, 28, 0.11);
}

.navlinks a {
  color: rgba(10, 11, 13, 0.64);
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
  background: var(--color-menu-hover);
  color: var(--color-primary);
}

.home-thesis,
.home-social-proof,
.home-system-section,
.home-formats-section,
.home-audience-section,
.home-final-cta,
.features-section,
.features-index,
.features-final-cta,
.formats-section,
.formats-final-cta,
.agency-section,
.agencies-v2 .agency-section,
.agencies-v2 .agency-contact-dark,
.company-section,
.companies-v2 .company-section,
.companies-v2 .company-contact,
.pricing-v2 .pricing-section,
.pricing-v2 .pricing-contact,
.pricing-v2 .pricing-final-cta,
.site-footer {
  border-block-start: 0;
  border-block-end: 0;
  border-top: 0;
  border-bottom: 0;
}

.card,
.link-card,
.mini-step,
.proof-card,
.feature-card,
.feature-v2-card,
.format-card,
.scenario-card,
.admin-card,
.player-card,
.screen-card,
.agency-card,
.company-card,
.pricing-card,
.accordion details,
.demo-form,
.home-case-card,
.home-option-card,
.home-outcome-card,
.home-journey-card,
.home-cta-panel,
.home-feature-card,
.home-format-grid .home-format-card,
.features-builder-card,
.features-task-card,
.features-social-card,
.features-mechanic-card,
.features-host-card,
.features-brand-card,
.features-screen-player-card,
.formats-format-card,
.formats-template-card,
.formats-mechanic-card,
.formats-custom-card,
.agencies-v2 .agency-benefit-strip article,
.agencies-v2 .agency-event-list article,
.agencies-v2 .agency-library-points article,
.agency-surface-card,
.agency-event-card,
.companies-v2 .company-use-board article,
.companies-v2 .company-content-cards article,
.companies-v2 .company-mechanics-board article,
.companies-v2 .company-content-modules article,
.companies-v2 .company-custom-grid article,
.company-meaning-card,
.company-format-card,
.pricing-v2 .pricing-plan-card,
.pricing-v2 .pricing-choice-board article,
.pricing-v2 .pricing-factor-grid article,
.pricing-factor,
.pricing-scenario-card,
.pricing-include-card {
  background: var(--premium-surface);
  border-color: var(--premium-border);
  box-shadow: 0 14px 34px rgba(45, 39, 31, 0.055);
}

.home-final-cta .demo-form,
.features-final-cta .demo-form,
.formats-final-cta .demo-form,
.agencies-v2 .agency-contact-dark .demo-form,
.companies-v2 .company-contact .demo-form,
.pricing-v2 .pricing-contact .demo-form,
.pricing-v2 .pricing-final-cta .demo-form {
  background: var(--premium-surface);
  border-color: var(--premium-border);
  box-shadow: 0 14px 36px rgba(45, 39, 31, 0.06);
}

.home-final-cta .field,
.features-final-cta .field,
.formats-final-cta .field,
.agencies-v2 .agency-contact-dark .field,
.companies-v2 .company-contact .field,
.pricing-v2 .pricing-contact .field,
.pricing-v2 .pricing-final-cta .field {
  background: var(--premium-surface-soft);
  border-color: var(--premium-border-soft);
}

.features-task-card.is-active,
.pricing-v2 .pricing-calc-summary,
.pricing-v2 .pricing-choice-board article:nth-child(1),
.agencies-v2 .agency-benefit-strip article:nth-child(1),
.companies-v2 .company-content-cards article:nth-child(1),
.companies-v2 .company-mechanics-board article:nth-child(1),
.features-social-card:nth-child(3n + 1),
.formats-mechanic-card:nth-child(3n + 1) {
  background: color-mix(in oklch, var(--premium-soft-blue) 46%, var(--premium-surface));
}

.pricing-v2 .pricing-choice-board article:nth-child(2),
.pricing-v2 .pricing-plan-card.emphasized,
.agencies-v2 .agency-benefit-strip article:nth-child(2),
.companies-v2 .company-content-cards article:nth-child(2),
.companies-v2 .company-mechanics-board article:nth-child(2),
.features-social-card:nth-child(3n + 2),
.formats-mechanic-card:nth-child(3n + 2) {
  background: color-mix(in oklch, var(--premium-soft-amber) 38%, var(--premium-surface));
}

.pricing-v2 .pricing-choice-board article:nth-child(3),
.agencies-v2 .agency-benefit-strip article:nth-child(3),
.companies-v2 .company-content-cards article:nth-child(3),
.companies-v2 .company-mechanics-board article:nth-child(3),
.features-social-card:nth-child(3n),
.formats-mechanic-card:nth-child(3n) {
  background: color-mix(in oklch, var(--premium-soft-green) 42%, var(--premium-surface));
}

.pricing-v2 .pricing-choice-board article:nth-child(4),
.pricing-v2 .pricing-include-card:nth-child(4),
.agencies-v2 .agency-benefit-strip article:nth-child(4),
.companies-v2 .company-content-cards article:nth-child(4),
.companies-v2 .company-mechanics-board article:nth-child(4),
.companies-v2 .company-content-modules article:nth-child(4),
.features-social-card.shared,
.formats-mechanic-card:nth-child(4),
.features-task-matrix .risk,
.formats-event-grid article:nth-child(5),
.agencies-page .soft-d {
  background: color-mix(in oklch, var(--premium-soft-neutral) 58%, var(--premium-surface));
}

@media (max-width: 820px) {
  body {
    background:
      linear-gradient(90deg, rgba(10, 11, 13, 0.006) 1px, transparent 1px),
      linear-gradient(0deg, rgba(10, 11, 13, 0.005) 1px, transparent 1px),
      var(--color-bg);
    background-size: 128px 128px, 128px 128px, auto;
  }

  body::before,
  .home-hero::before,
  .features-hero::before,
  .formats-hero::before,
  .agencies-v2 .agency-hero::before,
  .companies-v2 .company-hero::before,
  .pricing-v2 .pricing-hero::before {
    opacity: 0.06;
  }

  .home-hero,
  .features-hero,
  .formats-hero,
  .agencies-v2 .agency-hero,
  .companies-v2 .company-hero,
  .pricing-v2 .pricing-hero,
  .home-final-cta,
  .features-final-cta,
  .formats-final-cta,
  .agencies-v2 .agency-contact-dark,
  .companies-v2 .company-contact,
  .pricing-v2 .pricing-contact {
    background-size: 140px 140px, 140px 140px, auto;
  }
}

main > section {
  border-block-start-width: 0 !important;
  border-block-end-width: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

.site-footer {
  border-block-start-width: 0 !important;
  border-top-width: 0 !important;
}

.btn:not(.primary),
.formats-mechanics-section .btn {
  background: #F0EEE8;
  border-color: rgba(38, 34, 28, 0.12);
  color: var(--color-text);
  box-shadow: none;
}

.btn:not(.primary):hover,
.formats-mechanics-section .btn:hover {
  background: var(--color-menu-hover);
  border-color: color-mix(in oklch, var(--color-primary) 28%, rgba(38, 34, 28, 0.12));
  color: var(--color-primary);
}

.formats-event-grid article,
.companies-v2 .company-content-modules article {
  background: var(--premium-surface);
}

.formats-event-grid article:nth-child(1),
.companies-v2 .company-content-modules article:nth-child(1) {
  background: color-mix(in oklch, var(--premium-soft-blue) 46%, var(--premium-surface));
}

.formats-event-grid article:nth-child(2),
.companies-v2 .company-content-modules article:nth-child(2) {
  background: color-mix(in oklch, var(--premium-soft-amber) 38%, var(--premium-surface));
}

.formats-event-grid article:nth-child(3),
.companies-v2 .company-content-modules article:nth-child(3) {
  background: color-mix(in oklch, var(--premium-soft-green) 42%, var(--premium-surface));
}

.formats-event-grid article:nth-child(4),
.formats-event-grid article:nth-child(5),
.companies-v2 .company-content-modules article:nth-child(4) {
  background: color-mix(in oklch, var(--premium-soft-neutral) 58%, var(--premium-surface));
}

/* No-pink correction pass: neutral chrome, tighter feature cards, real-logo proof slots. */
:root {
  --color-bg: #F7F7F3;
  --color-bg-alt: #FAFAF7;
  --color-surface: #FAFAF6;
  --color-surface-strong: #FFFFFA;
  --color-surface-muted: #EEF0EC;
  --color-surface-deep: #E4E7E1;
  --color-menu: #ECEFEB;
  --premium-paper: #F7F7F3;
  --premium-surface: #FAFAF6;
  --premium-surface-soft: #FFFFFA;
  --premium-surface-deep: #EEF0EC;
  --premium-border: rgba(24, 27, 24, 0.12);
  --premium-border-soft: rgba(24, 27, 24, 0.075);
  --premium-soft-amber: #F2EACB;
  --premium-soft-green: #E8F1E7;
  --premium-soft-neutral: #EEF0EC;
  --surface: #FAFAF6;
  --surface-2: #EEF0EC;
  --surface-3: #E4E7E1;
}

html,
body,
main {
  background-color: var(--color-bg);
}

body,
.home-hero,
.features-hero,
.formats-hero,
.agencies-v2 .agency-hero,
.companies-v2 .company-hero,
.pricing-v2 .pricing-hero,
.home-thesis,
.home-social-proof,
.features-index,
.features-social-section,
.features-social-section.features-social-cards-section,
.features-task-section,
.features-brand-section,
.features-screen-section,
.features-faq-section,
.home-final-cta,
.features-final-cta,
.formats-final-cta,
.agencies-v2 .agency-contact-dark,
.pricing-v2 .pricing-contact {
  background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.006) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.005) 1px, transparent 1px),
    var(--color-bg);
  background-size: 112px 112px, 112px 112px, auto;
}

.topbar {
  background: rgba(247, 247, 243, 0.96);
  border-color: rgba(24, 27, 24, 0.1);
  box-shadow: 0 16px 34px rgba(25, 29, 25, 0.065);
}

.navlinks {
  background: #ECEFEB;
  border-color: rgba(24, 27, 24, 0.115);
  box-shadow: inset 0 1px 0 rgba(255, 255, 250, 0.78);
}

.navlinks a {
  color: rgba(10, 11, 13, 0.66);
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
  background: #EAF1FF;
  color: var(--color-primary);
}

.home-fit-row {
  gap: 14px;
}

.home-fit-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: rgba(10, 11, 13, 0.58);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.home-fit-row span::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 999px;
  background: var(--color-primary);
}

.home-proof-strip {
  padding-block: 24px;
  background: var(--color-bg);
  overflow: hidden;
}

.home-proof-strip-inner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(76px, 4.5vw, 96px);
  align-items: center;
}

.home-proof-strip p {
  margin: 0;
  max-inline-size: 14ch;
  color: rgba(10, 11, 13, 0.88);
  font: 700 clamp(24px, 2.1vw, 30px)/1.08 var(--font-display);
  letter-spacing: 0;
}

.home-logo-marquee {
  --logo-gap: 10px;
  display: grid;
  gap: 10px;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  contain: layout paint;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.home-logo-row {
  min-inline-size: 0;
  overflow: hidden;
  contain: paint;
}

.home-logo-track {
  display: flex;
  inline-size: max-content;
  will-change: transform;
  animation: home-logo-scroll var(--logo-duration, 78s) linear infinite;
  animation-delay: var(--logo-offset, -18s);
}

.home-logo-row-reverse .home-logo-track {
  --logo-duration: 88s;
  --logo-offset: -44s;
  animation-direction: reverse;
}

.home-logo-marquee:hover .home-logo-track,
.home-logo-marquee:focus-within .home-logo-track {
  animation-play-state: paused;
}

.home-logo-group {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding-inline-end: var(--logo-gap);
}

.home-client-logo {
  flex: 0 0 auto;
  inline-size: 142px;
  min-block-size: 56px;
  display: grid;
  place-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(24, 27, 24, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 250, 0.62);
}

.home-client-logo img {
  display: block;
  max-inline-size: 100%;
  max-block-size: 34px;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  opacity: 0.68;
  filter: grayscale(1) saturate(0.22) contrast(0.96);
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.home-client-logo:hover img {
  opacity: 1;
  filter: grayscale(0.15) saturate(0.9) contrast(1);
  transform: translateY(-1px);
}

@keyframes home-logo-scroll {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-logo-marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .home-logo-row {
    overflow: visible;
  }

  .home-logo-track {
    inline-size: auto;
    flex-wrap: wrap;
    animation: none;
  }

  .home-logo-group {
    flex-wrap: wrap;
  }

  .home-logo-group[aria-hidden="true"] {
    display: none;
  }
}

.home-thesis,
.home-social-proof {
  background: var(--color-bg);
}

.home-thesis-grid h2 {
  max-inline-size: 1180px;
}

.home-thesis-grid h2 span {
  display: inline-block;
}

@media (min-width: 980px) {
  .home-thesis-grid h2 span:last-child {
    white-space: nowrap;
  }
}

.card,
.link-card,
.mini-step,
.proof-card,
.feature-card,
.feature-v2-card,
.format-card,
.scenario-card,
.admin-card,
.player-card,
.screen-card,
.agency-card,
.company-card,
.pricing-card,
.accordion details,
.demo-form,
.home-case-card,
.home-option-card,
.home-outcome-card,
.home-journey-card,
.home-cta-panel,
.home-feature-card,
.home-format-grid .home-format-card,
.features-builder-card,
.features-task-card,
.features-task-grid article,
.features-social-card,
.features-mechanic-card,
.features-host-card,
.features-brand-card,
.features-brand-cards article,
.features-screen-player-card,
.features-screen-cards article,
.features-faq-grid details,
.formats-faq-grid details,
.formats-format-card,
.formats-template-card,
.formats-mechanic-card,
.formats-custom-card,
.agencies-v2 .agency-benefit-strip article,
.agencies-v2 .agency-event-list article,
.agencies-v2 .agency-library-points article,
.agency-surface-card,
.agency-event-card,
.companies-v2 .company-use-board article,
.companies-v2 .company-content-cards article,
.companies-v2 .company-mechanics-board article,
.companies-v2 .company-content-modules article,
.companies-v2 .company-custom-grid article,
.company-meaning-card,
.company-format-card,
.pricing-v2 .pricing-plan-card,
.pricing-v2 .pricing-choice-board article,
.pricing-v2 .pricing-factor-grid article,
.pricing-factor,
.pricing-scenario-card,
.pricing-include-card {
  background: var(--premium-surface);
  border-color: var(--premium-border);
  box-shadow: 0 12px 28px rgba(25, 29, 25, 0.05);
}

.features-social-card {
  --mechanic-accent: 0, 82, 255;
  position: relative;
  min-block-size: 0;
  overflow: hidden;
  padding: clamp(20px, 2vw, 24px);
  background:
    linear-gradient(135deg, rgba(var(--mechanic-accent), 0.105), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    var(--premium-surface);
  background-size: auto, 42px 42px, 42px 42px, auto;
}

.features-social-card.rewards {
  --mechanic-accent: 176, 132, 0;
}

.features-social-card.inserts {
  --mechanic-accent: 0, 124, 91;
}

.features-social-card.shared {
  --mechanic-accent: 86, 96, 112;
}

.features-social-card h3 {
  font-size: clamp(24px, 2.1vw, 30px);
}

.features-social-card p {
  color: rgba(10, 11, 13, 0.66);
  font-size: 16px;
  line-height: 1.55;
}

.features-social-tags span {
  background: rgba(255, 255, 250, 0.64);
  border-color: rgba(24, 27, 24, 0.12);
  color: rgba(10, 11, 13, 0.62);
}

.features-task-head h2 {
  max-inline-size: none;
  font-size: clamp(34px, 3vw, 44px);
  white-space: nowrap;
}

.features-task-grid {
  gap: 14px;
}

.features-task-grid article {
  min-block-size: 246px;
  grid-template-rows: 82px auto auto;
  gap: 10px;
  padding: 16px;
  align-content: start;
}

.features-card-media {
  min-block-size: 82px;
  border-color: rgba(0, 82, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(0, 82, 255, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 82, 255, 0.045) 1px, transparent 1px),
    #F4F7FF;
  background-size: 24px 24px, 24px 24px, auto;
  color: rgba(0, 82, 255, 0.58);
}

.features-task-grid strong {
  font-size: 19px;
}

.features-task-grid p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.46;
  color: rgba(10, 11, 13, 0.64);
}

.features-brand-cards,
.features-screen-cards,
.features-faq-grid {
  gap: 14px;
}

.features-brand-cards article,
.features-screen-cards article,
.features-faq-grid details {
  min-block-size: 0;
  padding: 18px;
  background: var(--premium-surface);
}

.features-brand-cards strong,
.features-screen-cards h3 {
  font-size: clamp(20px, 1.55vw, 24px);
}

.features-brand-cards p,
.features-screen-cards ul,
.features-faq-grid p {
  color: rgba(10, 11, 13, 0.64);
  font-size: 15.5px;
  line-height: 1.52;
}

.features-faq-grid summary {
  color: var(--color-text);
}

.features-index,
.features-social-section.features-social-cards-section,
.features-brand-section,
.features-screen-section,
.features-faq-section {
  background: var(--color-bg);
}

.companies-v2 .company-contact {
  color: var(--color-inverse);
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.042) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 248, 239, 0.034) 1px, transparent 1px),
    linear-gradient(112deg, rgba(0, 82, 255, 0.16), transparent 42%),
    linear-gradient(138deg, var(--color-dark), var(--color-dark-panel));
  background-size: 68px 68px, 68px 68px, auto, auto;
}

.companies-v2 .company-contact .company-contact-lead {
  color: var(--color-inverse);
}

.companies-v2 .company-contact .demo-form {
  color: var(--color-inverse);
  background: var(--color-dark-panel);
  border-color: rgba(255, 248, 239, 0.16);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.companies-v2 .company-contact .field {
  color: rgba(255, 248, 239, 0.74);
  background: rgba(255, 248, 239, 0.06);
  border-color: rgba(255, 248, 239, 0.16);
}

.agencies-v2 .agency-library-section {
  color: var(--color-inverse);
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.042) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 248, 239, 0.034) 1px, transparent 1px),
    linear-gradient(138deg, var(--color-dark), var(--color-dark-panel));
  background-size: 68px 68px, 68px 68px, auto;
}

.agencies-v2 .agency-library-section h2,
.agencies-v2 .agency-library-section h3,
.agencies-v2 .agency-library-section strong,
.agencies-v2 .agency-library-section .agency-section-head > p {
  color: var(--color-inverse);
}

.agencies-v2 .agency-library-left,
.agencies-v2 .agency-client-stack div,
.agencies-v2 .agency-library-points article {
  color: var(--color-inverse);
  background: rgba(255, 248, 239, 0.055);
  border-color: rgba(255, 248, 239, 0.14);
}

.agencies-v2 .agency-library-left span,
.agencies-v2 .agency-client-stack span,
.agencies-v2 .agency-library-points p {
  color: rgba(255, 248, 239, 0.68);
}

@media (max-width: 980px) {
  .features-task-head h2 {
    white-space: normal;
  }

  .home-proof-strip-inner {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .home-client-logo {
    inline-size: 132px;
    min-block-size: 52px;
  }
}

.features-social-cards,
.features-task-grid,
.features-brand-cards,
.features-screen-cards,
.features-faq-grid {
  align-items: start;
}

.features-social-cards {
  inline-size: min(1200px, calc(100% - 48px));
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: 0;
}

.features-social-card.talk {
  background:
    linear-gradient(135deg, rgba(0, 82, 255, 0.11), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    var(--premium-surface);
  background-size: auto, 42px 42px, 42px 42px, auto;
}

.features-task-grid article {
  min-block-size: 224px;
  grid-template-rows: 72px auto auto;
  gap: 9px;
  padding: 14px;
}

.features-card-media {
  min-block-size: 72px;
}

.features-task-grid p {
  font-size: 14px;
}

.features-social-card.rewards {
  background:
    linear-gradient(135deg, rgba(176, 132, 0, 0.1), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    var(--premium-surface);
  background-size: auto, 42px 42px, 42px 42px, auto;
}

.features-social-card.inserts {
  background:
    linear-gradient(135deg, rgba(0, 124, 91, 0.1), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    var(--premium-surface);
  background-size: auto, 42px 42px, 42px 42px, auto;
}

.features-social-card.shared {
  background:
    linear-gradient(135deg, rgba(86, 96, 112, 0.1), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    var(--premium-surface);
  background-size: auto, 42px 42px, 42px 42px, auto;
}

@media (max-width: 720px) {
  .features-social-cards {
    inline-size: calc(100% - 32px);
    grid-template-columns: 1fr;
  }
}

/* Final consistency pass: no pink surfaces, dark contact blocks, wider section copy. */
:root {
  --color-bg: #F7F7F3;
  --color-bg-alt: #FAFAF7;
  --color-surface: #FAFAF6;
  --color-surface-strong: #FFFFFF;
  --color-menu: #EEF1F2;
  --color-text: #0A0B0D;
  --color-body: rgba(10, 11, 13, 0.68);
  --color-muted: rgba(10, 11, 13, 0.52);
  --color-border: rgba(24, 27, 24, 0.12);
  --color-primary: #0052FF;
  --color-primary-soft: #EAF1FF;
  --color-dark: #101828;
  --color-dark-panel: #172033;
  --color-inverse: #FFF8EF;
  --surface-neutral-gradient:
    linear-gradient(135deg, rgba(0, 82, 255, 0.055), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--color-surface);
  --section-depth-gradient:
    radial-gradient(circle at 14% 0%, rgba(0, 82, 255, 0.035), transparent 30%),
    radial-gradient(circle at 86% 16%, rgba(0, 124, 91, 0.025), transparent 32%),
    linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
  --dark-contact-gradient:
    linear-gradient(90deg, rgba(255, 248, 239, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 248, 239, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 86% 12%, rgba(0, 82, 255, 0.26), transparent 30%),
    linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-panel) 100%);
}

body,
main {
  background: var(--color-bg);
  color: var(--color-text);
}

.topbar {
  background: rgba(247, 247, 243, 0.98) !important;
  border-color: rgba(24, 27, 24, 0.08);
}

.navlinks {
  background: var(--color-menu) !important;
  border-color: rgba(24, 27, 24, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.navlinks a {
  color: rgba(10, 11, 13, 0.62);
}

.navlinks a[aria-current="page"] {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

.home-hero,
.home-proof-strip,
.home-thesis,
.home-social-proof,
.features-index,
.features-social-section.features-social-cards-section,
.features-task-section,
.features-brand-section,
.features-screen-section,
.features-faq-section,
.formats-mechanics-section,
.formats-theme-section,
.formats-fit-section,
.formats-build-section,
.formats-custom-section,
.agencies-v2 .agency-proof-section,
.agencies-v2 .agency-event-section,
.agencies-v2 .agency-faq-section,
.companies-v2 .company-content-priority,
.companies-v2 .company-soft,
.pricing-v2 .pricing-scenarios,
.pricing-v2 .pricing-factors,
.pricing-v2 .pricing-includes {
  background: var(--section-depth-gradient) !important;
}

.home-thesis {
  padding-block: clamp(30px, 3.8vw, 52px) 14px;
}

.home-social-proof {
  padding-block-start: clamp(26px, 3.8vw, 46px);
}

.home-fit-row {
  gap: 10px;
}

.home-fit-row span {
  background: rgba(250, 250, 246, 0.82) !important;
  border-color: rgba(0, 82, 255, 0.14);
  color: rgba(10, 11, 13, 0.68);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.055);
}

.home-fit-row span::before {
  background: var(--color-primary);
}

.eyebrow {
  display: block;
  inline-size: max-content;
  max-inline-size: 100%;
  margin-block: 0 12px;
  color: var(--color-primary) !important;
  font: 700 12px/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-section-head,
.features-section-head,
.features-social-head,
.features-task-head,
.features-screen-head,
.formats-section-head,
.formats-mechanics-head,
.formats-event-head,
.agencies-v2 .agency-section-head,
.companies-v2 .company-section-head,
.pricing-v2 .pricing-section-head {
  max-inline-size: none !important;
  inline-size: 100%;
}

.home-section-head h2,
.features-section-head h2,
.features-social-head h2,
.features-task-head h2,
.features-screen-head h2,
.formats-section-head h2,
.formats-mechanics-head h2,
.formats-event-head h2,
.agencies-v2 .agency-section-head h2,
.companies-v2 .company-section-head h2,
.pricing-v2 .pricing-section-head h2 {
  max-inline-size: none !important;
}

.home-section-head > p:not(.eyebrow),
.features-section-head > p:not(.eyebrow),
.features-social-head > p:not(.eyebrow),
.features-screen-head > p:not(.eyebrow),
.formats-section-head > p:not(.eyebrow),
.formats-mechanics-head > p,
.formats-event-head > p:not(.eyebrow),
.agencies-v2 .agency-section-head > p:not(.eyebrow),
.companies-v2 .company-section-head > p:not(.eyebrow),
.pricing-v2 .pricing-section-head > p:not(.eyebrow) {
  max-inline-size: 980px !important;
  color: var(--color-body);
}

.formats-mechanics-head p {
  margin: 14px 0 0;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.45;
}

.companies-v2 .company-use-section .company-section-head h2 {
  white-space: nowrap;
}

.features-task-grid article {
  min-block-size: 198px !important;
  grid-template-rows: 66px auto auto !important;
  padding: 14px !important;
  gap: 8px !important;
  background: var(--surface-neutral-gradient) !important;
  border-color: rgba(24, 27, 24, 0.11);
}

.features-task-grid article:nth-child(2n) {
  background:
    linear-gradient(135deg, rgba(0, 124, 91, 0.055), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--color-surface) !important;
}

.features-task-grid article:nth-child(3n) {
  background:
    linear-gradient(135deg, rgba(176, 132, 0, 0.06), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--color-surface) !important;
}

.features-card-media {
  min-block-size: 66px !important;
  background:
    linear-gradient(90deg, rgba(0, 82, 255, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 82, 255, 0.04) 1px, transparent 1px),
    #F5F8FF !important;
}

.features-task-grid p,
.features-brand-cards p,
.features-screen-cards ul,
.features-faq-grid p,
.formats-event-grid p,
.formats-mechanics-list span,
.formats-theme-board p,
.formats-fit-card p,
.formats-custom-card p,
.agencies-v2 .agency-benefit-strip p,
.agencies-v2 .agency-event-list p,
.companies-v2 .company-use-board p,
.companies-v2 .company-content-cards p,
.companies-v2 .company-content-modules p,
.companies-v2 .company-mechanics-board p,
.pricing-v2 .pricing-choice-board p,
.pricing-v2 .pricing-factor-grid p,
.pricing-v2 .pricing-include-card p {
  color: var(--color-body) !important;
}

.features-brand-cards article,
.features-screen-cards article,
.features-faq-grid details,
.formats-mechanics-list article,
.formats-theme-board article,
.formats-fit-card,
.formats-custom-card,
.formats-event-grid article,
.agencies-v2 .agency-benefit-strip article,
.agencies-v2 .agency-side-list article,
.agencies-v2 .agency-event-list article,
.companies-v2 .company-use-board article,
.companies-v2 .company-content-cards article,
.companies-v2 .company-content-modules article,
.companies-v2 .company-mechanics-board article,
.companies-v2 .company-custom-grid article,
.pricing-v2 .pricing-choice-board article,
.pricing-v2 .pricing-factor-grid article,
.pricing-v2 .pricing-include-card,
.pricing-v2 .pricing-plan-card {
  background: var(--color-surface) !important;
  border-color: rgba(24, 27, 24, 0.11);
  color: var(--color-text);
}

.features-social-card.talk,
.features-social-card.rewards,
.features-social-card.inserts,
.features-social-card.shared,
.agencies-v2 .agency-benefit-strip article:nth-child(1),
.agencies-v2 .agency-benefit-strip article:nth-child(2),
.agencies-v2 .agency-benefit-strip article:nth-child(3),
.agencies-v2 .agency-benefit-strip article:nth-child(4),
.companies-v2 .company-content-cards article:nth-child(1),
.companies-v2 .company-content-cards article:nth-child(2),
.companies-v2 .company-content-cards article:nth-child(3),
.companies-v2 .company-content-cards article:nth-child(4),
.companies-v2 .company-content-modules article:nth-child(1),
.companies-v2 .company-content-modules article:nth-child(2),
.companies-v2 .company-content-modules article:nth-child(3),
.companies-v2 .company-content-modules article:nth-child(4),
.companies-v2 .company-mechanics-board article:nth-child(1),
.companies-v2 .company-mechanics-board article:nth-child(2),
.companies-v2 .company-mechanics-board article:nth-child(3),
.companies-v2 .company-mechanics-board article:nth-child(4),
.pricing-v2 .pricing-choice-board article:nth-child(1),
.pricing-v2 .pricing-choice-board article:nth-child(2),
.pricing-v2 .pricing-choice-board article:nth-child(3),
.pricing-v2 .pricing-choice-board article:nth-child(4) {
  background: var(--surface-neutral-gradient) !important;
}

.features-social-card.rewards,
.companies-v2 .company-content-cards article:nth-child(2),
.companies-v2 .company-content-modules article:nth-child(2),
.companies-v2 .company-mechanics-board article:nth-child(2),
.pricing-v2 .pricing-choice-board article:nth-child(2) {
  background:
    linear-gradient(135deg, rgba(176, 132, 0, 0.07), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--color-surface) !important;
}

.features-social-card.inserts,
.companies-v2 .company-content-cards article:nth-child(3),
.companies-v2 .company-content-modules article:nth-child(3),
.companies-v2 .company-mechanics-board article:nth-child(3),
.pricing-v2 .pricing-choice-board article:nth-child(3) {
  background:
    linear-gradient(135deg, rgba(0, 124, 91, 0.07), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--color-surface) !important;
}

.features-social-card.shared,
.agencies-v2 .agency-benefit-strip article:nth-child(4),
.companies-v2 .company-content-cards article:nth-child(4),
.companies-v2 .company-content-modules article:nth-child(4),
.companies-v2 .company-mechanics-board article:nth-child(4),
.pricing-v2 .pricing-choice-board article:nth-child(4),
.formats-event-grid article:nth-child(5) {
  background:
    linear-gradient(135deg, rgba(86, 96, 112, 0.07), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--color-surface) !important;
}

.formats-event-grid article:nth-child(1),
.formats-event-grid article:nth-child(6) {
  background-color: var(--color-dark) !important;
  background:
    linear-gradient(90deg, rgba(255, 248, 239, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 248, 239, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #101828, #172033) !important;
  color: var(--color-inverse);
}

.formats-event-grid article:nth-child(1) h3,
.formats-event-grid article:nth-child(1) p,
.formats-event-grid article:nth-child(6) h3,
.formats-event-grid article:nth-child(6) p {
  color: var(--color-inverse) !important;
}

.agencies-v2 .agency-library-section article,
.agencies-v2 .agency-library-left,
.agencies-v2 .agency-client-stack div,
.agencies-v2 .agency-library-points article {
  background: rgba(255, 248, 239, 0.06) !important;
  border-color: rgba(255, 248, 239, 0.16);
  color: var(--color-inverse);
}

.home-screen,
.home-stage-state,
.features-orbit-center,
.features-module-stage,
.formats-hero-screen,
.formats-mechanics-stage,
.agencies-v2 .agency-stage-screen,
.agencies-v2 .agency-stage-panel,
.agencies-v2 .agency-library-section,
.companies-v2 .company-screen-card,
.companies-v2 .company-live-screen {
  background-color: var(--color-dark) !important;
}

.agencies-v2 .agency-library-section p,
.agencies-v2 .agency-library-section span {
  color: rgba(255, 248, 239, 0.72) !important;
}

.home-final-cta,
.features-final-cta,
.formats-final-cta,
.agencies-v2 .agency-contact-dark,
.companies-v2 .company-contact,
.pricing-v2 .pricing-contact,
.pricing-v2 .pricing-final-cta {
  background-color: var(--color-dark) !important;
  background: var(--dark-contact-gradient) !important;
  background-size: 68px 68px, 68px 68px, auto, auto;
  color: var(--color-inverse) !important;
}

.home-final-cta h1,
.home-final-cta h2,
.home-final-cta h3,
.home-final-cta h4,
.home-final-cta strong,
.features-final-cta h1,
.features-final-cta h2,
.features-final-cta h3,
.features-final-cta h4,
.features-final-cta strong,
.formats-final-cta h1,
.formats-final-cta h2,
.formats-final-cta h3,
.formats-final-cta h4,
.formats-final-cta strong,
.agencies-v2 .agency-contact-dark h1,
.agencies-v2 .agency-contact-dark h2,
.agencies-v2 .agency-contact-dark h3,
.agencies-v2 .agency-contact-dark h4,
.agencies-v2 .agency-contact-dark strong,
.companies-v2 .company-contact h1,
.companies-v2 .company-contact h2,
.companies-v2 .company-contact h3,
.companies-v2 .company-contact h4,
.companies-v2 .company-contact strong,
.pricing-v2 .pricing-contact h1,
.pricing-v2 .pricing-contact h2,
.pricing-v2 .pricing-contact h3,
.pricing-v2 .pricing-contact h4,
.pricing-v2 .pricing-contact strong,
.pricing-v2 .pricing-final-cta h1,
.pricing-v2 .pricing-final-cta h2,
.pricing-v2 .pricing-final-cta h3,
.pricing-v2 .pricing-final-cta h4,
.pricing-v2 .pricing-final-cta strong {
  color: var(--color-inverse) !important;
}

.home-final-cta p,
.home-final-cta .lead,
.features-final-cta p,
.features-final-cta .lead,
.formats-final-cta p,
.formats-final-cta .lead,
.formats-final-cta .formats-final-grid > div > p,
.agencies-v2 .agency-contact-dark p,
.agencies-v2 .agency-contact-dark .agency-lead,
.companies-v2 .company-contact p,
.companies-v2 .company-contact .company-contact-lead,
.pricing-v2 .pricing-contact p,
.pricing-v2 .pricing-contact .pricing-contact-lead,
.pricing-v2 .pricing-final-cta p,
.pricing-v2 .pricing-final-cta .pricing-lead {
  color: rgba(255, 248, 239, 0.74) !important;
}

.home-final-cta .demo-form,
.features-final-cta .demo-form,
.formats-final-cta .demo-form,
.agencies-v2 .agency-contact-dark .demo-form,
.companies-v2 .company-contact .demo-form,
.pricing-v2 .pricing-contact .demo-form,
.pricing-v2 .pricing-final-cta .demo-form {
  background: rgba(255, 248, 239, 0.06) !important;
  border-color: rgba(255, 248, 239, 0.16) !important;
  color: var(--color-inverse);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.18);
}

.home-final-cta .field,
.features-final-cta .field,
.formats-final-cta .field,
.agencies-v2 .agency-contact-dark .field,
.companies-v2 .company-contact .field,
.pricing-v2 .pricing-contact .field,
.pricing-v2 .pricing-final-cta .field {
  background: rgba(255, 248, 239, 0.07) !important;
  border-color: rgba(255, 248, 239, 0.16) !important;
  color: rgba(255, 248, 239, 0.76) !important;
}

.home-screen,
.home-stage-state,
.features-orbit-center,
.features-module-stage,
.formats-hero-screen,
.formats-mechanics-stage,
.formats-event-grid article:nth-child(1),
.formats-event-grid article:nth-child(6),
.agencies-v2 .agency-stage-screen,
.agencies-v2 .agency-stage-panel,
.agencies-v2 .agency-library-section,
.companies-v2 .company-screen-card,
.companies-v2 .company-live-screen,
.home-final-cta,
.features-final-cta,
.formats-final-cta,
.agencies-v2 .agency-contact-dark,
.companies-v2 .company-contact,
.pricing-v2 .pricing-contact,
.pricing-v2 .pricing-final-cta {
  background-color: var(--color-dark) !important;
}

.home-system-stage {
  background-color: var(--color-dark) !important;
  color: var(--color-inverse);
}

.home-system-stage .home-ui-kicker,
.home-system-stage strong,
.home-system-stage p,
.home-system-stage span {
  color: var(--color-inverse) !important;
}

.agencies-v2 .agency-stage-panel {
  background: rgba(254, 255, 255, 0.96) !important;
  background-color: #FFFFFF !important;
  color: var(--color-text) !important;
}

.agencies-v2 .agency-stage-panel strong {
  color: var(--color-text) !important;
}

.agencies-v2 .agency-stage-panel span {
  color: var(--color-body) !important;
}

.companies-v2 .company-live-side article {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.companies-v2 .company-live-side article h3 {
  color: var(--color-text) !important;
}

.companies-v2 .company-live-side article p {
  color: var(--color-body) !important;
}

@media (max-width: 980px) {
  .companies-v2 .company-use-section .company-section-head h2,
  .features-task-head h2 {
    white-space: normal;
  }

  .formats-mechanics-head p {
    font-size: 18px;
  }
}

@media (max-width: 720px) {
  .home-thesis {
    padding-block: 30px 10px;
  }

  .home-social-proof {
    padding-block-start: 24px;
  }

  .features-task-grid article {
    min-block-size: 0 !important;
  }
}

/* Correction: keep section heads inside the container, use neutral eyebrows, remove company scenario tint. */
.container.home-section-head,
.container.features-section-head,
.container.features-social-head,
.container.features-task-head,
.container.features-screen-head,
.container.formats-section-head,
.container.formats-mechanics-head,
.container.formats-event-head,
.container.agency-section-head,
.container.company-section-head,
.container.pricing-section-head {
  inline-size: min(1200px, calc(100% - 48px)) !important;
  max-inline-size: 1200px !important;
  margin-inline: auto !important;
}

.eyebrow {
  color: rgba(10, 11, 13, 0.56) !important;
}

.companies-v2 .company-scenario-split .company-step-list article,
.companies-v2 .company-scenario-split .company-admin-slot {
  background:
    linear-gradient(135deg, rgba(0, 82, 255, 0.032), transparent 46%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F7F8F6 !important;
  background-size: auto, 44px 44px, 44px 44px, auto;
  color: var(--color-text) !important;
}

.companies-v2 .company-scenario-split .company-step-list h3,
.companies-v2 .company-scenario-split .company-step-list p,
.companies-v2 .company-scenario-split .company-admin-slot strong,
.companies-v2 .company-scenario-split .company-admin-slot p {
  color: var(--color-text) !important;
}

.companies-v2 .company-scenario-split .company-step-list p,
.companies-v2 .company-scenario-split .company-admin-slot p {
  color: var(--color-body) !important;
}

.companies-v2 .company-scenario-split .company-admin-slot > span,
.companies-v2 .company-scenario-split .company-mini-tabs i {
  background: #EEF1F2 !important;
  border-color: rgba(24, 27, 24, 0.12) !important;
  color: rgba(10, 11, 13, 0.66) !important;
}

@media (max-width: 720px) {
  .container.home-section-head,
  .container.features-section-head,
  .container.features-social-head,
  .container.features-task-head,
  .container.features-screen-head,
  .container.formats-section-head,
  .container.formats-mechanics-head,
  .container.formats-event-head,
  .container.agency-section-head,
  .container.company-section-head,
  .container.pricing-section-head {
    inline-size: min(100% - 32px, 1200px) !important;
  }
}

/* Full-page craft pass: continuous canvas, cleaner hero depth, visible task-card gradients. */
:root {
  --page-flow-background:
    radial-gradient(ellipse at 18% 4%, rgba(0, 82, 255, 0.036), transparent 34%),
    radial-gradient(ellipse at 88% 22%, rgba(0, 124, 91, 0.026), transparent 34%),
    linear-gradient(180deg, #FAFAF7 0%, #F7F7F3 42%, #FAFAF7 100%);
  --panel-clean-shadow:
    0 18px 46px rgba(16, 24, 40, 0.055),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.home-page,
.features-page,
.formats-page,
.agencies-page.agencies-v2,
.companies-page.companies-v2,
.pricing-page.pricing-v2 {
  background: var(--page-flow-background) !important;
}

.home-page > section,
.features-page > section,
.formats-page > section,
.agencies-page.agencies-v2 > section,
.companies-page.companies-v2 > section,
.pricing-page.pricing-v2 > section {
  border-block-end: 0 !important;
}

.home-page > section:not(.home-final-cta),
.features-page > section:not(.features-final-cta),
.formats-page > section:not(.formats-final-cta),
.agencies-page.agencies-v2 > section:not(.agency-contact-dark):not(.agency-library-section),
.companies-page.companies-v2 > section:not(.company-contact):not(.company-dark),
.pricing-page.pricing-v2 > section:not(.pricing-contact):not(.pricing-final-cta) {
  background: transparent !important;
}

.home-hero {
  overflow: visible !important;
  padding-block-end: clamp(60px, 6vw, 86px) !important;
}

.home-proof-strip,
.home-thesis {
  background: transparent !important;
}

.home-proof-strip {
  padding-block: 20px 24px;
}

.home-orchestration,
.features-hero-orbit,
.formats-hero-visual,
.agencies-v2 .agency-hero-stage,
.companies-v2 .company-hero-visual,
.pricing-v2 .pricing-hero-visual {
  box-shadow: var(--panel-clean-shadow) !important;
}

.hero-image-frame {
  padding: 0 !important;
  background: #F8F9F7 !important;
}

.hero-image-frame > img {
  border-radius: inherit;
}

.home-orchestration {
  background-color: #FAFAF7 !important;
  background:
    linear-gradient(90deg, rgba(0, 82, 255, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.026) 1px, transparent 1px),
    linear-gradient(135deg, #FAFAF7 0%, #F7F8F6 100%) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
  border-color: rgba(24, 27, 24, 0.1) !important;
}

.features-task-grid article:nth-child(4n + 1) {
  background:
    radial-gradient(circle at 18% 10%, rgba(0, 82, 255, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(0, 82, 255, 0.105), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    #FAFAF6 !important;
  background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

.features-task-grid article:nth-child(4n + 2) {
  background:
    radial-gradient(circle at 18% 10%, rgba(0, 124, 91, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(0, 124, 91, 0.095), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    #FAFAF6 !important;
  background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

.features-task-grid article:nth-child(4n + 3) {
  background:
    radial-gradient(circle at 18% 10%, rgba(176, 132, 0, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(176, 132, 0, 0.105), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    #FAFAF6 !important;
  background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

.features-task-grid article:nth-child(4n) {
  background:
    radial-gradient(circle at 18% 10%, rgba(86, 96, 112, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(86, 96, 112, 0.095), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    #FAFAF6 !important;
  background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

/* Strict visual normalization: typography, surfaces, contact forms, and section rhythm. */
:root {
  --color-bg: #F7F8F4;
  --color-bg-alt: #FAFBF8;
  --color-surface: #F7F8F6;
  --color-surface-strong: #FBFCFA;
  --card-surface: #F7F8F6;
  --card-surface-soft: #F1F4F3;
  --card-border: rgba(18, 24, 22, 0.12);
  --eyebrow-size: 12px;
  --eyebrow-line: 1.25;
  --heading-copy-gap: 16px;
  --section-head-gap: clamp(28px, 3vw, 40px);
}

.eyebrow,
.home-ui-kicker,
.home-orchestration-label,
.media-tag,
.asset-label,
.composite-label,
.features-orbit-center span,
.features-orbit-card b,
.features-host-pill,
.features-module-stage > span,
.features-card-media,
.formats-hero-screen > span,
.formats-hero-card b,
.formats-card-media,
.formats-mechanics-stage > span,
.agencies-v2 .agency-stage-screen > span,
.agencies-v2 .agency-step b,
.agencies-v2 .agency-workflow-steps b,
.agencies-v2 .agency-event-list span,
.agencies-v2 .agency-library-left > span,
.companies-v2 .company-screen-card > span,
.companies-v2 .company-admin-slot > span,
.companies-v2 .company-live-screen > span,
.companies-v2 .company-content-visual > span,
.companies-v2 .company-social-stage > span,
.companies-v2 .company-brand-preview > span,
.pricing-v2 .pricing-hero-visual > span,
.pricing-v2 .pricing-calc-summary > span {
  font-size: var(--eyebrow-size) !important;
  line-height: var(--eyebrow-line) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.eyebrow {
  color: rgba(10, 11, 13, 0.56) !important;
  text-transform: uppercase !important;
}

.home-section-head,
.features-section-head,
.features-social-head,
.features-task-head,
.features-screen-head,
.formats-section-head,
.formats-mechanics-head,
.formats-event-head,
.agencies-v2 .agency-section-head,
.companies-v2 .company-section-head,
.pricing-v2 .pricing-section-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  row-gap: var(--heading-copy-gap) !important;
  margin-block-end: var(--section-head-gap) !important;
}

.home-section-head .eyebrow,
.features-section-head .eyebrow,
.features-social-head .eyebrow,
.features-task-head .eyebrow,
.features-screen-head .eyebrow,
.formats-section-head .eyebrow,
.formats-mechanics-head .eyebrow,
.formats-event-head .eyebrow,
.agencies-v2 .agency-section-head .eyebrow,
.companies-v2 .company-section-head .eyebrow,
.pricing-v2 .pricing-section-head .eyebrow {
  margin-block-end: 12px !important;
}

.home-section-head h1,
.home-section-head h2,
.home-section-head h3,
.features-section-head h1,
.features-section-head h2,
.features-section-head h3,
.features-social-head h1,
.features-social-head h2,
.features-social-head h3,
.features-task-head h1,
.features-task-head h2,
.features-task-head h3,
.features-screen-head h1,
.features-screen-head h2,
.features-screen-head h3,
.formats-section-head h1,
.formats-section-head h2,
.formats-section-head h3,
.formats-mechanics-head h1,
.formats-mechanics-head h2,
.formats-mechanics-head h3,
.formats-event-head h1,
.formats-event-head h2,
.formats-event-head h3,
.agencies-v2 .agency-section-head h1,
.agencies-v2 .agency-section-head h2,
.agencies-v2 .agency-section-head h3,
.companies-v2 .company-section-head h1,
.companies-v2 .company-section-head h2,
.companies-v2 .company-section-head h3,
.pricing-v2 .pricing-section-head h1,
.pricing-v2 .pricing-section-head h2,
.pricing-v2 .pricing-section-head h3 {
  grid-column: 1 !important;
  grid-row: auto !important;
  margin-block-end: 0 !important;
}

.home-section-head > p:not(.eyebrow),
.features-section-head > p:not(.eyebrow),
.features-social-head > p:not(.eyebrow),
.features-task-head > p:not(.eyebrow),
.features-screen-head > p:not(.eyebrow),
.formats-section-head > p:not(.eyebrow),
.formats-mechanics-head > p,
.formats-event-head > p:not(.eyebrow),
.agencies-v2 .agency-section-head > p:not(.eyebrow),
.companies-v2 .company-section-head > p:not(.eyebrow),
.pricing-v2 .pricing-section-head > p:not(.eyebrow) {
  grid-column: 1 !important;
  grid-row: auto !important;
  margin-block: 0 !important;
  padding-block-start: 0 !important;
  border-block-start: 0 !important;
  max-inline-size: 980px !important;
  font-size: 18px !important;
  line-height: 1.56 !important;
  color: rgba(10, 11, 13, 0.68) !important;
}

.agencies-v2 .agency-library-section .agency-section-head h2,
.agencies-v2 .agency-library-section .agency-section-head > p:not(.eyebrow) {
  color: var(--color-inverse) !important;
}

main article,
main details,
.card,
.link-card,
.proof-card,
.feature-card,
.feature-v2-card,
.format-card,
.scenario-card,
.admin-card,
.player-card,
.screen-card,
.agency-card,
.company-card,
.pricing-card,
.home-format-grid .home-format-card,
.features-brand-cards article,
.features-screen-cards article,
.features-faq-grid details,
.formats-mechanics-list article,
.formats-theme-board article,
.formats-fit-card,
.formats-custom-card,
.formats-event-grid article,
.agencies-v2 .agency-benefit-strip article,
.agencies-v2 .agency-side-list article,
.agencies-v2 .agency-event-list article,
.companies-v2 .company-use-board article,
.companies-v2 .company-content-cards article,
.companies-v2 .company-content-modules article,
.companies-v2 .company-mechanics-board article,
.companies-v2 .company-custom-grid article,
.pricing-v2 .pricing-choice-board article,
.pricing-v2 .pricing-factor-grid article,
.pricing-v2 .pricing-include-card,
.pricing-v2 .pricing-plan-card {
  background:
    linear-gradient(135deg, rgba(0, 82, 255, 0.026), transparent 50%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.008) 1px, transparent 1px),
    var(--card-surface) !important;
  background-color: var(--card-surface) !important;
  background-size: auto, 44px 44px, 44px 44px, auto !important;
  border-color: var(--card-border) !important;
}

.features-task-grid article:nth-child(4n + 1),
.features-social-card.talk,
.agencies-v2 .agency-benefit-strip article:nth-child(1),
.companies-v2 .company-content-cards article:nth-child(1),
.companies-v2 .company-content-modules article:nth-child(1),
.companies-v2 .company-mechanics-board article:nth-child(1),
.pricing-v2 .pricing-choice-board article:nth-child(1) {
  background:
    radial-gradient(circle at 18% 10%, rgba(0, 82, 255, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(0, 82, 255, 0.105), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--card-surface) !important;
  background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

.features-task-grid article:nth-child(4n + 2),
.features-social-card.inserts,
.agencies-v2 .agency-benefit-strip article:nth-child(3),
.companies-v2 .company-content-cards article:nth-child(3),
.companies-v2 .company-content-modules article:nth-child(3),
.companies-v2 .company-mechanics-board article:nth-child(3),
.pricing-v2 .pricing-choice-board article:nth-child(3) {
  background:
    radial-gradient(circle at 18% 10%, rgba(0, 124, 91, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(0, 124, 91, 0.095), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--card-surface) !important;
  background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

.features-task-grid article:nth-child(4n + 3),
.features-social-card.rewards,
.agencies-v2 .agency-benefit-strip article:nth-child(2),
.companies-v2 .company-content-cards article:nth-child(2),
.companies-v2 .company-content-modules article:nth-child(2),
.companies-v2 .company-mechanics-board article:nth-child(2),
.pricing-v2 .pricing-choice-board article:nth-child(2) {
  background:
    radial-gradient(circle at 18% 10%, rgba(150, 112, 0, 0.11), transparent 34%),
    linear-gradient(135deg, rgba(150, 112, 0, 0.082), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--card-surface) !important;
  background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

.features-task-grid article:nth-child(4n),
.features-social-card.shared,
.agencies-v2 .agency-benefit-strip article:nth-child(4),
.companies-v2 .company-content-cards article:nth-child(4),
.companies-v2 .company-content-modules article:nth-child(4),
.companies-v2 .company-mechanics-board article:nth-child(4),
.pricing-v2 .pricing-choice-board article:nth-child(4),
.formats-event-grid article:nth-child(5) {
  background:
    radial-gradient(circle at 18% 10%, rgba(86, 96, 112, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(86, 96, 112, 0.095), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.016) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--card-surface) !important;
  background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

.formats-event-grid article:nth-child(1),
.formats-event-grid article:nth-child(6),
.agencies-v2 .agency-library-section,
.agencies-v2 .agency-library-section article,
.agencies-v2 .agency-library-left,
.agencies-v2 .agency-client-stack div,
.agencies-v2 .agency-library-points article {
  background-color: var(--color-dark) !important;
}

.home-final-cta,
.features-final-cta,
.formats-final-cta,
.agencies-v2 .agency-contact-dark,
.companies-v2 .company-contact,
.pricing-v2 .pricing-contact,
.pricing-v2 .pricing-final-cta {
  background:
    linear-gradient(90deg, rgba(238, 241, 242, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(238, 241, 242, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 86% 12%, rgba(0, 82, 255, 0.26), transparent 30%),
    linear-gradient(135deg, #101828 0%, #172033 100%) !important;
  background-color: #101828 !important;
  background-size: 68px 68px, 68px 68px, auto, auto !important;
}

.home-final-cta .demo-form,
.features-final-cta .demo-form,
.formats-final-cta .demo-form,
.agencies-v2 .agency-contact-dark .demo-form,
.companies-v2 .company-contact .demo-form,
.pricing-v2 .pricing-contact .demo-form,
.pricing-v2 .pricing-final-cta .demo-form {
  background: rgba(238, 241, 242, 0.075) !important;
  background-color: rgba(238, 241, 242, 0.075) !important;
  border-color: rgba(238, 241, 242, 0.16) !important;
}

.home-final-cta p,
.home-final-cta .lead,
.features-final-cta p,
.features-final-cta .lead,
.formats-final-cta p,
.formats-final-cta .lead,
.formats-final-cta .formats-final-grid > div > p,
.agencies-v2 .agency-contact-dark p,
.agencies-v2 .agency-contact-dark .agency-lead,
.companies-v2 .company-contact p,
.companies-v2 .company-contact .company-contact-lead,
.pricing-v2 .pricing-contact p,
.pricing-v2 .pricing-contact .pricing-contact-lead,
.pricing-v2 .pricing-final-cta p,
.pricing-v2 .pricing-final-cta .pricing-lead {
  font-size: clamp(22px, 2.1vw, 30px) !important;
  line-height: 1.24 !important;
  color: rgba(247, 248, 246, 0.76) !important;
}

.home-final-cta .field,
.features-final-cta .field,
.formats-final-cta .field,
.agencies-v2 .agency-contact-dark .field,
.companies-v2 .company-contact .field,
.pricing-v2 .pricing-contact .field,
.pricing-v2 .pricing-final-cta .field {
  font-size: 16px !important;
  line-height: 1.5 !important;
  background: rgba(238, 241, 242, 0.08) !important;
  border-color: rgba(238, 241, 242, 0.16) !important;
  color: rgba(247, 248, 246, 0.76) !important;
}

.home-page > section:not(.home-hero):not(.home-final-cta),
.features-page > section:not(.features-hero):not(.features-final-cta),
.formats-page > section:not(.formats-hero):not(.formats-final-cta),
.agencies-page.agencies-v2 > section:not(.agency-hero):not(.agency-contact-dark),
.companies-page.companies-v2 > section:not(.company-hero):not(.company-contact),
.pricing-page.pricing-v2 > section:not(.pricing-hero):not(.pricing-contact):not(.pricing-final-cta) {
  padding-block: clamp(70px, 6vw, 96px) !important;
}

.home-proof-strip {
  padding-block: 34px !important;
}

@media (max-width: 720px) {
  .eyebrow,
  .home-ui-kicker,
  .home-orchestration-label,
  .media-tag,
  .asset-label,
  .composite-label,
  .features-orbit-center span,
  .features-orbit-card b,
  .features-host-pill,
  .features-module-stage > span,
  .features-card-media,
  .formats-hero-screen > span,
  .formats-hero-card b,
  .formats-card-media,
  .formats-mechanics-stage > span,
  .agencies-v2 .agency-stage-screen > span,
  .agencies-v2 .agency-step b,
  .agencies-v2 .agency-workflow-steps b,
  .agencies-v2 .agency-event-list span,
  .agencies-v2 .agency-library-left > span,
  .companies-v2 .company-screen-card > span,
  .companies-v2 .company-admin-slot > span,
  .companies-v2 .company-live-screen > span,
  .companies-v2 .company-content-visual > span,
  .companies-v2 .company-social-stage > span,
  .companies-v2 .company-brand-preview > span,
  .pricing-v2 .pricing-hero-visual > span,
  .pricing-v2 .pricing-calc-summary > span {
    font-size: var(--eyebrow-size) !important;
    line-height: var(--eyebrow-line) !important;
  }

  .home-final-cta p,
  .home-final-cta .lead,
  .features-final-cta p,
  .features-final-cta .lead,
  .formats-final-cta p,
  .formats-final-cta .lead,
  .formats-final-cta .formats-final-grid > div > p,
  .agencies-v2 .agency-contact-dark p,
  .agencies-v2 .agency-contact-dark .agency-lead,
  .companies-v2 .company-contact p,
  .companies-v2 .company-contact .company-contact-lead,
  .pricing-v2 .pricing-contact p,
  .pricing-v2 .pricing-contact .pricing-contact-lead,
  .pricing-v2 .pricing-final-cta p,
  .pricing-v2 .pricing-final-cta .pricing-lead {
    font-size: 22px !important;
  }
}

/* Final rhythm lock for compact feature heads. */
.features-section-head.compact {
  display: block !important;
  margin-block-end: var(--section-head-gap) !important;
}

.features-section-head.compact > .eyebrow {
  display: block !important;
  margin-block: 0 12px !important;
}

.features-section-head.compact > h2 {
  margin-block: 0 !important;
}

.features-section-head.compact > p:not(.eyebrow) {
  margin-block: var(--heading-copy-gap) 0 !important;
  padding-block-start: 0 !important;
  border-block-start: 0 !important;
  max-inline-size: 980px !important;
}

/* Final contrast lock for company media slots. */
.companies-v2 .company-social-stage,
.companies-v2 .company-live-screen {
  background:
    linear-gradient(90deg, rgba(238, 241, 242, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(238, 241, 242, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 82% 16%, rgba(0, 82, 255, 0.26), transparent 30%),
    linear-gradient(135deg, #101828 0%, #172033 100%) !important;
  background-color: #101828 !important;
  background-size: 56px 56px, 56px 56px, auto, auto !important;
  color: rgba(247, 248, 246, 0.9) !important;
}

.companies-v2 .company-social-stage strong,
.companies-v2 .company-social-stage p,
.companies-v2 .company-social-stage i,
.companies-v2 .company-live-screen strong,
.companies-v2 .company-live-screen p {
  color: rgba(247, 248, 246, 0.9) !important;
}

.companies-v2 .company-social-stage p,
.companies-v2 .company-live-screen p {
  color: rgba(247, 248, 246, 0.74) !important;
}

.companies-v2 .company-social-stage > span,
.companies-v2 .company-live-screen > span,
.companies-v2 .company-social-chain i {
  background: rgba(238, 241, 242, 0.08) !important;
  border-color: rgba(238, 241, 242, 0.16) !important;
}

.companies-v2 .company-social-stage > span,
.companies-v2 .company-live-screen > span {
  color: rgba(234, 241, 255, 0.96) !important;
}

.companies-v2 .company-dark .company-section-head h2,
.companies-v2 .company-dark .company-section-head p {
  color: rgba(247, 248, 246, 0.9) !important;
}

.companies-v2 .company-dark .company-section-head p {
  color: rgba(247, 248, 246, 0.74) !important;
}

/* Features social mechanics: keep the card group compact instead of full-bleed. */
.features-page .features-social-head {
  inline-size: min(980px, calc(100% - 48px)) !important;
  max-inline-size: 980px !important;
  margin-inline: auto !important;
}

.features-page .features-social-head h2 {
  max-inline-size: 980px !important;
}

.features-page .features-social-cards {
  inline-size: min(980px, calc(100% - 48px)) !important;
  max-inline-size: 980px !important;
  max-width: 980px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.features-page .features-social-card {
  min-block-size: 260px !important;
  padding: clamp(20px, 2vw, 26px) !important;
  border-radius: 16px !important;
}

.features-page .features-social-card h3 {
  font-size: clamp(22px, 1.6vw, 26px) !important;
  line-height: 1.1 !important;
}

.features-page .features-social-card p {
  margin-block: 14px 18px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.features-page .features-social-card .features-social-tags {
  gap: 7px !important;
}

.features-page .features-social-card .features-social-tags span {
  padding: 7px 10px !important;
  font-size: 12px !important;
}

@media (max-width: 720px) {
  .features-page .features-social-head {
    inline-size: calc(100% - 32px) !important;
  }

  .features-page .features-social-cards {
    inline-size: calc(100% - 32px) !important;
    grid-template-columns: 1fr !important;
  }

  .features-page .features-social-card {
    min-block-size: 0 !important;
  }
}

/* User correction pass: align referenced blocks from screenshots. */
.agencies-v2 .agency-event-list {
  gap: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.agencies-v2 .agency-event-list article {
  border: 1px solid var(--card-border) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    var(--color-surface-strong) !important;
  background-size: 44px 44px, 44px 44px, auto !important;
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.055) !important;
}

.agencies-v2 .agency-constructor-compact {
  align-items: stretch !important;
}

.agencies-v2 .agency-constructor-compact .agency-center-visual {
  block-size: 100% !important;
}

.companies-v2 .company-scenario-split {
  align-items: stretch !important;
}

.companies-v2 .company-scenario-split > div:first-child {
  display: grid !important;
}

.companies-v2 .company-scenario-split .company-step-list {
  block-size: 100% !important;
  grid-auto-rows: minmax(0, 1fr) !important;
}

.companies-v2 .company-scenario-split .company-admin-slot {
  min-block-size: 0 !important;
  block-size: 100% !important;
  align-content: center !important;
}

.companies-v2 .company-scenario-cta {
  margin-block-start: 24px !important;
}

.companies-v2 .company-route-grid {
  inline-size: min(1200px, 100%) !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

.companies-v2 .company-route-card {
  background:
    linear-gradient(135deg, rgba(0, 82, 255, 0.035), transparent 52%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
  background-size: auto, 44px 44px, 44px 44px, auto !important;
  border-color: var(--card-border) !important;
}

.formats-theme-board {
  inline-size: min(1320px, calc(100% - 48px)) !important;
  max-inline-size: 1320px !important;
  margin-inline: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding-inline: 0 !important;
}

.formats-theme-board article {
  min-block-size: 268px !important;
  grid-template-rows: 86px auto auto !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 12px !important;
}

.formats-theme-board .formats-card-media {
  min-block-size: 86px !important;
}

.features-page .features-social-head,
.features-page .features-social-cards {
  inline-size: min(1200px, calc(100% - 48px)) !important;
  max-inline-size: 1200px !important;
}

.features-page .features-social-head {
  margin-inline: auto !important;
}

.features-page .features-social-head h2 {
  max-inline-size: 1200px !important;
}

.features-page .features-social-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.features-task-grid article {
  min-block-size: 166px !important;
  grid-template-rows: 54px auto auto !important;
  gap: 8px !important;
  padding: 12px !important;
}

.features-card-media {
  min-block-size: 54px !important;
}

.features-task-grid p {
  font-size: 14px !important;
  line-height: 1.42 !important;
}

.features-task-grid article:nth-child(1) {
  background:
    radial-gradient(circle at 15% 8%, rgba(0, 82, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(0, 82, 255, 0.11), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article:nth-child(2) {
  background:
    radial-gradient(circle at 15% 8%, rgba(0, 124, 91, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(0, 124, 91, 0.105), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article:nth-child(3) {
  background:
    radial-gradient(circle at 15% 8%, rgba(176, 132, 0, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(176, 132, 0, 0.1), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article:nth-child(4) {
  background:
    radial-gradient(circle at 15% 8%, rgba(30, 64, 175, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(30, 64, 175, 0.085), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article:nth-child(5) {
  background:
    radial-gradient(circle at 15% 8%, rgba(14, 116, 144, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(14, 116, 144, 0.095), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article:nth-child(6) {
  background:
    radial-gradient(circle at 15% 8%, rgba(85, 107, 47, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(85, 107, 47, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article:nth-child(7) {
  background:
    radial-gradient(circle at 15% 8%, rgba(45, 85, 130, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(45, 85, 130, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article:nth-child(8) {
  background:
    radial-gradient(circle at 15% 8%, rgba(128, 92, 0, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(128, 92, 0, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article:nth-child(9) {
  background:
    radial-gradient(circle at 15% 8%, rgba(0, 96, 118, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(0, 96, 118, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article:nth-child(10) {
  background:
    radial-gradient(circle at 15% 8%, rgba(73, 94, 87, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(73, 94, 87, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.014) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    var(--color-surface-strong) !important;
}

.features-task-grid article {
  background-size: auto, auto, 42px 42px, 42px 42px, auto !important;
}

.home-hero {
  padding-block-end: clamp(28px, 3vw, 46px) !important;
}

.home-proof-strip {
  margin-block-start: -10px !important;
  padding-block: 0 20px !important;
}

.home-thesis {
  padding-block: clamp(22px, 2.4vw, 34px) 6px !important;
}

.home-thesis-grid,
.home-social-intro {
  inline-size: min(1200px, calc(100% - 48px)) !important;
  max-inline-size: 1200px !important;
  margin-inline: auto !important;
}

.home-thesis-grid {
  display: block !important;
}

.home-thesis-grid h2 {
  margin-block: 0 !important;
  max-inline-size: 1200px !important;
}

.home-social-proof {
  padding-block-start: 0 !important;
}

.home-social-intro {
  padding-block: 0 24px !important;
  border-block-end: 0 !important;
}

.home-social-intro > p:last-child {
  max-inline-size: 1200px !important;
  inline-size: 100% !important;
  margin-block: 0 !important;
  font-size: clamp(22px, 1.75vw, 28px) !important;
  line-height: 1.42 !important;
}

@media (max-width: 980px) {
  .formats-theme-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .agencies-v2 .agency-event-list,
  .formats-theme-board,
  .features-page .features-social-cards,
  .features-page .features-social-head {
    inline-size: calc(100% - 32px) !important;
    max-inline-size: none !important;
    margin-inline: auto !important;
  }

  .agencies-v2 .agency-event-list,
  .formats-theme-board,
  .features-page .features-social-cards {
    grid-template-columns: 1fr !important;
  }

  .features-task-grid article {
    min-block-size: 0 !important;
  }

  .home-thesis-grid,
  .home-social-intro {
    inline-size: calc(100% - 32px) !important;
  }
}

/* Screenshot QA pass: remove leftover strips, normalize widths and tighten vertical rhythm. */
.agencies-v2 .agency-event-list {
  inline-size: min(1200px, 100%) !important;
  max-inline-size: 1200px !important;
  margin-inline: auto !important;
  background: transparent !important;
}

.agencies-v2 .agency-event-list article {
  background:
    linear-gradient(135deg, rgba(0, 82, 255, 0.032), transparent 48%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
  background-size: auto, 44px 44px, 44px 44px, auto !important;
}

.agencies-v2 .agency-constructor-compact {
  align-items: stretch !important;
}

.agencies-v2 .agency-constructor-compact .agency-center-visual {
  min-block-size: 0 !important;
  block-size: 100% !important;
  align-content: center !important;
}

.companies-v2 .company-scenario-split {
  align-items: stretch !important;
}

.companies-v2 .company-scenario-split .company-step-list {
  block-size: 100% !important;
}

.companies-v2 .company-scenario-split .company-admin-slot {
  block-size: 100% !important;
  min-block-size: 0 !important;
}

.companies-v2 .company-route-card {
  background:
    linear-gradient(135deg, rgba(0, 82, 255, 0.03), transparent 50%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
  background-size: auto, 44px 44px, 44px 44px, auto !important;
}

.formats-theme-board {
  inline-size: min(1320px, calc(100% - 48px)) !important;
  max-inline-size: 1320px !important;
  overflow: visible !important;
}

.formats-theme-board article {
  min-block-size: 248px !important;
  grid-template-rows: 82px auto auto !important;
}

.formats-theme-board .formats-card-media {
  min-block-size: 82px !important;
}

.features-page .features-social-head,
.features-page .features-social-cards {
  inline-size: min(1200px, calc(100% - 48px)) !important;
  max-inline-size: 1200px !important;
  margin-inline: auto !important;
}

.features-page .features-social-head h2 {
  max-inline-size: 1200px !important;
}

.features-task-grid {
  align-items: stretch !important;
}

.features-task-grid article {
  min-block-size: 0 !important;
  grid-template-rows: 50px auto auto !important;
  align-content: start !important;
  gap: 8px !important;
}

.features-card-media {
  min-block-size: 50px !important;
}

.features-task-grid article:nth-child(1) {
  background:
    radial-gradient(circle at 14% 8%, rgba(0, 82, 255, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(0, 82, 255, 0.10), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(2) {
  background:
    radial-gradient(circle at 14% 8%, rgba(0, 124, 91, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(0, 124, 91, 0.095), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(3) {
  background:
    radial-gradient(circle at 14% 8%, rgba(181, 124, 8, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(181, 124, 8, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(4) {
  background:
    radial-gradient(circle at 14% 8%, rgba(58, 89, 148, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(58, 89, 148, 0.085), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(5) {
  background:
    radial-gradient(circle at 14% 8%, rgba(14, 116, 144, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(14, 116, 144, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(6) {
  background:
    radial-gradient(circle at 14% 8%, rgba(86, 107, 47, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(86, 107, 47, 0.085), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(7) {
  background:
    radial-gradient(circle at 14% 8%, rgba(46, 88, 128, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(46, 88, 128, 0.085), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(8) {
  background:
    radial-gradient(circle at 14% 8%, rgba(120, 92, 28, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(120, 92, 28, 0.085), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(9) {
  background:
    radial-gradient(circle at 14% 8%, rgba(0, 96, 118, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(0, 96, 118, 0.085), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(10) {
  background:
    radial-gradient(circle at 14% 8%, rgba(73, 94, 87, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(73, 94, 87, 0.085), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.home-proof-strip {
  margin-block-start: -28px !important;
  padding-block-end: 12px !important;
}

.home-thesis {
  padding-block-start: clamp(14px, 1.8vw, 24px) !important;
  padding-block-end: 0 !important;
}

.home-social-proof {
  padding-block-start: 0 !important;
  margin-block-start: -2px !important;
}

.home-social-intro {
  padding-block: 0 18px !important;
}

.home-social-intro > p:last-child {
  max-inline-size: 1200px !important;
  color: var(--color-body) !important;
  font-size: clamp(21px, 1.55vw, 25px) !important;
  line-height: 1.4 !important;
  text-wrap: pretty !important;
}

@media (max-width: 720px) {
  .agencies-v2 .agency-event-list {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-inline: 0 !important;
  }

  .agencies-v2 .agency-event-list article {
    flex-basis: min(82vw, 340px) !important;
  }

  .formats-theme-board,
  .features-page .features-social-head,
  .features-page .features-social-cards {
    inline-size: calc(100% - 32px) !important;
    max-inline-size: none !important;
  }

  .features-page .features-social-cards {
    grid-template-columns: 1fr !important;
  }

  .home-proof-strip {
    margin-block-start: -14px !important;
  }
}

.home-page > .home-proof-strip {
  padding-block: 12px 14px !important;
  margin-block-start: -28px !important;
}

.home-page > .home-thesis {
  padding-block: clamp(14px, 1.8vw, 24px) 0 !important;
}

.home-page > .home-social-proof {
  padding-block: 18px clamp(54px, 5vw, 76px) !important;
  margin-block-start: 0 !important;
}

@media (max-width: 720px) {
  .home-page > .home-proof-strip {
    padding-block: 10px 12px !important;
    margin-block-start: -14px !important;
  }

  .home-page > .home-thesis {
    padding-block: 16px 0 !important;
  }

  .home-page > .home-social-proof {
    padding-block: 12px 44px !important;
  }
}

main.home-page > section.home-proof-strip:not(.home-hero):not(.home-final-cta) {
  padding-block: 12px 14px !important;
  margin-block-start: -28px !important;
}

main.home-page > section.home-thesis:not(.home-hero):not(.home-final-cta) {
  padding-block: clamp(14px, 1.8vw, 24px) 0 !important;
}

main.home-page > section.home-social-proof:not(.home-hero):not(.home-final-cta) {
  padding-block: 18px clamp(54px, 5vw, 76px) !important;
  margin-block-start: 0 !important;
}

@media (max-width: 720px) {
  main.home-page > section.home-proof-strip:not(.home-hero):not(.home-final-cta) {
    padding-block: 10px 12px !important;
    margin-block-start: -14px !important;
  }

  main.home-page > section.home-thesis:not(.home-hero):not(.home-final-cta) {
    padding-block: 16px 0 !important;
  }

  main.home-page > section.home-social-proof:not(.home-hero):not(.home-final-cta) {
    padding-block: 12px 44px !important;
  }
}

/* Current user correction pass: copy, carousel behavior, card rhythm and real format art. */
.home-fit-row span {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(10, 11, 13, 0.72) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.home-fit-row span::before {
  display: none !important;
}

main.home-page > section.home-proof-strip:not(.home-hero):not(.home-final-cta) {
  padding-block: 18px 22px !important;
}

main.home-page > section.home-thesis:not(.home-hero):not(.home-final-cta) {
  padding-block: clamp(44px, 5vw, 68px) 0 !important;
}

.home-stage-state {
  opacity: 0;
  transform: translateY(10px) scale(0.992);
  transition: opacity 520ms ease, transform 520ms ease;
}

.home-loop[data-active="chat"] .home-stage-state.chat,
.home-loop[data-active="support"] .home-stage-state.support,
.home-loop[data-active="risk"] .home-stage-state.risk,
.home-loop[data-active="result"] .home-stage-state.result,
.home-loop:has(.home-mechanic-card.chat:hover) .home-stage-state.chat,
.home-loop:has(.home-mechanic-card.support:hover) .home-stage-state.support,
.home-loop:has(.home-mechanic-card.risk:hover) .home-stage-state.risk,
.home-loop:has(.home-mechanic-card.result:hover) .home-stage-state.result {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
}

.home-loop:has(.home-mechanic-card:hover) .home-stage-state {
  opacity: 0 !important;
}

.home-loop:has(.home-mechanic-card.chat:hover) .home-stage-state.chat,
.home-loop:has(.home-mechanic-card.support:hover) .home-stage-state.support,
.home-loop:has(.home-mechanic-card.risk:hover) .home-stage-state.risk,
.home-loop:has(.home-mechanic-card.result:hover) .home-stage-state.result {
  opacity: 1 !important;
}

.home-mechanic-card {
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.home-mechanic-card.is-active {
  border-color: color-mix(in oklch, var(--color-primary) 42%, var(--card-border)) !important;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.08) !important;
  transform: translateY(-1px);
}

.features-task-grid article:nth-child(1) {
  background:
    radial-gradient(circle at 14% 8%, rgba(0, 82, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(0, 82, 255, 0.105), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(2) {
  background:
    radial-gradient(circle at 82% 12%, rgba(0, 124, 91, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(0, 124, 91, 0.095), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(3) {
  background:
    radial-gradient(circle at 18% 18%, rgba(182, 123, 4, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(182, 123, 4, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(4) {
  background:
    radial-gradient(circle at 78% 16%, rgba(50, 76, 145, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(50, 76, 145, 0.085), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(5) {
  background:
    radial-gradient(circle at 30% 10%, rgba(0, 104, 126, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(0, 104, 126, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(6) {
  background:
    radial-gradient(circle at 74% 84%, rgba(142, 82, 38, 0.16), transparent 34%),
    linear-gradient(28deg, rgba(142, 82, 38, 0.092), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(7) {
  background:
    radial-gradient(circle at 18% 78%, rgba(84, 70, 156, 0.16), transparent 34%),
    linear-gradient(38deg, rgba(84, 70, 156, 0.095), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(8) {
  background:
    radial-gradient(circle at 82% 78%, rgba(72, 106, 48, 0.16), transparent 34%),
    linear-gradient(34deg, rgba(72, 106, 48, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(9) {
  background:
    radial-gradient(circle at 20% 82%, rgba(45, 75, 142, 0.16), transparent 34%),
    linear-gradient(28deg, rgba(45, 75, 142, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.features-task-grid article:nth-child(10) {
  background:
    radial-gradient(circle at 78% 80%, rgba(34, 94, 104, 0.16), transparent 34%),
    linear-gradient(32deg, rgba(34, 94, 104, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #F8F9F7 !important;
}

.companies-v2 .company-brand-controls article {
  padding: 24px clamp(30px, 3.2vw, 44px) 24px clamp(30px, 3.2vw, 44px) !important;
}

.formats-gallery-image {
  background: #F8F9F7 !important;
}

.formats-gallery-image img {
  object-position: center !important;
}

.formats-mechanics-stage {
  position: relative;
  overflow: hidden;
  align-content: stretch !important;
  padding: 0 !important;
  border-color: rgba(255, 248, 239, 0.18) !important;
  background: #10070B !important;
  box-shadow: 0 28px 74px rgba(7, 12, 20, 0.24) !important;
}

.formats-mechanics-composite {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 520px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 720px) {
  main.home-page > section.home-thesis:not(.home-hero):not(.home-final-cta) {
    padding-block-start: 34px !important;
  }

  .companies-v2 .company-brand-controls article {
    padding-inline: 22px !important;
  }

  .formats-mechanics-stage {
    border-radius: 18px;
  }

  .formats-mechanics-composite {
    min-block-size: 300px;
  }
}

/* Asset aspect lock: one image/video source must keep the same ratio on desktop and mobile. */
.home-orchestration,
.home-loop-stage,
.features-hero-orbit,
.formats-hero-visual,
.formats-mechanics-stage,
.agencies-v2 .agency-hero-stage,
.agencies-v2 .agency-center-visual,
.companies-v2 .company-hero-visual,
.companies-v2 .company-social-stage,
.pricing-v2 .pricing-hero-visual {
  aspect-ratio: 1 / 1 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  overflow: hidden;
}

.home-system-stage,
.features-module-stage,
.formats-custom-visual,
.agencies-v2 .agency-brand-visual,
.agencies-v2 .agency-workflow-visual,
.companies-v2 .company-content-visual,
.companies-v2 .company-live-screen,
.companies-v2 .company-brand-preview {
  aspect-ratio: 4 / 3 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  overflow: hidden;
}

.features-host-visual {
  aspect-ratio: 9 / 16 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  overflow: hidden;
}

.companies-v2 .company-admin-slot {
  aspect-ratio: 4 / 5 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  overflow: hidden;
}

.companies-v2 .company-admin-slot-image,
.companies-v2 .company-live-screen-image,
.companies-v2 .company-live-card-image {
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden;
}

.companies-v2 .company-live-side {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.companies-v2 .company-live-card-image {
  aspect-ratio: 2 / 1;
}

.companies-v2 .company-admin-slot-image > img,
.companies-v2 .company-live-screen-image > img,
.companies-v2 .company-live-card-image > img {
  border-radius: inherit;
}

.companies-v2 .company-content-visual-image {
  aspect-ratio: 4 / 3 !important;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.companies-v2 .company-content-visual-image > img {
  border-radius: inherit;
}

.companies-v2 .company-meaning-state {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: translateY(10px) scale(0.992);
  transition: opacity 520ms ease, transform 520ms ease;
  pointer-events: none;
}

.companies-v2 .company-meaning-loop .company-content-modules {
  position: relative;
  z-index: 2;
}

.companies-v2 .company-meaning-loop[data-active="questions"] .company-meaning-state.questions,
.companies-v2 .company-meaning-loop[data-active="votes"] .company-meaning-state.votes,
.companies-v2 .company-meaning-loop[data-active="draws"] .company-meaning-state.draws,
.companies-v2 .company-meaning-loop[data-active="team"] .company-meaning-state.team {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.companies-v2 .company-meaning-loop .company-content-modules article {
  cursor: default;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.companies-v2 .company-meaning-loop .company-content-modules article.is-active {
  border-color: rgba(0, 82, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(0, 82, 255, 0.18), 0 14px 34px rgba(0, 82, 255, 0.08);
  transform: translateY(-1px);
}

.features-card-media {
  aspect-ratio: 6 / 1 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
}

.formats-theme-board .formats-card-media {
  aspect-ratio: 24 / 7 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
}

.formats-gallery-image {
  aspect-ratio: 1000 / 714 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
}

.formats-mechanics-composite {
  inline-size: 100% !important;
  block-size: 100% !important;
  min-block-size: 0 !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
}

.home-orchestration > img,
.home-orchestration > video,
.home-loop-stage > img,
.home-loop-stage > video,
.features-hero-orbit > img,
.features-hero-orbit > video,
.features-module-stage > img,
.features-module-stage > video,
.features-host-visual > img,
.features-host-visual > video,
.formats-hero-visual > img,
.formats-hero-visual > video,
.formats-mechanics-stage > img,
.formats-mechanics-stage > video,
.formats-custom-visual > img,
.formats-custom-visual > video,
.agencies-v2 .agency-hero-stage > img,
.agencies-v2 .agency-hero-stage > video,
.agencies-v2 .agency-center-visual > img,
.agencies-v2 .agency-center-visual > video,
.agencies-v2 .agency-brand-visual > img,
.agencies-v2 .agency-brand-visual > video,
.agencies-v2 .agency-workflow-visual > img,
.agencies-v2 .agency-workflow-visual > video,
.companies-v2 .company-hero-visual > img,
.companies-v2 .company-hero-visual > video,
.companies-v2 .company-content-visual > img,
.companies-v2 .company-content-visual > video,
.companies-v2 .company-admin-slot > img,
.companies-v2 .company-admin-slot > video,
.companies-v2 .company-social-stage > img,
.companies-v2 .company-social-stage > video,
.companies-v2 .company-live-screen > img,
.companies-v2 .company-live-screen > video,
.companies-v2 .company-live-card-image > img,
.companies-v2 .company-live-card-image > video,
.companies-v2 .company-brand-preview > img,
.companies-v2 .company-brand-preview > video,
.pricing-v2 .pricing-hero-visual > img,
.pricing-v2 .pricing-hero-visual > video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.agencies-v2 .agency-asset-frame {
  padding: 0 !important;
  background: transparent !important;
}

.agencies-v2 .agency-asset-frame > img,
.agencies-v2 .agency-library-main-image > img,
.agencies-v2 .agency-client-card > img {
  border-radius: inherit;
}

.agencies-v2 .agency-library-left.agency-library-main-image {
  display: block;
  padding: 0 !important;
  overflow: hidden;
  background: #F8FAFC !important;
}

.agencies-v2 .agency-library-main-image > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.agencies-v2 .agency-client-stack.agency-client-image-stack {
  align-items: end;
}

.agencies-v2 .agency-client-stack .agency-client-card {
  display: block !important;
  block-size: 170px;
  min-block-size: 170px !important;
  padding: 0 !important;
  overflow: hidden;
  background: #F8FAFC !important;
}

.agencies-v2 .agency-client-card > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 720px) {
  .home-orchestration,
  .home-loop-stage,
  .home-system-stage,
  .features-hero-orbit,
  .features-module-stage,
  .features-host-visual,
  .formats-hero-visual,
  .formats-mechanics-stage,
  .formats-custom-visual,
  .agencies-v2 .agency-hero-stage,
  .agencies-v2 .agency-center-visual,
  .agencies-v2 .agency-brand-visual,
  .agencies-v2 .agency-workflow-visual,
  .companies-v2 .company-hero-visual,
  .companies-v2 .company-content-visual,
  .companies-v2 .company-admin-slot,
  .companies-v2 .company-social-stage,
  .companies-v2 .company-live-screen,
  .companies-v2 .company-brand-preview,
  .pricing-v2 .pricing-hero-visual {
    min-block-size: 0 !important;
    block-size: auto !important;
  }
}

/* Homepage social mechanics visuals: real state art replaces the old placeholder copy layer. */
.home-stage-state {
  opacity: 0;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.home-stage-state.chat {
  opacity: 0;
}

.home-stage-state.chat {
  background-image: url("assets/home/home-questions-chat-bg.webp") !important;
}

.home-stage-state.support {
  background-image: url("assets/home/home-questions-support-bg.webp") !important;
}

.home-stage-state.risk {
  background-image: url("assets/home/home-questions-bonus-bg.webp") !important;
}

.home-stage-state.result {
  background-image: url("assets/home/home-questions-progress-bg.webp") !important;
}

.home-stage-state::before,
.home-stage-state::after {
  display: none !important;
}

.home-stage-copy,
.home-stage-minis {
  display: none !important;
}

/* Homepage system visual: supplied 4:3 composite replaces the old text placeholder. */
.home-system-stage {
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

.home-system-stage::before {
  display: none !important;
}

.home-system-composite {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 760px) {
  .formats-event-head h2 .formats-heading-line {
    display: block;
  }

  .formats-event-head h2 .formats-heading-line:first-child {
    white-space: nowrap;
  }
}

/* Final homepage visual simplification: the supplied art is the container. */
.home-loop-stage {
  position: relative;
  overflow: visible;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-loop-stage::before {
  display: none !important;
}

.home-loop-stage::after {
  display: none !important;
}

.home-stage-state {
  inset: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(10, 11, 13, 0.08);
  border-radius: 24px !important;
  box-shadow:
    0 26px 68px rgba(10, 11, 13, 0.16),
    0 18px 48px rgba(0, 82, 255, 0.08);
}

.home-stage-state::before,
.home-stage-state::after {
  display: none !important;
}

.home-mechanic-card {
  background:
    radial-gradient(circle at 16% 10%, rgba(0, 82, 255, 0.08), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(82, 208, 163, 0.055), transparent 38%),
    linear-gradient(135deg, rgba(0, 82, 255, 0.035), rgba(255, 255, 255, 0) 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #FEFFFC !important;
  background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
  border-color: rgba(10, 11, 13, 0.08) !important;
  color: var(--color-ink) !important;
  box-shadow: 0 14px 34px rgba(10, 11, 13, 0.055) !important;
}

.home-mechanic-card strong {
  color: var(--color-ink) !important;
}

.home-mechanic-card span {
  color: rgba(38, 45, 55, 0.84) !important;
}

.home-mechanic-card b {
  color: var(--color-primary) !important;
}

.home-mechanic-card:hover {
  border-color: rgba(0, 82, 255, 0.22) !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(0, 82, 255, 0.11), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(82, 208, 163, 0.07), transparent 38%),
    linear-gradient(135deg, rgba(0, 82, 255, 0.05), rgba(255, 255, 255, 0) 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #FFFFFF !important;
}

.home-mechanic-card.is-active,
.home-loop[data-active="support"] .home-mechanic-card.support,
.home-loop[data-active="risk"] .home-mechanic-card.risk,
.home-loop[data-active="result"] .home-mechanic-card.result,
.home-loop[data-active="chat"] .home-mechanic-card.chat {
  border-color: rgba(0, 82, 255, 0.32) !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(0, 82, 255, 0.13), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(82, 208, 163, 0.075), transparent 38%),
    linear-gradient(135deg, rgba(0, 82, 255, 0.065), rgba(255, 255, 255, 0) 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #FFFFFF !important;
  box-shadow:
    0 15px 38px rgba(0, 82, 255, 0.09),
    0 12px 30px rgba(10, 11, 13, 0.055) !important;
}

.home-system-stage {
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

.home-system-stage::before {
  display: none !important;
}

.home-system-composite {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 20px 54px rgba(10, 11, 13, 0.11);
}

/* Features host control video: match the composed editorial/product block rhythm from Formats. */
.features-page .features-live-section {
  background: var(--section-depth-gradient) !important;
}

.features-page .features-host-grid {
  inline-size: min(1200px, calc(100% - 48px)) !important;
  max-inline-size: 1200px !important;
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "copy"
    "visual"
    "actions" !important;
  gap: clamp(22px, 3vw, 38px) !important;
  align-items: stretch !important;
}

.features-host-copy {
  grid-area: copy;
}

.features-host-copy h2 {
  max-inline-size: none;
  font-size: clamp(48px, 5vw, 76px);
  line-height: 1.04;
}

.features-host-copy > p {
  max-inline-size: none;
  margin-block-start: 18px;
  color: rgba(38, 45, 55, 0.82);
  font-size: clamp(20px, 1.65vw, 26px);
  line-height: 1.52;
}

.features-host-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-block-start: 4px !important;
}

.features-host-actions article {
  min-block-size: auto !important;
  gap: 8px !important;
  border: 1px solid rgba(10, 11, 13, 0.09) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 15% 8%, rgba(0, 82, 255, 0.08), transparent 36%),
    radial-gradient(circle at 86% 92%, rgba(82, 208, 163, 0.06), transparent 38%),
    linear-gradient(135deg, rgba(0, 82, 255, 0.038), rgba(255, 255, 255, 0) 58%),
    linear-gradient(90deg, rgba(10, 11, 13, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10, 11, 13, 0.01) 1px, transparent 1px),
    #FEFFFC !important;
  background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
  padding: clamp(16px, 1.5vw, 20px) !important;
  box-shadow: 0 14px 34px rgba(10, 11, 13, 0.052) !important;
}

.features-host-actions strong {
  color: var(--color-ink);
  font: 700 clamp(17px, 1.25vw, 20px)/1.18 var(--font-display) !important;
}

.features-host-actions p {
  color: rgba(38, 45, 55, 0.76) !important;
  font-size: 14px !important;
  line-height: 1.46 !important;
}

.features-host-visual {
  grid-area: visual;
  position: relative;
  display: block !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  align-self: center !important;
  justify-self: stretch !important;
  overflow: hidden !important;
  aspect-ratio: 3100 / 1937 !important;
  min-block-size: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow:
    0 22px 52px rgba(10, 11, 13, 0.12),
    0 10px 24px rgba(0, 82, 255, 0.06) !important;
}

.features-host-visual::after {
  display: none !important;
}

.features-host-video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.features-module-stage {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 22px 58px rgba(10, 11, 13, 0.12) !important;
}

@media (max-width: 1180px) {
  .features-page .features-host-grid {
    grid-template-columns: 1fr !important;
    inline-size: min(1200px, calc(100% - 40px)) !important;
  }

  .features-host-copy h2,
  .features-host-copy > p {
    max-inline-size: none;
  }
}

@media (max-width: 980px) {
  .features-host-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .features-page .features-host-grid {
    inline-size: min(100% - 28px, 560px) !important;
    gap: 18px !important;
  }

  .features-host-copy h2 {
    font-size: clamp(32px, 10vw, 42px);
  }

  .features-host-actions {
    grid-template-columns: 1fr !important;
  }

  .features-host-visual {
    border-radius: 18px !important;
  }
}

/* Contact form behavior and validation */
.demo-form.lead-form {
  align-self: start;
  gap: 14px;
  padding: 22px;
}

.demo-form .form-field {
  display: grid;
  gap: 7px;
}

.demo-form .lead-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.demo-form .form-field > span,
.demo-form .contact-detail-label {
  color: rgba(247, 248, 246, 0.86);
  font: 600 14px/1.25 var(--font-ui);
}

.demo-form input,
.demo-form textarea,
.demo-form select {
  inline-size: 100%;
  min-block-size: 48px;
  border: 1px solid rgba(238, 241, 242, 0.18);
  border-radius: 8px;
  background: rgba(238, 241, 242, 0.08);
  color: rgba(247, 248, 246, 0.92);
  font: 500 15px/1.35 var(--font-ui);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.demo-form input,
.demo-form select {
  padding: 0 14px;
}

.demo-form textarea {
  min-block-size: 116px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.demo-form input::placeholder,
.demo-form textarea::placeholder {
  color: rgba(247, 248, 246, 0.44);
}

.demo-form input:focus,
.demo-form textarea:focus,
.demo-form select:focus {
  border-color: rgba(142, 164, 255, 0.86);
  background: rgba(238, 241, 242, 0.12);
  box-shadow: 0 0 0 4px rgba(40, 93, 255, 0.20);
}

.demo-form [aria-invalid="true"] {
  border-color: rgba(255, 154, 142, 0.82);
  background: rgba(255, 90, 61, 0.10);
}

.demo-form .contact-detail[hidden],
.demo-form .phone-control[hidden],
.demo-form input[hidden] {
  display: none;
}

.demo-form .phone-control {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
}

.demo-form .form-hint {
  min-block-size: 18px;
  color: rgba(247, 248, 246, 0.58);
  font: 500 13px/1.4 var(--font-ui);
}

.demo-form .form-error {
  min-block-size: 18px;
  color: #FFB8AE;
  font: 600 13px/1.4 var(--font-ui);
}

.demo-form .form-error:empty {
  color: transparent;
}

.demo-form .consent-field {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: rgba(247, 248, 246, 0.74);
  font: 500 13.5px/1.5 var(--font-ui);
}

.demo-form .consent-field input {
  inline-size: 18px;
  block-size: 18px;
  min-block-size: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--color-primary);
}

.demo-form .consent-field a {
  color: #C9D6FF;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.demo-form button.btn {
  inline-size: 100%;
  cursor: pointer;
  font-family: var(--font-ui);
}

.demo-form.is-sending button.btn {
  opacity: 0.72;
  pointer-events: none;
}

.demo-form p.form-status {
  min-block-size: 18px;
  margin: 0;
  color: rgba(247, 248, 246, 0.66) !important;
  font: 500 13px/1.45 var(--font-ui) !important;
}

.demo-form p.form-status[data-state="success"] {
  color: #BDEDDC !important;
}

.demo-form p.form-status[data-state="error"] {
  color: #FFB8AE !important;
}

@media (max-width: 640px) {
  .demo-form.lead-form {
    padding: 18px;
  }

  .demo-form .phone-control {
    grid-template-columns: 1fr;
  }
}

/* Lead capture: real fields, inline statuses, and CTA popup */
.demo-form .field {
  min-block-size: auto;
  display: grid;
  gap: 7px;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-text, #17181c);
}

.demo-form .field > span {
  color: color-mix(in oklch, var(--color-text, #17181c) 72%, var(--color-muted, #687180));
  font: 650 13.5px/1.25 var(--font-ui);
}

.demo-form input,
.demo-form textarea {
  color: var(--color-text, #17181c);
  border-color: color-mix(in oklch, var(--color-border, #d9dde7) 82%, var(--color-primary, #285DFF));
  background: color-mix(in oklch, #ffffff 94%, var(--color-bg-alt, #f2f5fa));
}

.demo-form input::placeholder,
.demo-form textarea::placeholder {
  color: color-mix(in oklch, var(--color-muted, #687180) 76%, #ffffff);
}

.demo-form input:focus,
.demo-form textarea:focus {
  border-color: var(--color-primary, #285DFF);
  background: #ffffff;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-primary, #285DFF) 18%, transparent);
}

.demo-form .message-field textarea {
  min-block-size: 118px;
}

.lead-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.demo-form .form-consent {
  margin: -2px 0 0;
  color: color-mix(in oklch, var(--color-text, #17181c) 62%, var(--color-muted, #687180));
  font: 500 12.5px/1.45 var(--font-ui);
}

.demo-form .form-consent a {
  color: var(--color-primary, #285DFF);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.demo-form p.form-status {
  color: color-mix(in oklch, var(--color-text, #17181c) 70%, var(--color-muted, #687180)) !important;
}

.demo-form p.form-status[data-state="success"] {
  color: #0f7a4f !important;
}

.demo-form p.form-status[data-state="error"] {
  color: #b43222 !important;
}

.demo-form.is-sending button.btn {
  opacity: 0.76;
  pointer-events: none;
}

.lead-modal[hidden] {
  display: none;
}

.lead-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 13, 0.56);
  backdrop-filter: blur(10px);
}

.lead-modal-dialog {
  position: relative;
  inline-size: min(560px, 100%);
  max-block-size: calc(100dvh - 40px);
  overflow: auto;
  overflow-x: hidden;
  display: grid;
  gap: 18px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid color-mix(in oklch, var(--color-border, #d9dde7) 75%, #ffffff);
  border-radius: 18px;
  background: var(--color-surface, #ffffff);
  box-shadow: 0 28px 90px rgba(10, 11, 13, 0.28);
}

.demo-form.lead-form,
.demo-form.lead-form * {
  box-sizing: border-box;
}

.lead-modal-copy {
  display: grid;
  gap: 8px;
}

.lead-modal-copy h2,
.lead-modal-copy p {
  margin: 0;
}

.lead-modal-copy h2 {
  color: var(--color-text, #17181c);
  font: 750 clamp(26px, 3.4vw, 36px)/1.1 var(--font-display);
}

.lead-modal-copy p:not(.eyebrow) {
  color: var(--color-muted, #687180);
  font: 500 16px/1.5 var(--font-ui);
}

.lead-modal-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border, #d9dde7);
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-text, #17181c);
  cursor: pointer;
  font: 700 22px/1 var(--font-ui);
}

.lead-modal-form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.lead-modal-open,
html.lead-modal-open body {
  overflow: hidden;
}

@media (max-width: 640px) {
  .lead-modal {
    align-items: end;
    padding: 10px;
  }

  .lead-modal-dialog {
    max-block-size: calc(100dvh - 20px);
    border-radius: 18px 18px 12px 12px;
  }
}

/* Lead form v2 overrides */
.demo-form.lead-form .form-field {
  display: grid;
  gap: 7px;
  align-items: stretch;
  padding: 0;
  border: 0;
}

.demo-form.lead-form .form-field > span,
.demo-form.lead-form .contact-detail-label {
  color: rgba(247, 248, 246, 0.86);
  font: 600 14px/1.25 var(--font-ui);
}

.demo-form.lead-form input,
.demo-form.lead-form textarea,
.demo-form.lead-form select {
  inline-size: 100%;
  min-block-size: 48px;
  border: 1px solid rgba(238, 241, 242, 0.18);
  border-radius: 8px;
  background: rgba(238, 241, 242, 0.08);
  color: rgba(247, 248, 246, 0.92);
  font: 500 15px/1.35 var(--font-ui);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.demo-form.lead-form input::placeholder,
.demo-form.lead-form textarea::placeholder {
  color: rgba(247, 248, 246, 0.44);
}

.demo-form.lead-form input:focus,
.demo-form.lead-form textarea:focus,
.demo-form.lead-form select:focus {
  border-color: rgba(142, 164, 255, 0.86);
  background: rgba(238, 241, 242, 0.12);
  box-shadow: 0 0 0 4px rgba(40, 93, 255, 0.20);
}

.demo-form.lead-form [aria-invalid="true"] {
  border-color: rgba(255, 154, 142, 0.82);
  background: rgba(255, 90, 61, 0.10);
}

.demo-form.lead-form .form-error {
  min-block-size: 18px;
  color: #FFB8AE;
  font: 600 13px/1.4 var(--font-ui);
}

.demo-form.lead-form .form-error:empty {
  color: transparent;
}

.demo-form.lead-form .form-hint {
  min-block-size: 18px;
  color: rgba(247, 248, 246, 0.58);
  font: 500 13px/1.4 var(--font-ui);
}

.demo-form.lead-form .consent-field {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: rgba(247, 248, 246, 0.74);
  font: 500 13.5px/1.5 var(--font-ui);
}

.demo-form.lead-form .consent-field input {
  inline-size: 18px;
  block-size: 18px;
  min-block-size: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--color-primary);
}

.demo-form.lead-form .consent-field a {
  color: #C9D6FF;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.demo-form.lead-form .phone-control {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
}

.demo-form.lead-form .contact-detail[hidden],
.demo-form.lead-form .phone-control[hidden],
.demo-form.lead-form input[hidden] {
  display: none;
}

.demo-form.lead-form p.form-status {
  min-block-size: 18px;
  margin: 0;
  color: rgba(247, 248, 246, 0.66) !important;
  font: 500 13px/1.45 var(--font-ui) !important;
}

.demo-form.lead-form p.form-status[data-state="success"] {
  color: #BDEDDC !important;
}

.demo-form.lead-form p.form-status[data-state="error"] {
  color: #FFB8AE !important;
}

@media (max-width: 640px) {
  .demo-form.lead-form .phone-control {
    grid-template-columns: 1fr;
  }
}

.demo-form.lead-form .form-field > span,
.demo-form.lead-form .contact-detail-label {
  color: var(--color-text, #17181c);
}

.demo-form.lead-form input,
.demo-form.lead-form textarea,
.demo-form.lead-form select {
  border-color: color-mix(in oklch, var(--color-border, #d9dde7) 82%, var(--color-primary, #285DFF));
  background: #ffffff;
  color: var(--color-text, #17181c);
}

.demo-form.lead-form input::placeholder,
.demo-form.lead-form textarea::placeholder {
  color: color-mix(in oklch, var(--color-muted, #687180) 76%, #ffffff);
}

.demo-form.lead-form input:focus,
.demo-form.lead-form textarea:focus,
.demo-form.lead-form select:focus {
  border-color: var(--color-primary, #285DFF);
  background: #ffffff;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-primary, #285DFF) 18%, transparent);
}

.demo-form.lead-form .form-hint {
  color: color-mix(in oklch, var(--color-text, #17181c) 58%, var(--color-muted, #687180));
}

.demo-form.lead-form .consent-field {
  color: color-mix(in oklch, var(--color-text, #17181c) 70%, var(--color-muted, #687180));
}

.demo-form.lead-form .consent-field a {
  color: var(--color-primary, #285DFF);
}

.demo-form.lead-form p.form-status {
  color: color-mix(in oklch, var(--color-text, #17181c) 70%, var(--color-muted, #687180)) !important;
}

.demo-form.lead-form p.form-status[data-state="success"] {
  color: #0f7a4f !important;
}

.demo-form.lead-form p.form-status[data-state="error"] {
  color: #b43222 !important;
}

.lead-modal .demo-form.lead-form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Bottom contact form refinements */
.demo-form.lead-form .form-error:empty {
  display: none;
  min-block-size: 0;
}

#demo .demo-form.lead-form {
  gap: 12px;
}

#demo .demo-form.lead-form .form-field {
  gap: 6px;
}

#demo .demo-form.lead-form .contact-detail {
  gap: 6px;
  margin-block-start: -2px;
}

#demo .demo-form.lead-form .form-field > span,
#demo .demo-form.lead-form .contact-detail-label,
#demo .demo-form.lead-form .consent-field,
#demo .demo-form.lead-form .form-hint {
  color: rgba(247, 248, 246, 0.78);
}

#demo .demo-form.lead-form .form-field > span,
#demo .demo-form.lead-form .contact-detail-label {
  color: rgba(247, 248, 246, 0.88);
}

#demo .demo-form.lead-form input,
#demo .demo-form.lead-form textarea,
#demo .demo-form.lead-form select {
  border-color: rgba(238, 241, 242, 0.18);
  background: rgba(238, 241, 242, 0.08);
  color: rgba(247, 248, 246, 0.92);
}

#demo .demo-form.lead-form select option {
  background: #ffffff;
  color: #17181c;
}

#demo .demo-form.lead-form input::placeholder,
#demo .demo-form.lead-form textarea::placeholder {
  color: rgba(247, 248, 246, 0.46);
}

#demo .demo-form.lead-form input:focus,
#demo .demo-form.lead-form textarea:focus,
#demo .demo-form.lead-form select:focus {
  border-color: rgba(142, 164, 255, 0.86);
  background: rgba(238, 241, 242, 0.12);
  box-shadow: 0 0 0 4px rgba(40, 93, 255, 0.20);
}

#demo .demo-form.lead-form .consent-field a {
  color: #C9D6FF;
}

.demo-form.lead-form .phone-control {
  position: relative;
  min-block-size: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid color-mix(in oklch, var(--color-border, #d9dde7) 82%, var(--color-primary, #285DFF));
  border-radius: 8px;
  background: #ffffff;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.demo-form.lead-form .phone-control:focus-within {
  border-color: var(--color-primary, #285DFF);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-primary, #285DFF) 18%, transparent);
}

.demo-form.lead-form .phone-country-button {
  inline-size: 54px;
  min-inline-size: 54px;
  min-block-size: 44px;
  display: inline-grid;
  grid-template-columns: 28px 10px;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in oklch, var(--color-text, #17181c) 55%, var(--color-muted, #687180));
  cursor: pointer;
}

.demo-form.lead-form .phone-flag {
  font-size: 21px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(10, 11, 13, 0.24));
}

.demo-form.lead-form .phone-chevron {
  inline-size: 0;
  block-size: 0;
  border-inline: 5px solid transparent;
  border-block-start: 5px solid currentColor;
  color: color-mix(in oklch, var(--color-text, #17181c) 55%, var(--color-muted, #687180));
}

.demo-form.lead-form .phone-control input {
  min-block-size: auto;
  flex: 1;
  min-inline-size: 0;
  padding: 0 0 0 4px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-text, #17181c);
  font: 500 20px/1.2 var(--font-ui);
}

.demo-form.lead-form .phone-control .phone-code-input {
  flex: 0 0 62px;
  inline-size: 62px;
  padding-inline-start: 0;
  font-weight: 600;
}

.demo-form.lead-form .phone-control input:focus {
  box-shadow: none !important;
}

.demo-form.lead-form .phone-country-menu {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  inline-size: min(360px, 100%);
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(10, 11, 13, 0.22);
}

.demo-form.lead-form .phone-country-menu[hidden] {
  display: none;
}

.demo-form.lead-form .phone-country-menu input {
  min-block-size: 40px;
  padding: 0 10px;
  border: 1px solid #D8DFEA !important;
  background: #ffffff !important;
  color: #17181c !important;
  font-size: 14px;
}

.demo-form.lead-form .phone-country-list {
  max-block-size: 220px;
  overflow: auto;
  display: grid;
  gap: 2px;
}

.demo-form.lead-form .phone-country-option {
  min-block-size: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #17181c;
  cursor: pointer;
  font: 500 14px/1.25 var(--font-ui);
  text-align: start;
}

.demo-form.lead-form .phone-country-option:hover,
.demo-form.lead-form .phone-country-option[aria-selected="true"] {
  background: #EEF3FF;
}

.demo-form.lead-form .phone-country-option b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.demo-form.lead-form .phone-country-option em {
  color: #667085;
  font-style: normal;
}

#demo .demo-form.lead-form .phone-control {
  border-color: rgba(238, 241, 242, 0.18);
  background: rgba(238, 241, 242, 0.08);
}

#demo .demo-form.lead-form .phone-control:focus-within {
  border-color: rgba(142, 164, 255, 0.86);
  background: rgba(238, 241, 242, 0.12);
  box-shadow: 0 0 0 4px rgba(40, 93, 255, 0.20);
}

#demo .demo-form.lead-form .phone-country-button,
#demo .demo-form.lead-form .phone-flag,
#demo .demo-form.lead-form .phone-chevron,
#demo .demo-form.lead-form .phone-control input {
  color: rgba(247, 248, 246, 0.92);
}

#demo .demo-form.lead-form .phone-control input::placeholder {
  color: rgba(247, 248, 246, 0.46);
}

/* Companies page: social mechanics video slot */
.companies-v2 .company-social-proof {
  align-items: stretch;
}

.companies-v2 .company-social-media-stack {
  display: block;
  min-inline-size: 0;
  block-size: 100%;
}

.companies-v2 .company-social-stage.company-social-video-stage {
  aspect-ratio: auto !important;
  block-size: 100% !important;
  min-block-size: 100% !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(0, 82, 255, 0.18), transparent 34%),
    radial-gradient(circle at 78% 74%, rgba(20, 184, 166, 0.12), transparent 32%),
    linear-gradient(135deg, #101828 0%, #172033 100%) !important;
  box-shadow:
    0 26px 64px rgba(10, 11, 13, 0.16),
    0 14px 34px rgba(0, 82, 255, 0.08) !important;
}

.companies-v2 .company-social-stage.company-social-video-stage > strong,
.companies-v2 .company-social-stage.company-social-video-stage > p {
  display: none !important;
}

.companies-v2 .company-social-stage.company-social-video-stage > span {
  align-self: center;
  justify-self: center;
  max-inline-size: calc(100% - 48px);
  margin: 0;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(247, 248, 246, 0.72) !important;
  text-align: center;
}

.companies-v2 .company-social-stage.company-social-video-stage:has(img) > span,
.companies-v2 .company-social-stage.company-social-video-stage:has(video) > span {
  display: none !important;
}

.companies-v2 .company-social-stage.company-social-video-stage > img,
.companies-v2 .company-social-stage.company-social-video-stage > video {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover !important;
  object-position: left center;
  background: #101828;
}

.companies-v2 .company-social-flow {
  display: none !important;
}

.companies-v2 .company-social-flow i {
  min-block-size: 54px;
  display: grid;
  place-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(10, 11, 13, 0.08) !important;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(242, 246, 255, 0.74)) !important;
  color: #172033 !important;
  box-shadow: 0 14px 34px rgba(10, 11, 13, 0.055);
}

.companies-v2 .company-social-flow i + i::before {
  display: none !important;
}

@media (max-width: 820px) {
  .companies-v2 .company-social-stage.company-social-video-stage {
    min-block-size: 0 !important;
    border-radius: 18px !important;
  }

  .companies-v2 .company-social-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .companies-v2 .company-social-flow {
    grid-template-columns: 1fr !important;
  }
}

/* Pricing tariff calculator aligned with the current package policy. */
.pricing-v2 .pricing-tariff-calculator {
  grid-template-columns: 1fr;
}

.pricing-v2 .pricing-tariff-calculator .pricing-calc-top strong {
  min-inline-size: 0;
  text-align: start;
  font-size: clamp(34px, 3.4vw, 48px);
  overflow-wrap: anywhere;
}

.pricing-v2 .pricing-tariff-calculator .pricing-calc-top {
  display: grid;
  gap: 14px;
}

.pricing-v2 .pricing-control-grid,
.pricing-v2 .pricing-calc-control,
.pricing-v2 .pricing-option-group {
  display: grid;
  gap: 14px;
}

.pricing-v2 .pricing-control-label,
.pricing-v2 .pricing-option-label {
  color: var(--pricing-ink);
  font: 800 13px/1.2 var(--font-ui);
}

.pricing-v2 .pricing-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pricing-v2 .pricing-segmented label {
  position: relative;
  cursor: pointer;
}

.pricing-v2 .pricing-segmented input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.pricing-v2 .pricing-segmented span {
  min-block-size: 82px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--pricing-line);
  border-radius: 14px;
  background: var(--pricing-surface);
  padding: 14px;
  color: var(--pricing-ink);
  box-shadow: 0 12px 28px rgba(10, 11, 13, 0.035);
}

.pricing-v2 .pricing-segmented b {
  font: 800 18px/1.05 var(--font-display);
}

.pricing-v2 .pricing-segmented small {
  color: var(--pricing-muted);
  font: 650 12px/1.25 var(--font-ui);
}

.pricing-v2 .pricing-segmented input:checked + span {
  border-color: rgba(0, 82, 255, 0.34);
  background: color-mix(in oklch, var(--pricing-blue) 9%, var(--pricing-surface));
  box-shadow:
    inset 0 0 0 1px rgba(0, 82, 255, 0.12),
    0 16px 34px rgba(0, 82, 255, 0.08);
}

.pricing-v2 .pricing-segmented input:focus-visible + span {
  outline: 3px solid rgba(0, 82, 255, 0.22);
  outline-offset: 3px;
}

.pricing-v2 .pricing-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pricing-v2 .pricing-metric-card {
  display: grid;
  gap: 16px;
  border: 1px solid var(--pricing-line);
  border-radius: 16px;
  background: color-mix(in oklch, var(--pricing-surface) 88%, white);
  padding: 16px;
}

.pricing-v2 .pricing-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pricing-v2 .pricing-metric-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-inline-size: 260px;
  border: 1px solid var(--pricing-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  padding: 3px;
}

.pricing-v2 .pricing-metric-switch label {
  position: relative;
  cursor: pointer;
}

.pricing-v2 .pricing-metric-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.pricing-v2 .pricing-metric-switch span {
  min-block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--pricing-body);
  font: 800 13px/1.1 var(--font-ui);
  white-space: nowrap;
}

.pricing-v2 .pricing-metric-switch input:checked + span {
  background: color-mix(in oklch, var(--pricing-blue) 13%, white);
  color: var(--pricing-blue);
  box-shadow: 0 8px 18px rgba(0, 82, 255, 0.08);
}

.pricing-v2 .pricing-metric-switch input:focus-visible + span {
  outline: 3px solid rgba(0, 82, 255, 0.22);
  outline-offset: 2px;
}

.pricing-v2 .pricing-metric-head strong {
  color: var(--pricing-ink);
  font: 800 clamp(30px, 3vw, 44px)/1 var(--font-display);
}

.pricing-v2 .pricing-range-labels-seven {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-block-start: -10px;
}

.pricing-v2 .pricing-range-labels-seven span:nth-child(n + 2):nth-child(-n + 6) {
  text-align: center;
}

.pricing-v2 .pricing-plan-card.is-recommended {
  border-color: rgba(0, 82, 255, 0.38) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 82, 255, 0.16),
    0 20px 44px rgba(0, 82, 255, 0.09) !important;
}

.pricing-v2 .pricing-option-group {
  border-block-start: 1px solid var(--pricing-line);
  padding-block-start: 14px;
}

.pricing-v2 .pricing-option-group:first-of-type {
  border-block-start: 0;
  padding-block-start: 0;
}

.pricing-v2 .pricing-option-card {
  cursor: pointer;
}

.pricing-v2 .pricing-option-card.is-active {
  border-color: rgba(0, 82, 255, 0.34);
  background: color-mix(in oklch, var(--pricing-blue) 7%, var(--pricing-surface));
  box-shadow: inset 0 0 0 1px rgba(0, 82, 255, 0.12);
}

.pricing-v2 .pricing-option-card.is-active .pricing-option-head i {
  border-color: rgba(0, 82, 255, 0.28);
  background: rgba(0, 82, 255, 0.08);
}

.pricing-v2 .pricing-tariff-calculator .pricing-calc-summary {
  grid-template-columns: 1fr;
  gap: 12px;
}

.pricing-v2 .pricing-tariff-calculator .pricing-calc-summary strong {
  color: var(--pricing-ink);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
}

.pricing-v2 .pricing-result-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pricing-v2 .pricing-result-meta div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(0, 82, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  padding: 13px;
}

.pricing-v2 .pricing-result-meta b {
  color: var(--pricing-ink);
  font: 800 17px/1.15 var(--font-display);
}

.pricing-v2 .pricing-result-meta small {
  color: var(--pricing-muted);
  font: 650 12px/1.25 var(--font-ui);
}

.pricing-v2 .pricing-billing-note {
  border-block-start: 1px solid rgba(0, 82, 255, 0.14);
  padding-block-start: 12px;
}

.pricing-v2 .pricing-advanced-shell {
  align-content: start;
}

.pricing-v2 .pricing-advanced-shell > p {
  margin-block: 0 4px;
  color: var(--pricing-body);
  font-size: 14px;
  line-height: 1.45;
}

.pricing-v2 .pricing-advanced-toggle {
  inline-size: 100%;
  min-block-size: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 82, 255, 0.22);
  border-radius: 14px;
  background: color-mix(in oklch, var(--pricing-blue) 8%, var(--pricing-surface));
  color: var(--pricing-blue);
  cursor: pointer;
  padding: 14px 18px;
  text-align: center;
  font: 800 15px/1.2 var(--font-ui);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.pricing-v2 .pricing-advanced-toggle:hover,
.pricing-v2 .pricing-advanced-toggle[aria-expanded="true"] {
  border-color: rgba(0, 82, 255, 0.36);
  background: color-mix(in oklch, var(--pricing-blue) 12%, var(--pricing-surface));
}

.pricing-v2 .pricing-advanced-toggle:focus-visible {
  outline: 3px solid rgba(0, 82, 255, 0.22);
  outline-offset: 3px;
}

.pricing-v2 .pricing-advanced-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  border-block-start: 1px solid var(--pricing-line);
  margin-block-start: 4px;
  padding-block-start: 16px;
}

.pricing-v2 .pricing-advanced-panel > .pricing-calc-control {
  grid-column: 1 / -1;
}

.pricing-v2 .pricing-advanced-panel[hidden] {
  display: none;
}

.pricing-v2 .pricing-option-pills {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}

.pricing-v2 .pricing-option-chip {
  min-block-size: 0;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 11px;
  font-weight: 700;
}

.pricing-v2 .pricing-option-chip .pricing-option-head {
  min-inline-size: 0;
}

.pricing-v2 .pricing-option-chip .pricing-option-head b {
  overflow-wrap: anywhere;
}

.pricing-v2 .pricing-option-chip .pricing-option-list {
  font-size: 12px;
  line-height: 1.32;
}

@media (max-width: 1180px) {
  .pricing-v2 .pricing-tariff-calculator {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .pricing-v2 .pricing-tariff-calculator .pricing-calc-top strong {
    min-inline-size: 0;
    text-align: start;
  }

  .pricing-v2 .pricing-segmented,
  .pricing-v2 .pricing-metric-grid,
  .pricing-v2 .pricing-result-meta,
  .pricing-v2 .pricing-advanced-panel,
  .pricing-v2 .pricing-option-pills {
    grid-template-columns: 1fr;
  }

  .pricing-v2 .pricing-option-pills {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

/* Premium package cards on the pricing page. */
main.pricing-page.pricing-v2 > section.pricing-hero + section.pricing-section.pricing-soft {
  padding-block-start: clamp(24px, 3vw, 44px) !important;
}

.pricing-v2 .pricing-premium-plans {
  display: grid;
  gap: 22px;
  margin-block: clamp(34px, 5vw, 62px) 8px;
}

.pricing-v2 .pricing-premium-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  border-block-start: 1px solid color-mix(in oklch, var(--pricing-blue) 18%, var(--pricing-line));
  padding-block-start: 28px;
}

.pricing-v2 .pricing-premium-head h3 {
  margin-block: 8px 0;
  color: var(--pricing-ink);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
}

.pricing-v2 .pricing-premium-head p {
  max-inline-size: 760px;
  margin-block: 12px 0;
  color: var(--pricing-body);
  font-size: 17px;
  line-height: 1.55;
}

.pricing-v2 .pricing-premium-kicker {
  display: inline-flex;
  align-items: center;
  min-block-size: 30px;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 18%, var(--pricing-line));
  border-radius: 999px;
  background: color-mix(in oklch, var(--pricing-blue) 8%, var(--pricing-surface));
  color: var(--pricing-blue);
  padding: 6px 11px;
  font: 800 12px/1.1 var(--font-ui);
}

.pricing-v2 .pricing-premium-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 46px;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 24%, var(--pricing-line));
  border-radius: 8px;
  background: var(--pricing-surface);
  color: var(--pricing-blue);
  padding: 12px 16px;
  text-decoration: none;
  font: 800 14px/1.15 var(--font-ui);
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.05);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.pricing-v2 .pricing-premium-link:hover {
  border-color: color-mix(in oklch, var(--pricing-blue) 42%, var(--pricing-line));
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(16, 24, 40, 0.08);
}

.pricing-v2 .pricing-premium-link:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--pricing-blue) 22%, transparent);
  outline-offset: 3px;
}

.pricing-v2 .pricing-premium-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 1.08fr);
  gap: 14px;
  align-items: stretch;
}

.pricing-v2 .pricing-premium-card {
  position: relative;
  min-block-size: 640px;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 12%, var(--pricing-line));
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--pricing-blue) 4%, var(--pricing-surface)), var(--pricing-surface) 42%),
    var(--pricing-surface);
  padding: clamp(20px, 2vw, 26px);
  box-shadow: 0 22px 56px rgba(16, 24, 40, 0.075);
}

.pricing-v2 .pricing-premium-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 3px;
  background: color-mix(in oklch, var(--pricing-blue) 68%, oklch(99% 0.006 255));
}

.pricing-v2 .pricing-premium-card h4,
.pricing-v2 .pricing-premium-card p,
.pricing-v2 .pricing-premium-card ul,
.pricing-v2 .pricing-premium-card dl {
  position: relative;
  z-index: 1;
}

.pricing-v2 .pricing-premium-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--pricing-blue);
  font: 800 12px/1.1 var(--font-ui);
}

.pricing-v2 .pricing-premium-topline span {
  display: inline-flex;
  align-items: center;
  min-block-size: 28px;
  border: 1px solid color-mix(in oklch, currentColor 18%, var(--pricing-line));
  border-radius: 999px;
  background: color-mix(in oklch, currentColor 8%, var(--pricing-surface));
  padding: 6px 10px;
}

.pricing-v2 .pricing-premium-topline b {
  color: color-mix(in oklch, var(--pricing-ink) 42%, transparent);
  font: 800 18px/1 var(--font-display);
}

.pricing-v2 .pricing-premium-card h4 {
  margin: 0;
  color: var(--pricing-ink);
  font-size: clamp(28px, 2.5vw, 38px);
  line-height: 1.02;
}

.pricing-v2 .pricing-premium-card > p {
  min-block-size: 126px;
  margin: 0;
  color: var(--pricing-body);
  font-size: 15px;
  line-height: 1.5;
}

.pricing-v2 .pricing-premium-price {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  border-block: 1px solid color-mix(in oklch, var(--pricing-blue) 10%, var(--pricing-line));
  padding-block: 18px;
}

.pricing-v2 .pricing-premium-price strong {
  color: var(--pricing-ink);
  font: 800 clamp(32px, 3.2vw, 44px)/1 var(--font-display);
}

.pricing-v2 .pricing-premium-price span {
  color: var(--pricing-muted);
  font: 800 12px/1.2 var(--font-ui);
}

.pricing-v2 .pricing-premium-price-slot {
  position: relative;
  z-index: 1;
  block-size: 178px;
  min-block-size: 178px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--pricing-blue) 6%, var(--pricing-surface));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--pricing-blue) 5%, transparent),
    0 16px 34px rgba(0, 82, 255, 0.055);
}

.pricing-v2 .pricing-premium-runs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pricing-v2 .pricing-premium-runs span {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 12%, var(--pricing-line));
  border-radius: 8px;
  background: color-mix(in oklch, var(--pricing-blue) 3%, var(--pricing-surface));
  padding: 11px 10px;
}

.pricing-v2 .pricing-premium-runs span.is-active {
  border-color: color-mix(in oklch, var(--pricing-blue) 36%, var(--pricing-line));
  background: color-mix(in oklch, var(--pricing-blue) 9%, var(--pricing-surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pricing-blue) 10%, transparent);
}

.pricing-v2 .pricing-premium-runs span.is-disabled {
  opacity: 0.48;
}

.pricing-v2 .pricing-premium-runs b {
  color: var(--pricing-ink);
  font: 850 15px/1.05 var(--font-display);
}

.pricing-v2 .pricing-premium-runs small {
  color: var(--pricing-muted);
  font: 800 11px/1.18 var(--font-ui);
}

.pricing-v2 .pricing-premium-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.pricing-v2 .pricing-premium-specs div {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 10%, var(--pricing-line));
  border-radius: 8px;
  background: color-mix(in oklch, var(--pricing-blue) 4%, var(--pricing-surface));
  padding: 11px;
}

.pricing-v2 .pricing-premium-specs dt {
  color: var(--pricing-muted);
  font: 800 11px/1.1 var(--font-ui);
}

.pricing-v2 .pricing-premium-specs dd {
  margin: 0;
  color: var(--pricing-ink);
  font: 800 14px/1.18 var(--font-ui);
}

.pricing-v2 .pricing-premium-card ul {
  display: grid;
  gap: 12px;
  align-content: start;
  margin: 0;
  padding: 0;
  color: var(--pricing-body);
  font-size: 14px;
  line-height: 1.42;
  list-style: none;
}

.pricing-v2 .pricing-premium-card li {
  position: relative;
  padding-inline-start: 18px;
}

.pricing-v2 .pricing-premium-card li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.66em;
  inset-inline-start: 0;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 999px;
  background: var(--pricing-blue);
}

.pricing-v2 .pricing-premium-card.is-trial {
  opacity: 0.88;
}

.pricing-v2 .pricing-premium-card.is-launch::before {
  background: oklch(70% 0.15 82);
}

.pricing-v2 .pricing-premium-card.is-signature {
  border-color: color-mix(in oklch, var(--pricing-blue) 44%, var(--pricing-line));
  background:
    radial-gradient(circle at 82% 0%, color-mix(in oklch, var(--pricing-blue) 17%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in oklch, var(--pricing-blue) 10%, var(--pricing-surface)), var(--pricing-surface) 48%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--pricing-blue) 14%, transparent),
    0 30px 74px rgba(0, 82, 255, 0.13);
}

.pricing-v2 .pricing-premium-card.is-signature .pricing-premium-topline span {
  background: var(--pricing-blue);
  color: oklch(99% 0.006 255);
}

.pricing-v2 .pricing-premium-card.is-enterprise {
  border-color: color-mix(in oklch, oklch(70% 0.15 82) 48%, var(--pricing-line));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklch, oklch(70% 0.15 82) 22%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in oklch, oklch(70% 0.15 82) 8%, var(--pricing-surface)), var(--pricing-surface) 48%);
  color: var(--pricing-ink);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, oklch(70% 0.15 82) 13%, transparent),
    0 28px 68px rgba(16, 24, 40, 0.12);
}

.pricing-v2 .pricing-premium-card.is-enterprise::before {
  background: linear-gradient(90deg, oklch(72% 0.14 82), oklch(63% 0.2 258));
}

.pricing-v2 .pricing-premium-card.is-enterprise h4,
.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-price strong,
.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-specs dd {
  color: var(--pricing-ink);
}

.pricing-v2 .pricing-premium-card.is-enterprise p,
.pricing-v2 .pricing-premium-card.is-enterprise ul,
.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-price span,
.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-specs dt,
.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-topline b {
  color: var(--pricing-body);
}

.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-topline {
  color: oklch(55% 0.15 82);
}

.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-topline span,
.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-specs div {
  border-color: color-mix(in oklch, oklch(70% 0.15 82) 28%, var(--pricing-line));
  background: color-mix(in oklch, oklch(70% 0.15 82) 8%, var(--pricing-surface));
}

.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-price {
  border-color: color-mix(in oklch, oklch(70% 0.15 82) 18%, var(--pricing-line));
}

.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-price-slot {
  border-color: color-mix(in oklch, oklch(70% 0.15 82) 28%, var(--pricing-line));
  background: color-mix(in oklch, oklch(70% 0.15 82) 8%, var(--pricing-surface));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, oklch(70% 0.15 82) 7%, transparent),
    0 16px 34px rgba(116, 78, 10, 0.055);
}

.pricing-v2 .pricing-premium-card.is-enterprise li::before {
  background: oklch(60% 0.16 82);
}

.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-runs span {
  border-color: color-mix(in oklch, oklch(70% 0.15 82) 22%, var(--pricing-line));
  background: color-mix(in oklch, oklch(70% 0.15 82) 6%, var(--pricing-surface));
}

.pricing-v2 .pricing-premium-card.is-enterprise .pricing-premium-runs span.is-active {
  border-color: color-mix(in oklch, oklch(70% 0.15 82) 46%, var(--pricing-line));
  background: color-mix(in oklch, oklch(70% 0.15 82) 12%, var(--pricing-surface));
}

.pricing-v2 .pricing-card-action {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: stretch;
  min-block-size: 46px;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 18%, var(--pricing-line));
  background: color-mix(in oklch, var(--pricing-blue) 6%, var(--pricing-surface));
  color: var(--pricing-ink);
  box-shadow: none;
}

.pricing-v2 .pricing-card-action:hover {
  border-color: color-mix(in oklch, var(--pricing-blue) 34%, var(--pricing-line));
  background: color-mix(in oklch, var(--pricing-blue) 10%, var(--pricing-surface));
  color: var(--pricing-ink);
}

.pricing-v2 .pricing-premium-card.is-signature .pricing-card-action {
  border-color: var(--pricing-blue);
  background: var(--pricing-blue);
  color: oklch(99% 0.006 255);
  box-shadow: 0 16px 32px rgba(0, 82, 255, 0.2);
}

.pricing-v2 .pricing-premium-card.is-signature .pricing-card-action:hover {
  background: color-mix(in oklch, var(--pricing-blue) 86%, oklch(45% 0.24 258));
  color: oklch(99% 0.006 255);
}

.pricing-v2 .pricing-service-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  inline-size: 100%;
  max-inline-size: none;
  margin: clamp(30px, 4vw, 48px) auto 0;
}

.pricing-v2 .pricing-service-choice article {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-content: stretch;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 12%, var(--pricing-line));
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 0%, color-mix(in oklch, var(--pricing-blue) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in oklch, var(--pricing-blue) 5%, var(--pricing-surface)), var(--pricing-surface) 76%);
  padding: clamp(20px, 2.3vw, 28px);
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.055);
}

.pricing-v2 .pricing-service-choice article.is-service {
  border-color: color-mix(in oklch, oklch(70% 0.15 82) 34%, var(--pricing-line));
  background:
    radial-gradient(circle at 90% 0%, color-mix(in oklch, oklch(70% 0.15 82) 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in oklch, oklch(70% 0.15 82) 8%, var(--pricing-surface)), var(--pricing-surface) 76%);
}

.pricing-v2 .pricing-service-choice h3 {
  margin: 0;
  color: var(--pricing-ink);
  font: 850 clamp(22px, 2vw, 28px)/1.12 var(--font-display);
}

.pricing-v2 .pricing-service-choice p {
  max-inline-size: 34rem;
  margin: 0;
  color: var(--pricing-body);
  font-size: 15px;
  line-height: 1.5;
}

.pricing-v2 .pricing-service-choice .btn {
  justify-self: start;
  align-self: end;
  min-block-size: 46px;
  margin-block-start: 4px;
  border-radius: 8px;
  padding-inline: 18px;
  white-space: nowrap;
}

.pricing-v2 .pricing-service-link {
  border: 1px solid color-mix(in oklch, oklch(70% 0.15 82) 34%, var(--pricing-line));
  background: color-mix(in oklch, oklch(70% 0.15 82) 10%, var(--pricing-surface));
  color: var(--pricing-ink);
  text-decoration: none;
}

.pricing-v2 .pricing-service-link:hover {
  border-color: color-mix(in oklch, oklch(70% 0.15 82) 52%, var(--pricing-line));
  background: color-mix(in oklch, oklch(70% 0.15 82) 16%, var(--pricing-surface));
}

.pricing-v2 .pricing-tariff-calculator .pricing-calc-main,
.pricing-v2 .pricing-tariff-calculator .pricing-calc-options {
  background: linear-gradient(135deg, color-mix(in oklch, var(--pricing-blue) 4%, var(--pricing-surface)), var(--pricing-surface) 72%) !important;
  background-size: auto !important;
}

.pricing-v2 .pricing-choice-board article {
  --choice-wash: oklch(72% 0.12 258 / 0.16);
  background:
    radial-gradient(circle at 18% 10%, var(--choice-wash), transparent 38%),
    linear-gradient(135deg, var(--choice-wash), transparent 62%),
    var(--pricing-surface) !important;
  background-size: auto !important;
}

.pricing-v2 .pricing-choice-board article:nth-child(1) {
  --choice-wash: oklch(72% 0.12 258 / 0.18);
}

.pricing-v2 .pricing-choice-board article:nth-child(2) {
  --choice-wash: oklch(78% 0.12 82 / 0.16);
}

.pricing-v2 .pricing-choice-board article:nth-child(3) {
  --choice-wash: oklch(74% 0.12 160 / 0.15);
}

.pricing-v2 .pricing-choice-board article:nth-child(4) {
  --choice-wash: oklch(62% 0.04 248 / 0.12);
}

.pricing-v2 .pricing-choice-board article:nth-child(1),
.pricing-v2 .pricing-choice-board article:nth-child(2),
.pricing-v2 .pricing-choice-board article:nth-child(3),
.pricing-v2 .pricing-choice-board article:nth-child(4) {
  background:
    radial-gradient(circle at 18% 10%, var(--choice-wash), transparent 38%),
    linear-gradient(135deg, var(--choice-wash), transparent 62%),
    var(--pricing-surface) !important;
  background-size: auto !important;
}

.pricing-v2 .pricing-factor-grid article {
  --factor-wash: oklch(76% 0.11 218 / 0.18);
  background:
    radial-gradient(ellipse at 100% 100%, var(--factor-wash), transparent 52%),
    linear-gradient(152deg, color-mix(in oklch, var(--factor-wash) 36%, var(--pricing-surface)), transparent 40%),
    var(--pricing-surface) !important;
  background-size: auto !important;
}

.pricing-v2 .pricing-factor-grid article:nth-child(1) {
  --factor-wash: oklch(72% 0.1 226 / 0.2);
}

.pricing-v2 .pricing-factor-grid article:nth-child(2) {
  --factor-wash: oklch(72% 0.11 285 / 0.16);
}

.pricing-v2 .pricing-factor-grid article:nth-child(3) {
  --factor-wash: oklch(78% 0.1 72 / 0.16);
}

.pricing-v2 .pricing-factor-grid article:nth-child(4) {
  --factor-wash: oklch(66% 0.06 248 / 0.15);
}

@media (max-width: 1180px) {
  .pricing-v2 .pricing-premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-v2 .pricing-premium-card {
    min-block-size: 0;
  }

  .pricing-v2 .pricing-premium-card.is-signature {
    transform: none;
  }
}

@media (max-width: 720px) {
  .pricing-v2 .pricing-premium-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .pricing-v2 .pricing-premium-link {
    inline-size: 100%;
  }

  .pricing-v2 .pricing-premium-grid,
  .pricing-v2 .pricing-premium-specs,
  .pricing-v2 .pricing-service-choice {
    grid-template-columns: 1fr;
  }

  .pricing-v2 .pricing-service-choice .btn {
    inline-size: 100%;
  }

  .pricing-v2 .pricing-premium-card > p {
    min-block-size: 0;
  }
}

/* Pricing comparison presentation pass. Text stays intact; only status-like values become badges. */
.pricing-v2 .pricing-comparison {
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--pricing-blue) 3%, var(--pricing-surface)), var(--pricing-surface) 34%),
    var(--pricing-surface);
  box-shadow: 0 28px 74px rgba(16, 24, 40, 0.09);
}

.pricing-v2 .pricing-comparison-panel {
  opacity: 1;
}

.pricing-v2 .pricing-comparison-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block-end: 4px;
}

.pricing-v2 .pricing-comparison-scroll::-webkit-scrollbar {
  block-size: 10px;
}

.pricing-v2 .pricing-comparison-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in oklch, var(--pricing-blue) 32%, var(--pricing-line));
  background-clip: content-box;
}

.pricing-v2 .pricing-comparison-sticky-grid {
  overflow: hidden;
  border-color: color-mix(in oklch, var(--pricing-blue) 16%, var(--pricing-line));
  background: color-mix(in oklch, var(--pricing-blue) 7%, var(--pricing-surface));
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--pricing-blue) 12%, var(--pricing-line)),
    0 18px 36px rgba(16, 24, 40, 0.075);
}

.pricing-v2 .pricing-comparison-sticky-grid > div {
  padding: 16px 16px;
}

.pricing-v2 .pricing-comparison-sticky-grid > div:nth-child(4) {
  background: color-mix(in oklch, var(--pricing-blue) 12%, var(--pricing-surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pricing-blue) 16%, transparent);
}

.pricing-v2 .pricing-comparison-sticky-grid > div:nth-child(5) {
  background: color-mix(in oklch, oklch(70% 0.15 82) 8%, var(--pricing-surface));
}

.pricing-v2 .pricing-comparison table {
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 12%, var(--pricing-line));
  border-block-start: 0;
  border-radius: 0 0 18px 18px;
  border-collapse: separate;
  border-spacing: 0;
  background: color-mix(in oklch, var(--pricing-surface) 92%, oklch(99% 0.006 255));
}

.pricing-v2 .pricing-comparison th,
.pricing-v2 .pricing-comparison td {
  border-block-end: 1px solid color-mix(in oklch, var(--pricing-blue) 9%, var(--pricing-line));
  padding: 16px;
}

.pricing-v2 .pricing-comparison tbody th {
  background: color-mix(in oklch, var(--pricing-blue) 3%, var(--pricing-surface));
  color: var(--pricing-ink);
  font-weight: 850;
}

.pricing-v2 .pricing-comparison tbody td {
  background: color-mix(in oklch, var(--pricing-surface) 96%, oklch(99% 0.006 255));
}

.pricing-v2 .pricing-comparison tbody td:nth-child(4) {
  box-shadow: inset 1px 0 color-mix(in oklch, var(--pricing-blue) 10%, transparent), inset -1px 0 color-mix(in oklch, var(--pricing-blue) 10%, transparent);
}

.pricing-v2 .pricing-comparison tbody td:nth-child(5) {
  box-shadow: inset 1px 0 color-mix(in oklch, oklch(70% 0.15 82) 10%, transparent), inset -1px 0 color-mix(in oklch, oklch(70% 0.15 82) 10%, transparent);
}

.pricing-v2 .pricing-comparison td:has(.pricing-compare-badge) {
  text-align: center;
}

.pricing-v2 .pricing-comparison td.pricing-compare-dash {
  text-align: center;
  color: color-mix(in oklch, var(--pricing-muted) 78%, var(--pricing-text));
  font-weight: 700;
}

.pricing-v2 .pricing-compare-help-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pricing-v2 .pricing-compare-help {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 28%, var(--pricing-line));
  border-radius: 999px;
  background: color-mix(in oklch, var(--pricing-blue) 8%, var(--pricing-surface));
  color: var(--pricing-blue);
  cursor: help;
  font: 900 12px/1 var(--font-ui);
}

.pricing-v2 .pricing-compare-help::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  inset-inline-start: calc(100% + 10px);
  inset-block-start: 50%;
  inline-size: min(320px, 42vw);
  transform: translateY(-50%) translateX(-4px);
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 16%, var(--pricing-line));
  border-radius: 14px;
  background: color-mix(in oklch, var(--pricing-surface) 96%, oklch(99% 0.01 255));
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.14);
  color: var(--pricing-text);
  opacity: 0;
  padding: 12px 14px;
  pointer-events: none;
  text-align: left;
  visibility: hidden;
  font: 700 12px/1.4 var(--font-ui);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.pricing-v2 .pricing-compare-help:hover::after,
.pricing-v2 .pricing-compare-help:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  visibility: visible;
}

.pricing-v2 .pricing-compare-help:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--pricing-blue) 22%, transparent);
  outline-offset: 3px;
}

.pricing-v2 .pricing-comparison tbody tr:hover th,
.pricing-v2 .pricing-comparison tbody tr:hover td {
  background: color-mix(in oklch, var(--pricing-blue) 7%, var(--pricing-surface));
}

.pricing-v2 .pricing-compare-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 26px;
  border: 1px solid color-mix(in oklch, var(--pricing-blue) 18%, var(--pricing-line));
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
  font: 850 12px/1 var(--font-ui);
}

.pricing-v2 .pricing-compare-badge.is-all {
  background: color-mix(in oklch, var(--pricing-blue) 9%, var(--pricing-surface));
  color: var(--pricing-blue);
}

.pricing-v2 .pricing-compare-badge.is-yes {
  border-color: color-mix(in oklch, oklch(64% 0.14 155) 26%, var(--pricing-line));
  background: color-mix(in oklch, oklch(64% 0.14 155) 11%, var(--pricing-surface));
  color: oklch(43% 0.12 155);
}

.pricing-v2 .pricing-compare-note {
  display: block;
  margin-block-start: 6px;
  color: var(--pricing-muted);
  font: 700 12px/1.25 var(--font-ui);
}

@media (max-width: 820px) {
  .pricing-v2 .pricing-comparison {
    padding-inline: 16px;
  }
}

/* Cross-page heading rhythm: match the homepage title-to-copy spacing. */
:root {
  --hero-heading-copy-gap: 20px;
  --heading-copy-gap: 16px;
}

.home-hero .lead,
.features-hero .lead,
.formats-hero .lead,
.agencies-v2 .agency-hero .agency-lead,
.companies-v2 .company-hero .company-lead,
.pricing-v2 .pricing-hero .pricing-lead {
  margin-block-start: var(--hero-heading-copy-gap) !important;
}

.home-section-head,
.features-section-head,
.features-social-head,
.features-task-head,
.features-screen-head,
.formats-section-head,
.formats-mechanics-head,
.formats-event-head,
.agencies-v2 .agency-section-head,
.companies-v2 .company-section-head,
.pricing-v2 .pricing-section-head {
  row-gap: var(--heading-copy-gap) !important;
}

.home-section-head > p:not(.eyebrow),
.features-section-head > p:not(.eyebrow),
.features-social-head > p:not(.eyebrow),
.features-task-head > p:not(.eyebrow),
.features-screen-head > p:not(.eyebrow),
.formats-section-head > p:not(.eyebrow),
.formats-mechanics-head > p,
.formats-event-head > p:not(.eyebrow),
.agencies-v2 .agency-section-head > p:not(.eyebrow),
.companies-v2 .company-section-head > p:not(.eyebrow),
.pricing-v2 .pricing-section-head > p:not(.eyebrow) {
  margin-block: 0 !important;
}

.detail-link-row {
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-block-start: clamp(20px, 2vw, 28px) !important;
}

.detail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  color: var(--color-primary);
  font: 700 16px/1.2 var(--font-ui);
  letter-spacing: 0;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.detail-link::after {
  content: "→";
  font-size: 18px;
  line-height: 1;
  transition: transform 160ms ease;
}

.detail-link:hover {
  color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.detail-link:hover::after {
  transform: translateX(3px);
}

.detail-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid color-mix(in oklch, var(--color-primary) 24%, transparent);
  outline-offset: 4px;
}

.home-social-proof > .container > .home-social-intro {
  inline-size: 100% !important;
  max-inline-size: 1200px !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

.home-social-proof > .container > .home-social-intro > p:last-child {
  max-inline-size: 1200px !important;
}

@media (max-width: 720px) {
  :root {
    --hero-heading-copy-gap: 14px;
    --heading-copy-gap: 14px;
  }
}

.home-orchestration.hero-image-frame,
.features-hero-orbit.hero-image-frame {
  padding: 0 !important;
  background: #F8F9F7 !important;
}

.pricing-v2 .pricing-hero-image-frame {
  padding: 0 !important;
  background: #F8F9F7 !important;
}

.home-orchestration.hero-image-frame::before {
  content: none !important;
}

.home-orchestration.hero-image-frame > img {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.home-orchestration.hero-image-frame > img,
.features-hero-orbit.hero-image-frame > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.pricing-v2 .pricing-hero-image-frame > img {
  border-radius: inherit;
}

/* Feature question types: two calm product marquees on desktop, static grid on smaller screens. */
.features-task-grid.features-task-marquee {
  inline-size: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  overflow: hidden !important;
  padding-inline: 0 !important;
}

.features-task-marquee-row {
  overflow: hidden;
  padding-block: 10px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.features-task-marquee-track {
  display: flex;
  inline-size: max-content;
  will-change: transform;
  animation: features-task-marquee 58s linear infinite both paused;
}

.features-task-marquee-row.is-reverse .features-task-marquee-track {
  animation-name: features-task-marquee-reverse;
  animation-duration: 66s;
}

.features-task-marquee.is-running .features-task-marquee-track {
  animation-play-state: running;
}

.features-task-marquee:hover .features-task-marquee-track,
.features-task-marquee:focus-within .features-task-marquee-track {
  animation-play-state: paused;
}

.features-task-marquee-group {
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  padding-inline: 7px;
}

.features-task-marquee article {
  inline-size: clamp(230px, 22vw, 310px) !important;
  min-block-size: 166px !important;
  flex: 0 0 clamp(230px, 22vw, 310px);
  grid-template-rows: auto auto 1fr !important;
}

@keyframes features-task-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-33.333333%, 0, 0);
  }
}

@keyframes features-task-marquee-reverse {
  from {
    transform: translate3d(-33.333333%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .features-task-grid.features-task-marquee {
    inline-size: min(1200px, calc(100% - 48px)) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .features-task-marquee-row {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .features-task-marquee-track {
    display: block;
    animation: none !important;
  }

  .features-task-marquee-group {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    padding-inline: 0;
  }

  .features-task-marquee-group[aria-hidden="true"] {
    display: none;
  }

  .features-task-marquee article {
    inline-size: auto !important;
    flex: initial;
  }
}

@media (max-width: 900px) {
  .features-task-grid.features-task-marquee {
    inline-size: min(1200px, calc(100% - 40px)) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .features-task-marquee-row {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .features-task-marquee-track {
    display: block;
    animation: none !important;
  }

  .features-task-marquee-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-inline: 0;
  }

  .features-task-marquee-group[aria-hidden="true"] {
    display: none;
  }

  .features-task-marquee article {
    inline-size: auto !important;
    flex: initial;
  }
}

@media (max-width: 620px) {
  .features-task-grid.features-task-marquee {
    inline-size: min(1200px, calc(100% - 32px)) !important;
  }

  .features-task-marquee-group {
    grid-template-columns: 1fr;
  }
}

/* Smartio header logo pass: replace the temporary mark with the real asset. */
.topbar .brand {
  flex: 0 0 auto;
  gap: 0;
}

.brand-logo {
  display: block;
  inline-size: clamp(116px, 10vw, 138px);
  block-size: auto;
}

@media (max-width: 820px) {
  .brand-logo {
    inline-size: 118px;
  }
}

/* Section copy cleanup: keep long descriptions aligned with the rest of the page. */
.features-host-copy > p {
  max-inline-size: 980px !important;
}

/* Alignment cleanup: hidden form fields and static mobile marquees must not widen the page. */
.demo-form.lead-form .lead-hp,
#demo .demo-form.lead-form .lead-hp {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-inline-size: 1px !important;
  min-block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.home-logo-marquee,
.home-logo-row,
.features-task-grid.features-task-marquee,
.features-task-marquee-row {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
}

html,
body {
  max-inline-size: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 900px) {
  .features-task-grid.features-task-marquee {
    overflow: hidden !important;
  }

  .features-task-marquee-row,
  .features-task-marquee-track,
  .features-task-marquee-group,
  .features-task-marquee article {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
  }
}

/* Homepage hero thesis: make the positioning line visible without turning it into an eyebrow. */
.home-core-thesis {
  margin: clamp(16px, 1.7vw, 22px) 0 0;
  max-inline-size: 100%;
  color: rgba(10, 11, 13, 0.78);
  font: 780 clamp(28px, 2.55vw, 38px)/1.02 var(--font-display);
  letter-spacing: 0;
  white-space: nowrap;
}

.home-core-thesis span {
  color: #0046D8;
  font-size: 1.06em;
  font-weight: 820;
}

.home-core-thesis + .lead {
  margin-block-start: clamp(24px, 2.2vw, 30px) !important;
}

@media (max-width: 720px) {
  .home-core-thesis {
    font-size: clamp(19px, 5.85vw, 24px);
  }
}

/* Homepage proof strip spacing: let the logo band breathe after the first screen. */
main.home-page > section.home-proof-strip:not(.home-hero):not(.home-final-cta) {
  padding-block: clamp(42px, 4.6vw, 64px) 24px !important;
  margin-block-start: 0 !important;
}

@media (max-width: 720px) {
  main.home-page > section.home-proof-strip:not(.home-hero):not(.home-final-cta) {
    padding-block: 34px 18px !important;
    margin-block-start: 0 !important;
  }
}