/* Mlytics AGIC — a working creative studio.
   Craft review follows Unslop by Damir Sokolovsky (CC BY 4.0).
   https://github.com/heydamir/unslop — see README for attribution and decisions. */

/* 1. Shared rhythm and type */
:root {
  --ink: #202724;
  --body: #536159;
  --muted: #68746e;
  --green: #225d59;
  --deep: #1e3a34;
  --pale: #f1f4f2;
  --page: #fafbf9;
  --line: #dce1dd;
  --radius: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  scroll-behavior: auto;
  scroll-padding-top: 88px;
}
.website {
  background: var(--page);
  color: var(--ink);
  font-weight: 400;
}
.website .container {
  max-width: 1248px;
  width: calc(100% - 96px);
}
.website .section {
  padding: 80px 0;
}
.website h1,
.website h2,
.website h3,
.website h4 {
  font-weight: 500;
  color: var(--ink);
}
.website h1 {
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.website h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.website h3 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.website .green {
  color: inherit;
}
.website .eyebrow,
.website .tiny-label,
.website .number-label {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
}
.website .eyebrow {
  margin-bottom: 16px;
}
.website .muted {
  color: var(--muted);
}
.website .icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  flex: none;
}
.website .section-heading {
  display: flex;
  align-items: end;
  gap: 64px;
  margin-bottom: 40px;
}
.website .section-heading > p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  max-width: 416px;
  padding: 0;
}
.website .section-heading h2 {
  letter-spacing: -0.025em;
}
.website .large-copy {
  font-size: 18px;
  line-height: 1.75;
  color: var(--body);
  margin: 24px 0;
}
.website .soft-section {
  background: #f1f3f0;
  border-block: 1px solid var(--line);
}
.website .small-note,
.website .context-footnote {
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
}
.website .context-footnote {
  margin-top: 24px;
  max-width: 1000px;
}
.website .button {
  min-height: 44px;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  gap: 12px;
  line-height: 1.3;
  transition:
    background-color 0.16s var(--ease),
    color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}
.website .button:hover {
  transform: none;
}
.website .button-dark {
  background: var(--deep);
  color: #fff;
}
.website .button-dark:hover {
  background: #294b42;
}
.website .button-outline {
  background: transparent;
  border-color: #bac5be;
  color: var(--ink);
}
.website .button-outline:hover {
  background: #e9eeea;
  border-color: #84978b;
}
.website .button-orange {
  background: #ff5723;
  color: #1a1a1a;
}
.website .button-orange:hover {
  background: #ce3708;
  color: #fff;
}
.website .button-white {
  background: #fff;
  color: var(--deep);
}
.website .text-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
  gap: 8px;
}
.website a:hover {
  text-underline-offset: 4px;
}
.website .button:focus-visible,
.website a:focus-visible,
.website button:focus-visible,
.website summary:focus-visible,
.website input:focus-visible,
.website select:focus-visible,
.website textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
.website .delivery-section :focus-visible,
.website .estimate-result :focus-visible {
  outline-color: #c6d4cc;
}
.website input,
.website select,
.website textarea {
  accent-color: var(--green);
}
.website .page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}
.website .page-actions:empty {
  display: none;
}
.website small,
.website dt,
.website dd,
.website input,
.website .number-label,
.website .tiny-label {
  font-variant-numeric: tabular-nums;
}

/* 2. Navigation */
.website .site-header {
  height: 64px;
  background: var(--page);
  border-color: var(--line);
  backdrop-filter: none;
}
.website .nav-shell {
  gap: 24px;
}
.website .brand {
  gap: 12px;
}
.website .brand img {
  width: 108px;
}
.website .brand-divider {
  height: 20px;
  background: #ccd5ce;
}
.website .product-name {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--body);
}
.website .desktop-nav {
  gap: 28px;
}
.website .desktop-nav a {
  font-size: 14px;
  font-weight: 400;
  padding: 20px 0;
  color: var(--body);
}
.website .desktop-nav a[aria-current="page"] {
  color: var(--ink);
}
.website .desktop-nav a[aria-current="page"]:after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  left: 0;
  right: 0;
  background: var(--green);
}
.website .nav-actions .button {
  font-size: 13px;
  min-height: 36px;
  padding: 8px 16px;
  background: transparent;
  color: var(--ink);
  border-color: #bac5be;
}
.website .nav-actions .button:hover {
  background: #e9eeea;
}
.website .mobile-nav {
  top: 63px;
  background: var(--page);
  box-shadow: none;
  padding: 16px 24px 24px;
}
.website .mobile-nav a {
  padding: 12px 0;
  font-size: 16px;
}
.website .mobile-nav a[aria-current="page"] {
  color: var(--green);
  font-weight: 500;
}
.website .menu-toggle {
  width: 40px;
  height: 40px;
  padding: 8px;
}

/* 3. Homepage: campaign content carries the colour */
.home-hero {
  padding: 64px 0;
  background: var(--page);
  overflow: hidden;
}
.home-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 64px;
  align-items: center;
}
.home-hero-copy h1 {
  font-size: clamp(48px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.home-hero-copy > .eyebrow {
  margin-bottom: 24px;
  color: var(--green);
}
.home-hero-copy > p:not(.eyebrow) {
  font-size: 18px;
  color: var(--body);
  line-height: 1.7;
  max-width: 496px;
  margin-top: 24px;
}
.home-hero-copy .page-actions {
  margin-top: 32px;
}
.campaign-hero {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.04);
}
.campaign-hero-top {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.campaign-hero-top .tiny-label {
  font-size: 11px;
  white-space: nowrap;
}
.campaign-hero-top .muted {
  display: inline;
  margin-left: 4px;
  font-size: 12px;
}
.campaign-image {
  width: calc(100% - 32px);
  max-width: 440px;
  aspect-ratio: 1;
  height: auto;
  position: relative;
  overflow: hidden;
  margin: 16px auto 0;
  border-radius: 4px;
  background: #e6e4d8;
}
.campaign-image > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.campaign-image:after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.65));
}
.campaign-image-copy {
  position: absolute;
  z-index: 1;
  inset: auto 24px 24px;
  color: white;
}
.campaign-image-copy > span {
  font-size: 12px;
  display: block;
  color: #fff;
}
.campaign-image-copy > strong {
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  display: block;
  margin: 8px 0 12px;
  font-weight: 400;
}
.campaign-brief {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}
.campaign-brief strong {
  font-size: 15px;
  font-weight: 500;
}
.campaign-brief p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.campaign-brief > a {
  width: 36px;
  height: 36px;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.campaign-scenes {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 16px 24px;
}
.campaign-scenes > span {
  flex: 1;
  font-size: 12px;
  color: var(--body);
}
.campaign-scenes b {
  font: 11px var(--mono);
  color: var(--muted);
  margin-right: 8px;
}
.platform-ribbon {
  border-block: 1px solid var(--line);
  padding: 24px 0;
  background: #fff;
}
.platform-ribbon .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.platform-ribbon p {
  font-size: 13px;
  color: var(--body);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.platform-ribbon i {
  font-style: normal;
  color: #8a9a8e;
}
.website .value-columns {
  gap: 40px;
}
.website .value-columns article {
  padding-top: 24px;
  border-color: #bfcac2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.website .value-columns h3 {
  font-size: 24px;
  font-weight: 500;
  margin-top: 20px;
  max-width: 280px;
}
.website .value-columns p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.75;
  max-width: 340px;
  margin-top: 16px;
  flex: 1;
}
.website .value-columns .text-link {
  font-size: 14px;
  margin-top: 24px;
}
.audience-cards {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
}
.audience-cards article {
  border-top: 1px solid #bfcac2;
  padding: 24px 0 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.audience-cards h3 {
  font-size: 28px;
  margin-top: 16px;
}
.audience-cards p:not(.tiny-label) {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  margin: 16px 0 24px;
  max-width: 480px;
}
.audience-cards .button {
  margin-top: auto;
}
.ecosystem-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.ecosystem-list {
  border-top: 1px solid var(--line);
}
.ecosystem-list article {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.ecosystem-list article > span {
  font: 12px var(--mono);
  color: var(--green);
  margin-top: 4px;
  position: relative;
}
.ecosystem-list h3 {
  font-size: 24px;
}
.ecosystem-list p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 12px;
}
.pricing-teaser {
  padding: 48px 0;
  border-block: 1px solid var(--line);
  background: #eef2ee;
  color: var(--ink);
}
.pricing-teaser .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}
.pricing-teaser h2 {
  font-size: 36px;
}
.pricing-teaser p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 16px;
}

