/* layout/tokens.css */
/* Design tokens. Colors and sizes follow the Kling open platform's light
   theme, measured on 2026-10-15; see apps/web/docs/kling-reference.md. */
:root {
  --color-theme-1: #000000;
  --color-theme-2: #0b8a1b;
  --color-text-1: #121314;
  --color-text-2: #56585c;
  --color-text-3: #939699;
  --color-text-5: #ffffff;
  --color-nav: #595d61;
  --color-bg-page: #f7f8fa;
  --color-bg-primary: #f2f3f5;
  --color-bg-secondary: #ffffff;
  --color-bg-popover: #ffffff;
  --color-bg-card: #f5f8fa;
  --color-bg-band: #f5f7fa;
  --color-bg-footer: #111214;
  --color-border-frame: #e6e7eb;
  --color-border-container: #e3e4e5;
  --color-border-component: #c8cacc;
  --color-border-hover: #9da0a3;
  --color-border-footer: #3a3c3d;
  --color-fill-white: #ffffff;
  --color-fill-black: #000000;
  --color-selection: #557172;

  --font-body: "PingFang SC", arial, tahoma, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Newsreader", "PingFang SC", serif;

  /* Page frame: the side padding grows from 40px at a 1200px viewport to at
     most 320px. */
  --home-inline-padding: clamp(40px, calc(40px + (100vw - 1200px) * .28), 320px);
  --home-wide-content-width: calc(100% - 2 * var(--home-inline-padding));
  --page-content-width: min(1328px, calc(max(100vw, 1200px) - 2 * var(--home-inline-padding)));
  --home-hero-inline-padding: 40px;
  --home-hero-width: calc(100% - 2 * var(--home-hero-inline-padding));
  --home-hero-content-left: max(64px, calc(var(--home-inline-padding) - var(--home-hero-inline-padding)));
  --home-hero-height: 380px;
  --home-hero-dots-padding-bottom: 12px;
  --home-hero-title-size: 36px;
  --home-hero-subtitle-size: 14px;
  --home-btn-height: 32px;
  --home-btn-font-size: 14px;

  /* Sections below the banner. */
  --home-section-title-size: 32px;
  --home-section-line-size: 18px;
  --home-highlights-margin-top: 64px;
  --home-highlight-gap: 48px;
  --home-highlight-title-size: 18px;
  --home-highlight-desc-size: 14px;
  --home-content-gap: 80px;
  --home-feature-body-gap: 48px;
  --home-feature-list-width: 440px;
  --home-feature-media-aspect: 638 / 359;
  --home-feature-item-padding-y: 8px;
  --home-feature-title-size: 18px;
  --home-feature-title-line-height: 26px;
  --home-plan-card-height: 280px;
  --home-plan-title-size: 28px;
  --home-plan-desc-size: 13px;
  --home-plan-desc-line-height: 20px;
  --home-marquee-row-height: 30px;
  --home-marquee-margin-block: 120px;
  --cases-info-width: 440px;
  --cases-content-gap: 48px;
  --cases-sub-tab-padding-x: 16px;
  --cases-sub-tab-font-size: 12px;
  --cases-media-aspect: 626 / 352;
}

@media (min-width: 1600px) {
  :root {
    --home-hero-height: 480px;
    --home-hero-dots-padding-bottom: 16px;
    --home-hero-title-size: 48px;
    --home-hero-subtitle-size: 18px;
    --home-btn-height: 40px;
    --home-btn-font-size: 16px;

    --home-section-title-size: 40px;
    --home-section-line-size: 20px;
    --home-highlights-margin-top: 88px;
    --home-highlight-gap: 64px;
    --home-highlight-title-size: 20px;
    --home-content-gap: 120px;
    --home-feature-body-gap: 64px;
    --home-feature-list-width: 540px;
    --home-feature-media-aspect: 730 / 410;
    --home-feature-item-padding-y: 16px;
    --home-feature-title-size: 22px;
    --home-feature-title-line-height: 32px;
    --home-plan-card-height: 320px;
    --home-plan-title-size: 32px;
    --home-plan-desc-size: 14px;
    --home-plan-desc-line-height: 24px;
    --home-marquee-margin-block: 140px;
    --cases-info-width: 520px;
    --cases-content-gap: 64px;
    --cases-sub-tab-padding-x: 20px;
    --cases-sub-tab-font-size: 14px;
    --cases-media-aspect: 744 / 418.5;
  }
}

@media (min-width: 2200px) {
  :root {
    --home-hero-height: 640px;
    --home-hero-dots-padding-bottom: 24px;
    --home-hero-title-size: 64px;
    --home-hero-subtitle-size: 20px;
    --home-btn-height: 48px;

    --home-section-title-size: 48px;
    --home-section-line-size: 24px;
    --home-highlights-margin-top: 112px;
    --home-highlight-gap: 88px;
    --home-highlight-title-size: 24px;
    --home-highlight-desc-size: 16px;
    --home-content-gap: 160px;
    --home-feature-body-gap: 88px;
    --home-feature-list-width: 680px;
    --home-feature-media-aspect: 1182 / 665;
    --home-plan-card-height: 360px;
    --home-plan-desc-size: 16px;
    --home-plan-desc-line-height: 26px;
    --home-marquee-row-height: 48px;
    --home-marquee-margin-block: 160px;
    --cases-info-width: 640px;
    --cases-content-gap: 88px;
    --cases-media-aspect: 1182 / 665;
  }
}

/* layout/base.css */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin.woff2?v=f7bebe344979") format("woff2");
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    text-size-adjust: 100%;
    font-family: var(--font-body);
  }
}

/* The page scrolls without a visible scrollbar. */
html {
  scrollbar-width: none;
  background: var(--color-fill-white);
}

html::-webkit-scrollbar {
  display: none;
}

/* Overscrolling past the footer shows the footer's color, not white. */
html.is-at-bottom {
  background: var(--color-bg-footer);
}

body {
  min-width: 1200px;
  color: var(--color-text-1);
  background: var(--color-bg-page);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--color-selection);
  color: #fff;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-text-1);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

img,
video,
svg {
  display: block;
}

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg-page);
}

.site-content {
  flex: 1;
  min-height: 0;
}

/* The serif display face for section headings. */
.display-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
}

/* Text for screen readers and crawlers only, such as a table's caption: kept
   in the layout, but clipped to nothing on screen. */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* components/button/button.css */
/* Outlined pill buttons. Sizes: 32, 36, 40 and 48 px tall. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid var(--color-border-component);
  background: transparent;
  color: var(--color-text-1);
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn:hover {
  border-color: var(--color-border-hover);
}

.btn--32 {
  height: 32px;
  padding: 6px var(--cases-sub-tab-padding-x);
  border-radius: 999px;
  font-size: var(--cases-sub-tab-font-size);
  line-height: 20px;
}

.btn--36 {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
}

.btn--40 {
  height: 40px;
  padding: 0 16px;
  border-radius: 40px;
  font-size: 14px;
}

.btn--48 {
  height: 48px;
  padding: 0 24px;
  border-radius: 48px;
  font-size: 16px;
}

/* A small rounded-rectangle toggle. */
.btn--chip {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
}

.btn--chip.btn--solid {
  font-weight: 500;
}

/* Spans its container. */
.btn--block {
  width: 100%;
  border-radius: 64px;
}