/* 4. Page introductions */
.page-hero {
  background: var(--page);
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.page-hero h1 {
  font-size: 48px;
  font-weight: 400;
}
.page-hero .eyebrow {
  color: var(--green);
  margin-bottom: 16px;
}
.page-intro {
  font-size: 17px;
  line-height: 1.75;
  max-width: 580px;
  color: var(--body);
  margin: 0;
}
.page-hero-detail {
  padding-top: 12px;
}
.page-hero .page-actions {
  margin-top: 20px;
  gap: 24px;
}
.page-hero .page-actions .button {
  font-size: 13px;
}
.workspace-section {
  background: var(--page);
  padding: 32px 0 64px;
}
.workspace-section .creator-shell {
  margin-top: 0;
  scroll-margin-top: 88px;
}
.workflow-four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.workflow-four article {
  border-top: 1px solid #bfcac2;
  padding-top: 20px;
}
.workflow-four article > span {
  font: 12px var(--mono);
  color: var(--green);
}
.workflow-four h3 {
  font-size: 22px;
  margin-top: 16px;
}
.workflow-four p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.75;
  margin-top: 12px;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
  margin-top: 40px;
}
.feature-grid article {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.feature-grid h3 {
  font-size: 24px;
}
.feature-grid p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 16px;
  max-width: 500px;
}
.website .faq-layout {
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
}
.website .faq-list summary {
  font-size: 16px;
  font-weight: 500;
  padding: 24px 0;
  gap: 16px;
}
.website .faq-list details:first-child summary {
  padding-top: 0;
}
.website .faq-list details p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  padding: 0 32px 24px 0;
}

/* 5. Campaign workspace: neutral chrome, readable controls */
.website .creator-shell {
  border: 1px solid #cfd7d1;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.03);
  background: #fff;
}
.website .workspace-top {
  height: 52px;
  padding: 0 24px;
  background: #fff;
  gap: 24px;
}
.website .workspace-name {
  gap: 8px;
  font-size: 13px;
}
.website .workspace-name > .muted {
  display: inline;
}
.website .workspace-divider {
  margin: 0 4px;
  color: #8a978f;
}
.website .preview-badge {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
  white-space: normal;
}
.website .preview-badge > span {
  display: none;
}
.website .workspace-grid {
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
}
.website .creator-form {
  padding: 24px;
  border-right: 1px solid var(--line);
}
.website .form-heading h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.website .form-heading p {
  font-size: 13px;
  margin-top: 8px;
  color: var(--body);
  line-height: 1.6;
}
.website .source-tabs {
  margin-top: 24px;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f1f3f0;
}
.website .source-tabs button {
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 4px;
  border-radius: 4px;
  color: var(--body);
  min-height: 36px;
}
.website .source-tabs button[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  font-weight: 500;
}
.website .brief-input {
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.65;
  min-height: 120px;
  border-color: #cfd7d1;
  border-radius: 8px 8px 0 0;
  color: var(--body);
}
.website .brief-context {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 16px 12px;
  gap: 12px;
  border-color: #cfd7d1;
  border-radius: 0 0 8px 8px;
}
.website .brief-context span:first-child {
  gap: 8px;
}
.website .brief-context .icon {
  width: 16px;
  height: 16px;
}
.website .form-row {
  gap: 16px;
  margin-top: 20px;
}
.website .creator-form label,
.website .field-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--body);
}
.website .creator-form select {
  min-height: 40px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink);
  border-color: #cfd7d1;
  border-radius: 8px;
}
.website .format-row {
  margin-top: 20px;
  gap: 12px;
}
.website .format-options {
  gap: 8px;
}
.website .format-options button {
  min-height: 36px;
  border-radius: 8px;
  font-size: 12px;
  padding: 8px 12px;
  gap: 8px;
  color: var(--body);
  border-color: var(--line);
}
.website .format-options button[aria-pressed="true"] {
  background: #edf1ee;
  border-color: #859a8d;
  color: var(--green);
}
.website .plan-button {
  margin-top: 24px;
  min-height: 44px;
  font-size: 14px;
}
.website .plan-status {
  min-height: 40px;
  font-size: 12px;
  line-height: 1.6;
  padding-top: 12px;
  color: var(--muted);
  text-align: left;
}
.website .draft-actions {
  justify-content: flex-start;
  gap: 24px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.website .draft-actions button {
  font-size: 12px;
  padding: 8px 0;
  gap: 8px;
  color: var(--body);
}
.website .creator-output {
  background: #f2f4f1;
}
.website .output-header {
  height: 52px;
  padding: 0 24px;
  border-color: var(--line);
  gap: 16px;
}
.website .output-tabs {
  gap: 28px;
}
.website .output-tabs button {
  font-size: 13px;
  padding: 0;
  color: var(--muted);
}
.website .output-tabs button[aria-selected="true"] {
  font-weight: 500;
  color: var(--ink);
}
.website .output-status {
  font-size: 12px;
  color: var(--muted);
  gap: 8px;
}
.website .preview-stage {
  padding: 24px;
  min-height: 440px;
  background-image: none;
  gap: 0;
  align-items: center;
}
.website .creative-visual {
  height: 392px;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
  transition: none;
  background: #e8e6dc;
}
.website .creative-visual[data-format="1:1"] {
  height: 360px;
  aspect-ratio: 1;
}
.website .creative-visual[data-format="16:9"] {
  height: auto;
  width: min(100%, 560px);
  aspect-ratio: 16/9;
}
.website .creative-visual img {
  filter: none;
  transition: transform 0.5s var(--ease);
}
.website .creative-visual:after {
  background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.7));
}
.website .visual-tag {
  font-size: 11px;
  letter-spacing: 0;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  background: #fffffff0;
  color: var(--body);
  border-radius: 4px;
}
.website .visual-copy {
  left: 20px;
  right: 20px;
  bottom: 24px;
  gap: 12px;
}
.website .visual-copy > span:first-child,
.website .visual-brand {
  font-size: 11px;
  letter-spacing: 0;
  color: #fff;
}
.website .visual-copy strong {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 500;
}
.website .visual-brand {
  margin: 0;
}
.website .preview-timeline {
  padding: 0 24px 24px;
  gap: 16px;
  align-items: stretch;
}
.website .play-button {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  align-self: center;
  border-color: #bfcac2;
}
.website .play-button .icon {
  width: 18px;
  height: 18px;
}
.website .scene-steps {
  gap: 8px;
}
.website .scene-steps button {
  font-size: 12px;
  line-height: 1.4;
  gap: 8px;
  padding: 12px;
  background: #fafbf9;
  border-color: #d4dcd6;
  border-radius: 8px;
  color: var(--body);
}
.website .scene-steps button[aria-pressed="true"] {
  background: #fff;
  border-color: #648475;
  color: var(--ink);
  box-shadow: inset 0 2px 0 var(--green);
}
.website .scene-steps small {
  font-size: 11px;
  color: var(--muted);
}
.website .workspace-bottom {
  font-size: 12px;
  padding: 16px 24px;
  gap: 16px;
  background: #fff;
  color: var(--muted);
  flex-wrap: wrap;
}
.website .workspace-bottom > span:first-child {
  gap: 8px;
}
.website .workspace-bottom i {
  padding: 0 8px;
  color: #7d9585;
}
.website .storyboard-panel,
.website .usage-panel {
  padding: 24px;
  min-height: 0;
}
.website .panel-heading h3,
.website .usage-panel h3 {
  font-size: 28px;
  line-height: 1.25;
  margin-top: 8px;
}
.website .panel-heading p,
.website .usage-panel > p {
  font-size: 14px;
  line-height: 1.65;
  margin-top: 8px;
  color: var(--body);
}
.website .scene-editor {
  margin-top: 20px;
}
.website .scene-editor > span {
  font-size: 14px;
  gap: 8px;
  color: var(--body);
  flex-wrap: wrap;
}
.website .scene-editor b,
.website .scene-editor small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.website .scene-editor textarea {
  font-size: 14px;
  line-height: 1.65;
  margin-top: 8px;
  padding: 12px;
  border-color: #cfd7d1;
  border-radius: 8px;
}
.website .usage-list {
  margin: 24px 0;
}
.website .usage-list > div {
  padding: 16px 0;
  font-size: 14px;
  gap: 16px;
}
.website .usage-list dd {
  font-size: 12px;
  color: var(--body);
  text-align: right;
}
.website .usage-foot {
  padding: 16px;
  background: #e7ece7;
  border-radius: 8px;
  gap: 12px;
}
.website .usage-foot strong {
  font-size: 14px;
  font-weight: 500;
}
.website .usage-foot p {
  font-size: 12px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 8px;
}
.website .usage-panel > .preview-badge {
  margin-top: 16px;
}

/* 6. APIs, core compute and delivery */
.website .api-section {
  background: #f2f4f1;
  border-color: var(--line);
}
.website .api-grid {
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
}
.website .api-options {
  gap: 8px;
}
.website .api-options button {
  padding: 20px;
  gap: 16px;
  border-radius: 8px;
}
.website .api-options button[aria-pressed="true"] {
  border-color: #bfcdc4;
  background: #fff;
  box-shadow: none;
}
.website .api-icon {
  width: 24px;
  height: 24px;
  color: var(--body);
  background: none !important;
}
.website .api-options strong {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.website .api-options small {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
}
.website .api-detail-intro {
  padding: 8px 0 24px;
}
.website .meter-tag {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
}
.website .api-detail-intro h3 {
  font-size: 28px;
  margin-top: 8px;
}
.website .api-detail-intro p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 16px;
  max-width: 560px;
}
.website .api-note {
  font-size: 13px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 32px;
  max-width: 880px;
}
.website .code-window {
  border-color: #ccd6ce;
  border-radius: 12px;
}
.website .code-toolbar {
  height: 44px;
  padding: 0 20px;
  font-size: 12px;
  color: var(--muted);
  border-color: var(--line);
}
.website .code-toolbar button {
  font-size: 12px;
  color: var(--green);
  padding: 8px;
}
.website .code-window pre {
  font-size: 13px;
  line-height: 1.8;
  padding: 24px;
  min-height: 240px;
  color: #344e40;
}
.website .code-caption {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  padding: 12px 20px;
  flex-wrap: wrap;
  border-color: var(--line);
}
.route-section {
  background: #fff;
}
.route-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.route-grid article {
  border-top: 1px solid #c3cfc6;
  padding-top: 24px;
}
.route-grid h3 {
  font-size: 28px;
  margin-top: 16px;
}
.route-grid p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 16px;
}
.website .delivery-section {
  background: var(--deep);
  color: #fff;
}
.website .delivery-section h2,
.website .delivery-section h3,
.website .delivery-section h2 > span {
  color: #fff;
}
.website .delivery-section .eyebrow,
.website .delivery-section .section-heading > p {
  color: #c6d4cc;
}
.website .delivery-grid {
  grid-template-columns: 0.9fr 1.4fr;
  gap: 64px;
}
.website .architecture-nav {
  gap: 8px;
}
.website .architecture-nav button {
  padding: 20px;
  gap: 16px;
  border-radius: 8px;
  color: #c6d4cc;
}
.website .architecture-nav button[aria-pressed="true"] {
  background: #29483e;
  border-color: #819c8d;
  color: #fff;
}
.website .architecture-nav button > span {
  font-size: 12px;
  color: #b9cfc0;
}
.website .architecture-nav strong {
  font-size: 20px;
}
.website .architecture-nav small {
  font-size: 13px;
  color: #b9cfc0;
  line-height: 1.5;
  margin-top: 8px;
}
.website .architecture-panel {
  border: 1px solid #728d7e;
  background: #233e35;
  border-radius: 12px;
}
.website .architecture-diagram {
  padding: 24px;
  background-image: none;
}
.website .diagram-core,
.website .diagram-engine,
.website .diagram-regions > div {
  border-color: #6a8675;
  background: #29483b;
  box-shadow: none;
  transition:
    background-color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}
.website .diagram-core {
  padding: 16px 24px;
  border-radius: 8px;
}
.website .diagram-core strong,
.website .diagram-engine strong {
  font-size: 15px;
}
.website .diagram-core small,
.website .diagram-engine small {
  font-size: 11px;
  color: #c6d4cc;
  margin-top: 4px;
}
.website .diagram-core > .icon {
  width: 18px;
  height: 18px;
  margin-bottom: 8px;
  color: #c6d4cc;
}
.website .diagram-engine {
  padding: 16px;
  border-radius: 8px;
  width: 88%;
  max-width: 360px;
  gap: 8px;
}
.website .diagram-regions {
  gap: 16px;
}
.website .diagram-regions > div {
  border-radius: 8px;
  padding: 16px 8px;
  gap: 8px;
}
.website .diagram-regions strong {
  font-size: 12px;
}
.website .diagram-caption {
  font-size: 11px;
  padding: 16px 0 0;
  color: #c6d4cc;
  text-align: center;
}
.website .architecture-diagram[data-layer="compute"] .diagram-core,
.website .architecture-diagram[data-layer="route"] .diagram-engine,
.website .architecture-diagram[data-layer="deliver"] .diagram-regions > div {
  box-shadow: none;
  border-color: #c2d5c6;
  background: #355646;
}
.website .architecture-description {
  padding: 24px;
  border-color: #5f7b6b;
  margin-top: 0;
}
.website .architecture-description h3 {
  font-size: 24px;
}
.website .architecture-description p {
  font-size: 14px;
  line-height: 1.75;
  color: #c6d4cc;
  margin-top: 12px;
}
.website .architecture-tags {
  gap: 8px;
  margin-top: 16px;
}
.website .architecture-tags span {
  font-size: 11px;
  color: #d6e0d9;
  border-color: #6d8977;
  padding: 4px 8px;
  border-radius: 4px;
}
.website .delivery-footer {
  font-size: 13px;
  color: #c6d4cc;
  margin-top: 32px;
  padding-top: 24px;
  gap: 24px;
  border-color: #607969;
  flex-wrap: wrap;
}
.boundary-card {
  border-top: 1px solid #c4d0c8;
  padding: 24px 0 0;
}
.boundary-card h3 {
  font-size: 26px;
}
.boundary-card ul {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}
.boundary-card li + li {
  margin-top: 24px;
}
.boundary-card li strong {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  display: block;
}
.boundary-card li span {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  display: block;
  margin-top: 8px;
}