/* Dark filled. */
.btn--solid {
  border-color: transparent;
  background: linear-gradient(148deg, #1c2129 0%, #101114 100%);
  color: var(--color-text-5);
}

.btn--solid:hover {
  border-color: transparent;
  background: var(--color-theme-1);
}

/* Grey filled. */
.btn--soft {
  border-color: transparent;
  background: #09090a0f;
  color: var(--color-text-1);
}

.btn--soft:hover {
  border-color: transparent;
  background: #09090a14;
}

/* Fills dark on hover. */
.btn--fill-hover:hover {
  background: var(--color-text-1);
  border-color: var(--color-text-1);
  color: var(--color-text-5);
}

/* Glass pills on the banner. */
.dev-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: var(--home-btn-height);
  padding: 0 20px 0 24px;
  border: none;
  border-radius: 64px;
  font-size: var(--home-btn-font-size);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.dev-btn__label {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.dev-btn--primary {
  background: linear-gradient(148deg, #d3e2f0 0%, #fff 100%);
  box-shadow: inset -.5px -.5px .5px #ffffff3d, inset .5px .5px .5px #ffffff7a;
  backdrop-filter: blur(12px);
  color: var(--color-text-1);
}

.dev-btn--secondary {
  background: #ffffff14;
  box-shadow: inset -.5px -.5px 1px #ffffff1f, inset .5px .5px 1px #ffffff3d;
  backdrop-filter: blur(12px);
  color: var(--color-text-5);
}

/* components/cases/cases.css */
.section-cases {
  width: 100%;
}

.section-cases__title {
  color: var(--color-text-1);
  font-size: var(--home-section-title-size);
  line-height: 1.2;
  text-align: center;
}

.cases-panel {
  margin-top: 24px;
}

.cases-tabs {
  margin-bottom: 48px;
}

.cases-content {
  display: flex;
  align-items: center;
  gap: var(--cases-content-gap);
}

.cases-info {
  display: flex;
  flex: 0 0 var(--cases-info-width);
  flex-direction: column;
  min-width: 0;
}

.cases-info__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cases-info__title {
  color: var(--color-text-1);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.cases-info__desc {
  color: var(--color-text-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.cases-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.cases-example-tab {
  background: var(--color-text-5);
  font-weight: 400;
}

.cases-example-tab:hover:not(.active) {
  border-color: var(--color-text-1);
}

.cases-example-tab.active {
  border-color: var(--color-text-1);
  background: var(--color-text-1);
  color: var(--color-text-5);
  font-weight: 500;
}

.cases-inputs {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.cases-input {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 8px;
  object-fit: cover;
}

.cases-prompt {
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #2e7ca30a;
  box-shadow: -.5px -.5px .5px #ffffff29 inset, .5px .5px .5px #ffffff52 inset;
  backdrop-filter: blur(12px);
  color: var(--color-text-1);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.cases-media {
  flex: 1;
  min-width: 0;
  aspect-ratio: var(--cases-media-aspect);
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-bg-primary);
}

.cases-media__item {
  width: 100%;
  height: 100%;
}

.cases-media .feature-media-panel {
  background: transparent;
}

/* components/contact-band/contact-band.css */
.contact-band {
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-bg-band);
  box-shadow: -.5px -.5px .5px #ffffff29 inset;
  backdrop-filter: blur(24px);
}

.contact-band__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 100%;
  padding: 40px 64px;
  cursor: pointer;
}

.contact-band__copy {
  flex: 1;
  min-width: 0;
}

.contact-band__title {
  margin-bottom: 16px;
  color: var(--color-fill-black);
  font-size: 28px;
  line-height: 32px;
}

.contact-band__desc {
  color: var(--color-fill-black);
  font-size: 14px;
  line-height: 24px;
}

.contact-band__action {
  flex-shrink: 0;
}

.contact-band__icon {
  margin-left: 16px;
}

/* components/contact-fab/contact-fab.css */
.contact-fab {
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 101;
}

.contact-fab__button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 48px;
  background: var(--color-fill-white);
  box-shadow: 0 2px 10px #2a355229;
  color: #000;
  font-weight: 500;
  transition: box-shadow .2s ease, opacity .2s ease;
}

.contact-fab__button:hover {
  box-shadow: 0 4px 14px #2a355233;
  opacity: .92;
}

.contact-fab__icon {
  flex-shrink: 0;
}

.contact-fab__text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

/* components/faq/faq.css */
/* The FAQ above the marquee: its head (components/section-head), then the
   questions in two columns, each with its answer below it. */
.faq {
  margin-top: var(--home-content-gap);
}

.faq__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 72px;
  margin-top: 56px;
  padding: 0 64px;
}

.faq__question {
  color: var(--color-text-1);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.faq__answer {
  margin-top: 10px;
  color: var(--color-text-2);
  font-size: 15px;
  line-height: 1.7;
}

.faq__answer a {
  color: var(--color-text-1);
  text-decoration: underline;
}

/* components/feature-block/feature-block.css */
.feature-block__title {
  margin-bottom: 24px;
  color: var(--color-text-1);
  font-size: var(--home-section-title-size);
  line-height: 1.4;
  text-align: center;
}

.feature-block__body {
  display: flex;
  align-items: center;
  gap: var(--home-feature-body-gap);
  overflow-anchor: none;
}

.feature-block--mirrored .feature-block__body {
  flex-direction: row-reverse;
}

.feature-block__list {
  display: flex;
  flex: 0 0 var(--home-feature-list-width);
  flex-direction: column;
  width: var(--home-feature-list-width);
  padding-left: 32px;
  border-left: 2px solid var(--color-border-container);
}

.feature-block--mirrored .feature-block__list {
  padding-right: 32px;
  padding-left: 0;
  border-right: 2px solid var(--color-border-container);
  border-left: none;
}

.feature-block__media {
  flex: 1;
  min-width: 0;
  aspect-ratio: var(--home-feature-media-aspect);
}

.feature-block__panel {
  width: 100%;
  height: 100%;
}

.feature-item {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: var(--home-feature-item-padding-y) 0;
  cursor: pointer;
}

.feature-item-inner {
  position: relative;
  flex: 1;
  min-width: 0;
}

.feature-title {
  color: var(--color-text-2);
  font-size: var(--home-feature-title-size);
  font-weight: 400;
  line-height: var(--home-feature-title-line-height);
  transition: font-size .25s ease, font-weight .25s ease, line-height .25s ease;
}

.feature-item.is-active .feature-title {
  color: var(--color-text-1);
  font-weight: 600;
}

.feature-desc {
  min-height: 48px;
  color: var(--color-text-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.feature-item.is-active .feature-desc {
  margin-top: 12px;
}

/* A dark bar on the list's rule marks the active item. */
.feature-item.is-active .feature-item-inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -34px;
  width: 2px;
  border-radius: 1px;
  background: var(--color-text-1);
}

.feature-block--mirrored .feature-item.is-active .feature-item-inner::before {
  right: -34px;
  left: auto;
}

/* components/footer/footer.css */
.site-footer {
  width: 100%;
  padding-top: 92px;
  background: var(--color-bg-footer);
}

.site-footer__inner {
  width: var(--page-content-width);
  margin-inline: auto;
  font-size: 14px;
}

.site-footer__top {
  padding-bottom: 32px;
}

.site-footer__content {
  display: flex;
  justify-content: space-between;
  gap: 48px;
}

.site-footer__logo {
  display: inline-flex;
  align-items: flex-start;
  align-self: flex-start;
  margin-right: 80px;
}

.site-footer__logo .logo {
  color: var(--color-fill-white);
}

.site-footer__lists {
  display: flex;
  gap: 80px;
}

/* A column's name is a label, not a heading, so the page's heading outline
   holds only its own sections. */
.site-footer__list .site-footer__list-title {
  margin: 0 0 32px;
  color: var(--color-text-3);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.site-footer__list p {
  margin: 0 0 16px;
  color: var(--color-fill-white);
}

.site-footer__list a {
  display: flex;
  align-items: center;
  transition: color .4s;
}

.site-footer__list a:hover {
  color: var(--color-fill-white);
}

.site-footer__bottom {
  padding: 32px 0;
  border-top: 1px solid var(--color-border-footer);
  color: var(--color-text-3);
  font-size: 12px;
  text-align: center;
}

.site-footer__bottom p {
  margin: 0 0 4px;
}

.site-footer__bottom span {
  margin: 0 8px;
}

/* components/header/header.css */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  white-space: nowrap;
  transition: opacity .2s ease-out;
}

/* A sticky tab bar that reaches the top takes the header's place. */
html.is-header-covered .site-header {
  opacity: 0;
  pointer-events: none;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 40px;
}

.site-header__bar.is-top {
  background-color: transparent;
  box-shadow: none;
}

.site-header__bar.is-scrolled {
  background-color: var(--color-bg-secondary);
  box-shadow: 0 1px 0 var(--color-border-frame);
}

.site-header__left,
.site-header__right {
  display: flex;
  align-items: center;
}

.site-header__logo {
  display: flex;
  align-items: center;
  margin-right: 112px;
}

.header-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 64px;
  margin-right: 40px;
  color: var(--color-nav);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
}

.header-nav.is-active {
  color: var(--color-text-1);
  font-weight: 500;
}

.header-nav__arrow {
  color: currentColor;
  transform: rotate(90deg);
  transition: transform .2s ease;
}

.header-nav:hover > .header-nav__arrow,
.header-nav:focus-within > .header-nav__arrow {
  transform: rotate(-90deg);
}

.header-dropdown {
  display: none;
  position: absolute;
  top: 56px;
  left: 0;
  width: 200px;
  padding: 8px 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-bg-popover);
  box-shadow: 0 0 30px #00000014;
  font-weight: 400;
  transform: translate(-12px);
}

.header-nav:hover > .header-dropdown,
.header-nav:focus-within > .header-dropdown {
  display: block;
}

.header-dropdown__link {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  color: var(--color-text-1);
  font-size: 14px;
}

.header-dropdown__link:hover {
  background: #09090a0a;
}

.header-dropdown__link.is-active {
  font-weight: 500;
}

.header-locale {
  margin-right: 24px;
}

.header-locale__dropdown {
  left: 50%;
  width: 88px;
  transform: translate(-50%);
}

.header-locale__dropdown .header-dropdown__link.is-active {
  color: var(--color-theme-2);
}

.site-header__console {
  border-radius: 24px;
}

.site-header__signin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 36px;
  margin-left: 8px;
  padding: 6px 24px;
  border-radius: 99px;
  background: var(--color-theme-1);
  color: var(--color-bg-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.site-header__signin:hover {
  background: var(--color-theme-2);
}

/* components/hero/hero.css */
.hero-banner {
  position: relative;
  width: var(--home-hero-width);
  height: var(--home-hero-height);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(160deg, #0a2e1f, #061510 35%, #000);
}

.hero-inner,
.hero-media {
  width: 100%;
  height: 100%;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the left side, where the title and points sit, so the white text
   stays readable when a bright part of the clip passes behind it. */
.hero-media {
  position: relative;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000000b8, #0000008c 30%, #00000040 50%, #0000 68%);
  pointer-events: none;
}

.hero-content {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--home-hero-content-left);
  transform: translateY(-50%);
}

.hero-title {
  color: var(--color-fill-white);
  font-size: var(--home-hero-title-size);
  line-height: calc(var(--home-hero-title-size) + 10px);
}

.hero-subtitle {
  max-width: 520px;
  margin: 8px 0 32px;
  color: var(--color-fill-white);
  font-size: var(--home-hero-subtitle-size);
  font-weight: 250;
  line-height: calc(var(--home-hero-subtitle-size) + 8px);
}

/* Points take the subtitle's place on a slide that lists its case; each
   starts with a drawn tick and stays on one line, so keep them short. */
.hero-points {
  display: grid;
  gap: 10px;
  white-space: nowrap;
  margin: 14px 0 32px;
  padding: 0;
  color: var(--color-fill-white);
  font-size: var(--home-hero-subtitle-size);
  font-weight: 300;
  line-height: calc(var(--home-hero-subtitle-size) + 8px);
  list-style: none;
}

.hero-points li {
  position: relative;
  padding-left: 26px;
}

.hero-points li::before {
  position: absolute;
  top: .45em;
  left: 2px;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-dots {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 80px;
  padding-bottom: var(--home-hero-dots-padding-bottom);
  background: linear-gradient(180deg, #0000, #0000003d);
}

.hero-dots::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ffffff29;
}

.hero-dot {
  position: relative;
  height: 36px;
  padding: 0 24px;
  overflow: hidden;
  color: var(--color-text-5);
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
  white-space: nowrap;
  transition: background .3s ease;
}

.hero-dot.active {
  font-weight: 600;
}

/* Every tab is as wide as its bold label, so the gaps stay the same whichever
   tab is active. */
.hero-dot::before {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 600;
  visibility: hidden;
}

/* hero.js scales the bar with the clip's playback. */
.hero-dot-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text-5);
  transform: scaleX(0);
  transform-origin: left center;
}

/* components/highlights/highlights.css */
/* The section under the banner follows the page's other sections: its head
   (components/section-head), then the promises side by side on the page
   itself, each centred under its icon. */
.highlights {
  width: var(--home-wide-content-width);
  margin: var(--home-highlights-margin-top) auto 0;
}

.highlights__list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--home-highlight-gap);
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.highlight__icon {
  width: 28px;
  height: 28px;
  color: var(--color-text-1);
}

.highlight__title {
  margin-top: 14px;
  color: var(--color-text-1);
  font-size: var(--home-highlight-title-size);
  font-weight: 600;
  line-height: 1.4;
}

.highlight__desc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--color-text-2);
  font-size: var(--home-highlight-desc-size);
  line-height: 1.6;
}

/* A green dot, pulsing, marks a figure measured live. */
.highlight__live {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-theme-2);
}