/* 7. AI Mode */
.website .ai-mode-grid {
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
}
.website .ai-mode-copy h2 {
  font-size: 36px;
}
.website .ai-mode-copy > p:not(.eyebrow) {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  margin-top: 24px;
  max-width: 440px;
}
.website .market-steps {
  gap: 24px;
  margin: 32px 0;
}
.website .market-steps li {
  gap: 16px;
}
.website .market-steps li > span {
  font-size: 12px;
  color: var(--green);
  margin-top: 0;
}
.website .market-steps strong {
  font-size: 16px;
  font-weight: 500;
}
.website .market-steps p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 4px;
}
.website .format-tags {
  gap: 8px;
  max-width: none;
}
.website .format-tags span {
  font-size: 12px;
  border: 0;
  border-radius: 0;
  padding: 0 12px 0 0;
  background: none;
  color: var(--body);
  border-right: 1px solid var(--line);
}
.website .format-tags span:last-child {
  border: 0;
}
.website .audience-preview {
  background: #f2f4f1;
  border-color: #ccd6ce;
  border-radius: 12px;
  padding: 24px;
}
.website .audience-control-heading {
  gap: 16px;
  flex-wrap: wrap;
}
.website .audience-control-heading .tiny-label {
  font-size: 12px;
}
.website .audience-controls {
  gap: 12px;
  margin: 24px 0;
}
.website .audience-controls label {
  font-size: 12px;
  color: var(--body);
}
.website .audience-controls select {
  font-size: 13px;
  min-height: 40px;
  padding: 8px;
  margin-top: 8px;
  color: var(--ink);
  border-color: #c6d1c9;
  border-radius: 8px;
}
.website .publisher-window {
  border-color: #cfd8d1;
  border-radius: 8px;
  box-shadow: none;
}
.website .publisher-top {
  padding: 16px;
  border-color: var(--line);
}
.website .publisher-mark {
  font-size: 14px;
  color: var(--ink);
  gap: 8px;
}
.website .publisher-top > span:last-child {
  font-size: 11px;
  color: var(--muted);
}
.website .question-bubble {
  margin: 24px 16px 20px 40px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.8;
  background: #f0f3f0;
  border-radius: 8px 8px 0 8px;
  color: var(--ink);
}
.website .answer-area {
  margin: 0 16px 24px;
  gap: 12px;
}
.website .answer-area p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--body);
}
.website .answer-mark {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: none;
  margin-top: 4px;
  color: var(--green);
}
.website .sponsored-card {
  margin: 0 16px 16px;
  padding: 20px;
  border: 1px solid #bfd0c2;
  background: #f0f5ee;
  border-radius: 8px;
}
.website .sponsor-top {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--muted);
  gap: 12px;
  flex-wrap: wrap;
}
.website .sponsor-top > span:last-child {
  font-size: 11px;
  color: var(--muted);
}
.website .sponsored-card h3 {
  font-size: 24px;
  margin-top: 16px;
  color: var(--deep);
}
.website .sponsored-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 12px;
}
.website .sponsored-card a {
  font-size: 13px;
  margin-top: 16px;
  gap: 8px;
}
.website .inventory-note,
.website .audience-preview > .small-note {
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 16px;
}

/* 8. Enterprise and contact */
.enterprise-grid,
.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}
.check-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.check-list li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.enterprise-note {
  background: #eef2ee;
  color: var(--ink);
  border: 1px solid #cad5cd;
  border-radius: 12px;
  padding: 32px;
}
.enterprise-note h3 {
  font-size: 32px;
  line-height: 1.2;
  margin-top: 16px;
}
.enterprise-note > p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 20px;
}
.enterprise-note dl {
  margin: 24px 0 0;
}
.enterprise-note dl > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid #cad5cd;
  font-size: 14px;
}
.enterprise-note dd {
  margin: 0;
  text-align: right;
  color: var(--body);
}
.enterprise-note .small-note {
  font-size: 12px;
  color: var(--muted);
}
.contact-primary {
  border: 1px solid #cad5cd;
  border-radius: 12px;
  padding: 32px;
  background: #eef2ee;
}
.contact-primary h2 {
  font-size: 36px;
}
.contact-primary > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 24px;
}
.contact-primary .button {
  margin-top: 24px;
}
.contact-primary .context-footnote {
  font-size: 12px !important;
}
.contact-options article {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.contact-options article:first-child {
  padding-top: 0;
}
.contact-options h3 {
  font-size: 24px;
}
.contact-options p {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  margin-top: 12px;
}
.contact-options .text-link {
  margin-top: 16px;
}

/* 9. Public rates and the workload estimate */
.rates-section {
  padding: 48px 0 64px !important;
}
.rate-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.rate-heading .eyebrow {
  margin-bottom: 12px;
}
.rate-heading h2 {
  font-size: 32px;
}
.rate-date {
  font: 12px var(--mono);
  color: var(--muted);
  text-align: right;
}
.reference-note {
  border-left: 2px solid #8ba38f;
  padding: 0 0 0 20px;
  margin-top: 24px;
  max-width: 1000px;
}
.reference-pill {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.reference-note p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.75;
}
.rate-filters,
.estimate-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rate-filters {
  margin: 32px 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.rate-filters button,
.estimate-presets button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--body);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  line-height: 1.5;
  min-height: 36px;
}
.rate-filters button[aria-pressed="true"],
.estimate-presets button[aria-pressed="true"] {
  background: #e9efea;
  color: var(--ink);
  border-color: #b7c6bb;
}
.rate-filters button:hover,
.estimate-presets button:hover {
  background: #e9efea;
}
.rate-table-wrap {
  overflow: hidden;
}
.rate-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  text-align: left;
  table-layout: fixed;
}
.rate-table th,
.rate-table td {
  padding: 24px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.rate-table thead th {
  font-size: 12px;
  font-weight: 500;
  color: var(--body);
  padding: 12px 16px;
  text-transform: none;
  background: #edf1ed;
}
.rate-table thead th:nth-child(1) {
  width: 23%;
}
.rate-table thead th:nth-child(2) {
  width: 18%;
}
.rate-table thead th:nth-child(3) {
  width: 21%;
}
.rate-table thead th:nth-child(4) {
  width: 29%;
}
.rate-table thead th:nth-child(5) {
  width: 9%;
}
.rate-table tbody th > strong {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  display: block;
  overflow-wrap: anywhere;
}
.rate-kind {
  font-size: 12px;
  color: var(--muted);
  display: block;
  font-weight: 400;
  margin-bottom: 8px;
}
.rate-table td > strong {
  font-weight: 500;
  font-size: 14px;
}
.rate-hosting {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 8px;
}
.rate-value + .rate-value {
  margin-top: 16px;
}
.rate-value strong {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rate-value span {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--body);
  margin-top: 4px;
}
.rate-settings {
  font-size: 13px;
  color: var(--body);
  line-height: 1.75;
}
.rate-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.website .rate-source > .icon {
  width: 16px;
  height: 16px;
}
.rate-table-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}
.rates-section .context-footnote {
  margin-top: 8px;
  font-size: 12px;
}
.estimator-section {
  background: #f1f3f0;
  border-block: 1px solid var(--line);
}
.estimator-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.estimate-form {
  background: #fff;
  border: 1px solid #d2dcd4;
  border-radius: 12px;
  padding: 24px;
}
.estimate-presets {
  margin-bottom: 24px;
}
.estimate-presets button {
  font-size: 12px;
  padding: 8px 12px;
}
.estimate-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.estimate-fields label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: block;
}
.estimate-fields label > span {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  display: block;
  margin: 4px 0 8px;
  color: var(--muted);
  min-height: 20px;
}
.estimate-fields input {
  width: 100%;
  border: 1px solid #bdcbbf;
  border-radius: 8px;
  padding: 12px;
  font-family: var(--mono);
  font-size: 16px;
  min-width: 0;
  background: #fff;
  color: var(--ink);
}
.estimate-fields input[aria-invalid="true"] {
  border-color: #a24a2e;
  background: #fff8f4;
}
.estimate-form .context-footnote {
  font-size: 12px;
  margin-top: 24px;
}
.estimate-result {
  background: var(--deep);
  border: 1px solid #365346;
  border-radius: 12px;
  padding: 32px;
  color: #fff;
}
.estimate-result > .tiny-label {
  color: #c6d4cc;
}
.estimate-total {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 16px 0 8px;
}
.estimate-total > span {
  font-size: 56px;
  letter-spacing: -0.04em;
  font-weight: 400;
  line-height: 1.1;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.estimate-total small {
  font: 12px var(--mono);
  color: #c6d4cc;
}
.estimate-result > p {
  font-size: 13px;
  color: #c6d4cc;
  line-height: 1.75;
}
.estimate-result dl {
  margin: 24px 0;
}
.estimate-result dl > div {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid #698272;
  font-size: 14px;
  color: #e1e8e3;
}
.estimate-result dd {
  margin: 0;
  font: 13px var(--mono);
}
.estimate-result .estimate-status {
  font-size: 12px;
  color: #c6d4cc;
  border-top: 1px solid #698272;
  padding-top: 16px;
}
.estimate-result .button {
  width: 100%;
  margin-top: 24px;
  font-size: 14px;
}
.estimate-result .button:disabled {
  opacity: 0.6;
}
.estimate-contact {
  font-size: 13px;
  color: #e1e8e3;
  display: block;
  text-align: center;
  margin-top: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cost-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.cost-layers article {
  border-top: 1px solid #bdcbbf;
  padding-top: 24px;
}
.cost-layers h3 {
  font-size: 24px;
  margin-top: 20px;
}
.cost-layers p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.75;
  margin-top: 16px;
}
.enterprise-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 32px 0;
  margin-top: 48px;
  border-block: 1px solid var(--line);
}
.enterprise-strip h3 {
  font-size: 28px;
  margin-top: 12px;
}
.enterprise-strip p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 12px;
  max-width: 640px;
}
.enterprise-strip .button {
  white-space: nowrap;
}

/* 10. Closing sections and footer */
.website .closing-section {
  padding: 64px 0;
  background: var(--page);
  border-block: 1px solid var(--line);
}
.website .closing-section:before {
  content: none;
}
.website .closing-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  text-align: left;
}
.website .closing-inner > .closing-copy {
  display: block;
  margin: 0;
  max-width: 760px;
}
.website .closing-inner h2 {
  font-size: 32px;
  color: var(--ink);
}
.website .closing-inner .closing-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 16px;
  max-width: 680px;
}
.website .closing-inner > .button {
  flex: none;
}
.website .site-footer {
  background: #f1f3f0;
  padding: 48px 0 24px;
}
.website .footer-top {
  gap: 48px;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
}
.website .footer-top h3 {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 20px;
}
.website .footer-top > div > a:not(.brand) {
  font-size: 14px;
  color: var(--body);
  margin-top: 12px;
}
.website .footer-brand > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 24px;
}
.website .footer-bottom {
  font-size: 12px;
  color: var(--muted);
  align-items: center;
  margin-top: 48px;
  padding-top: 24px;
  gap: 24px;
  border-color: #d0dad2;
}
.footer-bottom > div {
  display: flex;
  gap: 24px;
}
.website .noscript-note {
  font-size: 14px;
  line-height: 1.7;
  padding: 20px 24px;
}