.highlight__live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: highlight-live 2s ease-out infinite;
}

@keyframes highlight-live {
  from {
    opacity: .5;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(2.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .highlight__live::after {
    animation: none;
  }
}

/* components/logo-marquee/logo-marquee.css */
.logo-marquee {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: 100%;
  margin: var(--home-marquee-margin-block) 0;
  overflow: hidden;
}

.logo-marquee-row {
  position: relative;
  width: 100%;
  height: var(--home-marquee-row-height);
  overflow: hidden;
}

/* White fades soften both ends of a row. */
.logo-marquee-row::before,
.logo-marquee-row::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: 120px;
  height: 100%;
  pointer-events: none;
}

.logo-marquee-row::before {
  left: 0;
  background: linear-gradient(90deg, #fff, #fff0);
}

.logo-marquee-row::after {
  right: 0;
  background: linear-gradient(270deg, #fff, #fff0);
}

.logo-marquee-row__track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: max-content;
  height: 100%;
  animation: logo-marquee-left 40s linear infinite;
}

.logo-marquee-row__track--reverse {
  animation-name: logo-marquee-right;
}

.logo-marquee-row__set {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-right: 80px;
}

.logo-marquee-row__item {
  flex-shrink: 0;
  color: var(--color-text-2);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

@keyframes logo-marquee-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes logo-marquee-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-row__track {
    animation: none;
  }
}

/* components/logo/logo.css */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  color: var(--color-text-1);
}

.logo__mark {
  flex-shrink: 0;
}

.logo__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* components/media/media.css */
/* Stands in for a demo clip that does not exist yet. */
.media-placeholder {
  position: relative;
  background: var(--color-bg-primary);
}

.media-placeholder__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: var(--color-text-3);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.feature-media-panel {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 1px;
  overflow: hidden;
  background: var(--color-text-5);
}

.feature-media-panel__video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: contain;
}