/* 11. Responsive composition */
@media (min-width: 1500px) {
  .home-hero {
    padding: 80px 0;
  }
  .campaign-image {
    max-width: 440px;
  }
}
@media (max-width: 1100px) {
  .website .container {
    width: calc(100% - 64px);
  }
  .website .desktop-nav {
    gap: 20px;
  }
  .website .desktop-nav a {
    font-size: 13px;
  }
  .home-hero-grid,
  .page-hero-grid {
    gap: 40px;
  }
  .home-hero-copy h1 {
    font-size: 54px;
  }
  .home-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }
  .home-hero .page-actions {
    gap: 16px;
  }
  .home-hero .button {
    font-size: 13px;
    padding: 12px 16px;
  }
  .campaign-image {
    max-width: 368px;
  }
  .campaign-hero-top .muted {
    display: none;
  }
  .campaign-image-copy > strong {
    font-size: 32px;
  }
  .campaign-scenes {
    gap: 12px;
    padding: 16px;
  }
  .campaign-scenes b {
    display: block;
    margin-bottom: 4px;
  }
  .platform-ribbon .container {
    align-items: flex-start;
  }
  .platform-ribbon p {
    gap: 8px;
    justify-content: flex-end;
    max-width: 700px;
  }
  .page-hero h1 {
    font-size: 44px;
  }
  .page-intro {
    font-size: 16px;
  }
  .website .section-heading,
  .ecosystem-layout,
  .enterprise-grid,
  .contact-layout,
  .route-grid,
  .audience-cards {
    gap: 40px;
  }
  .website .workspace-grid {
    grid-template-columns: minmax(304px, 0.9fr) minmax(0, 1.1fr);
  }
  .website .creator-form {
    padding: 24px 20px;
  }
  .website .format-options {
    gap: 4px;
  }
  .website .format-options button {
    padding: 8px;
  }
  .website .preview-stage {
    padding: 20px;
    min-height: 440px;
  }
  .website .creative-visual[data-format="1:1"] {
    height: 320px;
  }
  .website .preview-timeline {
    padding: 0 16px 24px;
    gap: 12px;
  }
  .website .scene-steps button {
    padding: 12px 8px;
    font-size: 11px;
  }
  .website .api-grid,
  .website .delivery-grid,
  .website .ai-mode-grid {
    gap: 40px;
  }
  .rate-table th,
  .rate-table td {
    padding: 20px 12px;
  }
  .rate-table thead th {
    padding: 12px;
  }
  .rate-table tbody th > strong {
    font-size: 15px;
  }
  .rate-value strong {
    font-size: 20px;
  }
  .rate-settings {
    font-size: 12px;
  }
  .estimator-layout {
    gap: 24px;
  }
  .estimate-result {
    padding: 24px;
  }
  .estimate-total > span {
    font-size: 48px;
  }
}
@media (max-width: 900px) {
  .website .desktop-nav {
    display: none;
  }
  .website .menu-toggle {
    display: block;
  }
  .home-hero-grid {
    gap: 32px;
  }
  .home-hero-copy h1 {
    font-size: 46px;
  }
  .home-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }
  .campaign-image {
    max-width: 340px;
  }
  .campaign-hero-top {
    padding: 16px;
  }
  .campaign-brief {
    padding: 16px;
  }
  .campaign-brief p {
    font-size: 12px;
  }
  .campaign-hero-top .tiny-label {
    display: none;
  }
  .campaign-scenes > span {
    font-size: 11px;
  }
  .website h2 {
    font-size: 32px;
  }
  .website .section-heading > p {
    font-size: 15px;
    max-width: 320px;
  }
  .page-hero-grid {
    gap: 32px;
  }
  .page-hero h1 {
    font-size: 40px;
  }
  .page-intro {
    font-size: 16px;
  }
  .website .page-actions {
    gap: 16px;
  }
  .page-hero .text-link {
    font-size: 13px;
  }
  .workflow-four {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .website .workspace-name > .muted {
    display: none;
  }
  .website .output-header {
    padding: 0 20px;
  }
  .website .output-tabs {
    gap: 20px;
  }
  .website .output-status {
    display: none;
  }
  .website .workspace-grid {
    grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  }
  .website .source-tabs button {
    font-size: 11px;
  }
  .website .form-row {
    gap: 12px;
  }
  .website .creator-form select {
    font-size: 12px;
    padding: 8px;
  }
  .website .format-row {
    display: block;
  }
  .website .format-options {
    margin-top: 8px;
    gap: 8px;
  }
  .website .preview-stage {
    min-height: 460px;
  }
  .website .creative-visual {
    height: 392px;
  }
  .website .creative-visual[data-format="1:1"] {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .website .scene-steps button > span {
    min-height: 32px;
  }
  .website .scene-steps button {
    gap: 4px;
    padding: 8px;
  }
  .website .preview-timeline {
    gap: 8px;
  }
  .website .play-button {
    width: 36px;
    height: 40px;
  }
  .website .workspace-bottom > span:last-child {
    display: none;
  }
  .website .api-grid {
    grid-template-columns: 1fr 1.3fr;
    gap: 32px;
  }
  .website .api-options button {
    padding: 16px;
    gap: 12px;
  }
  .website .api-options strong {
    font-size: 16px;
  }
  .website .api-options small {
    font-size: 12px;
  }
  .website .delivery-grid {
    gap: 32px;
  }
  .website .architecture-nav button {
    padding: 16px;
    gap: 12px;
  }
  .website .architecture-nav strong {
    font-size: 18px;
  }
  .website .architecture-nav small {
    font-size: 12px;
  }
  .website .ai-mode-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .website .ai-mode-copy {
    max-width: none;
  }
  .website .ai-mode-copy > p:not(.eyebrow) {
    max-width: 640px;
  }
  .website .market-steps {
    flex-direction: row;
    gap: 24px;
  }
  .website .market-steps li {
    flex: 1;
    gap: 12px;
  }
  .website .audience-preview {
    max-width: 680px;
    width: 100%;
    justify-self: start;
  }
  .cost-layers {
    gap: 24px;
  }
  .cost-layers h3 {
    font-size: 22px;
  }
  .cost-layers p {
    font-size: 14px;
  }
  .estimate-fields {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .estimator-layout {
    grid-template-columns: 1.1fr 1fr;
  }
  .rate-table td,
  .rate-table th {
    padding: 20px 8px;
  }
  .rate-table thead th {
    font-size: 11px;
    padding: 12px 8px;
  }
  .rate-hosting,
  .rate-value span,
  .rate-settings {
    font-size: 11px;
  }
  .rate-source {
    font-size: 11px;
  }
  .rate-table tbody th > strong {
    font-size: 14px;
  }
  .enterprise-grid,
  .contact-layout {
    gap: 32px;
  }
  .enterprise-note {
    padding: 24px;
  }
  .enterprise-note h3 {
    font-size: 28px;
  }
  .website .footer-top {
    gap: 32px;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
  .website .closing-inner {
    gap: 40px;
  }
  .website .closing-inner h2 {
    font-size: 28px;
  }
}
@media (max-width: 680px) {
  .website .container {
    width: calc(100% - 40px);
  }
  .website .section {
    padding: 56px 0;
  }
  .website h2 {
    font-size: 30px;
  }
  .website h3 {
    font-size: 24px;
  }
  .website .eyebrow,
  .website .tiny-label,
  .website .number-label {
    font-size: 12px;
  }
  .website .section-heading {
    display: block;
    margin-bottom: 32px;
  }
  .website .section-heading > p {
    max-width: none;
    font-size: 16px;
    line-height: 1.7;
    margin-top: 20px;
  }
  .website .large-copy {
    font-size: 16px;
    margin: 20px 0;
  }
  .website .context-footnote {
    font-size: 12px;
  }
  .website .brand {
    gap: 8px;
  }
  .website .brand img {
    width: 96px;
  }
  .website .brand-divider {
    height: 20px;
  }
  .website .product-name {
    font-size: 11px;
  }
  .website .nav-shell {
    gap: 16px;
  }
  .website .nav-actions {
    gap: 8px;
  }
  .website .nav-actions .button {
    font-size: 12px !important;
    min-height: 36px;
    padding: 8px 12px;
  }
  .website .nav-actions .button .icon {
    display: none;
  }
  .home-hero {
    padding: 40px 0;
  }
  .home-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .home-hero-copy h1 {
    font-size: 44px;
    line-height: 1.08;
  }
  .home-hero-copy > .eyebrow {
    margin-bottom: 20px;
  }
  .home-hero-copy > p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.7;
    margin-top: 20px;
  }
  .home-hero-copy .page-actions {
    margin-top: 24px;
    gap: 20px;
  }
  .website .button {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
  }
  .website .text-link {
    font-size: 14px;
  }
  .campaign-hero {
    border-radius: 12px;
  }
  .campaign-image {
    width: calc(100% - 16px);
    max-width: none;
    height: auto;
    margin: 8px auto 0;
  }
  .campaign-hero-top {
    padding: 16px;
  }
  .campaign-hero-top .tiny-label {
    display: block;
    font-size: 11px;
  }
  .campaign-image-copy {
    inset: auto 20px 20px;
  }
  .campaign-image-copy > strong {
    font-size: 32px;
  }
  .campaign-image-copy > span {
    font-size: 12px;
  }
  .campaign-brief {
    padding: 20px 16px;
    gap: 12px;
  }
  .campaign-brief strong {
    font-size: 14px;
  }
  .campaign-brief p {
    font-size: 12px;
    max-width: 240px;
  }
  .campaign-scenes {
    padding: 16px;
    gap: 12px;
  }
  .campaign-scenes > span {
    font-size: 11px;
  }
  .campaign-scenes b {
    font-size: 11px;
    margin-bottom: 4px;
  }
  .platform-ribbon {
    padding: 24px 0;
  }
  .platform-ribbon .container {
    display: block;
  }
  .platform-ribbon p {
    justify-content: flex-start;
    font-size: 13px;
    line-height: 1.75;
    margin-top: 12px;
    gap: 8px;
  }
  .website .value-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .website .value-columns article {
    display: block;
    padding-top: 24px;
  }
  .website .value-columns h3 {
    font-size: 26px;
    max-width: none;
    margin-top: 16px;
  }
  .website .value-columns p {
    font-size: 16px;
    max-width: none;
    margin-top: 16px;
  }
  .website .value-columns .text-link {
    margin-top: 20px;
  }
  .audience-cards {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .audience-cards h3 {
    font-size: 28px;
  }
  .audience-cards p:not(.tiny-label) {
    font-size: 16px;
  }
  .ecosystem-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ecosystem-list article {
    gap: 20px;
    padding: 24px 0;
  }
  .ecosystem-list h3 {
    font-size: 24px;
  }
  .ecosystem-list p {
    font-size: 16px;
  }
  .pricing-teaser {
    padding: 40px 0;
  }
  .pricing-teaser .container {
    display: block;
  }
  .pricing-teaser h2 {
    font-size: 30px;
  }
  .pricing-teaser .button {
    margin-top: 24px;
  }
  .pricing-teaser p:not(.eyebrow) {
    font-size: 16px;
  }
  .pricing-teaser br {
    display: none;
  }
  .page-hero {
    padding: 32px 0;
  }
  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .page-hero h1 {
    font-size: 36px;
    line-height: 1.12;
  }
  .page-hero-detail {
    padding-top: 0;
  }
  .page-intro {
    font-size: 16px;
    line-height: 1.7;
  }
  .page-hero .page-actions {
    margin-top: 20px;
    gap: 20px;
  }
  .page-hero .page-actions .button,
  .page-hero .text-link {
    font-size: 13px;
  }
  .workspace-section {
    padding: 24px 0 48px;
  }
  .website .creator-shell {
    border-radius: 12px;
  }
  .website .workspace-top {
    padding: 16px;
    height: auto;
    min-height: 52px;
    gap: 8px;
    align-items: flex-start;
    flex-direction: column;
  }
  .website .workspace-top > .preview-badge {
    font-size: 11px;
  }
  .website .workspace-name {
    font-size: 13px;
  }
  .website .workspace-name > .muted {
    display: inline;
    font-size: 12px;
  }
  .website .workspace-grid {
    grid-template-columns: 1fr;
  }
  .website .creator-form {
    padding: 24px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .website .form-heading h2 {
    font-size: 24px;
  }
  .website .form-heading p {
    font-size: 14px;
  }
  .website .source-tabs {
    margin-top: 20px;
  }
  .website .source-tabs button {
    font-size: 12px;
    padding: 8px 4px;
    min-height: 36px;
  }
  .website .brief-input {
    font-size: 16px;
    min-height: 140px;
    padding: 12px;
  }
  .website .brief-context {
    padding: 4px 12px 12px;
    font-size: 11px;
  }
  .website .brief-context .icon {
    display: none;
  }
  .website .form-row {
    gap: 12px;
    margin-top: 20px;
  }
  .website .creator-form select {
    font-size: 14px;
    padding: 8px;
    min-height: 44px;
  }
  .website .format-row {
    display: block;
    margin-top: 20px;
  }
  .website .format-options {
    gap: 8px;
    margin-top: 8px;
  }
  .website .format-options button {
    min-height: 40px;
    font-size: 13px;
    padding: 8px 16px;
  }
  .website .plan-button {
    font-size: 14px;
    min-height: 44px;
    margin-top: 24px;
  }
  .website .plan-status {
    font-size: 12px;
    min-height: 40px;
  }
  .website .draft-actions {
    gap: 24px;
    margin-top: 4px;
  }
  .website .draft-actions button {
    font-size: 13px;
    min-height: 36px;
    padding: 8px 0;
  }
  .website .output-header {
    height: 52px;
    padding: 0 16px;
  }
  .website .output-tabs {
    gap: 28px;
  }
  .website .output-tabs button {
    font-size: 14px;
  }
  .website .preview-stage {
    padding: 24px 16px;
    min-height: 416px;
  }
  .website .creative-visual {
    height: 368px;
  }
  .website .creative-visual[data-format="1:1"] {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .website .creative-visual[data-format="16:9"] {
    height: auto;
    width: 100%;
    aspect-ratio: 16/9;
  }
  .website .visual-copy {
    left: 16px;
    right: 16px;
    bottom: 20px;
    gap: 12px;
  }
  .website .visual-copy strong {
    font-size: 26px;
  }
  .website .visual-copy > span:first-child,
  .website .visual-brand,
  .website .visual-tag {
    font-size: 11px;
  }
  .website .creative-visual[data-format="16:9"] .visual-copy {
    bottom: 16px;
    gap: 4px;
  }
  .website .creative-visual[data-format="16:9"] .visual-copy strong {
    font-size: 22px;
  }
  .website .creative-visual[data-format="16:9"] .visual-brand {
    display: none;
  }
  .website .preview-timeline {
    padding: 0 16px 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .website .play-button {
    width: 40px;
    height: 40px;
    justify-self: start;
  }
  .website .scene-steps {
    gap: 8px;
  }
  .website .scene-steps button {
    font-size: 11px;
    padding: 12px 8px;
    gap: 8px;
  }
  .website .scene-steps small {
    font-size: 11px;
  }
  .website .workspace-bottom {
    font-size: 11px;
    padding: 16px;
    text-align: left;
    justify-content: flex-start;
  }
  .website .workspace-bottom > span:last-child {
    display: none;
  }
  .website .storyboard-panel,
  .website .usage-panel {
    padding: 24px 16px;
  }
  .website .panel-heading h3,
  .website .usage-panel h3 {
    font-size: 26px;
  }
  .website .scene-editor > span {
    font-size: 13px;
  }
  .website .scene-editor textarea {
    font-size: 16px;
    padding: 12px;
  }
  .website .usage-list > div {
    font-size: 13px;
    gap: 12px;
    align-items: flex-start;
  }
  .website .usage-list dd {
    font-size: 12px;
    max-width: 160px;
  }
  .website .usage-foot {
    padding: 16px;
    gap: 12px;
  }
  .workflow-four {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .workflow-four h3 {
    font-size: 22px;
  }
  .workflow-four p {
    font-size: 14px;
    line-height: 1.7;
  }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 32px;
  }
  .feature-grid h3 {
    font-size: 24px;
  }
  .feature-grid p {
    font-size: 16px;
  }
  .website .faq-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .website .faq-list summary {
    font-size: 16px;
    padding: 24px 0;
  }
  .website .faq-list details p {
    font-size: 15px;
    padding-right: 16px;
  }
  .website .api-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .website .api-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .website .api-options button {
    padding: 16px 12px;
    border: 1px solid var(--line);
    gap: 8px;
    align-items: flex-start;
  }
  .website .api-options strong {
    font-size: 14px;
    line-height: 1.5;
  }
  .website .api-options small {
    font-size: 11px;
    line-height: 1.6;
  }
  .website .api-icon {
    display: none;
  }
  .website .api-detail-intro h3 {
    font-size: 28px;
  }
  .website .api-detail-intro p {
    font-size: 16px;
  }
  .website .code-window pre {
    font-size: 12px;
    padding: 20px;
    min-height: 224px;
  }
  .website .code-toolbar {
    font-size: 11px;
    padding: 0 16px;
  }
  .website .code-caption {
    font-size: 11px;
    padding: 12px 16px;
    display: block;
  }
  .website .code-caption > span {
    display: block;
  }
  .website .api-note {
    font-size: 13px;
  }
  .route-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .route-grid h3 {
    font-size: 26px;
  }
  .route-grid p {
    font-size: 16px;
  }
  .website .delivery-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .website .architecture-nav {
    flex-direction: row;
    gap: 8px;
  }
  .website .architecture-nav button {
    padding: 16px 8px;
    display: block;
    flex: 1;
    min-width: 0;
  }
  .website .architecture-nav button > span {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .website .architecture-nav strong {
    font-size: 12px;
    line-height: 1.5;
  }
  .website .architecture-nav small {
    display: none;
  }
  .website .architecture-nav button > .icon {
    display: none;
  }
  .website .architecture-diagram {
    padding: 24px 16px;
  }
  .website .diagram-core {
    padding: 16px;
  }
  .website .diagram-engine {
    padding: 16px 12px;
  }
  .website .diagram-engine strong {
    font-size: 14px;
  }
  .website .diagram-regions {
    gap: 8px;
  }
  .website .diagram-regions > div {
    padding: 12px 4px;
  }
  .website .diagram-regions strong {
    font-size: 11px;
  }
  .website .diagram-caption {
    font-size: 11px;
  }
  .website .architecture-description {
    padding: 24px 20px;
  }
  .website .architecture-description h3 {
    font-size: 24px;
  }
  .website .architecture-description p {
    font-size: 14px;
  }
  .website .delivery-footer {
    font-size: 12px;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
  }
  .boundary-card h3 {
    font-size: 26px;
  }
  .boundary-card li strong {
    font-size: 16px;
  }
  .boundary-card li span {
    font-size: 15px;
  }
  .website .ai-mode-copy h2 {
    font-size: 30px;
  }
  .website .ai-mode-grid {
    gap: 32px;
  }
  .website .ai-mode-copy > p:not(.eyebrow) {
    font-size: 16px;
  }
  .website .market-steps {
    flex-direction: column;
    gap: 24px;
  }
  .website .market-steps strong {
    font-size: 16px;
  }
  .website .market-steps p {
    font-size: 14px;
  }
  .website .audience-preview {
    padding: 20px 12px;
    border-radius: 12px;
  }
  .website .audience-control-heading .tiny-label {
    font-size: 12px;
  }
  .website .audience-control-heading .preview-badge {
    font-size: 11px;
  }
  .website .audience-controls {
    gap: 8px;
    margin: 20px 0;
  }
  .website .audience-controls label {
    font-size: 11px;
  }
  .website .audience-controls select {
    font-size: 12px;
    padding: 8px 4px;
    min-height: 40px;
  }
  .website .publisher-top {
    padding: 16px 12px;
  }
  .website .publisher-mark {
    font-size: 13px;
  }
  .website .publisher-top > span:last-child {
    font-size: 11px;
  }
  .website .question-bubble {
    margin: 20px 12px 20px 24px;
    padding: 12px;
    font-size: 14px;
  }
  .website .answer-area {
    margin: 0 12px 24px;
    gap: 8px;
  }
  .website .answer-area p {
    font-size: 14px;
  }
  .website .sponsored-card {
    margin: 0 12px 12px;
    padding: 16px;
  }
  .website .sponsored-card h3 {
    font-size: 24px;
  }
  .website .sponsored-card p {
    font-size: 14px;
  }
  .website .sponsored-card a {
    font-size: 13px;
  }
  .website .inventory-note,
  .website .audience-preview > .small-note {
    font-size: 12px;
  }
  .enterprise-grid,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .enterprise-note {
    padding: 24px;
  }
  .enterprise-note h3 {
    font-size: 30px;
  }
  .enterprise-note > p {
    font-size: 16px;
  }
  .enterprise-note dl > div {
    font-size: 13px;
    gap: 16px;
  }
  .contact-primary {
    padding: 24px;
  }
  .contact-primary h2 {
    font-size: 32px;
  }
  .contact-options h3 {
    font-size: 24px;
  }
  .contact-options p {
    font-size: 16px;
  }
  .rates-section {
    padding: 40px 0 48px !important;
  }
  .rate-heading {
    display: block;
  }
  .rate-heading h2 {
    font-size: 30px;
  }
  .rate-date {
    display: block;
    font-size: 11px;
    text-align: left;
    margin-top: 16px;
  }
  .reference-note {
    padding-left: 16px;
  }
  .reference-note p {
    font-size: 13px;
  }
  .rate-filters {
    gap: 8px;
    margin: 24px 0 8px;
    padding-bottom: 16px;
  }
  .rate-filters button {
    font-size: 12px;
    padding: 8px 12px;
  }
  .rate-table-wrap {
    overflow: visible;
  }
  .rate-table,
  .rate-table tbody {
    display: block;
  }
  .rate-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .rate-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #bccbc0;
    padding: 24px 0;
    gap: 20px 16px;
  }
  .rate-table th,
  .rate-table td {
    display: block;
    padding: 0;
    border: 0;
  }
  .rate-table tbody th {
    grid-column: 1/-1;
  }
  .rate-table tbody th > strong {
    font-size: 22px;
  }
  .rate-kind {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .rate-table td:nth-child(4),
  .rate-table td:nth-child(5) {
    grid-column: 1/-1;
  }
  .rate-value strong {
    font-size: 24px;
  }
  .rate-value span,
  .rate-hosting,
  .rate-settings {
    font-size: 12px;
  }
  .rate-source {
    font-size: 13px;
  }
  .rate-table td > strong {
    font-size: 14px;
  }
  .rate-value + .rate-value {
    margin-top: 16px;
  }
  .rate-table-note,
  .rates-section .context-footnote {
    font-size: 12px;
  }
  .estimator-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .estimate-form {
    padding: 24px 16px;
  }
  .estimate-fields {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  .estimate-fields label {
    font-size: 14px;
  }
  .estimate-fields label > span {
    font-size: 11px;
    line-height: 1.6;
    min-height: 36px;
  }
  .estimate-fields input {
    font-size: 16px;
    padding: 12px 8px;
  }
  .estimate-presets {
    gap: 4px;
  }
  .estimate-presets button {
    font-size: 11px;
    padding: 8px;
  }
  .estimate-result {
    padding: 24px;
  }
  .estimate-total > span {
    font-size: 52px;
  }
  .cost-layers {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cost-layers h3 {
    font-size: 26px;
    margin-top: 16px;
  }
  .cost-layers p {
    font-size: 16px;
  }
  .enterprise-strip {
    display: block;
    padding: 32px 0;
    margin-top: 40px;
  }
  .enterprise-strip h3 {
    font-size: 28px;
  }
  .enterprise-strip p {
    font-size: 16px;
  }
  .enterprise-strip .button {
    margin-top: 24px;
  }
  .website .closing-section {
    padding: 48px 0;
  }
  .website .closing-inner {
    display: block;
  }
  .website .closing-inner h2 {
    font-size: 30px;
  }
  .website .closing-inner .closing-copy p {
    font-size: 16px;
  }
  .website .closing-inner > .button {
    margin-top: 24px;
  }
  .website .site-footer {
    padding: 40px 0 24px;
  }
  .website .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
  }
  .website .footer-brand {
    display: block;
    grid-column: 1/-1;
  }
  .website .footer-brand > p {
    font-size: 13px;
    margin-top: 20px;
  }
  .website .footer-top h3 {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .website .footer-top > div > a:not(.brand) {
    font-size: 14px;
    margin-top: 12px;
  }
  .website .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    font-size: 12px;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
  }
}
@media (max-width: 375px) {
  .website .container {
    width: calc(100% - 32px);
  }
  .website .brand img {
    width: 88px;
  }
  .website .nav-shell {
    gap: 8px;
  }
  .website .nav-actions .button {
    font-size: 11px !important;
    padding: 8px;
  }
  .website .brand {
    gap: 8px;
  }
  .home-hero-copy h1 {
    font-size: 40px;
  }
  .home-hero .page-actions {
    gap: 16px;
  }
  .home-hero .button {
    font-size: 12px;
  }
  .home-hero .text-link {
    font-size: 13px;
  }
  .page-hero h1 {
    font-size: 34px;
  }
  .campaign-hero-top .tiny-label {
    display: none;
  }
  .campaign-image {
    height: auto;
  }
  .website .workspace-name > .muted {
    display: none;
  }
  .website .source-tabs button {
    font-size: 11px;
  }
  .website .scene-steps button {
    padding: 12px 4px;
  }
  .website .scene-editor small {
    margin-left: 0;
  }
  .estimate-fields {
    grid-template-columns: 1fr;
  }
  .estimate-fields label > span {
    min-height: 0;
  }
  .estimate-presets button {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .website * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}