.feature-media-panel__btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0006;
  color: var(--color-fill-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, background .2s ease;
}

.feature-media-panel:hover .feature-media-panel__btn,
.feature-media-panel__btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.feature-media-panel__btn[aria-pressed="false"] .feature-media-panel__icon-on,
.feature-media-panel__btn[aria-pressed="true"] .feature-media-panel__icon-off {
  display: none;
}

/* components/page-banner/page-banner.css */
.page-banner {
  position: relative;
  width: 100%;
  padding-top: 128px;
}

.page-banner__art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 284px;
  overflow: hidden;
}

.page-banner__art svg {
  width: 100%;
  height: 100%;
}

.page-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--page-content-width);
  margin: 0 auto;
}

.page-banner__title {
  margin-bottom: 16px;
  color: #000;
  font-size: 48px;
  font-weight: 500;
  line-height: 64px;
}

.page-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 44px;
}

.page-banner__action {
  min-width: 160px;
  font-size: 16px;
}

.page-banner__icon {
  margin-left: 6px;
}

/* Fades the banner's lower edge into the page. */
.page-banner__mask {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150px;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

/* components/plans/plans.css */
.section-plans {
  width: 100%;
}

.section-plans__title {
  margin: 0 0 24px;
  color: var(--color-text-1);
  font-size: var(--home-section-title-size);
  line-height: 1.4;
  text-align: center;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
}

.plan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  height: var(--home-plan-card-height);
  padding: 56px;
  border-radius: 16px;
  background: var(--color-bg-card);
}

.plan-card__title {
  color: var(--color-fill-black);
  font-size: var(--home-plan-title-size);
  font-weight: 400;
  line-height: calc(var(--home-plan-title-size) + 8px);
}

.plan-card__desc {
  margin-top: 12px;
  color: var(--color-fill-black);
  font-size: var(--home-plan-desc-size);
  font-weight: 400;
  line-height: var(--home-plan-desc-line-height);
}

.plan-card__link {
  color: var(--color-fill-black);
}

.plan-card__icon {
  margin-left: 6px;
}

/* components/price-cards/price-cards.css */
.package-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 64px;
}

.price-title {
  margin-bottom: 4px;
  color: var(--color-text-1);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.price-rule-text {
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 22px;
}

.package-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.package-scope-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--color-bg-band);
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 20px;
}

.package-scope-notice__icon {
  flex-shrink: 0;
}

.package-list {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  margin-top: 32px;
}

.package-item {
  display: flex;
  flex: 0 0 280px;
  flex-direction: column;
  width: 280px;
  padding: 24px;
  border: 1px solid #ced2d6;
  border-radius: 16px;
  background: var(--color-bg-secondary);
  box-shadow: -.5px -.5px .5px #ffffff29 inset;
  backdrop-filter: blur(24px);
}

.package-item__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.package-item__title {
  min-height: 24px;
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
}

.package-item__price {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 36px;
}

.package-item__amount {
  color: var(--color-text-1);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

.package-item__note {
  min-height: 20px;
  margin-top: 2px;
  background: linear-gradient(91.13deg, #523710, #331f12);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  -webkit-text-fill-color: transparent;
}

.package-item__divider {
  width: 100%;
  height: 1px;
  margin: 16px 0;
  border: none;
  background: #09090a0a;
}

.package-item__benefits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}

.package-item__benefit {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 24px;
}

.package-item__check {
  flex-shrink: 0;
  margin-top: 4px;
}

.package-item__action {
  margin-top: auto;
  font-size: 16px;
}

/* components/price-compare/price-compare.css */
/* The price comparison under the banner: its head (components/section-head),
   then the table in the price table's look (components/price-table), one
   section per kind of request, and its notes. */
.price-compare {
  /* A twentieth of the table, which spans the content width. Worked out from
     the viewport, because a percentage on a cell's padding does not resolve
     the same way in every browser. */
  --price-compare-inset: calc((max(100vw, 1200px) - 2 * var(--home-inline-padding)) / 20);

  margin-top: var(--home-content-gap);
}

.price-compare__table {
  margin-top: 32px;
  font-variant-numeric: tabular-nums;
}

/* The row that opens a section names the kind of request across the whole
   table, on a tinted band, with a line under it on the modes it covers. */
.price-compare__section-label {
  padding: 12px 24px 12px var(--price-compare-inset);
  background: var(--color-bg-primary);
  color: var(--color-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
}

.price-compare__section-line {
  display: block;
  margin-top: 2px;
  color: var(--color-text-3);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

/* Each model is a group of rows; groups are ruled like rows. */
.price-compare__table tbody + tbody tr:first-child > .price-table__cell {
  border-top: 1px solid var(--color-border-container);
}

/* A model's name stays on one line, centred down its group of rows. */
.price-compare__table .price-compare__model {
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

/* All the text moves in by the inset, so the table's text sits about as far
   from its left edge as the last heading ends from its right edge. */
.price-compare__table .price-table__head,
.price-compare__table .price-table__cell {
  padding-left: var(--price-compare-inset);
}

/* The model column is wider than the rest, so the longest name fits in it
   after the inset. */
.price-compare__table thead th:first-child {
  width: 22%;
}

.price-compare__table .price-compare__resolution,
.price-compare__table .price-compare__theirs {
  color: var(--color-text-2);
}

.price-compare__table .price-compare__ours {
  font-weight: 600;
}

/* A short line under a column's heading, such as what our price includes. */
.price-compare__head-note {
  display: block;
  margin-top: 2px;
  color: var(--color-theme-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.price-compare__table .price-compare__saving {
  color: var(--color-theme-2);
  font-weight: 600;
}

/* The bullets line up with the table's text. */
.price-compare__notes {
  margin-top: 20px;
  padding-left: calc(var(--price-compare-inset) + 18px);
  color: var(--color-text-3);
  font-size: 13px;
  line-height: 22px;
}

/* components/price-table/price-table.css */
.price-table-section + .price-table-section {
  margin-top: 64px;
}

.table-title {
  margin-bottom: 8px;
  color: var(--color-text-1);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.table-sub-title {
  margin: 0 0 24px;
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 22px;
}

.price-table {
  width: 100%;
  border-bottom: 1px solid var(--color-border-container);
  border-collapse: collapse;
  table-layout: fixed;
}

.price-table__head {
  height: 64px;
  padding: 12px 24px 12px 0;
  border-bottom: 1px solid var(--color-border-container);
  color: var(--color-text-1);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  vertical-align: middle;
}

.price-table__cell {
  padding: 16px 24px 16px 0;
  color: var(--color-text-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  vertical-align: middle;
}

.price-table tbody tr + tr .price-table__cell {
  border-top: 1px solid var(--color-border-container);
}

/* components/reveal/reveal.css */
/* Elements marked data-reveal rise into place the first time they scroll into
   view; see reveal.js. Only pages whose script runs hide them first. */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(calc(var(--reveal-distance, 40) * 1px));
  transition:
    opacity .5s cubic-bezier(.25, .46, .45, .94) var(--reveal-delay, 0s),
    transform .5s cubic-bezier(.25, .46, .45, .94) var(--reveal-delay, 0s);
}

.has-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* components/scroll-freeze/scroll-freeze.css */
/* A scroll freeze pins its content while the page scrolls through the extra
   travel added below it; see scroll-freeze.js. */
.scroll-freeze::after {
  content: "";
  display: block;
  height: var(--scroll-freeze-travel, 0px);
}

.scroll-freeze__sticky {
  position: sticky;
  display: flex;
  flex-direction: column;
  gap: var(--home-content-gap);
}

/* Set while measuring the unpinned layout. */
html.is-measuring-freeze .scroll-freeze__sticky {
  position: static;
}

/* components/section-head/section-head.css */
/* The line sits beside the title, not under it, to keep sections short; on a
   narrow screen it wraps below. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 24px;
}

.section-head__title {
  color: var(--color-text-1);
  font-size: var(--home-section-title-size);
  line-height: 1.2;
}

.section-head__line {
  color: var(--color-text-2);
  font-size: var(--home-section-line-size);
  line-height: 1.5;
}

/* components/sticky-tabs/sticky-tabs.css */
/* A tab bar that sticks to the top of the viewport. Once stuck it widens to
   the viewport's edges (its padding keeps the tabs in place) and gains a
   hairline; sticky-tabs.js sets --inline-offset and toggles .is-stuck. */
.api-type-tabs {
  --stuck: 0;
  position: sticky;
  top: 0;
  z-index: 101;
  display: flex;
  gap: 48px;
  margin-right: calc((var(--inline-offset, 0px) - (100vw - 100%)) * var(--stuck));
  margin-bottom: 32px;
  margin-left: calc(-1 * var(--inline-offset, 0px) * var(--stuck));
  padding-top: 16px;
  padding-right: calc((100vw - 100% - var(--inline-offset, 0px)) * var(--stuck));
  padding-left: calc(var(--inline-offset, 0px) * var(--stuck));
  background: #fff;
  box-shadow: 0 calc(1px * var(--stuck)) 0 var(--color-border-container);
  transition: margin .2s ease-out, padding-left .2s ease-out, padding-right .2s ease-out, box-shadow .2s ease-out;
}

.api-type-tabs.is-stuck {
  --stuck: 1;
}

.api-type-tabs::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-border-container);
}

.api-type-tab {
  position: relative;
  padding: 0 0 9px;
  color: var(--color-text-1);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  transition: opacity .2s ease;
}

.api-type-tab.active {
  font-weight: 500;
}

.api-type-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 3px;
  background: var(--color-theme-2);
}

/* components/tab-bar/tab-bar.css */
/* Text tabs over a hairline, centred, the active one underlined: the look of
   the use cases' industry tabs on the page this design follows. The bar
   leaves its vertical margins to the section that places it. */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-container);
}

.tab-bar__tab {
  position: relative;
  padding: 0;
  color: var(--color-text-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  transition: color .2s ease;
}

.tab-bar__tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -12.5px;
  left: 0;
  height: 3px;
  background: var(--color-text-1);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.tab-bar__tab.active {
  color: var(--color-text-1);
  font-weight: 500;
}

.tab-bar__tab.active::after {
  transform: scaleX(1);
}

.tab-bar__tab:hover:not(.active) {
  color: var(--color-text-1);
}

/* pages/document/document.css */
.doc-page__wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 24px 0 120px;
  background: #fff;
}

.doc-page__content {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px;
  width: var(--page-content-width);
}

/* The section list stays in view below the fixed header. */
.doc-page__toc {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border-frame);
}

.doc-page__toc-link {
  padding: 4px 0;
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 22px;
  text-decoration: none;
  transition: color .2s;
}

.doc-page__toc-link:hover {
  color: var(--color-text-1);
}

.doc-page__body {
  max-width: 860px;
  color: var(--color-text-1);
  font-size: 15px;
  line-height: 26px;
}

.doc-page__updated {
  margin-bottom: 16px;
  color: var(--color-text-3);
  font-size: 14px;
}

.doc-page__lead {
  margin-bottom: 16px;
  color: var(--color-text-2);
  font-size: 16px;
  line-height: 28px;
}

.doc-section {
  padding-top: 32px;
  /* Anchored sections land below the fixed header. */
  scroll-margin-top: 72px;
}

.doc-section__title {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
}

.doc-section__text,
.doc-section__list {
  margin-bottom: 12px;
}

.doc-section__list {
  padding-left: 20px;
  list-style: disc;
}

.doc-section__list li + li {
  margin-top: 6px;
}

.doc-page__body a {
  color: var(--color-theme-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc-page__body code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-bg-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.doc-code {
  margin: 4px 0 16px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-bg-footer);
}

.doc-code__label {
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border-footer);
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 20px;
}

.doc-code__body {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  color: #e6e7eb;
  font-size: 13px;
  line-height: 22px;
}

.doc-page__body .doc-code__body code {
  padding: 0;
  background: none;
  color: inherit;
}

.doc-table__scroll {
  margin: 4px 0 16px;
  overflow-x: auto;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 22px;
}

.doc-table th,
.doc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-frame);
  text-align: left;
  vertical-align: top;
}

.doc-table th {
  color: var(--color-text-2);
  background: var(--color-bg-card);
  font-weight: 600;
  white-space: nowrap;
}

.doc-table code {
  white-space: nowrap;
}

/* pages/home/home.css */
.home {
  min-width: 1200px;
  padding: 76px 0 120px;
  background: var(--color-text-5);
}

.home-content,
.home-bottom {
  width: var(--home-wide-content-width);
  margin-inline: auto;
}

.home-content {
  display: flex;
  flex-direction: column;
  gap: var(--home-content-gap);
}

.page-home .site-footer__inner {
  width: calc(var(--home-wide-content-width) - 128px);
}

/* pages/notfound/notfound.css */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 70vh;
  padding: 140px 40px 120px;
  background: var(--color-text-5);
  text-align: center;
}

.not-found__title {
  font-size: 40px;
  line-height: 1.4;
}

.not-found__text {
  margin-bottom: 16px;
  color: var(--color-text-2);
  font-size: 16px;
}

/* pages/pricing/pricing.css */
.pricing-page {
  position: relative;
  width: 100%;
  overflow-x: clip;
  background: #fff;
}

.pricing-page__wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
  background: #fff;
}

.pricing-page__content {
  display: flex;
  flex-direction: column;
  width: var(--page-content-width);
  min-width: 0;
  padding-bottom: 160px;
}

.pricing-page__panel {
  display: flex;
  flex-direction: column;
}

.pricing-page__enterprise {
  max-width: 720px;
}