/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

    *,
    :before,
    :after,
    ::backdrop {
      --tw-outline-style: solid
    }
  }
}

@layer theme {

  :root,
  :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --radius-xl: .75rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono)
  }
}

@layer base {

  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit
  }

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

  b,
  strong {
    font-weight: bolder
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em
  }

  small {
    font-size: 80%
  }

  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
  }

  sub {
    bottom: -.25em
  }

  sup {
    top: -.5em
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
  }

  :-moz-focusring {
    outline: auto
  }

  progress {
    vertical-align: baseline
  }

  summary {
    display: list-item
  }

  ol,
  ul,
  menu {
    list-style: none
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block
  }

  img,
  video {
    max-width: 100%;
    height: auto
  }

  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px
  }

  ::file-selector-button {
    margin-inline-end: 4px
  }

  ::placeholder {
    opacity: 1
  }

  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color: currentColor
    }

    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }

  textarea {
    resize: vertical
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit
  }

  ::-webkit-datetime-edit {
    display: inline-flex
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0
  }

  ::-webkit-datetime-edit {
    padding-block: 0
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1
  }

  :-moz-ui-invalid {
    box-shadow: none
  }

  button,
  input:where([type=button], [type=reset], [type=submit]) {
    appearance: button
  }

  ::file-selector-button {
    appearance: button
  }

  ::-webkit-inner-spin-button {
    height: auto
  }

  ::-webkit-outer-spin-button {
    height: auto
  }

  [hidden]:where(:not([hidden=until-found])) {
    display: none !important
  }
}

@layer components;

@layer utilities {
  .absolute {
    position: absolute
  }

  .static {
    position: static
  }

  .start {
    inset-inline-start: var(--spacing)
  }

  .container {
    width: 100%
  }

  @media (min-width:40rem) {
    .container {
      max-width: 40rem
    }
  }

  @media (min-width:48rem) {
    .container {
      max-width: 48rem
    }
  }

  @media (min-width:64rem) {
    .container {
      max-width: 64rem
    }
  }

  @media (min-width:80rem) {
    .container {
      max-width: 80rem
    }
  }

  @media (min-width:96rem) {
    .container {
      max-width: 96rem
    }
  }

  .\!block {
    display: block !important
  }

  .block {
    display: block
  }

  .hidden {
    display: none
  }

  .resize {
    resize: both
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px
  }
}

:root {
  --ink: #101116;
  --muted: #686b78;
  --line: #e5e6ec;
  --paper: #fcfaf7;
  --white: #fff;
  --blue: #1769f6;
  --violet: #684cff;
  --purple: #9b50ff;
  --coral: #ff7262;
  --yellow: #ffd77a;
  --mint: #5ed7c5;
  --navy: #09173d;
  --deep: #141143;
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 20px;
  --shadow-soft: 0 22px 62px #1d1a4a1f, 0 4px 18px #27264b0f;
  --shadow-float: 0 34px 92px #2d276938, 0 8px 24px #0f122d24;
  --container: min(1240px, calc(100% - 64px))
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  font-size: 17.5px
}

body {
  background: radial-gradient(circle at 8% 4%, #3891ff14, transparent 24%), var(--paper);
  color: var(--ink);
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  margin: 0;
  font-family: Segoe UI Variable Text, Aptos, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
}

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

button,
input {
  font: inherit
}

button {
  color: inherit
}

img {
  max-width: 100%
}

.skip-link {
  z-index: 1000;
  color: #fff;
  background: #101632;
  border: 2px solid #fff;
  border-radius: 14px;
  max-width: calc(100% - 24px);
  padding: 12px 18px;
  font-weight: 800;
  transition: transform .18s;
  position: fixed;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  box-shadow: 0 12px 30px #090f304d
}

.skip-link:focus {
  outline-offset: 3px;
  outline: 3px solid #3d73ff80;
  transform: translateY(0)
}

.site-shell:focus {
  outline: 0
}

.site-shell {
  position: relative;
  overflow: clip
}

.container {
  width: var(--container);
  margin-inline: auto
}

.section {
  padding-block: 94px;
  position: relative
}

.section--dark {
  color: #fff;
  background: radial-gradient(circle at 78% 25%, #6d42ff42, #0000 32%), linear-gradient(135deg, #07183b, #171247 70%, #27104a)
}

.section--warm {
  background: radial-gradient(circle at 86% 18%, #ff706957, #0000 34%), radial-gradient(circle at 12% 86%, #45a3ff2e, #0000 28%), linear-gradient(135deg, #fff0bd, #eee3ff 58%, #ffdcd6)
}

.section--lavender {
  background: radial-gradient(circle at 90% 15%, #ff8b7547, #0000 34%), #efebff
}

.section--soft {
  background: radial-gradient(circle at 94% 12%, #ff70694d, #0000 30%), radial-gradient(circle at 8% 82%, #3797ff33, #0000 30%), linear-gradient(135deg, #dceeff, #e7e0ff 66%, #ffe4cc)
}

.section--blue {
  background: #eaf5ff
}

h1,
h2,
h3,
p {
  margin-top: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand strong {
  font-optical-sizing: auto;
  font-family: Manrope, Segoe UI Variable Display, Aptos Display, Segoe UI, sans-serif;
  font-weight: 800
}

h1,
h2 {
  letter-spacing: -.042em;
  text-wrap: balance
}

h3 {
  letter-spacing: -.035em;
  text-wrap: pretty
}

h1 {
  margin-bottom: 26px;
  font-size: clamp(3.5rem, 5.2vw, 4.85rem);
  line-height: .99
}

h2 {
  margin-bottom: 20px;
  font-size: clamp(2.45rem, 4vw, 3.65rem);
  line-height: 1.02
}

h3 {
  margin-bottom: 10px;
  font-size: 1.48rem;
  line-height: 1.15
}

p {
  color: var(--muted);
  text-wrap: pretty;
  font-size: 1.08rem;
  line-height: 1.68
}

h1,
h2,
h3,
p,
li,
summary,
strong,
small {
  overflow-wrap: break-word;
  max-width: 100%
}

.section--dark p {
  color: #b8c2df
}

.section-heading {
  max-width: 840px;
  margin-bottom: 50px
}

.section-heading h2 {
  max-width: 820px
}

.section-heading p {
  max-width: 720px;
  margin-bottom: 0;
  font-size: 1.18rem
}

.eyebrow {
  color: #2457c6;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #fffffff0, #e5ebffd6);
  border: 1px solid #4368e038;
  border-radius: 999px;
  align-items: center;
  min-height: 36px;
  margin-bottom: 20px;
  padding: 8px 18px;
  font-size: .84rem;
  font-weight: 800;
  display: inline-flex;
  box-shadow: inset 0 1px #fff, 0 8px 22px #3f55bc1a
}

.eyebrow--dark {
  color: #c4d4ff;
  background: #ffffff14;
  border-color: #ffffff24
}

.button {
  isolation: isolate;
  letter-spacing: -.025em;
  text-rendering: optimizelegibility;
  cursor: pointer;
  background-clip: padding-box;
  border: 1px solid #0000;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 13px 25px;
  font-family: Manrope, Segoe UI Variable Display, Aptos Display, sans-serif;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .24s, border-color .24s, background-color .24s, filter .24s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  transform: translateY(0)scale(1)
}

.button:before {
  content: "";
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(#ffffff3d, #0000 42%, #0c12401f);
  position: absolute;
  inset: 1px
}

.button:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #ffffff57, #0000);
  width: 34%;
  position: absolute;
  inset: -35% auto -35% -58%;
  transform: skew(-18deg)
}

.button:hover {
  filter: saturate(1.08);
  border-color: #4659d780;
  transform: translateY(-3px)scale(1.015)
}

.button:hover:after {
  animation: .72s both button-sheen
}

.button:active {
  transition-duration: 90ms;
  transform: translateY(1px)scale(.975)
}

.button:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #3867ff47
}

.button--primary {
  color: #fff;
  text-shadow: 0 1px 1px #14185247;
  background: linear-gradient(145deg, #2878ff 0%, #525ff4 55%, #6652ed 100%);
  border-color: #3148e057;
  box-shadow: inset 0 1px #fff6, inset 0 -3px #171d7133, 0 13px 27px #3747d240, 0 4px 10px #1b277024
}

.button--primary:hover {
  box-shadow: inset 0 1px #ffffff7a, inset 0 -3px #171d712e, 0 18px 36px #3747d24f, 0 7px 14px #1b277029
}

.button--secondary {
  color: #292c39;
  background: linear-gradient(#fff, #f6f7fb);
  border-color: #d7dbe7;
  box-shadow: inset 0 1px #fff, inset 0 -2px #373d5412, 0 10px 24px #292d4c1c, 0 3px 8px #292d4c0f
}

.button--secondary:hover {
  border-color: #c8cfe0;
  box-shadow: inset 0 1px #fff, inset 0 -2px #373d540f, 0 15px 30px #292d4c24, 0 5px 10px #292d4c12
}

.button--light {
  color: #171923;
  background: linear-gradient(#fff, #f2f4fa);
  border-color: #ffffffe6;
  box-shadow: inset 0 1px #fff, inset 0 -3px #181d3414, 0 13px 28px #0003, 0 4px 10px #0000001a
}

.button--light:hover {
  box-shadow: inset 0 1px #fff, inset 0 -3px #181d3412, 0 18px 36px #00000040, 0 6px 12px #0000001c
}

.button--ghost-dark {
  color: #fff;
  background: linear-gradient(#ffffff1f, #ffffff0e);
  border-color: #ffffff3d;
  box-shadow: inset 0 1px #ffffff2e, inset 0 -2px #0000001f, 0 11px 24px #0000002e
}

.button--ghost-dark:hover {
  border-color: #ffffff57;
  box-shadow: inset 0 1px #ffffff38, inset 0 -2px #0000001a, 0 16px 30px #0000003b
}

.button--secondary:before,
.button--light:before {
  background: linear-gradient(#ffffffb8, #0000 48%, #232a480b)
}

.button:active {
  box-shadow: inset 0 4px 10px #0d14413d, 0 4px 10px #1a225b1f
}

.button-row {
  flex-wrap: wrap;
  gap: 12px;
  display: flex
}

.hero-copy .button-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  display: grid
}

.hero-copy .button-row .button {
  white-space: normal;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricprecision;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 56px;
  padding: 15px 24px;
  font-size: .95rem;
  font-weight: 800
}

.hero-copy .button-row .button:after {
  opacity: .8;
  animation: 4.8s ease-in-out 2.4s infinite hero-button-sheen;
  display: block
}

.hero-copy .button-row .button--primary {
  background: linear-gradient(135deg, #2873f4, #5b54e8);
  box-shadow: inset 0 1px #ffffff57, inset 0 -2px #131f702e, 0 9px 20px #3747d233
}

.hero-copy .button-row .button--secondary {
  background: #fff;
  box-shadow: inset 0 -2px #373d540d, 0 8px 18px #292d4c14
}

.hero-copy .button-row .button:hover {
  box-shadow: inset 0 1px #ffffff61, inset 0 -2px #131f7024, 0 12px 24px #3747d23b
}

@keyframes button-sheen {
  0% {
    left: -58%
  }

  to {
    left: 128%
  }
}

@keyframes hero-button-sheen {

  0%,
  58% {
    opacity: 0;
    left: -58%
  }

  66% {
    opacity: .8
  }

  82%,
  to {
    opacity: 0;
    left: 128%
  }
}

.sparkle {
  color: #0000;
  vertical-align: middle;
  filter: drop-shadow(0 0 14px #664aff66);
  background: linear-gradient(135deg, #236fff, #7d4eff 60%, #ff6e75);
  -webkit-background-clip: text;
  background-clip: text;
  place-items: center;
  width: 29px;
  height: 29px;
  font-size: 28px;
  line-height: 1;
  display: inline-grid
}

.sparkle--small {
  width: 20px;
  height: 20px;
  font-size: 18px
}

.brand {
  align-items: center;
  gap: 9px;
  line-height: 1;
  display: inline-flex
}

.brand .sparkle {
  flex: none;
  transform: translateY(-1px)
}

.brand strong {
  line-height: 1;
  display: block
}

.cursor-trail {
  z-index: 90;
  pointer-events: none;
  mix-blend-mode: screen;
  position: fixed;
  inset: 0
}

[data-reveal] {
  opacity: 1;
  min-width: 0;
  transform: none
}

[data-reveal].is-visible {
  animation: .5s ease-out reveal-in
}

.motion-card {
  --motion-x: 50%;
  --motion-y: 50%;
  --motion-rotate: 0deg;
  isolation: isolate;
  opacity: 0;
  transition: opacity .65s ease var(--motion-delay, 0s), translate .65s cubic-bezier(.2, .8, .2, 1) var(--motion-delay, 0s), scale .34s cubic-bezier(.2, .8, .2, 1), rotate .2s ease, filter .34s ease;
  will-change: translate, scale, rotate;
  position: relative;
  translate: 0 26px;
  rotate: none;
  scale: .985
}

.motion-card.motion-visible {
  opacity: 1;
  translate: 0;
  scale: 1
}

.motion-card.is-pointer-active {
  rotate: var(--motion-rotate)
}

.motion-card.motion-lift:hover {
  filter: saturate(1.08)drop-shadow(0 18px 24px #262a7029);
  translate: 0 -8px;
  scale: 1.012
}

.motion-card:active {
  transition-duration: .1s;
  translate: 0 -2px;
  scale: .985
}

.motion-spotlight {
  z-index: 8;
  border-radius: inherit;
  background: radial-gradient(circle 180px at var(--motion-x) var(--motion-y), #ffffff57, #765cff17 38%, transparent 72%);
  opacity: 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity .3s;
  position: absolute;
  inset: 0
}

.motion-card:hover>.motion-spotlight {
  opacity: .9
}

.motion-card:hover :is(.tool-icon, .capability-icon, .flow-card-icon, .problem-note-icon, .step-icon, .media-insight-icon, .line-icon, .dot, .feature-card-icon, .prompt-action__icon, .photo-edit-icon) {
  animation: .72s cubic-bezier(.2, .8, .2, 1) motion-icon-pop
}

.motion-card:hover :is(h3, h4, .tool-card-action, .step-action, .problem-note-action, .media-insight-action) {
  filter: saturate(1.18)
}

.section {
  --ambient-color: 78 107 255;
  isolation: isolate;
  overflow: clip
}

.section:before {
  content: "";
  z-index: 0;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(var(--ambient-color) / .13), transparent 68%);
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  border-radius: 50%;
  width: min(34vw, 470px);
  transition: opacity .9s, transform 1.1s cubic-bezier(.2, .8, .2, 1);
  position: absolute;
  top: 12%;
  right: -12%;
  transform: translate(40px, 28px)scale(.72)
}

.section:nth-of-type(3n+1) {
  --ambient-color: 91 91 255
}

.section:nth-of-type(3n+2) {
  --ambient-color: 255 126 111
}

.section:nth-of-type(3n) {
  --ambient-color: 91 210 191
}

.section.is-section-visible:before {
  opacity: 1;
  animation: 8s ease-in-out 1.1s infinite alternate ambient-drift;
  transform: translate(0)scale(1)
}

.section>.container,
.section.container>* {
  z-index: 1;
  position: relative
}

.capability-grid.is-visible>*,
.tool-tabs.is-visible>*,
.audience-grid.is-visible>*,
.faq-list.is-visible>*,
.media-insights.is-visible>*,
.problem-notes.is-visible>* {
  animation: content-rise .7s cubic-bezier(.2, .8, .2, 1) calc(var(--item-index, 0) * 90ms) backwards
}

.step-flow.is-visible>* {
  animation: crisp-card-in .68s ease-out calc(var(--item-index, 0) * 90ms) backwards
}

.hero {
  background: radial-gradient(circle at 84% 13%, #aa88ff4d, transparent 28%), radial-gradient(circle at 72% 88%, #ff976f38, transparent 25%), radial-gradient(circle at 10% 38%, #4ed1dc24, transparent 22%), var(--paper);
  min-height: 900px;
  padding-top: 0
}

.hero:after {
  content: "";
  z-index: 0;
  filter: blur(36px);
  opacity: .55;
  pointer-events: none;
  background: conic-gradient(from 30deg, #2e79ff33, #7748ff2e, #ff678029, #44d3c424, #2e79ff33);
  border-radius: 44% 56% 63% 37%;
  width: 470px;
  height: 470px;
  animation: 13s ease-in-out infinite alternate hero-aurora;
  position: absolute;
  top: 170px;
  left: -190px
}

.site-header {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  z-index: 12;
  background: #ffffffd4;
  border: 1px solid #31344414;
  border-radius: 999px;
  justify-content: space-between;
  align-items: center;
  width: min(1360px, 100% - 48px);
  height: 74px;
  margin: 18px auto 28px;
  padding: 0 24px;
  display: flex;
  position: relative;
  box-shadow: 0 14px 38px #413e5f14
}

.site-header .brand {
  font-size: 1.23rem
}

.site-header nav {
  color: #5b5e69;
  gap: 42px;
  font-size: .92rem;
  font-weight: 680;
  display: flex
}

.site-header nav a,
.login-link {
  transition: color .2s
}

.site-header nav a:hover,
.login-link:hover {
  color: var(--blue)
}

.header-actions {
  align-items: center;
  gap: 20px;
  display: flex
}

.header-actions .button {
  background: linear-gradient(145deg, #282b3b, #12141e 72%);
  border-color: #ffffff17;
  min-height: 46px;
  padding-inline: 21px;
  box-shadow: inset 0 1px #ffffff26, inset 0 -3px #0000003d, 0 10px 22px #12142433, 0 3px 7px #12142421
}

.header-actions .button:hover {
  box-shadow: inset 0 1px #ffffff30, inset 0 -3px #0003, 0 15px 28px #12142440, 0 5px 10px #12142424
}

.hero-grid {
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 58px;
  min-height: 760px;
  display: grid
}

.hero-copy {
  z-index: 2;
  perspective: 900px;
  padding-left: 14px;
  position: relative
}

.hero-copy h1 {
  font-size: clamp(3.25rem, 4.1vw, 3.7rem);
  line-height: 1.01
}

.hero-copy>p {
  max-width: 620px;
  margin-bottom: 30px;
  font-size: 1.15rem
}

.hero-copy .eyebrow {
  opacity: 0;
  animation: .72s cubic-bezier(.18, .82, .2, 1) 60ms forwards hero-eyebrow-in
}

.hero-copy h1,
.hero-animated-copy {
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  animation: .64s cubic-bezier(.16, .88, .2, 1) forwards hero-word-reveal;
  transform: translateY(.28em)
}

.hero-copy h1 {
  animation-delay: .18s
}

.hero-copy h1 em {
  color: #0000;
  filter: drop-shadow(0 12px 26px #574ade1a);
  background: linear-gradient(112deg, #1769f6 5%, #7650f4 54%, #ef647d 96%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal
}

.hero-animated-copy {
  animation-duration: .56s;
  animation-delay: .82s
}

.hero-copy .button-row {
  opacity: 0;
  animation: .72s cubic-bezier(.16, .88, .2, 1) 1.42s forwards hero-actions-in
}

.hero-copy .format-list {
  opacity: 0;
  animation: .72s cubic-bezier(.16, .88, .2, 1) 1.62s forwards hero-actions-in
}

.format-list {
  grid-template-columns: repeat(4, max-content);
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid
}

.format-list li {
  color: #555b69;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-font-smoothing: auto;
  background: #ffffffc7;
  border: 1px solid #e0e4ed;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  font-size: .68rem;
  font-weight: 780;
  line-height: 1;
  display: inline-flex;
  position: relative;
  box-shadow: 0 4px 12px #282d4a0b
}

.format-list li:before {
  content: "";
  background: var(--blue);
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px
}

.format-list li:nth-child(2):before {
  background: var(--violet)
}

.format-list li:nth-child(3):before {
  background: var(--coral)
}

.format-list li:nth-child(4):before {
  background: var(--mint)
}

.format-list li:after {
  display: none
}

.product-window {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  background: #ffffffed;
  border: 1px solid #171b2d14
}

.hero-window {
  opacity: 0;
  transform-origin: 0;
  padding: 24px;
  animation: 1.05s cubic-bezier(.16, .88, .2, 1) .34s forwards hero-window-in, 7s ease-in-out 1.5s infinite hero-window-float;
  transform: translate(44px, 18px)rotateY(-4deg)scale(.96)
}

.window-bar {
  color: #242631;
  justify-content: space-between;
  align-items: flex-start;
  height: 38px;
  font-size: .86rem;
  font-weight: 750;
  display: flex
}

.window-bar>b:first-child {
  align-items: center;
  gap: 7px;
  display: flex
}

.window-dots {
  color: var(--blue);
  letter-spacing: 5px;
  font-size: .64rem
}

.hero-result {
  isolation: isolate;
  background: #e9e8f0;
  border-radius: 24px;
  height: 345px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #ffffff8c
}

.hero-result img {
  z-index: 0;
  object-fit: cover;
  will-change: transform, filter;
  transition: filter .35s;
  animation: 9s cubic-bezier(.45, 0, .55, 1) infinite hero-image-drift;
  transform: scale(1.035)
}

.hero-result:before {
  content: "";
  z-index: 1;
  filter: blur(2px);
  mix-blend-mode: screen;
  pointer-events: none;
  background: linear-gradient(100deg, #0000, #ffffff14 24%, #ffffff94 50%, #ffffff14 76%, #0000);
  width: 32%;
  animation: 5.8s ease-in-out 1.1s infinite hero-light-pass;
  position: absolute;
  top: -24%;
  bottom: -24%;
  left: -48%;
  transform: skew(-16deg)
}

.hero-result:after {
  content: "";
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 72% 22%, #67a9ff33, #0000 31%), radial-gradient(circle at 28% 78%, #ff7cb429, #0000 34%);
  animation: 6.5s ease-in-out infinite hero-color-breathe;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 38px #3e48b314
}

.hero-result:hover img {
  filter: saturate(1.1)contrast(1.035)
}

.result-chip,
.media-status,
.analysis-chip {
  z-index: 3;
  color: #252735;
  background: #ffffffed;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: .75rem;
  font-weight: 800;
  position: absolute;
  top: 18px;
  left: 18px;
  box-shadow: 0 8px 24px #1319351f
}

.audio-wave {
  z-index: 2;
  opacity: .8;
  background: repeating-linear-gradient(90deg, #5d39ffb3 0 2px, #0000 2px 6px);
  height: 40px;
  animation: 2.4s ease-in-out infinite alternate wave-breathe;
  position: absolute;
  bottom: 33%;
  left: 41%;
  right: 11%;
  -webkit-mask: linear-gradient(#0000, #000 25% 75%, #0000);
  mask: linear-gradient(#0000, #000 25% 75%, #0000)
}

.prompt-box {
  background: linear-gradient(145deg, #fafbff, #f2f5fc);
  border: 1px solid #dde3f0;
  border-radius: 22px;
  margin-top: 16px;
  padding: 20px;
  box-shadow: inset 0 1px #fffffff2, 0 10px 24px #2a31540e
}

.prompt-field {
  background: #fff;
  border: 1px solid #dce2ed;
  border-radius: 16px;
  margin-bottom: 12px;
  padding: 12px 14px 11px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  display: block;
  box-shadow: inset 0 -2px #232c5406, 0 7px 16px #222a4c0e
}

.prompt-field:hover {
  border-color: #a9bced;
  box-shadow: inset 0 -2px #232c5405, 0 10px 20px #2a3d8217
}

.prompt-field:focus-within {
  background: #fbfcff;
  border-color: #6f8fe8;
  box-shadow: 0 0 0 4px #486cdf1a, 0 10px 22px #2a3d821a
}

.prompt-field__label {
  color: #6e7588;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-size: .64rem;
  font-weight: 800;
  line-height: 1;
  display: block
}

.prompt-input {
  resize: none;
  color: #242631;
  width: 100%;
  min-height: 40px;
  font: inherit;
  background: 0 0;
  border: 0;
  outline: 0;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.42;
  display: block;
  overflow: hidden
}

.prompt-actions {
  align-items: stretch;
  gap: 10px;
  display: flex
}

.prompt-action {
  color: #242837;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8deeb;
  border-radius: 15px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 6px 15px 6px 7px;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  transition: border-color .2s, box-shadow .2s, background .2s;
  display: inline-flex;
  box-shadow: inset 0 -2px #232c5409, 0 7px 16px #222a4c12
}

.prompt-action__icon {
  color: #1e66ec;
  background: #edf3ff;
  border-radius: 11px;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  transition: background .2s, color .2s, box-shadow .2s;
  display: grid;
  box-shadow: inset 0 1px #ffffffe6
}

.prompt-action__icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 24px;
  height: 24px;
  transition: transform .24s cubic-bezier(.2, .75, .25, 1);
  overflow: visible
}

.prompt-action__label {
  white-space: nowrap
}

.prompt-action:hover {
  background: #fff;
  border-color: #91acf0;
  box-shadow: inset 0 -2px #232c5406, 0 10px 20px #2a3d821c
}

.prompt-action:hover .prompt-action__icon {
  color: #1755cd;
  background: #dfeaff;
  box-shadow: inset 0 1px #ffffffe6, 0 5px 12px #375bbc1f
}

.prompt-action:hover .prompt-action__icon svg {
  transform: scale(1.1)
}

.prompt-action.is-selected {
  background: #f4f7ff;
  border-color: #6f8fe8;
  box-shadow: inset 0 0 0 1px #5271de1f, 0 10px 22px #354aa221
}

.prompt-action.is-selected .prompt-action__icon {
  color: #fff;
  background: linear-gradient(145deg, #397cf3, #6657e8)
}

.prompt-action:active {
  background: #edf2ff;
  box-shadow: inset 0 2px 5px #263a7e1f, 0 4px 9px #2a3d8214
}

.prompt-action:active .prompt-action__icon svg {
  transform: scale(.94)
}

.prompt-action:focus-visible,
.prompt-submit:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #3867ff40
}

.prompt-submit {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #2c75f1, #5a54e7);
  border: 1px solid #285fe0;
  border-radius: 15px;
  flex: none;
  justify-content: center;
  align-items: center;
  min-width: 140px;
  min-height: 54px;
  margin-left: auto;
  padding: 14px 24px;
  font-size: .78rem;
  font-weight: 820;
  line-height: 1;
  transition: transform .2s, box-shadow .2s, background .2s;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffff59, inset 0 -2px #12268033, 0 10px 22px #334fcf3b
}

.prompt-submit__label {
  white-space: nowrap
}

.prompt-submit:hover {
  background: linear-gradient(135deg, #3c83f5, #695cf0);
  transform: translateY(-2px);
  box-shadow: inset 0 1px #fff6, inset 0 -2px #12268029, 0 14px 27px #334fcf47
}

.prompt-submit:active {
  transform: translateY(1px)scale(.98);
  box-shadow: inset 0 3px 7px #082d823d, 0 5px 12px #1769f62e
}

.prompt-status {
  color: #697184;
  width: 100%;
  min-height: 36px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #ffffffc7;
  border: 1px solid #dce2ed;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding: 8px 11px;
  font-size: .68rem;
  font-weight: 680;
  line-height: 1.25;
  transition: border-color .2s, background .2s, box-shadow .2s;
  display: flex;
  box-shadow: inset 0 1px #fff
}

.prompt-status:hover {
  background: #fff;
  border-color: #a9bced;
  box-shadow: 0 6px 15px #2a3d8214
}

.prompt-status:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #3867ff33
}

.prompt-status__dot {
  background: #aab1c1;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px #aab1c11a
}

.prompt-status.is-active .prompt-status__dot {
  background: #397af2;
  box-shadow: 0 0 0 4px #397af21f
}

.capability-stream {
  background: linear-gradient(120deg, #ffffffe0, #eeeaffc7 52%, #ffeedcc7);
  border: 1px solid #5e56dc21;
  border-radius: 28px;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 104px;
  margin: -12px 0 26px;
  padding: 20px 28px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 48px #34306917
}

.capability-stream:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(105deg, #0000 24%, #fffc 45%, #0000 66%);
  animation: 5.2s ease-in-out infinite stream-sheen;
  position: absolute;
  inset: 0;
  transform: translate(-115%)
}

.capability-stream span {
  z-index: 1;
  color: #30334a;
  white-space: nowrap;
  background: #ffffffe6;
  border: 1px solid #5b5be124;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  padding: 9px 16px;
  font-family: Manrope, sans-serif;
  font-size: .78rem;
  font-weight: 800;
  animation: 3.2s ease-in-out infinite alternate stream-chip-float;
  display: inline-flex;
  position: relative;
  box-shadow: 0 8px 20px #30346917
}

.capability-stream span:nth-of-type(2) {
  color: #1769f6;
  animation-delay: -.5s
}

.capability-stream span:nth-of-type(3) {
  color: #7650f4;
  animation-delay: -1s
}

.capability-stream span:nth-of-type(4) {
  color: #cf6b26;
  animation-delay: -1.5s
}

.capability-stream span:nth-of-type(5) {
  color: #168c7b;
  animation-delay: -2s
}

.capability-stream__source {
  color: #fff !important;
  background: linear-gradient(135deg, #216ffa, #7252ef) !important;
  border-color: #0000 !important;
  box-shadow: 0 10px 28px #464dda47 !important
}

.capability-stream i {
  background: #5c5fa726;
  border-radius: 99px;
  height: 3px;
  position: relative;
  overflow: hidden
}

.capability-stream i:after {
  content: "";
  background: linear-gradient(90deg, #0000, #556ff5, #ec6e9a, #0000);
  animation: 2.4s linear infinite stream-flow;
  position: absolute;
  inset: 0;
  transform: translate(-100%)
}

.capability-stream i:nth-of-type(2):after {
  animation-delay: .35s
}

.capability-stream i:nth-of-type(3):after {
  animation-delay: .7s
}

.capability-stream i:nth-of-type(4):after {
  animation-delay: 1.05s
}

.capability-stream b {
  color: #7650f4;
  filter: drop-shadow(0 5px 10px #6948ef59);
  font-size: 1.05rem;
  animation: 2.6s ease-in-out infinite stream-spark;
  position: absolute;
  top: 8px;
  right: 18px
}

.capability-grid {
  grid-template-rows: repeat(2, minmax(285px, auto));
  grid-template-columns: 1.2fr .92fr 1.38fr;
  gap: 18px;
  display: grid
}

.capability {
  color: #171b27;
  cursor: pointer;
  border: 1px solid #3e49761a;
  border-radius: 29px;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 44px #313a6717
}

.capability:before {
  content: "";
  pointer-events: none;
  background: #ffffff57;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  transition: transform .45s;
  position: absolute;
  top: -90px;
  right: -90px
}

.capability:hover {
  border-color: #465dcf47;
  transform: translateY(-7px);
  box-shadow: 0 30px 72px #3038702e
}

.capability:hover:before {
  transform: scale(1.35)
}

.capability--wide:first-child {
  grid-row: 1/3
}

.capability--wide:last-child {
  grid-area: 1/3/3
}

.capability--blue {
  background: linear-gradient(145deg, #dcecff, #eef6ff)
}

.capability--purple {
  background: linear-gradient(145deg, #e7ddff, #f2edff)
}

.capability--yellow {
  background: linear-gradient(145deg, #ffe9a9, #fff5d4)
}

.capability--gradient {
  background: radial-gradient(circle at 92% 88%, #ffd8ce, #0000 39%), linear-gradient(145deg, #dceaff, #e9deff)
}

.capability-top {
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
  position: relative
}

.capability-top>small {
  color: #5269ae;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 830
}

.capability-icon {
  color: #236df3;
  background: #ffffffb8;
  border: 1px solid #4052ab1f;
  border-radius: 19px;
  place-items: center;
  width: 62px;
  height: 62px;
  transition: translate .28s, rotate .28s, scale .28s;
  display: grid;
  box-shadow: inset 0 1px #fff, 0 12px 24px #2d43981f
}

.capability-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 32px;
  height: 32px
}

.capability:hover .capability-icon {
  translate: 0 -4px;
  rotate: -4deg;
  scale: 1.06
}

.capability h3 {
  z-index: 2;
  margin-bottom: 10px;
  font-size: 1.55rem;
  line-height: 1.16;
  position: relative
}

.capability p {
  z-index: 2;
  color: #4b566d;
  max-width: 100%;
  margin-bottom: 18px;
  font-size: .96rem;
  font-weight: 560;
  line-height: 1.58;
  position: relative
}

.capability-tags,
.language-pills {
  z-index: 2;
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
  position: relative
}

.capability-tags b,
.language-pills b,
.dark-pills span {
  color: #3d4a63;
  background: #ffffffb8;
  border: 1px solid #4b5a9c1a;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: .76rem;
  font-weight: 780
}

.capability-demo {
  z-index: 2;
  background: #ffffffc7;
  border: 1px solid #5164ad24;
  border-radius: 19px;
  margin-top: auto;
  padding: 17px;
  display: block;
  position: relative;
  box-shadow: inset 0 1px #fff, 0 14px 30px #3a498b17
}

.capability-demo__head {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex
}

.capability-demo__head small {
  color: #6071a5;
  text-transform: uppercase;
  font-weight: 820
}

.capability-demo__head i {
  color: #8991a4;
  font-size: .68rem;
  font-style: normal
}

.capability-demo>strong {
  color: #25314b;
  font-size: .84rem;
  line-height: 1.45
}

.capability-output {
  background: #eef2fa;
  border-radius: 13px;
  gap: 8px;
  margin-top: 18px;
  padding: 14px;
  display: grid
}

.capability-output i {
  background: linear-gradient(90deg, #5e83f4 0 43%, #cbd5ec 43%);
  border-radius: 99px;
  width: 88%;
  height: 7px;
  display: block
}

.capability-output i:nth-child(2) {
  background: linear-gradient(90deg, #8b66ef 0 58%, #cbd5ec 58%);
  width: 72%
}

.capability-output i:nth-child(3) {
  background: linear-gradient(90deg, #43b7aa 0 46%, #cbd5ec 46%);
  width: 56%
}

.capability-photo,
.capability-media {
  z-index: 2;
  background: #172658;
  border: 5px solid #ffffffb8;
  border-radius: 19px;
  min-height: 116px;
  margin-top: auto;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 34px #2a2a672b
}

.capability-photo img,
.capability-media img {
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .35s
}

.capability-photo>span {
  z-index: 2;
  color: #27324a;
  background: #ffffffe0;
  border-radius: 9px;
  padding: 6px 9px;
  font-size: .66rem;
  font-weight: 820;
  position: absolute;
  bottom: 10px;
  left: 10px
}

.capability:hover :is(.capability-photo img, .capability-media img) {
  filter: saturate(1.12);
  transform: scale(1.07)
}

.capability-files {
  z-index: 2;
  gap: 7px;
  margin-top: auto;
  display: grid;
  position: relative
}

.capability-files>span {
  background: #ffffffad;
  border: 1px solid #5b4e211a;
  border-radius: 12px;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  display: grid
}

.capability-files b {
  color: #3666d8;
  background: #fff;
  border-radius: 8px;
  place-items: center;
  height: 30px;
  font-size: .68rem;
  display: grid
}

.capability-files strong {
  color: #3b3b37;
  font-size: .76rem
}

.capability-files i {
  color: #8b8165;
  font-size: .68rem;
  font-style: normal
}

.capability-media {
  min-height: 225px;
  margin-top: 18px
}

.capability-media:after {
  content: "";
  background: linear-gradient(#0000, #081339d1);
  position: absolute;
  inset: 45% 0 0
}

.capability-time {
  z-index: 3;
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #0d1943c7;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .64rem;
  font-weight: 780;
  position: absolute;
  bottom: 12px;
  right: 12px
}

.capability-wave {
  z-index: 3;
  align-items: center;
  gap: 4px;
  height: 38px;
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 14px
}

.capability-wave i {
  background: #fff;
  border-radius: 9px;
  width: 4px;
  height: 45%;
  animation: 1.1s ease-in-out infinite alternate wave-breathe
}

.capability-wave i:nth-child(2n) {
  height: 85%;
  animation-delay: -.4s
}

.capability-wave i:nth-child(3n) {
  height: 62%;
  animation-delay: -.7s
}

.capability-action {
  z-index: 2;
  color: #2458c8;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: .78rem;
  font-weight: 830;
  display: flex;
  position: relative
}

.capability-action b {
  font-size: 1rem;
  transition: translate .22s
}

.capability:hover .capability-action b {
  translate: 6px
}

.workspace-ui {
  min-height: 670px;
  color: var(--ink);
  background: #f8f9fc;
  border-radius: 32px;
  grid-template-columns: 220px minmax(0, 1fr) 270px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 32px 90px #0000003d
}

.workspace-sidebar {
  color: #475066;
  background: linear-gradient(#edf2fa, #e7ecf6);
  flex-direction: column;
  gap: 13px;
  min-width: 0;
  padding: 28px 22px;
  display: flex
}

.workspace-sidebar>button {
  color: #263149;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #cfd8e8;
  border-radius: 14px;
  margin: 10px 0 8px;
  padding: 12px;
  font-weight: 720;
  box-shadow: 0 8px 18px #303e610f
}

.workspace-sidebar>small,
.workspace-source small {
  color: #8990a1;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 10px;
  font-size: .64rem;
  font-style: normal
}

.workspace-sidebar>span {
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 11px;
  font-size: .82rem;
  line-height: 1.3;
  display: flex
}

.workspace-sidebar>span.is-current {
  color: #1f3157;
  background: #ffffffc7;
  font-weight: 760
}

.workspace-sidebar>span b {
  color: #3266e9;
  background: #dfe7ff;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: .68rem;
  display: grid
}

.workspace-source {
  background: #ffffffa6;
  border: 1px solid #d5ddea;
  border-radius: 16px;
  gap: 5px;
  margin-top: auto;
  padding: 16px;
  display: grid
}

.workspace-source small {
  margin: 0
}

.workspace-source b {
  color: #27324a;
  font-size: .88rem
}

.workspace-source em {
  color: #687187;
  font-size: .68rem;
  font-style: normal;
  line-height: 1.45
}

.workspace-main {
  min-width: 0;
  padding: 30px 28px
}

.workspace-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex
}

.workspace-head small {
  color: #7b8499;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .67rem;
  font-weight: 780
}

.workspace-head h3 {
  margin: 5px 0 0;
  font-size: 1.55rem
}

.workspace-status {
  color: #16834b;
  background: #e8f7ee;
  border-radius: 999px;
  flex: none;
  padding: 9px 12px;
  font-size: .68rem;
  font-weight: 820
}

.workspace-main .message {
  color: #4e5871;
  background: #e9edff;
  border: 1px solid #d9e0fb;
  border-radius: 15px 15px 15px 4px;
  max-width: 720px;
  margin: 20px 0 16px;
  padding: 16px 18px;
  font-size: .88rem;
  line-height: 1.55
}

.workspace-response {
  color: #566176;
  align-items: center;
  gap: 9px;
  margin: 0 0 15px;
  font-size: .78rem;
  line-height: 1.45;
  display: flex
}

.section--dark .workspace-response {
  color: #4f5a72;
  font-weight: 680
}

.section--dark .workspace-checklist p {
  color: #667084
}

.workspace-phases {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid
}

.workspace-phases button {
  color: #273147;
  min-width: 0;
  min-height: 112px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dce2ed;
  border-radius: 15px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 13px;
  transition: transform .22s, border-color .22s, box-shadow .22s, background .22s;
  display: flex
}

.workspace-phases button:hover,
.workspace-phases button.is-active {
  background: linear-gradient(145deg, #fff, #eef1ff);
  border-color: #7b8ff2;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px #39499d21
}

.workspace-phases small {
  color: #5071db;
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 830
}

.workspace-phases strong {
  font-size: .78rem;
  line-height: 1.32
}

.workspace-phases span {
  color: #737c90;
  margin-top: auto;
  font-size: .64rem;
  line-height: 1.3
}

.workspace-detail {
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  margin-top: 12px;
  animation: .4s cubic-bezier(.2, .8, .2, 1) workspace-swap;
  display: grid
}

.workspace-checklist,
.workspace-deck {
  background: #fff;
  border: 1px solid #dfe4ed;
  border-radius: 18px;
  min-width: 0;
  padding: 18px
}

.workspace-checklist small {
  color: #6479c3;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .61rem;
  font-weight: 820
}

.workspace-checklist h4 {
  margin: 5px 0 6px;
  font-size: 1rem
}

.workspace-checklist p {
  color: #6a7284;
  margin: 0;
  font-size: .72rem;
  line-height: 1.45
}

.workspace-checklist ul {
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid
}

.workspace-checklist li {
  color: #384156;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 680;
  line-height: 1.35;
  display: flex
}

.workspace-checklist li span {
  color: #198652;
  background: #e5f7ed;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: .65rem;
  display: grid
}

.workspace-deck {
  color: #fff;
  background: #0d1c4d
}

.workspace-deck-head {
  justify-content: space-between;
  gap: 10px;
  font-size: .72rem;
  display: flex
}

.workspace-deck-head b {
  color: #aebfff;
  font-size: .62rem
}

.workspace-slides {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  display: grid
}

.workspace-slides>span {
  background: linear-gradient(135deg, #355cff, #7d52e8);
  border-radius: 11px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 70px;
  padding: 10px;
  display: flex
}

.workspace-slides>span:nth-child(2) {
  color: #302300;
  background: linear-gradient(135deg, #ffcc65, #ff9b70)
}

.workspace-slides>span:nth-child(3) {
  background: linear-gradient(135deg, #45c6ba, #3472db)
}

.workspace-slides>span:nth-child(4) {
  color: #23305c;
  background: linear-gradient(135deg, #f0eaff, #d7ddff)
}

.workspace-slides i {
  opacity: .75;
  font-size: .57rem;
  font-style: normal
}

.workspace-slides b {
  font-size: .68rem
}

.outline-card {
  background: #fff;
  border: 1px solid #e1e3eb;
  border-radius: 22px;
  align-self: center;
  margin-right: 22px;
  padding: 22px;
  box-shadow: 0 18px 38px #30395b14
}

.outline-card>small {
  color: #788095;
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 820
}

.outline-card>strong {
  margin-top: 5px;
  font-size: 1.05rem;
  display: block
}

.outline-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 16px 0;
  display: grid
}

.outline-stats span {
  color: #737b8d;
  text-align: center;
  background: #f1f4fa;
  border-radius: 10px;
  padding: 9px 5px;
  font-size: .55rem
}

.outline-stats b {
  color: #315fda;
  font-size: 1rem;
  display: block
}

.outline-steps {
  gap: 6px;
  display: grid
}

.outline-steps button {
  color: #596277;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 10px;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 9px;
  font-size: .65rem;
  line-height: 1.25;
  display: grid
}

.outline-steps button:hover,
.outline-steps button.is-active {
  color: #234ebd;
  background: #edf1ff
}

.outline-steps span {
  font-weight: 850
}

.outline-steps i {
  font-style: normal
}

.workspace-ui.is-visible .message {
  animation: .85s cubic-bezier(.2, .8, .2, 1) .18s backwards message-arrive
}

.workspace-ui.is-visible .mini-results article {
  animation: .75s cubic-bezier(.2, .8, .2, 1) backwards content-rise
}

.workspace-ui.is-visible .mini-results article:nth-child(2) {
  animation-delay: .14s
}

.workspace-ui.is-visible .outline-card {
  animation: .75s cubic-bezier(.2, .8, .2, 1) .28s backwards content-rise
}

.result-orbit {
  grid-template-columns: 1fr .88fr 1fr;
  align-items: stretch;
  gap: 18px;
  padding: 12px 0 18px;
  display: grid
}

.flow-document,
.flow-result {
  color: #1e2230;
  min-height: 360px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #ffffffe6;
  border: 1px solid #524b781c;
  border-radius: 28px;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 26px;
  transition: transform .24s, border-color .24s, box-shadow .24s, background .24s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 45px #3c326417
}

.flow-document:hover,
.flow-result:hover,
.flow-document.is-active,
.flow-result.is-active {
  background: #fff;
  border-color: #505ee161;
  transform: translateY(-5px);
  box-shadow: 0 26px 58px #3c326426
}

.flow-material-head {
  align-items: center;
  gap: 15px;
  display: flex
}

.flow-card-icon {
  color: #236df3;
  background: #e8f1ff;
  border-radius: 17px;
  flex: none;
  place-items: center;
  width: 54px;
  height: 54px;
  display: grid
}

.flow-card-icon--result {
  color: #fff;
  background: linear-gradient(135deg, #4b70ff, #8f4ff0)
}

.flow-card-icon svg,
.orbit-icon svg,
.problem-note-icon svg,
.step-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 28px;
  height: 28px
}

.flow-document small,
.flow-result small {
  color: #747a8b;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 4px 0 8px;
  font-size: .66rem;
  font-weight: 800;
  display: block
}

.flow-document strong,
.flow-result strong {
  font-size: 1.08rem
}

.flow-material-tags {
  flex-wrap: wrap;
  gap: 6px;
  display: flex
}

.flow-material-tags b {
  color: #526077;
  background: #f6f8fc;
  border: 1px solid #dce3ef;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: .61rem;
  line-height: 1.2
}

.flow-material-list {
  gap: 8px;
  display: grid
}

.flow-material-list>span {
  background: #fbfcfe;
  border: 1px solid #e3e7ef;
  border-radius: 11px;
  gap: 2px;
  padding: 10px 11px;
  display: grid
}

.flow-material-list small {
  color: #7c8495;
  margin: 0;
  font-size: .57rem
}

.flow-material-list b {
  color: #30384b;
  font-size: .67rem;
  line-height: 1.35
}

.flow-material-action {
  color: #285cd1;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: .66rem;
  font-weight: 820;
  display: flex
}

.flow-material-action b {
  transition: transform .2s
}

.flow-document:hover .flow-material-action b,
.flow-result:hover .flow-material-action b {
  transform: translate(5px)
}

.flow-result-summary {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  display: grid
}

.flow-result-summary>span {
  text-align: center;
  background: #f2f4fa;
  border-radius: 12px;
  padding: 10px 8px
}

.flow-result-summary b {
  color: #3b5ce1;
  font-size: 1.25rem;
  display: block
}

.flow-result-summary small {
  color: #70798d;
  margin: 2px 0 0;
  font-size: .54rem;
  line-height: 1.25
}

.mini-slide {
  background: #101c4b;
  border-radius: 15px;
  grid-template-columns: 1.2fr .8fr;
  gap: 9px;
  min-height: 92px;
  padding: 10px;
  display: grid
}

.mini-slide i {
  color: #fff;
  background: linear-gradient(135deg, #4a6cff, #a34fff);
  border-radius: 8px;
  align-items: flex-end;
  padding: 9px;
  font-size: .6rem;
  font-style: normal;
  display: flex
}

.mini-slide i:nth-child(2) {
  color: #4f3800;
  background: #ffdf88
}

.mini-slide i:nth-child(3) {
  color: #bac6e7;
  background: #ffffff1f;
  grid-column: 1/-1;
  align-items: center;
  min-height: 23px;
  font-size: .56rem
}

.orbit-core {
  color: #fff;
  min-height: 360px;
  box-shadow: var(--shadow-float);
  background: radial-gradient(circle at 50% 36%, #243d91, #071b4d 65%);
  border-radius: 30px;
  align-content: center;
  place-items: center;
  gap: 8px;
  display: grid;
  position: relative;
  overflow: hidden
}

.orbit-core:before {
  content: "";
  border: 1px solid #97adff47;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  animation: 3.2s ease-in-out infinite orbit-ring;
  position: absolute
}

.orbit-number {
  color: #ffffff61;
  letter-spacing: -.06em;
  font-size: 2.3rem;
  font-weight: 850;
  position: absolute;
  top: 18px;
  right: 20px
}

.orbit-icon {
  z-index: 1;
  background: linear-gradient(135deg, #386cff, #a64ce9);
  border-radius: 24px;
  place-items: center;
  width: 78px;
  height: 78px;
  animation: 2.8s ease-in-out infinite icon-breathe;
  display: grid;
  position: relative;
  box-shadow: 0 0 0 10px #6c57ff21, 0 16px 30px #00000038
}

.orbit-core>strong {
  z-index: 1;
  letter-spacing: .05em;
  font-size: .8rem;
  position: relative
}

.orbit-progress {
  z-index: 1;
  background: #ffffff29;
  border-radius: 99px;
  width: 62%;
  height: 5px;
  position: relative;
  overflow: hidden
}

.orbit-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg, #5b89ff, #db65f4);
  height: 100%;
  transition: width .4s;
  display: block
}

.gradient-thumb {
  background: linear-gradient(135deg, #3d5fff, #a451ff 65%, #ff8277);
  border-radius: 18px;
  width: 78px;
  height: 78px;
  margin-bottom: 12px
}

.problem-notes {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
  display: grid
}

.problem-notes button {
  color: #202330;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  min-height: 205px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #ffffffad;
  border: 1px solid #524b781a;
  border-radius: 24px;
  padding: 22px;
  transition: border-color .24s, background .24s, box-shadow .24s;
  position: relative;
  box-shadow: 0 16px 38px #3c326414
}

.problem-notes button:hover,
.problem-notes button.is-active {
  background: #fffffff0;
  border-color: #535de057;
  box-shadow: 0 22px 48px #3c326421
}

.problem-notes b {
  color: #584cda3d;
  letter-spacing: -.06em;
  font-size: 2.45rem;
  font-weight: 850;
  position: absolute;
  top: 20px;
  right: 22px
}

.problem-note-icon {
  color: #386cf1;
  background: #edf2ff;
  border-radius: 15px;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  transition: background .24s, color .24s;
  display: grid
}

.problem-notes button.is-active .problem-note-icon {
  color: #fff;
  background: linear-gradient(135deg, #386cff, #8253e9)
}

.problem-notes strong {
  margin-bottom: 8px;
  font-size: 1.04rem;
  display: block
}

.problem-notes p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55
}

.problem-note-action {
  color: #416be0;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: .7rem;
  font-weight: 800;
  display: flex
}

.problem-note-action i {
  font-style: normal;
  transition: transform .2s
}

.problem-notes button:hover .problem-note-action i {
  transform: translate(4px)
}

.workflow {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricprecision
}

.workflow button,
.workflow strong,
.workflow p,
.workflow h3,
.workflow span {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricprecision;
  text-shadow: none
}

.workflow .motion-card {
  filter: none;
  will-change: opacity;
  translate: 0;
  rotate: none;
  scale: 1
}

.workflow .motion-card.is-pointer-active {
  rotate: none
}

.workflow .motion-card.motion-lift:hover {
  filter: none;
  translate: 0 -4px;
  scale: 1
}

.workflow-progress {
  color: #fff;
  background: linear-gradient(115deg, #0d1f59, #323183 56%, #7046c8);
  border: 1px solid #4552be29;
  border-radius: 22px;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 18px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 42px #242a7933
}

.workflow-progress:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #ffffff29, #0000);
  width: 22%;
  animation: 5s ease-in-out infinite workflow-sheen;
  position: absolute;
  top: 0;
  bottom: 5px;
  left: -30%;
  transform: skew(-18deg)
}

.workflow-progress>button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 19px 22px 16px;
  display: grid
}

.workflow-progress>button>span:first-child {
  color: #bdd4ff;
  letter-spacing: .055em;
  text-shadow: 0 1px 1px #0003;
  text-transform: uppercase;
  font-size: .79rem;
  font-weight: 850;
  line-height: 1.2
}

.workflow-progress strong {
  color: #fff;
  text-shadow: 0 1px 1px #0000003d;
  font-size: 1.08rem;
  font-weight: 820;
  line-height: 1.25
}

.workflow-progress__next {
  color: #fff;
  text-shadow: 0 1px 1px #0003;
  align-items: center;
  gap: 9px;
  font-size: .79rem;
  font-weight: 820;
  line-height: 1.2;
  display: flex
}

.workflow-progress__next i {
  font-style: normal;
  transition: transform .2s
}

.workflow-progress button:hover .workflow-progress__next i {
  transform: translate(5px)
}

.workflow-progress>div {
  background: #ffffff1c;
  height: 5px
}

.workflow-progress>div i {
  background: linear-gradient(90deg, #41a6ff, #8156ff, #ff67b3);
  border-radius: 0 99px 99px 0;
  height: 100%;
  transition: width .45s cubic-bezier(.2, .8, .2, 1);
  display: block;
  box-shadow: 0 0 18px #6e6fffbf
}

.step-flow {
  counter-reset: steps;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid
}

.step-flow li {
  background: linear-gradient(145deg, #d7ebff, #eef7ff);
  border-radius: 28px;
  min-width: 0;
  transition: box-shadow .24s, translate .24s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px #24598f1a
}

.step-flow li:nth-child(2) {
  background: linear-gradient(145deg, #ded1ff, #f0eaff)
}

.step-flow li:nth-child(3) {
  background: linear-gradient(145deg, #ffe7a7, #fff3cb)
}

.step-flow li:hover {
  translate: 0 -4px;
  box-shadow: 0 24px 52px #34418c29
}

.step-flow li.is-active {
  box-shadow: inset 0 0 0 2px #3a62e957, 0 22px 48px #34418c26
}

.step-flow li:before {
  content: "";
  background: #3577ff13;
  border-radius: 50%;
  width: 108px;
  height: 108px;
  transition: transform .35s, opacity .35s;
  position: absolute;
  bottom: -52px;
  right: -48px
}

.step-flow li:nth-child(2):before {
  background: #7e49f114
}

.step-flow li:nth-child(3):before {
  background: #ffa12b1a
}

.step-flow li:hover:before,
.step-flow li.is-active:before {
  opacity: .65;
  transform: scale(1.08)
}

.step-flow li:after {
  display: none
}

.step-flow button {
  border-radius: inherit;
  color: #202330;
  width: 100%;
  min-height: 255px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 54px 1fr;
  gap: 18px 16px;
  padding: 24px;
  display: grid
}

.step-number {
  color: #7180ac;
  letter-spacing: -.045em;
  font-size: 2.55rem;
  font-weight: 820;
  line-height: 1
}

.step-icon {
  color: #315fe7;
  background: #ffffffbf;
  border-radius: 17px;
  justify-self: end;
  place-items: center;
  width: 54px;
  height: 54px;
  transition: transform .24s, background .24s;
  display: grid
}

.step-flow li.is-active .step-icon {
  background: #fff;
  transform: rotate(-5deg)scale(1.06)
}

.step-copy {
  grid-column: 1/-1
}

.step-title {
  color: #111725;
  letter-spacing: -.012em;
  margin-bottom: 10px;
  font-family: Manrope, Segoe UI Variable Display, Aptos Display, sans-serif;
  font-size: 1.5rem;
  font-weight: 760;
  line-height: 1.2;
  display: block
}

.step-description {
  color: #34405a;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.6;
  display: block
}

.step-flow li.is-active .step-icon svg {
  animation: .55s cubic-bezier(.2, .8, .2, 1) workflow-icon-pop
}

.workflow-swap {
  animation: .42s cubic-bezier(.2, .8, .2, 1) workflow-copy-swap
}

.workflow .workflow-swap {
  animation: .28s ease-out workflow-text-crisp
}

.step-action {
  color: #244fc8;
  grid-column: 1/-1;
  justify-content: space-between;
  align-self: end;
  font-size: .8rem;
  font-weight: 840;
  line-height: 1.2;
  display: flex
}

.step-action i {
  font-style: normal;
  transition: transform .2s
}

.step-flow button:hover .step-action i {
  transform: translate(5px)
}

.workflow-tip {
  background: linear-gradient(135deg, #ffffffe6, #edf0ffd1);
  border: 1px solid #dfe3ed;
  border-radius: 24px;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 18px 26px;
  margin-top: 24px;
  padding: 24px 28px;
  display: grid;
  box-shadow: 0 18px 45px #28346414
}

.workflow-tip__title {
  color: #075de5;
  font: inherit;
  letter-spacing: .065em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  background: 0 0;
  border: 0;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  font-size: .83rem;
  font-weight: 860;
  line-height: 1.38;
  display: flex
}

.workflow-tip__title i {
  font-size: 1.05rem;
  font-style: normal;
  transition: transform .2s
}

.workflow-tip__title:hover i {
  transform: translate(3px, -3px)
}

.formula-pills {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex
}

.formula-pills button {
  color: #252d42;
  min-height: 40px;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ccd6ed;
  border-radius: 12px;
  padding: 9px 14px;
  font-size: .78rem;
  font-weight: 810;
  line-height: 1.2;
  transition: border-color .2s, box-shadow .2s, color .2s, background .2s
}

.formula-pills button:hover {
  border-color: #7894e9;
  box-shadow: 0 6px 14px #31469a1a
}

.formula-pills button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #3978f3, #7156e9);
  border-color: #4c6de8;
  box-shadow: 0 8px 18px #4352cd38
}

.formula-pills i {
  color: #5d6578;
  font-style: normal;
  font-weight: 750
}

.workflow-tip p {
  color: #34405a;
  grid-column: 2;
  margin: 0;
  font-size: 1rem;
  font-weight: 630;
  line-height: 1.6
}

.workflow-tip p strong {
  color: #171d2c;
  font-weight: 780
}

.split-layout {
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: 58px;
  display: grid
}

.split-layout>div:first-child>p {
  max-width: 450px;
  margin-bottom: 28px
}

.split-layout>div:first-child {
  width: 100%
}

.value-list {
  color: #555c6d;
  gap: 10px;
  max-width: 510px;
  margin: -10px 0 26px;
  padding: 0;
  list-style: none;
  display: grid
}

.value-list li {
  padding-left: 28px;
  font-size: .92rem;
  line-height: 1.5;
  position: relative
}

.value-list li:before {
  content: "";
  background: linear-gradient(135deg, var(--blue), var(--violet));
  border-radius: 4px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: .52em;
  left: 0;
  box-shadow: 0 0 0 5px #4a56ff14
}

.value-list--compact {
  margin: 18px 0 20px
}

.value-list--dark {
  color: #c3cce3
}

.value-list--dark li:before {
  box-shadow: 0 0 0 5px #818cff24
}

.editor-window {
  box-shadow: var(--shadow-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricprecision;
  background: #fff;
  border-radius: 28px;
  padding: 30px 40px 42px
}

.editor-window.is-visible {
  animation: 5.5s ease-in-out 1s infinite alternate panel-breathe
}

.editor-toolbar {
  color: #444856;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
  font-size: .86rem;
  display: flex
}

.editor-toolbar>div {
  gap: 8px;
  display: flex
}

.editor-toolbar button {
  background: #edf2ff;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 750
}

.editor-toolbar button:last-child {
  color: #fff;
  background: #171921
}

.editor-window>p {
  font-size: 1.02rem
}

.editor-live-copy {
  animation: .42s cubic-bezier(.2, .8, .2, 1) workflow-copy-swap
}

.editor-notice {
  color: #5170c9;
  align-items: center;
  min-height: 28px;
  margin-top: 4px;
  font-size: .76rem;
  font-weight: 780;
  display: inline-flex
}

.editor-command {
  color: #26334d;
  background: #edf3ff;
  border: 1px solid #d5e0f5;
  border-radius: 16px;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding: 19px 20px;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.52;
  transition: border-color .24s, background .24s, box-shadow .24s;
  display: flex;
  box-shadow: inset 0 1px #ffffffe6
}

.editor-command:hover {
  background: #f4f7ff;
  border-color: #a9bdec;
  box-shadow: inset 0 1px #fff, 0 14px 30px #3549911f
}

.editor-command button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(145deg, #2878ff, #555be9);
  border: 1px solid #274ed052;
  border-radius: 999px;
  margin-left: auto;
  padding: 13px 22px;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1;
  transition: translate .2s, box-shadow .2s, filter .2s;
  box-shadow: inset 0 1px #ffffff61, inset 0 -3px #1b2c8b2e, 0 10px 20px #2b52d73d
}

.editor-command button:hover {
  filter: saturate(1.08);
  translate: 0 -3px;
  box-shadow: inset 0 1px #ffffff75, inset 0 -3px #1b2c8b29, 0 16px 28px #2b52d74f
}

.editor-command button:active {
  translate: 0 1px;
  box-shadow: inset 0 3px 7px #1c2b7d3d, 0 5px 10px #2b52d72e
}

.split-layout--media {
  grid-template-columns: .62fr 1.38fr
}

.dark-pills {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 42px;
  display: flex
}

.dark-pills span {
  color: #bac6e6;
  background: #ffffff14
}

.media-frame {
  border-radius: 30px;
  min-height: 510px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 34px 90px #00000047
}

.media-frame img,
.video-stage img,
.before-after>img {
  object-fit: cover
}

.chart-overlay {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffffd1;
  border-radius: 15px;
  align-items: end;
  gap: 8px;
  width: 110px;
  height: 88px;
  padding: 12px;
  display: flex;
  position: absolute;
  top: 20%;
  right: 16%
}

.chart-overlay i {
  transform-origin: bottom;
  background: linear-gradient(#8661ff, #3d5ff0);
  border-radius: 5px 5px 0 0;
  flex: 1;
  height: 30%;
  animation: 2.8s ease-in-out infinite alternate chart-rise
}

.chart-overlay i:nth-child(2) {
  height: 52%;
  animation-delay: -.5s
}

.chart-overlay i:nth-child(3) {
  height: 76%;
  animation-delay: -1s
}

.chart-overlay i:nth-child(4) {
  height: 100%;
  animation-delay: -1.5s
}

.photo-layout {
  grid-template-columns: 1.5fr .6fr;
  align-items: stretch;
  gap: 30px;
  display: grid
}

.before-after {
  min-height: 480px;
  box-shadow: var(--shadow-soft);
  border: 14px solid #fff;
  border-radius: 30px;
  position: relative;
  overflow: hidden
}

.before-after>img {
  filter: saturate(1.08)
}

.before-mask {
  width: var(--split);
  -webkit-backdrop-filter: saturate(.36)brightness(1.04);
  backdrop-filter: saturate(.36)brightness(1.04);
  pointer-events: none;
  background: #ebddc980;
  border-right: 3px solid #fff;
  position: absolute;
  inset: 0
}

.before-label,
.after-label {
  z-index: 2;
  background: #ffffffeb;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: .75rem;
  font-weight: 800;
  position: absolute;
  top: 22px
}

.before-label {
  left: 22px
}

.after-label {
  color: #fff;
  background: #25262c;
  right: 22px
}

.split-handle {
  z-index: 3;
  left: var(--split);
  background: #fff;
  border-radius: 50%;
  place-items: center;
  width: 46px;
  height: 46px;
  display: grid;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 24px #0000002e
}

.before-after input {
  z-index: 4;
  opacity: 0;
  cursor: ew-resize;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.before-after:after {
  content: "";
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #ffffff47, #0000);
  width: 18%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -28%;
  transform: skew(-16deg)
}

.photo-layout.is-visible .before-after:after {
  animation: 5.2s ease-in-out 1s infinite scan-across
}

.edit-prompt {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricprecision;
  background: linear-gradient(155deg, #fff, #fafbff);
  border: 1px solid #dfe4ee;
  border-radius: 27px;
  padding: 34px;
  box-shadow: 0 20px 50px #282c4c17
}

.photo-edit-icon {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #3978f3, #7255eb);
  border: 1px solid #3256dc61;
  border-radius: 19px;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  display: grid;
  box-shadow: inset 0 1px #ffffff59, 0 13px 25px #4352cd38
}

.photo-edit-icon svg,
.photo-tip-list svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 30px;
  height: 30px
}

.photo-layout.is-visible .photo-edit-icon {
  animation: 3s ease-in-out infinite photo-icon-breathe
}

.edit-prompt__eyebrow {
  color: #416be0;
  font: inherit;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  padding: 0;
  font-size: .68rem;
  font-weight: 850;
  display: flex
}

.edit-prompt__eyebrow i {
  font-style: normal;
  transition: transform .2s
}

.edit-prompt__eyebrow:hover i {
  transform: translate(3px, -3px)
}

.edit-prompt h3 {
  margin-bottom: 10px
}

.edit-prompt__heading {
  color: #20232e;
  font: inherit;
  letter-spacing: -.02em;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0;
  font-weight: 780
}

.edit-prompt__heading:hover {
  color: #315fd5
}

.photo-example {
  color: #555e72;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(135deg, #f8faff, #f3efff);
  border: 1px solid #e0e5f0;
  border-radius: 15px;
  gap: 8px;
  padding: 13px 14px;
  font-size: .84rem;
  font-weight: 550;
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
  display: grid
}

.photo-example i {
  color: #416be0;
  font-size: .68rem;
  font-style: normal;
  font-weight: 800
}

.photo-example:hover {
  border-color: #8da7ef;
  box-shadow: 0 9px 20px #3246961a
}

.photo-tip-list {
  gap: 9px;
  margin: 20px 0 18px;
  padding: 0;
  list-style: none;
  display: grid
}

.photo-tip-list button {
  color: #303646;
  width: 100%;
  min-height: 54px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e0e5ef;
  border-radius: 15px;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 8px;
  transition: border-color .2s, background .2s, box-shadow .2s;
  display: grid
}

.photo-tip-list button>span {
  color: #276bf0;
  background: #edf3ff;
  border-radius: 11px;
  place-items: center;
  width: 38px;
  height: 38px;
  transition: background .2s, color .2s;
  display: grid
}

.photo-tip-list svg {
  width: 22px;
  height: 22px
}

.photo-tip-list button strong {
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.35
}

.photo-tip-list button>i {
  color: #416be0;
  font-style: normal;
  transition: transform .2s
}

.photo-tip-list button:hover,
.photo-tip-list button.is-active {
  background: #f8faff;
  border-color: #8da7ef;
  box-shadow: 0 9px 20px #3246961a
}

.photo-tip-list button.is-active>span {
  color: #fff;
  background: linear-gradient(135deg, #3978f3, #7255eb)
}

.photo-tip-list button:hover>i {
  transform: translate(4px)
}

.photo-tip-list button.is-active svg {
  animation: .55s cubic-bezier(.2, .8, .2, 1) workflow-icon-pop
}

.edit-prompt .button {
  background: linear-gradient(135deg, #2477f3, #6850e9);
  margin-top: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff5c, inset 0 -2px #1e2c802e, 0 14px 28px #3748cd42
}

.edit-prompt .button:after {
  animation: 3.6s ease-in-out 1s infinite button-sheen;
  display: block
}

.translator {
  background: #fff
}

.translation-ui {
  background: #f3f6fb;
  border: 1px solid #dfe4ec;
  border-radius: 28px;
  min-height: 380px;
  padding: 38px;
  box-shadow: 0 18px 48px #2630500f
}

.translation-tabs {
  align-items: center;
  gap: 14px;
  display: flex
}

.translation-tabs span,
.tone-chip {
  background: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: .76rem;
  font-weight: 800
}

.translation-ui>p {
  color: #555c6d;
  background: #fff;
  border-radius: 18px;
  width: 56%;
  margin: 40px 0 0;
  padding: 22px
}

.translation-ui .translated {
  background: #e2e9ff;
  margin-left: auto
}

.translation-ui.is-visible .translated {
  animation: .72s cubic-bezier(.2, .8, .2, 1) .38s backwards translation-arrive
}

.tone-chip {
  float: right;
  color: #6f4fb6;
  background: #eadfff;
  margin-top: 20px
}

.video-stage {
  border-radius: 30px;
  width: min(100%, 1160px);
  height: 480px;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 34px 92px #00000057
}

.video-heading {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricprecision
}

.video-eyebrow {
  color: #fff;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
  background: linear-gradient(135deg, #4168ff4d, #8d4eeb57);
  border: 1px solid #7e9bff61;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 8px 15px 8px 9px;
  font-size: .72rem;
  font-weight: 820;
  display: inline-flex;
  box-shadow: 0 10px 28px #5c52f538
}

.video-eyebrow svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: #ffffff24;
  border-radius: 9px;
  width: 28px;
  height: 28px;
  padding: 5px
}

.video-title {
  color: #fff;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0
}

.video-title:hover {
  color: #dbe4ff
}

.video-stage-action {
  z-index: 1;
  cursor: pointer;
  background: 0 0;
  border: 0;
  position: absolute;
  inset: 0
}

.video-stage:after {
  content: "";
  z-index: 2;
  opacity: .8;
  background: linear-gradient(90deg, #0000, #72a3ff, #ff7ab7, #0000);
  height: 3px;
  animation: 5.8s linear infinite video-scan;
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  box-shadow: 0 0 18px #6886ffbf
}

.playback {
  z-index: 3;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  background: #050b2e94;
  border-radius: 999px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  display: flex;
  position: absolute;
  bottom: 22px;
  left: 26px;
  right: 26px
}

.playback-toggle {
  color: #171a2b;
  cursor: pointer;
  background: #fff;
  border: 0;
  border-radius: 999px;
  flex: none;
  place-items: center;
  width: 72px;
  height: 40px;
  font-size: .72rem;
  font-weight: 850;
  transition: transform .2s, box-shadow .2s;
  display: grid
}

.playback-toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 7px 18px #00000038
}

.timeline {
  cursor: pointer;
  background: #ffffff4d;
  border: 0;
  border-radius: 99px;
  flex: 1;
  height: 8px;
  padding: 0;
  position: relative;
  overflow: hidden
}

.timeline i {
  background: linear-gradient(90deg, #45a5ff, #7a5cff, #ff70b1);
  height: 100%;
  transition: width .45s;
  display: block;
  box-shadow: 0 0 16px #7077ffb3
}

.playback-label {
  color: #fff;
  min-width: 92px;
  font: inherit;
  cursor: pointer;
  background: #ffffff1f;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .72rem;
  font-weight: 800
}

.analysis-chip {
  font: inherit;
  cursor: pointer;
  border: 0
}

.video-stage .analysis-chip {
  color: #202538
}

.media-insights {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
  display: grid
}

.media-insights>button {
  color: #c9cfe2;
  min-height: 220px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(145deg, #ffffff14, #675de514);
  border: 1px solid #ffffff1f;
  border-radius: 24px;
  padding: 24px;
  transition: transform .24s, border-color .24s, background .24s, box-shadow .24s;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff14
}

.media-insights>button:hover,
.media-insights>button.is-active {
  background: linear-gradient(145deg, #3b68f34d, #7d49e147);
  border-color: #7b97ff94;
  transform: translateY(-5px);
  box-shadow: 0 20px 42px #00000038
}

.media-insight-icon {
  color: #b9c7ff;
  background: #778fff29;
  border-radius: 18px;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  display: grid
}

.media-insight-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 30px;
  height: 30px
}

.media-insights button.is-active .media-insight-icon {
  color: #fff;
  background: linear-gradient(135deg, #3e7bf4, #8154e9);
  box-shadow: 0 12px 25px #454edd47
}

.media-insights button.is-active svg {
  animation: .55s cubic-bezier(.2, .8, .2, 1) workflow-icon-pop
}

.media-insights small {
  color: #9eafea;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 11px;
  font-size: .66rem;
  font-weight: 850;
  display: block
}

.media-insights strong {
  color: #fff;
  margin-bottom: 8px;
  display: block
}

.media-insights p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55
}

.media-insight-action {
  color: #b8c6ff;
  justify-content: space-between;
  margin-top: 16px;
  font-size: .7rem;
  font-style: normal;
  font-weight: 800;
  display: flex
}

.media-insight-action b {
  transition: transform .2s
}

.media-insights button:hover .media-insight-action b {
  transform: translate(5px)
}

.tool-tabs {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  display: grid
}

.tool-card {
  text-align: left;
  cursor: pointer;
  border: 2px solid #0000;
  border-radius: 28px;
  flex-direction: column;
  align-items: flex-start;
  min-height: 550px;
  padding: 28px;
  transition: transform .32s, box-shadow .32s, border-color .2s;
  display: flex
}

.tool-card:hover,
.tool-card.is-active {
  box-shadow: var(--shadow-float);
  border-color: #3956ff52;
  transform: translateY(-8px)
}

.tool-card--blue {
  background: #fff
}

.tool-card--navy {
  color: #fff;
  background: #081b4c
}

.tool-card--yellow {
  background: #fff0bc
}

.tool-card--white {
  background: #fff
}

.tool-icon {
  width: 88px;
  height: 72px;
  color: var(--blue);
  background: linear-gradient(135deg, #e7f0ff, #dcdfff);
  border-radius: 22px;
  place-items: center;
  margin-bottom: 26px;
  transition: transform .28s, box-shadow .28s;
  display: grid;
  box-shadow: inset 0 1px #fffc, 0 12px 24px #2d46aa1f
}

.tool-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 43px;
  height: 43px
}

.tool-card--navy .tool-icon {
  color: #fff;
  background: linear-gradient(135deg, #3d79ff, #8a54ef)
}

.tool-card--yellow .tool-icon {
  color: #4b3200;
  background: linear-gradient(135deg, #ffd65f, #ff9c59)
}

.tool-card--white .tool-icon {
  background: linear-gradient(135deg, #dff6ff, #dcd8ff)
}

.tool-card:hover .tool-icon,
.tool-card.is-active .tool-icon {
  transform: translateY(-4px)rotate(-4deg)scale(1.07);
  box-shadow: inset 0 1px #fffc, 0 18px 32px #2d46aa33
}

.tool-card.is-active .tool-icon svg {
  animation: .55s cubic-bezier(.2, .8, .2, 1) workflow-icon-pop
}

.tool-card strong {
  font-size: 1.45rem
}

.tool-card small {
  color: #626b7f;
  margin-top: 10px;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.45
}

.tool-card--navy small {
  color: #bdc9e8
}

.tool-task {
  background: #f4f7fdd1;
  border: 1px solid #46527c1c;
  border-radius: 14px;
  gap: 5px;
  width: 100%;
  margin: 18px 0 20px;
  padding: 13px 14px;
  display: grid
}

.tool-task small {
  color: #6275b6;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  font-size: .59rem;
  font-weight: 850
}

.tool-task b {
  color: #293247;
  font-size: .76rem;
  line-height: 1.45
}

.tool-card--navy .tool-task {
  background: #ffffff14;
  border-color: #ffffff1f
}

.tool-card--navy .tool-task b {
  color: #fff
}

.tool-points {
  gap: 8px;
  width: 100%;
  margin: 17px 0 20px;
  display: grid
}

.tool-points>span {
  color: #40495d;
  padding-left: 20px;
  font-size: .76rem;
  font-weight: 720;
  line-height: 1.35;
  position: relative
}

.tool-points>span:before {
  content: "";
  background: linear-gradient(135deg, #2f7cf5, #7953eb);
  border-radius: 3px;
  width: 8px;
  height: 8px;
  position: absolute;
  top: .42em;
  left: 0;
  box-shadow: 0 0 0 4px #4c65ea14
}

.tool-card--navy .tool-points>span {
  color: #e5eaff
}

.tool-card--navy .tool-points>span:before {
  background: linear-gradient(135deg, #59caff, #c078ff);
  box-shadow: 0 0 0 4px #7e91ff21
}

.tool-visual {
  background: #e1e7f3b8;
  border: 1px solid #49527014;
  border-radius: 18px;
  width: 100%;
  min-height: 132px;
  margin-top: auto;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffbf
}

.tool-card--navy .tool-visual {
  background: linear-gradient(135deg, #2f59ff, #a34dff)
}

.tool-visual__caption {
  z-index: 5;
  color: #2f374b;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #ffffffe0;
  border: 1px solid #5260951f;
  border-radius: 8px;
  max-width: calc(100% - 24px);
  padding: 5px 8px;
  font-size: .61rem;
  font-weight: 820;
  line-height: 1;
  position: absolute;
  top: 11px;
  left: 12px;
  overflow: hidden;
  box-shadow: 0 5px 12px #2a325914
}

.tool-visual i {
  margin: 0
}

.tool-visual--text {
  align-content: end;
  gap: 12px;
  display: grid
}

.tool-visual--text i {
  background: linear-gradient(90deg, #6d89f7 0 38%, #c7d2ef 38%);
  width: 100%;
  height: 9px
}

.tool-visual--text i:nth-child(2) {
  background: linear-gradient(90deg, #9b70f5 0 62%, #c7d2ef 62%);
  width: 82%
}

.tool-visual--text i:nth-child(3) {
  background: linear-gradient(90deg, #55bcae 0 48%, #c7d2ef 48%);
  width: 64%
}

.tool-visual--images {
  position: relative
}

.tool-visual--images i {
  background: radial-gradient(circle at 70% 26%, #ffe783 0 13%, #0000 14%), linear-gradient(150deg, #56d8c2 0 38%, #254cbb 39% 68%, #ff7c8f 69%);
  border: 3px solid #fffc;
  border-radius: 14px;
  width: 46%;
  height: 82px;
  margin: 0;
  position: absolute;
  top: 34px;
  box-shadow: 0 13px 28px #1312503d
}

.tool-visual--images i:first-of-type {
  left: 10%;
  transform: rotate(-7deg)
}

.tool-visual--images i:nth-of-type(2) {
  z-index: 2;
  left: 29%;
  transform: translateY(-5px)
}

.tool-visual--images i:nth-of-type(3) {
  right: 8%;
  transform: rotate(7deg)
}

.tool-visual--slides {
  background: #101b4a;
  min-height: 150px;
  padding: 0
}

.tool-visual__image {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08)contrast(1.03);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .35s;
  transform: scale(1.025)
}

.tool-card:hover .tool-visual__image,
.tool-card.is-active .tool-visual__image {
  filter: saturate(1.16)contrast(1.05);
  transform: scale(1.08)
}

.tool-visual--translate {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  display: flex
}

.tool-visual--translate i {
  background: #fff;
  border-radius: 10px 10px 10px 3px;
  width: 82%;
  height: 28px;
  margin: 0;
  box-shadow: 0 7px 18px #28325c14
}

.tool-visual--translate i:first-of-type {
  margin-top: 24px
}

.tool-visual--translate i:nth-of-type(2) {
  background: #dce6ff;
  border-radius: 10px 10px 3px;
  width: 72%;
  margin-left: auto
}

.tool-visual--translate i:nth-of-type(3) {
  background: #9b77ed;
  width: 44%;
  height: 7px
}

.tool-card-action {
  color: #245dd7;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 17px;
  font-size: .75rem;
  font-weight: 840;
  line-height: 1.2;
  display: flex
}

.tool-card-action b {
  font-size: 1rem;
  transition: transform .2s
}

.tool-card:hover .tool-card-action b {
  transform: translate(5px)
}

.tool-card--navy .tool-card-action {
  color: #bcd3ff
}

.scenario-detail {
  background: linear-gradient(135deg, #fffffff0, #ecf0ffe6);
  border: 1px solid #47528626;
  border-radius: 24px;
  grid-template-columns: 1.15fr 1.35fr auto;
  align-items: stretch;
  gap: 14px;
  margin-top: 22px;
  padding: 18px;
  animation: .4s cubic-bezier(.2, .8, .2, 1) workspace-swap;
  display: grid;
  box-shadow: 0 18px 42px #3038651a
}

.scenario-prompt,
.scenario-context {
  background: #fff;
  border: 1px solid #e0e5ef;
  border-radius: 16px;
  min-width: 0;
  padding: 16px
}

.scenario-detail small {
  color: #6175bf;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-size: .6rem;
  font-weight: 850;
  display: block
}

.scenario-prompt p {
  color: #353e52;
  margin: 0;
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.55
}

.scenario-context {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  display: grid
}

.scenario-context>span {
  min-width: 0
}

.scenario-context strong {
  color: #30394e;
  font-size: .72rem;
  line-height: 1.45
}

.scenario-context>i {
  color: #6d78a3;
  font-style: normal
}

.scenario-detail>a {
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #2477f4, #6d4ee7);
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 150px;
  padding: 15px 18px;
  font-size: .74rem;
  font-weight: 830;
  transition: transform .22s, box-shadow .22s;
  display: flex;
  box-shadow: 0 12px 26px #424dd13d
}

.scenario-detail>a:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px #424dd152
}

.scenario-detail>a span {
  font-size: 1rem
}

.context-grid {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 82px;
  display: grid
}

.brand-kicker {
  color: #4c566f;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  font-weight: 780;
  display: flex
}

.context-grid ol {
  margin: 0;
  padding: 0;
  list-style: none
}

.context-grid li {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 54px 1fr;
  gap: 22px;
  padding: 26px 0;
  display: grid
}

.context-grid li>b {
  color: #31568f;
  background: #e7f2ff;
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid
}

.context-grid li:nth-child(2)>b {
  background: #eee7ff
}

.context-grid li:nth-child(3)>b {
  background: #fff0c9
}

.context-grid li p {
  margin: 0
}

.audience-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  display: grid
}

.audience-grid article {
  background: #fff;
  border-radius: 28px;
  min-height: 170px;
  padding: 28px;
  box-shadow: 0 18px 50px #264c7a14
}

.audience-grid article:nth-child(2) {
  background: #e9ddff
}

.audience-grid article:nth-child(3) {
  background: #ffefbd
}

.dot {
  border-radius: 50%;
  width: 19px;
  height: 19px;
  margin-bottom: 28px;
  display: block
}

.dot--blue {
  background: var(--blue)
}

.dot--purple {
  background: var(--violet)
}

.dot--coral {
  background: var(--coral)
}

.dot--mint {
  background: var(--mint)
}

.faq-layout {
  grid-template-columns: .65fr 1.35fr;
  align-items: start;
  gap: 80px;
  display: grid
}

.faq-list {
  gap: 12px;
  display: grid
}

.faq-list details {
  background: #f8f9fc;
  border: 1px solid #e0e3ea;
  border-radius: 21px;
  transition: box-shadow .25s, background .25s
}

.faq-list details[open] {
  background: #f0f2ff;
  box-shadow: 0 16px 34px #2f335414
}

.faq-list summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  min-height: 74px;
  padding: 18px 24px;
  font-weight: 780;
  list-style: none;
  display: flex
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary span {
  background: #fff;
  border: 1px solid #dbe0e9;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  transition: transform .25s;
  display: grid
}

.faq-list details[open] summary span {
  background: var(--blue);
  color: #fff;
  transform: rotate(45deg)
}

.faq-list details p {
  margin: -6px 64px 24px 24px;
  font-size: .95rem
}

.final-cta {
  padding-block: 110px;
  overflow: hidden
}

.final-cta-inner {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 570px;
  display: flex
}

.final-cta-inner h2 {
  max-width: 780px
}

.final-prompt {
  z-index: 2;
  color: #596174;
  text-align: left;
  background: linear-gradient(145deg, #fffffffa, #f5f7fff5);
  border: 1px solid #ffffffb8;
  border-radius: 30px;
  width: min(820px, 82%);
  margin: 30px 0 20px;
  padding: 18px;
  transition: box-shadow .3s, transform .3s;
  position: relative;
  box-shadow: inset 0 1px #fff, 0 28px 80px #00000047, 0 0 0 8px #6d5eef0d
}

.final-prompt:focus-within {
  box-shadow: inset 0 1px #fff, 0 32px 86px #00000052, 0 0 0 8px #526cef1f
}

.final-prompt.is-sent {
  box-shadow: inset 0 1px #fff, 0 32px 86px #0000004d, 0 0 0 8px #38bfa11f
}

.final-prompt-field {
  background: #fff;
  border: 1px solid #dce2ef;
  border-radius: 20px;
  padding: 16px 18px 12px;
  transition: border-color .2s, box-shadow .2s;
  display: block;
  box-shadow: inset 0 2px 5px #1c264a09
}

.final-prompt-field:focus-within {
  border-color: #6c89ec;
  box-shadow: 0 0 0 4px #486cdf1c, inset 0 2px 5px #1c264a06
}

.final-prompt-label {
  color: #4e5668;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 9px;
  display: flex
}

.final-prompt-label b {
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: .69rem
}

.final-prompt-label small {
  color: #9aa1b1;
  font-size: .64rem
}

.final-prompt textarea {
  resize: vertical;
  color: #202433;
  width: 100%;
  min-height: 88px;
  font: inherit;
  background: 0 0;
  border: 0;
  outline: 0;
  font-size: 1rem;
  font-weight: 680;
  line-height: 1.5;
  display: block
}

.final-prompt textarea::placeholder {
  color: #9ba2b1;
  font-weight: 520
}

.final-suggestions {
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  display: flex
}

.final-suggestions button {
  color: #555d70;
  min-height: 36px;
  font: inherit;
  cursor: pointer;
  background: #f8faff;
  border: 1px solid #dce2ef;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: .68rem;
  font-weight: 780;
  transition: transform .2s, border-color .2s, background .2s, color .2s, box-shadow .2s
}

.final-suggestions button:hover {
  color: #245ecf;
  background: #edf3ff;
  border-color: #98afea;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px #2d4aa01a
}

.final-suggestions button:active {
  transform: translateY(1px)scale(.97)
}

.final-prompt-actions {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex
}

.final-attachments {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex
}

.final-submit {
  isolation: isolate;
  color: #fff;
  min-width: 154px;
  min-height: 62px;
  font: inherit;
  cursor: pointer;
  background: linear-gradient(145deg, #2d81ff 0%, #5266f5 45%, #7b4be8 100%);
  border: 1px solid #ffffffb3;
  border-radius: 18px;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  font-size: .8rem;
  font-weight: 820;
  line-height: 1;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, filter .22s;
  display: inline-flex;
  position: relative;
  overflow: visible;
  box-shadow: inset 0 2px #ffffff6b, inset 0 -4px 7px #14207840, 0 17px 32px #2e5be157, 0 5px 10px #1e2d872e
}

.final-submit:before {
  content: "";
  z-index: -1;
  filter: blur(5px);
  background: #ffffff47;
  border-radius: 14px;
  position: absolute;
  inset: 5px 10px 32px
}

.final-submit svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 23px;
  height: 23px
}

.final-submit__glow {
  z-index: -2;
  border: 1px solid #7089ff59;
  border-radius: 23px;
  animation: 2.4s ease-out infinite final-submit-glow;
  position: absolute;
  inset: -7px
}

.final-submit:hover {
  filter: saturate(1.12);
  transform: translateY(-4px)scale(1.02);
  box-shadow: inset 0 2px #ffffff75, inset 0 -4px 7px #14207833, 0 23px 40px #3654e16b, 0 7px 13px #1e2d8733
}

.final-submit:active {
  transform: translateY(2px)scale(.97);
  box-shadow: inset 0 5px 9px #12207e52, 0 7px 13px #2e5be138
}

.final-submit:focus-visible {
  outline-offset: 4px;
  outline: 4px solid #6c8bff47
}

.final-submit.is-sent {
  background: linear-gradient(145deg, #24b997, #397fe4);
  box-shadow: inset 0 2px #fff6, inset 0 -4px 7px #0d615b33, 0 17px 34px #24b9974d
}

.final-prompt .prompt-status {
  margin-top: 12px
}

.floating-card {
  color: #252735;
  text-align: left;
  min-width: 150px;
  box-shadow: var(--shadow-float);
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  font-weight: 800;
  animation: 4.5s ease-in-out infinite float-soft;
  position: absolute
}

.floating-card--one {
  background: #fff0be;
  top: 50%;
  left: 4%;
  transform: rotate(-7deg)
}

.floating-card--two {
  animation-delay: -1.2s;
  top: 21%;
  right: 2%;
  transform: rotate(7deg)
}

.floating-card--three {
  animation-delay: -2.4s;
  bottom: 9%;
  right: 2%;
  transform: rotate(-5deg)
}

.floating-thumb {
  background: linear-gradient(135deg, #dfe9ff, #e7dcff);
  border: 2px solid #ffffffbf;
  border-radius: 14px;
  place-items: center;
  width: 72px;
  height: 56px;
  margin-bottom: 10px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 9px 20px #2c306329
}

.floating-thumb img {
  object-fit: cover
}

.floating-thumb--text {
  color: #1769f6
}

.floating-thumb--text svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9px;
  stroke-linecap: round;
  width: 34px;
  height: 34px
}

.site-footer {
  background: var(--paper);
  padding: 60px 0 28px
}

.footer-grid {
  grid-template-columns: 1.1fr 1fr 1fr;
  align-items: start;
  gap: 54px;
  display: grid
}

.footer-grid p {
  max-width: 300px;
  margin-top: 16px;
  font-size: .88rem
}

.independent-note {
  color: #8b8e98;
  margin-top: 8px;
  font-size: .78rem;
  line-height: 1.55;
  display: block
}

.footer-grid nav {
  color: #676b77;
  flex-direction: column;
  gap: 11px;
  font-size: .82rem;
  display: flex
}

.footer-grid nav strong {
  color: #555967;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 6px;
  font-size: .72rem
}

.footer-grid nav a:hover {
  color: var(--blue)
}

.footer-bottom {
  color: #999a9f;
  text-align: right;
  border-top: 1px solid #e5e2de;
  justify-content: flex-end;
  margin-top: 46px;
  padding-top: 24px;
  font-size: .74rem;
  display: flex
}

.feature-shell {
  --feature-accent: var(--blue);
  background: var(--paper)
}

.feature-accent--violet {
  --feature-accent: var(--violet)
}

.feature-accent--coral {
  --feature-accent: var(--coral)
}

.feature-accent--yellow {
  --feature-accent: #e2a91a
}

.feature-hero {
  background: radial-gradient(circle at 82% 10%, var(--feature-accent), transparent 28%), radial-gradient(circle at 12% 78%, #ffd47842, transparent 26%), var(--paper);
  min-height: 870px;
  padding-bottom: 78px
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-hero {
    background: radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--feature-accent) 22%, transparent), transparent 28%), radial-gradient(circle at 12% 78%, #ffd47842, transparent 26%), var(--paper)
  }
}

.feature-hero-grid {
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 64px;
  min-height: 740px;
  display: grid
}

.feature-hero-copy h1 {
  max-width: 700px;
  font-size: clamp(3.2rem, 4.55vw, 4.8rem)
}

.feature-hero-copy>p {
  max-width: 650px;
  margin-bottom: 30px;
  font-size: 1.14rem
}

.breadcrumbs {
  color: #838692;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 30px;
  font-size: .78rem;
  font-weight: 700;
  display: flex
}

.breadcrumbs a:hover {
  color: var(--feature-accent)
}

.trust-list {
  color: #656a78;
  flex-wrap: wrap;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  font-size: .78rem;
  font-weight: 750;
  list-style: none;
  display: flex
}

.trust-list li {
  align-items: center;
  gap: 8px;
  display: flex
}

.trust-list li:before {
  content: "";
  background: var(--feature-accent);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 5px var(--feature-accent);
  border-radius: 50%
}

@supports (color:color-mix(in lab, red, red)) {
  .trust-list li:before {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--feature-accent) 13%, transparent)
  }
}

.feature-visual {
  min-height: 560px;
  box-shadow: var(--shadow-float);
  background: #e8ebf5;
  border: 12px solid #ffffffe0;
  border-radius: 38px;
  position: relative;
  overflow: hidden
}

.feature-visual img {
  object-fit: cover
}

.feature-visual:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(#0000, #060c2d73);
  height: 38%;
  position: absolute;
  inset: auto 0 0
}

.feature-visual-chip {
  z-index: 3;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #292b36;
  background: #ffffffe6;
  border-radius: 999px;
  padding: 9px 17px;
  font-size: .75rem;
  font-weight: 820;
  position: absolute;
  top: 20px;
  left: 20px;
  box-shadow: 0 9px 26px #080f3724
}

.motion-diagram {
  z-index: 3;
  justify-content: space-between;
  align-items: center;
  height: 82px;
  display: flex;
  position: absolute;
  bottom: 7%;
  left: 8%;
  right: 8%
}

.motion-diagram>span {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #ffffff38;
  border: 1px solid #ffffff80;
  border-radius: 18px;
  width: 58px;
  height: 58px;
  animation: 3.8s ease-in-out infinite diagram-float;
  box-shadow: 0 12px 30px #050c3033
}

.motion-diagram>span:nth-child(2) {
  border-radius: 50%;
  width: 76px;
  height: 76px;
  animation-delay: -1.1s
}

.motion-diagram>span:nth-child(3) {
  animation-delay: -2.2s
}

.motion-diagram>i {
  transform-origin: 0;
  background: linear-gradient(90deg, #ffffff26, #fff, #ffffff26);
  width: 28%;
  height: 2px;
  animation: 2.4s ease-in-out infinite diagram-flow;
  position: absolute;
  left: 18%
}

.motion-diagram>i:nth-of-type(2) {
  animation-delay: -.8s;
  left: 54%
}

.motion-diagram>i:nth-of-type(3) {
  width: 24%;
  animation-delay: -1.5s;
  top: 9px;
  left: 38%;
  transform: rotate(-8deg)
}

.problem-grid {
  grid-template-columns: 110px 1fr .8fr;
  align-items: center;
  gap: 70px;
  display: grid
}

.problem-grid h2 {
  max-width: 780px
}

.problem-grid p {
  max-width: 750px;
  margin-bottom: 0;
  font-size: 1.12rem
}

.problem-index {
  color: #ffffff47;
  letter-spacing: -.08em;
  align-self: start;
  font-size: 5.3rem;
  font-weight: 850
}

.problem-pulse {
  place-items: center;
  height: 260px;
  display: grid;
  position: relative
}

.problem-pulse i {
  background: #5b4cff2e;
  border: 1px solid #97adff7a;
  border-radius: 50%;
  width: 92px;
  height: 92px;
  animation: 3s ease-out infinite problem-radar;
  position: absolute
}

.problem-pulse i:nth-child(2) {
  animation-delay: -1s
}

.problem-pulse i:nth-child(3) {
  animation-delay: -2s
}

.feature-card-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  display: grid
}

.feature-card {
  background: linear-gradient(145deg, #e3f0ff, #fff 72%);
  border: 1px solid #3d66d224;
  border-radius: 30px;
  min-height: 360px;
  padding: 34px;
  transition: transform .3s, border-color .3s, box-shadow .3s, filter .3s;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffe6, 0 20px 58px #25387e1a
}

.feature-card:hover {
  border-color: var(--feature-accent);
  transform: translateY(-8px)
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-card:hover {
    border-color: color-mix(in srgb, var(--feature-accent) 38%, white)
  }
}

.feature-card:hover {
  box-shadow: var(--shadow-float);
  filter: saturate(1.06)
}

.feature-card:nth-child(2) {
  background: linear-gradient(145deg, #ddd1ff, #fbf8ff 72%)
}

.feature-card:nth-child(3) {
  background: linear-gradient(145deg, #ffe29a, #fffaf0 72%)
}

.feature-card-number {
  color: var(--feature-accent);
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 850
}

.feature-card h3 {
  z-index: 2;
  margin-top: 146px;
  position: relative
}

.feature-card p {
  z-index: 2;
  margin-bottom: 0;
  font-size: .97rem;
  position: relative
}

.feature-card-scene {
  border: 1px solid var(--feature-accent);
  width: 160px;
  height: 124px;
  position: absolute;
  top: 42px;
  right: 32px;
  overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-card-scene {
    border: 1px solid color-mix(in srgb, var(--feature-accent) 18%, white)
  }
}

.feature-card-scene {
  box-shadow: inset 0 1px 0 #fff, 0 16px 38px var(--feature-accent);
  background: #ffffffc7;
  border-radius: 24px
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-card-scene {
    box-shadow: inset 0 1px 0 #fff, 0 16px 38px color-mix(in srgb, var(--feature-accent) 13%, transparent)
  }
}

.feature-card-scene i,
.feature-card-scene b {
  display: block;
  position: absolute
}

.feature-card-scene--1 i {
  transform-origin: 0;
  background: #d8deed;
  border-radius: 99px;
  height: 8px;
  animation: 2.5s ease-in-out infinite alternate scene-line;
  left: 22px;
  right: 20px
}

.feature-card-scene--1 i:first-of-type {
  top: 24px
}

.feature-card-scene--1 i:nth-of-type(2) {
  animation-delay: -.6s;
  top: 48px;
  right: 46px
}

.feature-card-scene--1 i:nth-of-type(3) {
  animation-delay: -1.2s;
  top: 72px;
  right: 30px
}

.feature-card-scene--1 b {
  transform-origin: bottom;
  background: linear-gradient(#5a78fa, #9d55f3);
  border-radius: 99px;
  width: 12px;
  animation: 1.7s ease-in-out infinite alternate scene-bar;
  bottom: 14px
}

.feature-card-scene--1 b:first-of-type {
  height: 20px;
  right: 56px
}

.feature-card-scene--1 b:nth-of-type(2) {
  height: 34px;
  animation-delay: -.45s;
  right: 36px
}

.feature-card-scene--1 b:nth-of-type(3) {
  height: 27px;
  animation-delay: -.9s;
  right: 16px
}

.feature-card-scene--2:before,
.feature-card-scene--2:after {
  content: "";
  background: linear-gradient(90deg, #2675fb, #7951ee, #ff7c71);
  border-radius: 99px;
  height: 3px;
  position: absolute;
  left: 20px;
  right: 20px
}

.feature-card-scene--2:before {
  top: 36px
}

.feature-card-scene--2:after {
  bottom: 34px
}

.feature-card-scene--2 i {
  background: #2774fb;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: 3s ease-in-out infinite scene-marker;
  box-shadow: 0 4px 12px #2c50dc40
}

.feature-card-scene--2 i:first-of-type {
  top: 29px;
  left: 24px
}

.feature-card-scene--2 i:nth-of-type(2) {
  animation-delay: -1s;
  top: 29px;
  left: 48%
}

.feature-card-scene--2 i:nth-of-type(3) {
  animation-delay: -2s;
  bottom: 27px;
  right: 24px
}

.feature-card-scene--2 b {
  display: none
}

.feature-card-scene--3 i {
  background: linear-gradient(155deg, #fff, #f0edff);
  border-radius: 15px;
  width: 74px;
  height: 86px;
  animation: 4s ease-in-out infinite scene-page;
  top: 18px;
  left: 26px;
  box-shadow: 0 9px 20px #4137871f
}

.feature-card-scene--3 i:nth-of-type(2) {
  background: linear-gradient(155deg, #fff7db, #fff);
  animation-delay: -.7s;
  top: 24px;
  left: 43px
}

.feature-card-scene--3 i:nth-of-type(3) {
  background: linear-gradient(155deg, #e7efff, #fff);
  animation-delay: -1.4s;
  top: 30px;
  left: 60px
}

.feature-card-scene--3 b {
  z-index: 2;
  background: #7385e8;
  border-radius: 99px;
  width: 43px;
  height: 6px;
  left: 77px
}

.feature-card-scene--3 b:first-of-type {
  top: 55px
}

.feature-card-scene--3 b:nth-of-type(2) {
  width: 32px;
  top: 70px
}

.feature-card-scene--3 b:nth-of-type(3) {
  width: 38px;
  top: 85px
}

.context-links {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  display: flex
}

.context-links a {
  color: #535968;
  background: #fff;
  border: 1px solid #dfe2ea;
  border-radius: 999px;
  align-items: center;
  gap: 12px;
  padding: 12px 17px;
  font-size: .82rem;
  font-weight: 740;
  transition: border-color .2s, color .2s, transform .2s;
  display: inline-flex
}

.context-links a:hover {
  color: var(--feature-accent);
  border-color: var(--feature-accent);
  transform: translateY(-2px)
}

.context-links--center {
  justify-content: center
}

.feature-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid
}

.feature-steps li {
  isolation: isolate;
  background: linear-gradient(145deg, #e9f3ff, #fffffff5 76%);
  border: 1px solid #4b5cae1a;
  border-radius: 29px;
  min-height: 310px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffe6, 0 18px 52px #28325c14
}

.feature-steps li:nth-child(2) {
  background: linear-gradient(145deg, #e5dcff, #fffffff5 76%)
}

.feature-steps li:nth-child(3) {
  background: linear-gradient(145deg, #ffe8ae, #fffffff5 76%)
}

.feature-steps li:before {
  content: "";
  z-index: -1;
  background: radial-gradient(circle, var(--feature-accent), transparent 70%);
  border-radius: 50%;
  width: 190px;
  height: 190px;
  position: absolute;
  top: -88px;
  right: -74px
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-steps li:before {
    background: radial-gradient(circle, color-mix(in srgb, var(--feature-accent) 24%, white), transparent 70%)
  }
}

.feature-steps li:before {
  opacity: .72;
  transition: opacity .4s, transform .55s cubic-bezier(.2, .8, .2, 1);
  transform: scale(.84)
}

.feature-steps li:hover:before {
  opacity: 1;
  transform: scale(1.08)
}

.feature-steps b {
  z-index: 2;
  border: 1px solid var(--feature-accent);
  place-items: center;
  width: 52px;
  height: 52px;
  display: grid;
  position: relative
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-steps b {
    border: 1px solid color-mix(in srgb, var(--feature-accent) 18%, white)
  }
}

.feature-steps b {
  background: var(--feature-accent);
  border-radius: 17px
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-steps b {
    background: color-mix(in srgb, var(--feature-accent) 12%, white)
  }
}

.feature-steps b {
  color: var(--feature-accent);
  box-shadow: 0 10px 24px var(--feature-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-steps b {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--feature-accent) 12%, transparent)
  }
}

.feature-steps h3 {
  z-index: 2;
  margin-top: 88px;
  position: relative
}

.feature-steps p {
  z-index: 2;
  margin-bottom: 0;
  position: relative
}

.step-signal {
  z-index: 2;
  border: 1px solid var(--feature-accent);
  place-items: center;
  width: 84px;
  height: 84px;
  display: grid;
  position: absolute;
  top: 24px;
  right: 26px;
  overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
  .step-signal {
    border: 1px solid color-mix(in srgb, var(--feature-accent) 20%, white)
  }
}

.step-signal {
  background: linear-gradient(145deg, #fffffff5, var(--feature-accent));
  border-radius: 25px
}

@supports (color:color-mix(in lab, red, red)) {
  .step-signal {
    background: linear-gradient(145deg, #fffffff5, color-mix(in srgb, var(--feature-accent) 10%, white))
  }
}

.step-signal {
  box-shadow: inset 0 1px 0 #fff, 0 15px 32px var(--feature-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .step-signal {
    box-shadow: inset 0 1px 0 #fff, 0 15px 32px color-mix(in srgb, var(--feature-accent) 16%, transparent)
  }
}

.step-signal {
  animation: 3.6s ease-in-out infinite alternate step-panel-float
}

.step-signal:before {
  content: "";
  background: conic-gradient(from 20deg, transparent 0 18%, var(--feature-accent) 35% 66%, var(--feature-accent) 78%, transparent 90%);
  border-radius: 50%;
  width: 52px;
  height: 52px
}

@supports (color:color-mix(in lab, red, red)) {
  .step-signal:before {
    background: conic-gradient(from 20deg, transparent 0 18%, var(--feature-accent) 35% 66%, color-mix(in srgb, var(--feature-accent) 30%, white) 78%, transparent 90%)
  }
}

.step-signal:before {
  animation: 4.2s linear infinite step-ring-spin;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 0);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 0)
}

.step-signal:after {
  content: "";
  background: linear-gradient(135deg, var(--feature-accent), var(--violet));
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 7px var(--feature-accent), 0 8px 18px var(--feature-accent);
  border-radius: 5px;
  position: absolute
}

@supports (color:color-mix(in lab, red, red)) {
  .step-signal:after {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--feature-accent) 10%, transparent), 0 8px 18px color-mix(in srgb, var(--feature-accent) 35%, transparent)
  }
}

.step-signal:after {
  animation: 1.9s ease-in-out infinite step-core-pulse
}

.feature-steps li:nth-child(2) .step-signal {
  animation-delay: -1.2s
}

.feature-steps li:nth-child(2) .step-signal:before {
  animation-delay: -1.4s
}

.feature-steps li:nth-child(3) .step-signal {
  animation-delay: -2.4s
}

.feature-steps li:nth-child(3) .step-signal:before {
  animation-delay: -2.8s
}

.scenario-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px
}

.scenario-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  display: grid
}

.scenario-grid article {
  background: linear-gradient(160deg, #fff, #f3f7ff);
  border: 1px solid #475eba21;
  border-radius: 29px;
  min-height: 390px;
  padding: 22px 22px 30px;
  box-shadow: inset 0 1px #fff, 0 18px 52px #27347017
}

.scenario-grid article:nth-child(2) {
  background: linear-gradient(160deg, #fff, #f1eaff)
}

.scenario-grid article:nth-child(3) {
  background: linear-gradient(160deg, #fff, #fff2cc)
}

.scenario-grid article.is-visible {
  transition: transform .3s, box-shadow .3s
}

.scenario-grid article.is-visible:hover {
  box-shadow: var(--shadow-float);
  filter: saturate(1.08);
  transform: translateY(-7px)
}

.scenario-art {
  background: linear-gradient(135deg, #dbeaff, #e7ddff 62%, #ffe1d8);
  border-radius: 21px;
  height: 210px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden
}

.scenario-art i {
  background: #ffffffd6;
  border-radius: 14px;
  width: 62px;
  height: 86px;
  animation: 4s ease-in-out infinite card-sway;
  position: absolute;
  top: 54px;
  left: 18%;
  box-shadow: 0 16px 32px #1f316324
}

.scenario-art i:nth-child(2) {
  background: #10235b;
  height: 120px;
  animation-delay: -1s;
  top: 35px;
  left: 43%
}

.scenario-art i:nth-child(3) {
  background: #ffe9a8;
  height: 72px;
  animation-delay: -2s;
  top: 67px;
  left: 68%
}

.scenario-art span {
  background: linear-gradient(90deg, transparent, var(--feature-accent), transparent);
  height: 3px;
  animation: 2.3s ease-in-out infinite connector-pulse;
  position: absolute;
  bottom: 22px;
  left: 12%;
  right: 12%
}

.scenario-art--2 {
  background: linear-gradient(135deg, #101d50, #4b2b99 64%, #c05b97)
}

.scenario-art--2 i {
  background: #526fff
}

.scenario-art--2 i:nth-child(2) {
  background: #fff
}

.scenario-art--3 {
  background: linear-gradient(135deg, #fff0bd, #f0e2ff 60%, #ddecff)
}

.proof-grid {
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 90px;
  display: grid
}

.proof-board {
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  gap: 13px;
  min-height: 310px;
  padding: 40px;
  display: flex;
  box-shadow: inset 0 1px #ffffff14
}

.proof-board span {
  color: #fff;
  background: #ffffff1a;
  border-radius: 20px;
  place-items: center;
  min-width: 108px;
  min-height: 92px;
  padding: 12px;
  font-size: .82rem;
  font-weight: 800;
  display: grid
}

.proof-board i {
  background: linear-gradient(90deg, var(--blue), #ff76b7);
  width: 42px;
  height: 2px;
  animation: 1.7s ease-in-out infinite connector-pulse
}

.related-grid {
  grid-template-columns: .8fr 1.2fr;
  align-items: start;
  gap: 80px;
  display: grid
}

.related-grid nav {
  gap: 10px;
  display: grid
}

.related-grid nav a {
  background: #ffffffb3;
  border: 1px solid #4a42691c;
  border-radius: 18px;
  justify-content: space-between;
  align-items: center;
  min-height: 62px;
  padding: 14px 20px;
  font-weight: 760;
  transition: transform .2s, background .2s;
  display: flex
}

.related-grid nav a:hover {
  background: #fff;
  transform: translate(5px)
}

.feature-final {
  overflow: hidden
}

.feature-final-inner {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  display: flex;
  position: relative
}

.feature-final-inner h2 {
  max-width: 900px
}

.feature-final-inner p {
  max-width: 650px
}

.feature-final-inner>:not(.final-orbits) {
  z-index: 2;
  position: relative
}

.final-orbits {
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden
}

.final-orbits i {
  pointer-events: none;
  border: 1px solid #829dff33;
  border-radius: 50%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  animation: 4s ease-out infinite problem-radar;
  position: absolute;
  top: 50%;
  left: 50%
}

.final-orbits i:nth-child(2) {
  animation-delay: -1.35s
}

.final-orbits i:nth-child(3) {
  animation-delay: -2.7s
}

.feature-footer-grid {
  grid-template-columns: 1.15fr .95fr .95fr
}

.footer-action {
  gap: 14px;
  display: grid
}

.footer-action small {
  color: #8a8d96;
  font-size: .72rem;
  line-height: 1.5
}

.not-found-page {
  text-align: center;
  background: radial-gradient(circle at 50% 45%, #674cff38, transparent 32%), var(--paper);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  padding: 40px 20px;
  display: flex;
  position: relative;
  overflow: hidden
}

.not-found-page .brand {
  position: absolute;
  top: 34px;
  left: 42px
}

.not-found-page h1 {
  margin-bottom: 16px
}

.not-found-page p {
  max-width: 610px
}

.not-found-code {
  color: var(--violet);
  letter-spacing: -.09em;
  opacity: .16;
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 900;
  line-height: .8
}

.not-found-orbit i {
  border: 1px solid #5659ff1f;
  border-radius: 50%;
  width: 480px;
  height: 480px;
  animation: 16s linear infinite orbit-rotate;
  position: absolute;
  top: calc(50% - 240px);
  left: calc(50% - 240px)
}

.not-found-orbit i:nth-child(2) {
  transform: scale(.72)
}

.not-found-orbit i:nth-child(3) {
  transform: scale(.42)
}

section.is-section-visible .eyebrow {
  animation: 4.5s ease-in-out infinite alternate eyebrow-glow
}

.capability-grid.is-visible .line-icon,
.photo-layout.is-visible .line-icon {
  animation: 3.2s ease-in-out infinite alternate icon-float
}

.audience-grid.is-visible .dot {
  animation: 2.8s ease-in-out infinite dot-pulse
}

.audience-grid.is-visible article:nth-child(2) .dot {
  animation-delay: -.7s
}

.audience-grid.is-visible article:nth-child(3) .dot {
  animation-delay: -1.4s
}

.audience-grid.is-visible article:nth-child(4) .dot {
  animation-delay: -2.1s
}

.faq-list.is-visible details[open] {
  animation: 4s ease-in-out infinite alternate faq-open-breathe
}

@keyframes reveal-in {
  0% {
    opacity: .45
  }

  to {
    opacity: 1
  }
}

@keyframes content-rise {
  0% {
    opacity: .12;
    transform: translateY(22px)scale(.98)
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1)
  }
}

@keyframes crisp-card-in {
  0% {
    opacity: .18;
    clip-path: inset(0 0 100% round 28px)
  }

  to {
    opacity: 1;
    clip-path: inset(0 round 28px)
  }
}

@keyframes motion-icon-pop {

  0%,
  to {
    translate: 0;
    rotate: none;
    scale: 1
  }

  42% {
    translate: 0 -6px;
    rotate: -4deg;
    scale: 1.12
  }

  72% {
    translate: 0 1px;
    rotate: 2deg;
    scale: 1.04
  }
}

@keyframes workspace-swap {
  0% {
    opacity: .25;
    transform: translateY(10px)scale(.985)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes ambient-drift {
  0% {
    translate: -2% -2%;
    scale: .96
  }

  to {
    translate: 8% 7%;
    scale: 1.1
  }
}

@keyframes message-arrive {
  0% {
    opacity: 0;
    transform: translate(38px)scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes panel-breathe {
  0% {
    box-shadow: 0 20px 52px #3734641a
  }

  to {
    box-shadow: 0 28px 74px #4e40b433
  }
}

@keyframes scan-across {

  0%,
  15% {
    opacity: 0;
    left: -28%
  }

  35% {
    opacity: 1
  }

  62%,
  to {
    opacity: 0;
    left: 116%
  }
}

@keyframes translation-arrive {
  0% {
    opacity: .5;
    transform: translate(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes video-scan {
  0% {
    opacity: 0;
    top: 0
  }

  12% {
    opacity: .8
  }

  78% {
    opacity: .65
  }

  to {
    opacity: 0;
    top: 100%
  }
}

@keyframes eyebrow-glow {
  0% {
    box-shadow: 0 0 #4863ff00
  }

  to {
    box-shadow: 0 8px 28px #4863ff1f
  }
}

@keyframes icon-float {
  0% {
    transform: translateY(-2px)rotate(-3deg)
  }

  to {
    transform: translateY(6px)rotate(4deg)
  }
}

@keyframes dot-pulse {

  0%,
  to {
    transform: scale(.9);
    box-shadow: 0 0 #495bff2e
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 10px #495bff00
  }
}

@keyframes faq-open-breathe {
  0% {
    box-shadow: 0 12px 28px #2f33540f
  }

  to {
    box-shadow: 0 18px 42px #46419621
  }
}

@keyframes orbit-breathe {
  0% {
    scale: .94
  }

  to {
    scale: 1.05
  }
}

@keyframes diagram-float {

  0%,
  to {
    transform: translateY(-5px)rotate(-2deg)
  }

  50% {
    transform: translateY(7px)rotate(3deg)
  }
}

@keyframes diagram-flow {

  0%,
  to {
    opacity: .3;
    transform: scaleX(.35)
  }

  50% {
    opacity: 1;
    transform: scaleX(1)
  }
}

@keyframes problem-radar {
  0% {
    opacity: .9;
    transform: scale(.35)
  }

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

@keyframes orbit-rotate {
  to {
    rotate: 360deg
  }
}

@keyframes connector-pulse {

  0%,
  to {
    opacity: .25;
    transform: scaleX(.55)
  }

  50% {
    opacity: 1;
    transform: scaleX(1)
  }
}

@keyframes step-panel-float {
  0% {
    transform: translateY(-2px)rotate(-1.2deg)
  }

  to {
    transform: translateY(4px)rotate(1.2deg)
  }
}

@keyframes step-ring-spin {
  to {
    transform: rotate(1turn)
  }
}

@keyframes step-core-pulse {

  0%,
  to {
    transform: scale(.82)rotate(0)
  }

  50% {
    transform: scale(1.12)rotate(45deg)
  }
}

@keyframes card-sway {

  0%,
  to {
    transform: translateY(-5px)rotate(-3deg)
  }

  50% {
    transform: translateY(6px)rotate(3deg)
  }
}

@keyframes hero-word-reveal {
  0% {
    opacity: 0;
    transform: translateY(.38em)
  }

  70% {
    opacity: 1;
    transform: translateY(-.03em)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes hero-eyebrow-in {
  0% {
    opacity: 0;
    transform: translateY(-10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes hero-actions-in {
  0% {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes hero-window-in {
  0% {
    opacity: 0;
    transform: translate(44px, 18px)rotateY(-3deg)scale(.98)
  }

  to {
    opacity: 1;
    transform: translate(0)rotateY(0)scale(1)
  }
}

@keyframes hero-window-float {

  0%,
  to {
    transform: translate(0)rotate(.1deg)
  }

  50% {
    transform: translateY(-9px)rotate(-.18deg)
  }
}

@keyframes hero-aurora {
  0% {
    transform: translate(-3%, -2%)rotate(-7deg)scale(.92)
  }

  to {
    transform: translate(18%, 10%)rotate(18deg)scale(1.14)
  }
}

@keyframes stream-sheen {

  0%,
  12% {
    transform: translate(-115%)
  }

  58%,
  to {
    transform: translate(115%)
  }
}

@keyframes stream-chip-float {
  0% {
    transform: translateY(-3px)
  }

  to {
    transform: translateY(4px)
  }
}

@keyframes stream-flow {
  to {
    transform: translate(100%)
  }
}

@keyframes stream-spark {

  0%,
  to {
    opacity: .55;
    transform: rotate(-10deg)scale(.88)
  }

  50% {
    opacity: 1;
    transform: rotate(12deg)scale(1.2)
  }
}

@keyframes scene-core {

  0%,
  to {
    transform: translateY(-3px)rotate(-3deg)
  }

  50% {
    transform: translateY(4px)rotate(4deg)
  }
}

@keyframes scene-line {
  0% {
    opacity: .5;
    transform: scaleX(.48)
  }

  to {
    opacity: 1;
    transform: scaleX(1)
  }
}

@keyframes scene-bar {
  0% {
    transform: scaleY(.45)
  }

  to {
    transform: scaleY(1)
  }
}

@keyframes scene-marker {

  0%,
  to {
    opacity: .5;
    transform: scale(.8)
  }

  50% {
    opacity: 1;
    transform: scale(1.18)
  }
}

@keyframes scene-page {

  0%,
  to {
    transform: translate(-3px, 1px)rotate(-2deg)
  }

  50% {
    transform: translate(5px, -3px)rotate(2deg)
  }
}

@keyframes mobile-panel-in {
  0% {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mobile-word-in {
  0% {
    opacity: 0;
    transform: translateY(.32em)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mobile-image-breathe {
  0% {
    filter: saturate();
    transform: scale(1.025)
  }

  to {
    filter: saturate(1.07);
    transform: scale(1.045)
  }
}

@keyframes mobile-soft-pulse {
  0% {
    opacity: .72;
    scale: .96
  }

  to {
    opacity: 1;
    scale: 1.03
  }
}

@keyframes hero-image-drift {

  0%,
  to {
    transform: scale(1.035)translate(-.35%, .2%)
  }

  50% {
    transform: scale(1.07)translate(.65%, -.55%)
  }
}

@keyframes hero-light-pass {

  0%,
  18% {
    opacity: 0;
    left: -48%
  }

  32% {
    opacity: .88
  }

  58%,
  to {
    opacity: 0;
    left: 128%
  }
}

@keyframes hero-color-breathe {

  0%,
  to {
    opacity: .55
  }

  50% {
    opacity: 1
  }
}

@keyframes orbit-ring {

  0%,
  to {
    opacity: .45;
    transform: scale(.82)
  }

  50% {
    opacity: .85;
    transform: scale(1.08)
  }
}

@keyframes icon-breathe {

  0%,
  to {
    transform: translateY(-2px)
  }

  50% {
    transform: translateY(4px)
  }
}

@keyframes workflow-sheen {

  0%,
  18% {
    opacity: 0;
    left: -30%
  }

  36% {
    opacity: 1
  }

  64%,
  to {
    opacity: 0;
    left: 112%
  }
}

@keyframes workflow-copy-swap {
  0% {
    opacity: 0;
    transform: translateY(7px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes workflow-text-crisp {
  0% {
    opacity: .25
  }

  to {
    opacity: 1
  }
}

@keyframes workflow-icon-pop {
  0% {
    opacity: .25;
    transform: scale(.72)rotate(-8deg)
  }

  70% {
    opacity: 1;
    transform: scale(1.1)rotate(3deg)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes photo-icon-breathe {

  0%,
  to {
    transform: translateY(-2px)rotate(-2deg);
    box-shadow: inset 0 1px #ffffff59, 0 13px 25px #4352cd38
  }

  50% {
    transform: translateY(4px)rotate(2deg);
    box-shadow: inset 0 1px #ffffff59, 0 18px 34px #4352cd4d
  }
}

@keyframes final-submit-glow {
  0% {
    opacity: .65;
    transform: scale(.86)
  }

  72%,
  to {
    opacity: 0;
    transform: scale(1.28)
  }
}

@keyframes wave-breathe {
  0% {
    opacity: .5;
    transform: scaleY(.58)
  }

  to {
    opacity: .95;
    transform: scaleY(1.12)
  }
}

@keyframes typing {

  0%,
  to {
    transform: translateY(-50%)scaleX(.35)
  }

  50% {
    transform: translateY(-50%)scaleX(1)
  }
}

@keyframes flow {
  0% {
    transform: skew(-18deg)translate(-10px)
  }

  to {
    transform: skew(-18deg)translate(16px)
  }
}

@keyframes pulse-core {

  0%,
  to {
    transform: scale(.93)rotate(0);
    box-shadow: 0 0 #7647ff59
  }

  50% {
    transform: scale(1.05)rotate(8deg);
    box-shadow: 0 0 0 18px #7647ff00
  }
}

@keyframes chart-rise {
  0% {
    transform: scaleY(.4)
  }

  to {
    transform: scaleY(1)
  }
}

@keyframes timeline-progress {

  0%,
  to {
    width: 20%
  }

  60% {
    width: 78%
  }
}

@keyframes float-soft {

  0%,
  to {
    translate: 0 -5px
  }

  50% {
    translate: 0 8px
  }
}

@media (max-width:1100px) {
  :root {
    --container: min(940px, calc(100% - 48px))
  }

  .site-header nav {
    gap: 20px
  }

  .hero-grid {
    grid-template-columns: .92fr 1.08fr;
    gap: 28px
  }

  h1 {
    font-size: clamp(3.1rem, 5.4vw, 4.1rem)
  }

  .workspace-ui {
    grid-template-columns: 180px 1fr
  }

  .outline-card {
    display: none
  }

  .split-layout,
  .split-layout--media {
    grid-template-columns: .78fr 1.22fr;
    gap: 36px
  }

  .tool-tabs,
  .audience-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .feature-hero-grid {
    gap: 34px
  }

  .problem-grid {
    grid-template-columns: 80px 1fr .55fr;
    gap: 34px
  }

  .feature-card {
    padding: 28px
  }

  .feature-footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:820px) {
  :root {
    --container: min(710px, calc(100% - 40px))
  }

  .section {
    padding-block: 72px
  }

  .site-header nav,
  .login-link {
    display: none
  }

  .hero {
    min-height: auto;
    padding-top: 0
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding-block: 55px 20px
  }

  .hero-copy {
    padding: 0
  }

  .hero-window {
    max-width: 680px
  }

  .capability-grid {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr
  }

  .capability--wide:first-child,
  .capability--wide:last-child {
    grid-area: auto
  }

  .capability--wide:last-child {
    grid-column: 1/3
  }

  .workspace-ui {
    grid-template-columns: 150px 1fr
  }

  .workspace-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .workspace-detail {
    grid-template-columns: 1fr
  }

  .result-orbit {
    gap: 18px
  }

  .scenario-detail {
    grid-template-columns: 1fr
  }

  .scenario-detail>a {
    min-height: 58px
  }

  .problem-notes,
  .media-insights {
    grid-template-columns: 1fr
  }

  .workflow-tip {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .workflow-tip p {
    grid-column: auto
  }

  .workflow-progress>button {
    grid-template-columns: 1fr auto;
    gap: 8px 14px
  }

  .workflow-progress strong {
    grid-area: 2/1/auto/-1
  }

  .workflow-progress__next {
    grid-area: 1/2
  }

  .step-flow {
    gap: 18px
  }

  .step-flow li:not(:last-child):after {
    display: none
  }

  .split-layout,
  .split-layout--media,
  .photo-layout,
  .context-grid,
  .faq-layout {
    grid-template-columns: 1fr
  }

  .split-layout>div:first-child {
    max-width: 640px
  }

  .media-frame {
    min-height: 460px
  }

  .photo-layout {
    gap: 18px
  }

  .edit-prompt {
    padding: 30px
  }

  .translation-ui {
    margin-top: 12px
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .floating-card--one {
    left: 0
  }

  .floating-card--two,
  .floating-card--three {
    right: 1%
  }

  .feature-hero-grid,
  .problem-grid,
  .proof-grid,
  .related-grid {
    grid-template-columns: 1fr
  }

  .feature-hero {
    min-height: auto
  }

  .feature-hero-grid {
    min-height: auto;
    padding-top: 36px
  }

  .feature-visual {
    min-height: 500px
  }

  .problem-index {
    display: none
  }

  .problem-pulse {
    height: 160px
  }

  .feature-card-grid,
  .feature-steps,
  .scenario-grid {
    grid-template-columns: 1fr
  }

  .feature-card {
    min-height: 310px
  }

  .feature-card h3 {
    margin-top: 118px
  }

  .feature-steps li {
    min-height: 270px
  }

  .feature-steps h3 {
    margin-top: 72px
  }

  .scenario-grid article {
    min-height: 360px
  }

  .proof-grid {
    gap: 34px
  }

  .related-grid {
    gap: 30px
  }
}

@media (max-width:680px) {
  :root {
    --container: calc(100% - 28px)
  }

  .section {
    padding-block: 64px
  }

  .capability-grid,
  .tool-tabs,
  .audience-grid,
  .step-flow {
    grid-template-columns: 1fr
  }

  .capability-stream {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 18px
  }

  .capability-stream span {
    white-space: normal;
    text-align: center;
    width: 100%
  }

  .capability-stream__source {
    grid-column: 1/-1
  }

  .capability-stream i,
  .capability-stream b {
    display: none
  }

  .capability--wide:first-child,
  .capability--wide:last-child {
    grid-area: auto
  }

  .capability {
    min-height: 0
  }

  .capability-media {
    min-height: 210px
  }

  .workspace-ui {
    grid-template-columns: 1fr
  }

  .workspace-ui aside {
    display: none
  }

  .workspace-main {
    padding: 24px
  }

  .workspace-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .workspace-detail,
  .result-orbit {
    grid-template-columns: 1fr
  }

  .orbit-core {
    order: -1;
    min-height: 210px
  }

  .flow-document,
  .flow-result {
    min-height: 350px
  }

  .step-flow li:not(:last-child):after {
    display: none
  }

  .step-flow button {
    min-height: 220px
  }

  .media-frame {
    min-height: 390px
  }

  .video-stage {
    height: 370px
  }

  .playback {
    gap: 9px;
    padding: 9px 10px;
    bottom: 12px;
    left: 12px;
    right: 12px
  }

  .playback-label {
    min-width: 78px;
    padding-inline: 9px
  }

  .translation-ui {
    padding: 26px
  }

  .translation-ui>p {
    width: 100%
  }

  .translation-ui .translated {
    margin-left: 0
  }

  .footer-grid,
  .feature-footer-grid {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .footer-bottom {
    text-align: left;
    justify-content: flex-start
  }

  .feature-card-scene {
    width: auto;
    height: 112px;
    left: 26px;
    right: 26px
  }

  .feature-card h3 {
    margin-top: 132px
  }
}

@media (max-width:540px) {
  :root {
    --container: calc(100% - 28px)
  }

  .section {
    padding-block: 58px
  }

  h1 {
    font-size: clamp(2.7rem, 13vw, 3.7rem)
  }

  .hero-copy h1 {
    font-size: clamp(2.65rem, 12.5vw, 3.25rem)
  }

  h2 {
    font-size: clamp(2.05rem, 10vw, 2.8rem)
  }

  p {
    font-size: .98rem
  }

  .site-header {
    width: calc(100% - 20px);
    height: 64px;
    margin-top: 10px;
    padding: 0 12px 0 16px
  }

  .header-actions .button {
    min-height: 42px;
    padding-inline: 16px;
    font-size: .82rem
  }

  .hero-grid {
    padding-top: 28px
  }

  .hero-copy>p {
    font-size: 1.02rem
  }

  .section-heading {
    margin-bottom: 38px
  }

  .value-list {
    margin-top: -4px
  }

  .problem-notes article,
  .media-insights article {
    min-height: auto
  }

  .hero-copy .button-row {
    grid-template-columns: 1fr;
    width: 100%
  }

  .hero-copy .button-row .button {
    width: 100%;
    min-width: 0
  }

  .format-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%
  }

  .format-list li {
    justify-content: flex-start;
    padding-inline: 10px;
    font-size: .62rem
  }

  .hero-window {
    border-radius: 25px;
    padding: 14px
  }

  .hero-result {
    height: 255px
  }

  .prompt-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid
  }

  .prompt-action {
    width: 100%;
    min-width: 0;
    padding-right: 10px
  }

  .prompt-submit {
    grid-column: 1/-1;
    width: 100%;
    min-width: 0;
    margin-left: 0
  }

  .capability-grid,
  .tool-tabs,
  .audience-grid {
    grid-template-columns: 1fr
  }

  .capability--wide:last-child {
    grid-column: auto
  }

  .capability {
    min-height: 180px;
    padding: 25px
  }

  .workspace-ui {
    grid-template-columns: 1fr
  }

  .workspace-ui aside {
    display: none
  }

  .workspace-main {
    padding: 24px
  }

  .workspace-head {
    align-items: flex-start
  }

  .workspace-phases {
    grid-template-columns: 1fr 1fr
  }

  .result-orbit {
    grid-template-columns: 1fr
  }

  .orbit-core {
    order: -1;
    height: 155px
  }

  .flow-document,
  .flow-result {
    min-height: 360px
  }

  .step-flow {
    grid-template-columns: 1fr
  }

  .step-flow li:not(:last-child):after {
    display: none
  }

  .step-flow button {
    min-height: 220px
  }

  .step-flow li {
    min-height: 175px
  }

  .editor-window {
    padding: 22px
  }

  .editor-toolbar>strong {
    display: none
  }

  .editor-command {
    display: block
  }

  .editor-command button {
    margin: 14px 0 0
  }

  .media-frame {
    min-height: 360px
  }

  .photo-layout {
    display: block
  }

  .before-after {
    border-width: 8px;
    min-height: 360px
  }

  .edit-prompt {
    margin-top: 18px
  }

  .translation-ui {
    padding: 24px
  }

  .translation-tabs {
    flex-wrap: wrap
  }

  .translation-ui>p {
    width: 100%
  }

  .translation-ui .translated {
    margin-left: 0
  }

  .tone-chip {
    float: none;
    display: inline-flex
  }

  .video-stage {
    height: 350px
  }

  .tool-card {
    min-height: 520px
  }

  .scenario-context {
    grid-template-columns: 1fr
  }

  .scenario-context>i {
    text-align: center;
    transform: rotate(90deg)
  }

  .faq-list summary {
    min-height: 68px;
    padding: 16px 18px
  }

  .faq-list summary span {
    flex: none
  }

  .faq-list details p {
    margin-right: 24px
  }

  .final-cta {
    padding-block: 80px
  }

  .final-cta-inner {
    min-height: 600px
  }

  .final-prompt {
    border-radius: 24px;
    width: 100%;
    padding: 14px
  }

  .final-prompt-field {
    padding: 14px
  }

  .final-prompt textarea {
    min-height: 110px;
    font-size: .94rem
  }

  .final-prompt-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    display: grid
  }

  .final-attachments {
    grid-template-columns: 1fr;
    gap: 8px;
    display: grid
  }

  .final-attachments .prompt-action {
    min-width: 0;
    padding-right: 10px
  }

  .final-submit {
    width: 100%;
    min-height: 58px
  }

  .floating-card {
    display: none
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .footer-bottom {
    gap: 8px;
    display: grid
  }

  .feature-hero {
    padding-bottom: 52px
  }

  .feature-hero-copy h1 {
    font-size: clamp(2.55rem, 11.8vw, 3.25rem)
  }

  .feature-hero-copy>p {
    font-size: 1rem
  }

  .feature-visual {
    border-width: 7px;
    border-radius: 28px;
    min-height: 390px
  }

  .motion-diagram {
    left: 5%;
    right: 5%
  }

  .motion-diagram>span {
    width: 45px;
    height: 45px
  }

  .motion-diagram>span:nth-child(2) {
    width: 58px;
    height: 58px
  }

  .problem-grid {
    gap: 16px
  }

  .problem-pulse {
    height: 125px
  }

  .feature-card {
    min-height: 290px
  }

  .feature-steps li {
    min-height: 250px
  }

  .scenario-art {
    height: 190px
  }

  .proof-board {
    gap: 6px;
    min-height: 260px;
    padding: 22px 12px
  }

  .proof-board span {
    min-width: 82px;
    min-height: 78px;
    font-size: .68rem
  }

  .proof-board i {
    width: 20px
  }

  .feature-final-inner {
    min-height: 460px
  }

  .feature-footer-grid {
    grid-template-columns: 1fr
  }

  .not-found-page .brand {
    top: 24px;
    left: 24px
  }
}

@media (max-width:760px) {

  html,
  body,
  .site-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: clip
  }

  .site-shell :is(section, header, footer, div, article, nav, ol, ul, li, form, label) {
    min-width: 0
  }

  .container {
    width: calc(100% - 28px);
    max-width: 100%
  }

  .section {
    width: 100%;
    padding-block: 58px
  }

  .section:before {
    opacity: .55;
    width: 300px;
    right: -30%;
    animation: none !important;
    transform: none !important
  }

  h1,
  h2,
  h3 {
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: pretty;
    max-width: 100%
  }

  h1 {
    font-size: clamp(2.55rem, 12.2vw, 3.25rem);
    line-height: 1.02
  }

  h2 {
    font-size: clamp(2rem, 9.5vw, 2.65rem);
    line-height: 1.06
  }

  p {
    line-height: 1.58
  }

  .section-heading {
    width: 100%;
    margin-bottom: 34px
  }

  .section-heading p {
    font-size: 1rem
  }

  .site-header {
    width: calc(100% - 20px);
    max-width: 100%;
    margin: 10px auto 18px
  }

  .site-header .brand {
    min-width: max-content
  }

  .header-actions {
    gap: 8px
  }

  .hero {
    min-height: auto;
    padding-top: 0
  }

  .hero:after {
    opacity: .34;
    top: 120px;
    left: -230px;
    animation: none !important;
    transform: none !important
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    min-height: 0;
    padding: 28px 0 22px
  }

  .hero-copy {
    perspective: none;
    width: 100%;
    padding: 0
  }

  .hero-copy h1 {
    font-size: clamp(2.55rem, 12vw, 3.2rem)
  }

  .hero-copy>p {
    margin-bottom: 24px;
    font-size: 1rem
  }

  .hero-copy h1,
  .hero-animated-copy {
    clip-path: none;
    filter: none;
    animation-name: mobile-word-in;
    animation-duration: .48s;
    transform: none
  }

  .hero-animated-copy {
    animation-duration: .4s
  }

  .hero-copy .button-row,
  .hero-copy .format-list {
    animation-name: mobile-panel-in
  }

  .hero-copy .button-row {
    grid-template-columns: minmax(0, 1fr);
    width: 100%
  }

  .hero-copy .button-row .button {
    white-space: normal;
    text-align: center;
    width: 100%;
    min-width: 0
  }

  .format-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%
  }

  .format-list li {
    white-space: normal;
    text-align: left;
    min-width: 0;
    line-height: 1.25
  }

  .hero-window {
    border-radius: 24px;
    width: 100%;
    max-width: 100%;
    padding: 13px;
    animation: .72s cubic-bezier(.2, .8, .2, 1) .22s forwards mobile-panel-in;
    transform: none
  }

  .window-bar {
    height: 34px
  }

  .hero-result {
    border-radius: 18px;
    height: clamp(220px, 66vw, 280px)
  }

  .hero-result img {
    animation: 8s ease-in-out infinite alternate mobile-image-breathe;
    transform: scale(1.025)
  }

  .result-chip {
    top: 11px;
    left: 11px
  }

  .audio-wave {
    left: 28%;
    right: 8%
  }

  .prompt-box {
    padding: 10px
  }

  .prompt-field {
    padding: 12px
  }

  .prompt-input {
    width: 100%;
    min-height: 74px
  }

  .prompt-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px
  }

  .prompt-action {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    padding: 7px 12px
  }

  .prompt-action__label {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0
  }

  .prompt-submit {
    grid-column: 1/-1;
    width: 100%;
    min-width: 0;
    margin: 0
  }

  .prompt-status {
    text-align: left;
    overflow-wrap: anywhere;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    padding: 11px 12px
  }

  .prompt-status__dot {
    margin-top: .35em
  }

  .capability-stream {
    margin-top: 0
  }

  .capability-stream span {
    animation: none
  }

  .capability,
  .tool-card,
  .feature-card,
  .scenario-grid article {
    width: 100%;
    max-width: 100%
  }

  .capability {
    min-height: 0
  }

  .capability-media {
    min-height: 190px
  }

  .workspace-ui {
    border-radius: 24px;
    min-height: 0
  }

  .workspace-main {
    width: 100%;
    padding: 20px;
    overflow: hidden
  }

  .workspace-head {
    gap: 12px
  }

  .workspace-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .workspace-detail,
  .workspace-slides {
    width: 100%
  }

  .result-orbit {
    grid-template-columns: minmax(0, 1fr);
    width: 100%
  }

  .flow-document,
  .flow-result,
  .orbit-core {
    width: 100%;
    min-height: 280px
  }

  .flow-result-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .problem-notes,
  .media-insights {
    grid-template-columns: minmax(0, 1fr)
  }

  .workflow-progress>button,
  .workflow-tip,
  .formula-pills {
    width: 100%
  }

  .formula-pills {
    flex-wrap: wrap;
    display: flex
  }

  .step-flow {
    grid-template-columns: minmax(0, 1fr)
  }

  .step-flow li,
  .step-flow button {
    width: 100%
  }

  .step-flow li:hover {
    translate: 0
  }

  .step-flow li:before {
    display: none
  }

  .step-flow li.is-active {
    box-shadow: inset 0 0 0 2px #3a62e94d, 0 14px 32px #34418c1c
  }

  .step-flow button {
    gap: 14px;
    min-height: 0;
    padding: 22px
  }

  .step-flow li.is-active .step-icon {
    transform: none
  }

  .editor-window {
    padding: 22px 18px 26px
  }

  .editor-toolbar {
    gap: 10px;
    padding-bottom: 22px
  }

  .editor-toolbar>div {
    flex-wrap: wrap;
    justify-content: flex-end
  }

  .editor-toolbar button {
    padding: 8px 12px
  }

  .editor-command {
    gap: 12px;
    padding: 16px;
    display: grid
  }

  .editor-command button {
    width: 100%;
    margin: 0
  }

  .media-frame,
  .before-after,
  .video-stage {
    width: 100%;
    max-width: 100%;
    min-height: 0
  }

  .media-frame {
    height: 360px
  }

  .before-after {
    border-width: 8px;
    height: 350px
  }

  .split-handle {
    width: 40px;
    height: 40px
  }

  .edit-prompt {
    width: 100%;
    padding: 24px 20px
  }

  .edit-prompt .button {
    width: 100%
  }

  .translation-ui {
    width: 100%;
    min-height: 0;
    padding: 22px 18px
  }

  .translation-tabs {
    flex-wrap: wrap
  }

  .translation-ui>p {
    width: 100%;
    margin-top: 22px;
    padding: 17px
  }

  .tone-chip {
    float: none;
    display: inline-flex
  }

  .video-stage {
    height: 340px
  }

  .playback {
    border-radius: 22px;
    grid-template-columns: 76px minmax(0, 1fr);
    display: grid;
    bottom: 10px;
    left: 10px;
    right: 10px
  }

  .playback-label {
    grid-column: 1/-1;
    width: 100%;
    min-width: 0
  }

  .media-insights>button {
    width: 100%;
    min-height: 0
  }

  .tool-tabs {
    grid-template-columns: minmax(0, 1fr)
  }

  .tool-card {
    min-height: 500px;
    padding: 24px
  }

  .scenario-detail,
  .context-grid,
  .audience-grid,
  .faq-layout {
    grid-template-columns: minmax(0, 1fr)
  }

  .context-grid ol {
    padding-left: 0
  }

  .faq-list {
    width: 100%
  }

  .faq-list summary {
    gap: 12px
  }

  .faq-list details p {
    margin-right: 0
  }

  .final-cta-inner {
    min-height: 560px
  }

  .final-prompt {
    width: 100%;
    max-width: 100%
  }

  .final-suggestions {
    grid-template-columns: minmax(0, 1fr);
    display: grid
  }

  .final-suggestions button {
    width: 100%
  }

  .final-prompt-actions {
    grid-template-columns: minmax(0, 1fr)
  }

  .final-submit {
    width: 100%;
    min-height: 56px
  }

  .feature-hero {
    min-height: 0;
    padding-bottom: 54px
  }

  .feature-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    min-height: 0;
    padding-top: 20px
  }

  .feature-hero-copy h1 {
    font-size: clamp(2.5rem, 11.8vw, 3.15rem)
  }

  .feature-hero-copy .button-row {
    grid-template-columns: minmax(0, 1fr);
    display: grid
  }

  .feature-hero-copy .button {
    width: 100%
  }

  .trust-list {
    gap: 12px;
    display: grid
  }

  .feature-visual {
    border-width: 7px;
    border-radius: 26px;
    width: 100%;
    min-height: 360px
  }

  .motion-diagram {
    left: 5%;
    right: 5%
  }

  .motion-diagram>span {
    animation: 2.8s ease-in-out infinite alternate mobile-soft-pulse
  }

  .problem-grid,
  .proof-grid,
  .related-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px
  }

  .problem-pulse {
    height: 130px;
    overflow: hidden
  }

  .feature-card-grid,
  .feature-steps,
  .scenario-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .feature-card,
  .feature-steps li,
  .scenario-grid article {
    min-height: 0
  }

  .feature-card {
    padding: 26px
  }

  .feature-card-scene {
    width: auto;
    left: 24px;
    right: 24px
  }

  .feature-card h3 {
    margin-top: 142px
  }

  .feature-steps li {
    padding: 26px
  }

  .feature-steps h3 {
    margin-top: 72px
  }

  .step-signal {
    border-radius: 22px;
    width: 72px;
    height: 72px;
    top: 20px;
    right: 20px
  }

  .step-signal:before {
    width: 44px;
    height: 44px
  }

  .scenario-grid article {
    padding: 18px 18px 24px
  }

  .scenario-art {
    height: 152px;
    margin-bottom: 22px
  }

  .scenario-art i {
    width: 54px;
    height: 68px;
    animation: 3s ease-in-out infinite alternate mobile-soft-pulse;
    top: 42px
  }

  .scenario-art i:nth-child(2) {
    height: 100px;
    top: 26px
  }

  .scenario-art i:nth-child(3) {
    height: 60px;
    top: 51px
  }

  .scenario-art span {
    bottom: 15px
  }

  .scenario-grid article h3 {
    font-size: 1.35rem
  }

  .proof-board {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 24px;
    display: grid
  }

  .proof-board span {
    width: 100%;
    min-width: 0;
    min-height: 72px
  }

  .proof-board i {
    width: 3px;
    height: 24px;
    margin: auto
  }

  .related-grid nav a {
    overflow-wrap: anywhere;
    width: 100%
  }

  .feature-final-inner {
    min-height: 430px
  }

  .feature-final-inner .button {
    width: 100%;
    max-width: 320px
  }

  .footer-grid,
  .feature-footer-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .footer-bottom {
    text-align: left;
    justify-content: flex-start
  }

  .motion-card,
  .motion-card.motion-visible {
    max-width: 100%;
    translate: 0;
    rotate: none;
    scale: 1
  }

  .motion-card.is-pointer-active {
    rotate: none
  }

  .motion-spotlight,
  .cursor-trail {
    display: none
  }
}

@media (max-width:420px) {
  .container {
    width: calc(100% - 22px)
  }

  .site-header {
    padding-inline: 12px
  }

  .header-actions .button {
    padding-inline: 13px;
    font-size: .76rem
  }

  .workspace-phases,
  .flow-result-summary,
  .format-list,
  .capability-stream {
    grid-template-columns: minmax(0, 1fr)
  }

  .capability-stream__source {
    grid-column: auto
  }

  .feature-visual {
    min-height: 320px
  }

  .motion-diagram>span {
    width: 42px;
    height: 42px
  }

  .motion-diagram>span:nth-child(2) {
    width: 54px;
    height: 54px
  }
}

@media (max-width:820px),
(hover:none),
(pointer:coarse) {

  .button:hover,
  .capability:hover,
  .feature-card:hover,
  .scenario-grid article.is-visible:hover,
  .tool-card:hover,
  .media-insights>button:hover,
  .flow-document:hover,
  .flow-result:hover,
  .related-grid nav a:hover {
    filter: none;
    transform: translate(0)rotate(0)scale(1)
  }

  .motion-card.motion-lift:hover,
  .motion-card:active {
    filter: none;
    translate: 0;
    rotate: none;
    scale: 1
  }
}

.section--intent {
  background: radial-gradient(circle at 8% 18%, #468cff33, #0000 26rem), radial-gradient(circle at 88% 78%, #ff71982e, #0000 28rem), linear-gradient(135deg, #f5f8ff 0%, #f5f0ff 52%, #fff8ed 100%);
  overflow: hidden
}

.feature-capabilities-heading {
  max-width: 48rem
}

.feature-capabilities-heading p {
  max-width: 44rem;
  color: var(--muted);
  margin: 1.1rem 0 0;
  font-size: 1.08rem;
  line-height: 1.7
}

.feature-capability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  display: grid
}

.feature-capability-grid article {
  isolation: isolate;
  background: #ffffffd1;
  border: 1px solid #5863a929;
  border-radius: 1.75rem;
  min-width: 0;
  min-height: 18rem;
  padding: 1.55rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1.4rem 3.6rem #312c691a, inset 0 1px #fffffff0
}

.feature-capability-grid article:before {
  z-index: -1;
  content: "";
  background: radial-gradient(circle, #595dff38, #0000 68%);
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  position: absolute;
  bottom: -5rem;
  right: -4.5rem
}

.feature-capability-number {
  color: #4169e8;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 850
}

.feature-capability-signal {
  background: linear-gradient(135deg, #e0ecffeb, #f7f1ffeb);
  border: 1px solid #505eb11f;
  border-radius: 1.25rem;
  width: 100%;
  height: 6.4rem;
  margin: 1rem 0 1.25rem;
  position: relative;
  overflow: hidden
}

.feature-capability-signal:before,
.feature-capability-signal:after {
  content: "";
  background: linear-gradient(90deg, #2476ff, #7456ff 58%, #ff7891);
  border-radius: 99px;
  height: 3px;
  position: absolute;
  left: 12%;
  right: 12%
}

.feature-capability-signal:before {
  top: 34%
}

.feature-capability-signal:after {
  opacity: .66;
  top: 64%
}

.feature-capability-signal i {
  z-index: 1;
  background: #3278ff;
  border: 3px solid #fff;
  border-radius: 50%;
  width: .9rem;
  height: .9rem;
  position: absolute;
  top: calc(34% - 6px);
  box-shadow: 0 .35rem .8rem #264fd347
}

.feature-capability-signal i:first-child {
  left: 16%
}

.feature-capability-signal i:nth-child(2) {
  background: #7456ff;
  top: calc(64% - 6px);
  left: 51%
}

.feature-capability-signal i:nth-child(3) {
  background: #ff718c;
  right: 14%
}

.feature-capability-signal--2 {
  background: linear-gradient(135deg, #fff2ce, #fff8ec)
}

.feature-capability-signal--3 {
  background: linear-gradient(135deg, #e3fbf4, #eef4ff)
}

.feature-capability-grid h3 {
  margin: 0 0 .55rem;
  font-size: 1.24rem;
  line-height: 1.2
}

.feature-capability-grid p {
  color: var(--muted);
  margin: 0;
  font-size: .98rem;
  line-height: 1.62
}

.feature-demo {
  padding-block: clamp(4.5rem, 8vw, 7.5rem)
}

.feature-demo-shell {
  background: linear-gradient(145deg, #101d51, #21145c 58%, #3b1e72);
  border: 1px solid #7a7ece40;
  border-radius: 2.2rem;
  grid-template-columns: minmax(0, .9fr) 4.5rem minmax(0, 1.1fr);
  align-items: stretch;
  gap: 1.2rem;
  margin-top: 2.4rem;
  padding: 1.25rem;
  display: grid;
  box-shadow: 0 2rem 5rem #18144f38, inset 0 1px #ffffff26
}

.feature-demo-prompt,
.feature-demo-result {
  border-radius: 1.45rem;
  min-width: 0;
  padding: 1.6rem
}

.feature-demo-prompt {
  color: #fff;
  background: #142153c7;
  border: 1px solid #ffffff2b
}

.feature-demo-result {
  background: #fffffff5;
  box-shadow: 0 1rem 2.5rem #0408282e
}

.feature-demo-shell small {
  color: #a9bcff;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .8rem;
  font-size: .78rem;
  font-weight: 850;
  display: block
}

.feature-demo-prompt strong {
  margin-bottom: .65rem;
  font-size: 1.12rem;
  display: block
}

.feature-demo-prompt p,
.feature-demo-result p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65
}

.feature-demo-prompt p {
  color: #ffffffc7
}

.feature-demo-result small {
  color: #545df0
}

.feature-demo-result p {
  color: #1c2031;
  font-weight: 650
}

.feature-demo-result ul {
  gap: .65rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid
}

.feature-demo-result li {
  color: #51596e;
  align-items: center;
  gap: .65rem;
  font-size: .88rem;
  line-height: 1.4;
  display: flex
}

.feature-demo-result li:before {
  content: "";
  background: linear-gradient(135deg, #247cff, #7555f7);
  border: 2px solid #fff;
  border-radius: 50%;
  flex: none;
  width: .6rem;
  height: .6rem;
  box-shadow: 0 0 0 3px #4868f526
}

.feature-demo-progress {
  place-content: center;
  gap: .55rem;
  display: grid
}

.feature-demo-progress span {
  background: #768dff;
  border-radius: 50%;
  width: .72rem;
  height: .72rem;
  animation: 2.1s ease-in-out infinite intent-pulse;
  box-shadow: 0 0 1rem #7968ffa6
}

.feature-demo-progress span:nth-child(2) {
  background: #9d68f7;
  animation-delay: .22s
}

.feature-demo-progress span:nth-child(3) {
  background: #ff7694;
  animation-delay: .44s
}

@keyframes intent-pulse {

  0%,
  to {
    opacity: .46;
    transform: scale(.82)
  }

  50% {
    opacity: 1;
    transform: scale(1.18)
  }
}

.feature-fit-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
  gap: 1.25rem;
  display: grid
}

.feature-audience,
.feature-limits {
  background: #ffffffe0;
  border: 1px solid #5662a624;
  border-radius: 2rem;
  min-width: 0;
  padding: clamp(1.6rem, 4vw, 3rem);
  box-shadow: 0 1.4rem 3.8rem #2a2d5d17
}

.feature-audience h2,
.feature-limits h2 {
  margin-bottom: 1.5rem
}

.feature-audience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  display: grid
}

.feature-audience-grid article {
  background: linear-gradient(145deg, #f3f7ff, #faf7ff);
  border: 1px solid #5f68b521;
  border-radius: 1.25rem;
  min-width: 0;
  padding: 1.15rem
}

.feature-audience-grid h3 {
  margin: 0 0 .4rem;
  font-size: 1rem
}

.feature-audience-grid p,
.feature-limits li span {
  color: var(--muted);
  margin: 0;
  font-size: .9rem;
  line-height: 1.55
}

.feature-limits {
  background: linear-gradient(145deg, #fff7dc, #fff 54%, #f2edff)
}

.feature-limits ul {
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid
}

.feature-limits li {
  background: #ffffffbd;
  border: 1px solid #7069ae21;
  border-radius: 1.15rem;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: .2rem .8rem;
  padding: 1rem;
  display: grid
}

.feature-limits li:before {
  content: "";
  background: linear-gradient(135deg, #2c7aff, #7657f4);
  border-radius: 50%;
  width: .75rem;
  height: .75rem;
  margin-top: .2rem;
  box-shadow: 0 0 0 4px #3f69f31f
}

.feature-limits li strong,
.feature-limits li span {
  grid-column: 2
}

.feature-limits li strong {
  font-size: .98rem
}

.feature-final-link {
  z-index: 2;
  color: #fff;
  background: #ffffff1a;
  border: 1px solid #ffffff57;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 3.35rem;
  margin-top: .6rem;
  padding: .85rem 1.35rem;
  font-size: .94rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  box-shadow: inset 0 1px #ffffff3d, 0 .8rem 2rem #03072433
}

@media (hover:hover) and (pointer:fine) {

  .feature-capability-grid article,
  .feature-audience-grid article,
  .feature-limits li,
  .feature-final-link {
    transition: border-color .28s, box-shadow .28s, transform .28s, background .28s
  }

  .feature-capability-grid article:hover,
  .feature-audience-grid article:hover,
  .feature-limits li:hover {
    border-color: #4d5bec59;
    transform: translateY(-4px);
    box-shadow: 0 1.7rem 4rem #312c6924
  }

  .feature-capability-grid article:hover .feature-capability-signal i {
    animation: 1.35s ease-in-out infinite intent-pulse
  }

  .feature-final-link:hover {
    background: #ffffff2e;
    border-color: #ffffff9e;
    transform: translateY(-2px);
    box-shadow: inset 0 1px #ffffff52, 0 1rem 2.4rem #1f186c59
  }
}

@media (max-width:1024px) {
  .feature-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .feature-demo-shell {
    grid-template-columns: minmax(0, 1fr)
  }

  .feature-demo-progress {
    grid-auto-flow: column;
    min-height: 2.25rem
  }

  .feature-fit-grid {
    grid-template-columns: minmax(0, 1fr)
  }
}

@media (max-width:760px) {

  .feature-capability-grid,
  .feature-audience-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .feature-capability-grid {
    margin-top: 1.6rem
  }

  .feature-capability-grid article {
    min-height: 0;
    padding: 1.25rem
  }

  .feature-capability-signal {
    height: 5.6rem
  }

  .feature-demo {
    padding-block: 4rem
  }

  .feature-demo-shell {
    border-radius: 1.55rem;
    gap: .8rem;
    padding: .75rem
  }

  .feature-demo-prompt,
  .feature-demo-result {
    border-radius: 1.1rem;
    padding: 1.25rem
  }

  .feature-audience,
  .feature-limits {
    border-radius: 1.5rem;
    padding: 1.25rem
  }

  .feature-final-link {
    width: 100%;
    min-height: 3.5rem
  }
}

@media (prefers-reduced-motion:reduce) {

  .feature-demo-progress span,
  .feature-capability-grid article:hover .feature-capability-signal i {
    animation: none
  }
}

.site-shell input,
.site-shell textarea,
.site-shell select {
  font-family: inherit
}

.site-shell button,
.site-shell .button {
  font-optical-sizing: auto;
  letter-spacing: -.018em;
  font-family: Manrope, Segoe UI Variable Display, Aptos Display, sans-serif
}

.site-shell small {
  font-size: .76rem;
  line-height: 1.4
}

.site-shell .format-list li,
.site-shell .prompt-field__label,
.site-shell .prompt-status,
.site-shell .language-pills span,
.site-shell .dark-pills span,
.site-shell .workspace-source em,
.site-shell .workspace-phases span,
.site-shell .workspace-slides i,
.site-shell .workspace-slides b,
.site-shell .outline-stats span,
.site-shell .outline-steps button,
.site-shell .flow-material-tags b,
.site-shell .flow-material-list b,
.site-shell .flow-material-action,
.site-shell .mini-slide i,
.site-shell .edit-prompt__eyebrow,
.site-shell .photo-example i,
.site-shell .video-eyebrow,
.site-shell .playback-label,
.site-shell .tool-visual__caption,
.site-shell .scenario-prompt p,
.site-shell .scenario-context strong,
.site-shell .scenario-detail>a,
.site-shell .final-suggestions button,
.site-shell .footer-grid nav strong,
.site-shell .footer-bottom,
.site-shell .footer-action small {
  font-size: .78rem;
  line-height: 1.42
}

.site-shell .workspace-phases strong,
.site-shell .workspace-checklist li,
.site-shell .tool-task b,
.site-shell .tool-card-action,
.site-shell .media-insight-action,
.site-shell .problem-note-action {
  font-size: .84rem;
  line-height: 1.45
}

.site-shell .button {
  font-size: .96rem
}

.site-shell .button,
.site-shell .context-links a,
.site-shell .related-grid nav a,
.site-shell .editor-command button,
.site-shell .final-suggestions button,
.site-shell .prompt-action,
.site-shell .analysis-chip,
.site-shell .playback-label {
  letter-spacing: -.02em;
  border-radius: 999px;
  font-family: Manrope, Segoe UI Variable Display, Aptos Display, sans-serif;
  font-weight: 800
}

.site-shell .button {
  min-height: 52px;
  padding: 13px 24px;
  font-size: .94rem;
  line-height: 1.1
}

.site-shell .context-links a,
.site-shell .related-grid nav a {
  text-align: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 20px
}

.site-shell button,
.site-shell .button,
.site-shell .context-links a,
.site-shell .related-grid nav a {
  font-optical-sizing: auto;
  font-family: Onest, Manrope, Segoe UI Variable Display, sans-serif
}

.site-shell .button {
  letter-spacing: -.027em;
  min-height: 56px;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  border-width: 1px;
  padding: 15px 28px;
  font-size: .98rem;
  font-weight: 800;
  transition: transform .24s cubic-bezier(.2, .82, .2, 1), box-shadow .28s, border-color .28s, background .28s, filter .28s
}

.site-shell .button:before {
  border-radius: inherit;
  filter: blur(.2px);
  background: linear-gradient(#ffffff80, #ffffff17);
  inset: 1px 2px 48%
}

.site-shell .button:after {
  filter: blur(1.5px);
  background: linear-gradient(90deg, #0000, #ffffff9e, #0000);
  width: 38%
}

.site-shell .button:hover {
  filter: saturate(1.1)brightness(1.025);
  transform: translateY(-4px)scale(1.018)
}

.site-shell .button:active {
  filter: saturate(1.02);
  transform: translateY(2px)scale(.975)
}

.site-shell .button:focus-visible {
  outline-offset: 4px;
  outline: 3px solid #5075ff4d
}

.site-shell .button--primary,
.site-shell .hero-copy .button-row .button--primary {
  color: #fff;
  text-shadow: 0 1px 2px #11185b52;
  background: linear-gradient(132deg, #078af8 0%, #346cff 37%, #6254f2 70%, #814de5 100%);
  border-color: #ffffff61;
  box-shadow: inset 0 1px #ffffff94, inset 0 -3px #191c7c33, 0 15px 32px #304ee252, 0 5px 12px #232a902e, 0 0 30px #6253f233
}

.site-shell .button--primary:hover,
.site-shell .hero-copy .button-row .button--primary:hover {
  border-color: #ffffff94;
  box-shadow: inset 0 1px #ffffffb3, inset 0 -3px #191c7c29, 0 21px 42px #304ee263, 0 7px 15px #232a9033, 0 0 40px #7053f647
}

.site-shell .button--secondary,
.site-shell .hero-copy .button-row .button--secondary {
  color: #202431;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: linear-gradient(150deg, #fffffffc, #f9fafff0 56%, #edf1ffe6);
  border-color: #6a749933;
  box-shadow: inset 0 1px #fff, inset 0 -2px #434b6e0f, 0 13px 30px #272c521f, 0 4px 10px #272c5211, 0 0 24px #5968e212
}

.site-shell .button--secondary:before,
.site-shell .button--light:before {
  background: linear-gradient(#fffffff2, #ffffff14)
}

.site-shell .button--secondary:hover,
.site-shell .hero-copy .button-row .button--secondary:hover {
  color: #161b2c;
  border-color: #5d69ab57;
  box-shadow: inset 0 1px #fff, inset 0 -2px #434b6e0e, 0 19px 38px #272c522b, 0 6px 13px #272c5214, 0 0 32px #5968e21f
}

.site-shell .button--light {
  color: #151925;
  background: linear-gradient(160deg, #fff, #f4f6ff 65%, #e9edff);
  border-color: #fffffff5;
  box-shadow: inset 0 1px #fff, inset 0 -3px #2c335e12, 0 16px 34px #00000038, 0 0 28px #766dff24
}

.site-shell .button--ghost-dark {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: linear-gradient(145deg, #ffffff29, #ffffff12);
  border-color: #ffffff4d;
  box-shadow: inset 0 1px #ffffff3d, inset 0 -2px #0000001f, 0 15px 30px #0003, 0 0 24px #6e65ff1f
}

.site-shell .header-actions .button {
  color: #fff;
  text-shadow: 0 1px 2px #0000006b;
  background: linear-gradient(155deg, #343a50 0%, #1a1e2c 46%, #0a0c13 100%);
  border-color: #fff3;
  min-height: 48px;
  padding: 13px 24px;
  box-shadow: inset 0 1px #ffffff40, inset 0 -3px #00000059, 0 13px 28px #12142447, 0 4px 9px #1214242b, 0 0 28px #575fe229
}

.site-shell .header-actions .button:hover {
  background: linear-gradient(155deg, #3a4260, #1d2233 48%, #0b0d14);
  border-color: #a5afff66;
  box-shadow: inset 0 1px #ffffff4d, inset 0 -3px #00000052, 0 18px 36px #12142454, 0 6px 12px #1214242e, 0 0 36px #5c65ef3b
}

.site-shell .hero-copy .button-row .button {
  min-height: 60px;
  padding: 16px 28px;
  font-size: 1rem;
  font-weight: 800
}

.site-shell .prompt-action,
.site-shell .final-suggestions button {
  background: linear-gradient(150deg, #fff, #f5f7ff);
  border-color: #6777ac33;
  transition: transform .22s, border-color .22s, box-shadow .22s, background .22s;
  box-shadow: inset 0 1px #fff, inset 0 -2px #333d680d, 0 9px 20px #2d39701a, 0 0 20px #5367e60f
}

.site-shell .prompt-action:hover,
.site-shell .final-suggestions button:hover {
  border-color: #4e6adc6b;
  transform: translateY(-2px);
  box-shadow: inset 0 1px #fff, 0 13px 26px #2d397026, 0 0 28px #5367e61a
}

.site-shell .prompt-submit,
.site-shell .final-submit,
.site-shell .editor-command button {
  color: #fff;
  letter-spacing: -.022em;
  text-shadow: 0 1px 2px #11185b4d;
  background: linear-gradient(132deg, #078af8, #3d67fb 43%, #7450ea 100%);
  border-color: #ffffff61;
  border-radius: 18px;
  font-family: Onest, Manrope, sans-serif;
  font-size: .84rem;
  font-weight: 800;
  box-shadow: inset 0 1px #ffffff94, inset 0 -3px #191c7c33, 0 14px 29px #304ee24f, 0 0 28px #6253f22e
}

.site-shell .prompt-submit:hover,
.site-shell .final-submit:hover,
.site-shell .editor-command button:hover {
  filter: saturate(1.09)brightness(1.025);
  transform: translateY(-3px)scale(1.012);
  box-shadow: inset 0 1px #ffffffb3, inset 0 -3px #191c7c29, 0 20px 37px #304ee261, 0 0 36px #6253f240
}

.site-shell .prompt-submit:active,
.site-shell .final-submit:active,
.site-shell .editor-command button:active {
  transform: translateY(2px)scale(.975)
}

@media (max-width:760px) {
  .site-shell .hero-copy .button-row .button {
    min-height: 60px;
    padding: 16px 22px;
    font-size: .98rem
  }

  .site-shell .header-actions .button {
    min-height: 46px;
    padding: 12px 20px;
    font-size: .86rem
  }

  .site-shell .prompt-submit,
  .site-shell .final-submit {
    min-height: 58px
  }
}

@media (max-width:420px) {
  .site-shell .header-actions .button {
    min-height: 44px;
    padding-inline: 17px;
    font-size: .8rem
  }

  .site-shell .hero-copy .button-row .button {
    min-height: 58px;
    font-size: .94rem
  }
}

.home-shell .section-heading,
.feature-shell .section-heading,
.feature-shell .scenario-heading {
  position: relative
}

.home-shell .section-heading:after,
.feature-shell .section-heading:after,
.feature-shell .scenario-heading:after {
  content: "";
  background: linear-gradient(90deg, var(--blue), var(--violet), var(--coral));
  border-radius: 999px;
  width: 92px;
  height: 5px;
  margin-top: 24px;
  display: block;
  box-shadow: 0 8px 22px #534fe13d
}

.feature-shell .scenario-heading:after {
  margin-inline: auto
}

.home-shell .capability,
.home-shell .tool-card,
.home-shell .scenario-grid article,
.feature-shell .feature-card,
.feature-shell .feature-steps li,
.feature-shell .scenario-grid article {
  border-color: #5460ae29;
  box-shadow: inset 0 1px #fffffff5, 0 24px 64px #2a32691b, 0 5px 16px #312f5b0b
}

.home-shell .capability:after,
.home-shell .tool-card:after,
.feature-shell .feature-card:after,
.feature-shell .feature-steps li:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, #ffffff2e, #0000 34% 70%, #684cff0e);
  position: absolute;
  inset: 0
}

.feature-hero {
  background: radial-gradient(circle at 9% 24%, var(--feature-accent), transparent 29%), radial-gradient(circle at 84% 17%, #7c53ff33, transparent 28%), radial-gradient(circle at 72% 82%, #ff716724, transparent 24%), var(--paper)
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-hero {
    background: radial-gradient(circle at 9% 24%, color-mix(in srgb, var(--feature-accent) 17%, transparent), transparent 29%), radial-gradient(circle at 84% 17%, #7c53ff33, transparent 28%), radial-gradient(circle at 72% 82%, #ff716724, transparent 24%), var(--paper)
  }
}

.feature-hero-copy>p {
  max-width: 660px;
  font-size: 1.13rem
}

.hero-context-links {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  display: flex
}

.hero-context-links a {
  border: 1px solid var(--feature-accent);
  align-items: center;
  min-height: 40px;
  padding: 9px 15px;
  display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
  .hero-context-links a {
    border: 1px solid color-mix(in srgb, var(--feature-accent) 24%, #dfe4ef)
  }
}

.hero-context-links a {
  color: #4b5570;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #ffffffb8;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  transition: transform .2s, color .2s, box-shadow .2s;
  box-shadow: inset 0 1px #fff, 0 8px 20px #2b377012
}

.hero-context-links a:hover {
  color: var(--feature-accent);
  box-shadow: inset 0 1px 0 #fff, 0 12px 26px var(--feature-accent);
  transform: translateY(-2px)
}

@supports (color:color-mix(in lab, red, red)) {
  .hero-context-links a:hover {
    box-shadow: inset 0 1px 0 #fff, 0 12px 26px color-mix(in srgb, var(--feature-accent) 15%, transparent)
  }
}

.feature-visual {
  border-color: #fffffff0;
  box-shadow: 0 36px 100px #2d276940, 0 10px 30px #12194429, 0 0 0 1px #49519714
}

.feature-visual:before {
  content: "";
  z-index: 2;
  background: linear-gradient(118deg, #ffffff24, transparent 28%, transparent 72%, var(--feature-accent));
  position: absolute;
  inset: 0
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-visual:before {
    background: linear-gradient(118deg, #ffffff24, transparent 28%, transparent 72%, color-mix(in srgb, var(--feature-accent) 12%, transparent))
  }
}

.feature-visual:before {
  pointer-events: none
}

.feature-visual-caption {
  z-index: 4;
  color: #fff;
  -webkit-backdrop-filter: blur(18px)saturate(1.18);
  backdrop-filter: blur(18px)saturate(1.18);
  background: #080e2a8c;
  border: 1px solid #ffffff57;
  border-radius: 20px;
  gap: 4px;
  min-width: min(320px, 100% - 48px);
  padding: 16px 18px;
  display: grid;
  position: absolute;
  bottom: 22px;
  left: 24px;
  box-shadow: inset 0 1px #ffffff29, 0 18px 45px #05091f3d
}

.feature-visual-caption small {
  color: #c9d5ff;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .67rem;
  font-weight: 800
}

.feature-visual-caption strong {
  font-size: 1rem;
  line-height: 1.25
}

.feature-visual-caption span {
  color: #ffffffc2;
  font-size: .72rem;
  line-height: 1.4
}

.feature-visual .motion-diagram {
  opacity: .68;
  width: 42%;
  bottom: 9%;
  left: auto;
  right: 7%
}

.feature-value-rail {
  z-index: 5;
  margin: -32px 0 0;
  position: relative
}

.feature-value-rail .container {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #ffffffe0;
  border: 1px solid #4c569621;
  border-radius: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
  overflow: hidden;
  box-shadow: 0 25px 70px #2a326921, inset 0 1px #fff
}

.feature-value-rail article {
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 26px 30px;
  display: flex
}

.feature-value-rail article+article {
  border-left: 1px solid #49538e1c
}

.feature-value-rail b {
  background: linear-gradient(145deg, var(--feature-accent), #fff);
  border-radius: 15px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-value-rail b {
    background: linear-gradient(145deg, color-mix(in srgb, var(--feature-accent) 17%, white), #fff)
  }
}

.feature-value-rail b {
  color: var(--feature-accent);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px var(--feature-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-value-rail b {
    box-shadow: inset 0 1px 0 #fff, 0 10px 24px color-mix(in srgb, var(--feature-accent) 15%, transparent)
  }
}

.feature-value-rail b {
  font-size: .78rem
}

.feature-value-rail span {
  gap: 5px;
  display: grid
}

.feature-value-rail strong {
  font-size: .95rem;
  line-height: 1.25
}

.feature-value-rail small {
  color: #707789;
  font-size: .72rem;
  line-height: 1.45
}

.feature-card {
  min-height: 390px
}

.feature-card-kicker {
  z-index: 3;
  color: #737b90;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 800;
  position: absolute;
  top: 32px;
  left: 78px
}

.feature-card h3 {
  margin-top: 154px
}

.feature-card-result {
  z-index: 3;
  border: 1px solid var(--feature-accent);
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  display: inline-flex;
  position: absolute;
  bottom: 26px;
  left: 34px
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-card-result {
    border: 1px solid color-mix(in srgb, var(--feature-accent) 16%, #e2e6ee)
  }
}

.feature-card-result {
  color: #626a7c;
  background: #ffffffb3;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 800
}

.feature-steps li {
  transition: transform .28s, box-shadow .28s, border-color .28s
}

.feature-steps li:hover {
  border-color: var(--feature-accent);
  transform: translateY(-7px)
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-steps li:hover {
    border-color: color-mix(in srgb, var(--feature-accent) 32%, white)
  }
}

.feature-steps li:hover {
  box-shadow: inset 0 1px 0 #fff, 0 30px 72px var(--feature-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-steps li:hover {
    box-shadow: inset 0 1px 0 #fff, 0 30px 72px color-mix(in srgb, var(--feature-accent) 15%, #252d6224)
  }
}

.scenario-label {
  color: var(--feature-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: .69rem;
  font-weight: 850;
  display: inline-flex
}

.feature-proof {
  background: radial-gradient(circle at 12% 22%, var(--feature-accent), transparent 31%), radial-gradient(circle at 86% 74%, #8948ff42, transparent 31%), linear-gradient(135deg, #07183b, #171247 68%, #2b104c)
}

@supports (color:color-mix(in lab, red, red)) {
  .feature-proof {
    background: radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--feature-accent) 27%, transparent), transparent 31%), radial-gradient(circle at 86% 74%, #8948ff42, transparent 31%), linear-gradient(135deg, #07183b, #171247 68%, #2b104c)
  }
}

.proof-board {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: linear-gradient(145deg, #ffffff1a, #ffffff09);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff24, 0 26px 70px #00000038
}

.proof-board:before {
  content: "";
  background: radial-gradient(circle, var(--feature-accent), transparent 70%);
  border-radius: 50%;
  width: 210px;
  height: 210px;
  position: absolute;
  top: -82px;
  right: -72px
}

@supports (color:color-mix(in lab, red, red)) {
  .proof-board:before {
    background: radial-gradient(circle, color-mix(in srgb, var(--feature-accent) 42%, transparent), transparent 70%)
  }
}

.proof-board:before {
  filter: blur(4px)
}

.feature-final-inner>.sparkle {
  filter: drop-shadow(0 0 22px #7358ffb8);
  margin-bottom: 18px
}

.feature-final-checks {
  z-index: 2;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 26px;
  padding: 0;
  list-style: none;
  display: flex;
  position: relative
}

.feature-final-checks li {
  color: #dbe4ff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffff12;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  align-items: center;
  min-height: 40px;
  padding: 9px 15px;
  font-size: .74rem;
  font-weight: 800;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffff1a
}

.site-footer {
  background: radial-gradient(circle at 86% 0, #6e50ff17, #0000 28%), linear-gradient(#fcfaf7, #f6f4f2)
}

.site-footer .brand {
  font-size: 1.15rem
}

.feature-footer-grid nav a {
  width: fit-content;
  position: relative
}

.feature-footer-grid nav a:after {
  content: "";
  background: linear-gradient(90deg, var(--blue), var(--violet));
  border-radius: 999px;
  height: 2px;
  transition: right .22s;
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 100%
}

.feature-footer-grid nav a:hover:after {
  right: 0
}

@media (max-width:980px) {
  .feature-value-rail {
    margin-top: 18px
  }

  .feature-value-rail .container {
    grid-template-columns: 1fr
  }

  .feature-value-rail article {
    min-height: 112px
  }

  .feature-value-rail article+article {
    border-top: 1px solid #49538e1c;
    border-left: 0
  }
}

@media (max-width:760px) {

  .home-shell .section-heading:after,
  .feature-shell .section-heading:after {
    width: 72px;
    height: 4px;
    margin-top: 18px
  }

  .feature-visual-caption {
    min-width: 0;
    padding: 14px;
    bottom: 14px;
    left: 14px;
    right: 14px
  }

  .feature-visual-caption span {
    display: none
  }

  .feature-visual .motion-diagram {
    width: 52%;
    bottom: 18%;
    right: 5%
  }

  .feature-value-rail {
    margin-top: 16px
  }

  .feature-value-rail .container {
    border-radius: 24px;
    width: calc(100% - 28px)
  }

  .feature-value-rail article {
    min-height: 100px;
    padding: 20px
  }

  .feature-card {
    min-height: 370px
  }

  .feature-card-result {
    bottom: 22px;
    left: 24px
  }

  .feature-final-checks {
    grid-template-columns: 1fr;
    width: 100%;
    display: grid
  }

  .feature-final-checks li {
    justify-content: center
  }
}

@media (hover:none),
(pointer:coarse) {
  .feature-steps li:hover {
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important
  }

  [data-reveal] {
    opacity: 1;
    transform: none
  }

  .hero-copy h1,
  .hero-animated-copy {
    opacity: 1;
    transform: none;
    animation: none !important
  }

  .hero-copy .eyebrow,
  .hero-copy .button-row,
  .hero-copy .format-list,
  .hero-window {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important
  }

  .hero:after {
    animation: none !important
  }

  .hero-result img {
    transform: scale(1.035);
    animation: none !important
  }

  .cursor-trail {
    display: none
  }

  .motion-card,
  .motion-card.motion-visible,
  .motion-card.motion-lift:hover,
  .motion-card:active {
    opacity: 1;
    filter: none;
    translate: 0;
    rotate: none;
    scale: 1
  }

  .motion-spotlight {
    display: none
  }

  .capability-stream:before,
  .capability-stream span,
  .capability-stream i:after,
  .capability-stream b,
  .feature-card-scene * {
    animation: none !important
  }
}

@media (max-width:760px) {

  .site-shell h1,
  .site-shell h2,
  .site-shell h3 {
    -webkit-hyphens: none;
    hyphens: none;
    overflow-wrap: anywhere;
    text-wrap: wrap
  }

  .site-shell p,
  .site-shell li,
  .site-shell small {
    overflow-wrap: break-word
  }

  .prompt-actions,
  .final-prompt-actions,
  .final-attachments {
    grid-template-columns: minmax(0, 1fr);
    display: grid
  }

  .final-attachments .prompt-action {
    width: 100%;
    min-width: 0
  }

  .feature-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "number kicker" "scene scene" "title title" "copy copy" "result result";
    gap: 0 14px;
    min-height: 0;
    padding: 24px;
    display: grid
  }

  .feature-card-number {
    grid-area: number;
    align-self: center;
    font-size: .82rem;
    line-height: 1.2
  }

  .feature-card-kicker {
    grid-area: kicker;
    align-self: center;
    font-size: .78rem;
    line-height: 1.3;
    position: static
  }

  .feature-card-scene {
    grid-area: scene;
    width: 100%;
    height: 146px;
    margin: 18px 0 24px;
    position: relative;
    top: auto;
    left: auto;
    right: auto
  }

  .feature-card h3 {
    grid-area: title;
    margin: 0 0 8px
  }

  .feature-card p {
    grid-area: copy;
    margin: 0
  }

  .feature-card-result {
    white-space: normal;
    grid-area: result;
    width: fit-content;
    max-width: 100%;
    margin-top: 18px;
    font-size: .76rem;
    line-height: 1.35;
    position: static
  }

  .feature-card-scene--3 i:first-of-type {
    left: calc(50% - 70px)
  }

  .feature-card-scene--3 i:nth-of-type(2) {
    left: calc(50% - 53px)
  }

  .feature-card-scene--3 i:nth-of-type(3) {
    left: calc(50% - 36px)
  }

  .feature-card-scene--3 b {
    left: calc(50% - 19px)
  }

  .feature-visual .motion-diagram {
    width: 48%;
    top: 21%;
    bottom: auto;
    right: 8%
  }

  .feature-visual-caption small,
  .feature-value-rail small,
  .scenario-label,
  .hero-context-links a,
  .context-links a,
  .feature-final-checks li,
  .site-shell .edit-prompt__eyebrow,
  .site-shell .video-eyebrow,
  .site-shell .analysis-chip,
  .site-shell .final-suggestions button,
  .site-shell .tool-visual__caption {
    font-size: .8rem;
    line-height: 1.4
  }

  .hero-context-links a,
  .context-links a,
  .site-shell .analysis-chip,
  .site-shell .final-suggestions button,
  .workflow-tip__title,
  .edit-prompt__heading,
  .formula-pills button,
  .playback-toggle,
  .playback-label,
  .site-shell .edit-prompt__eyebrow,
  .editor-toolbar button,
  .site-footer nav a,
  .breadcrumbs a,
  .brand {
    min-height: 44px
  }

  .workflow-tip__title,
  .edit-prompt__heading {
    align-items: center;
    width: 100%;
    padding-block: 8px
  }

  .site-footer nav a,
  .breadcrumbs a,
  .brand {
    align-items: center;
    display: inline-flex
  }

  .timeline {
    background: 0 0;
    min-height: 44px
  }

  .timeline:before {
    content: "";
    background: #ffffff4d;
    border-radius: 99px;
    position: absolute;
    inset: 18px 0
  }

  .timeline i {
    z-index: 1;
    border-radius: 99px;
    height: 8px;
    position: absolute;
    top: 18px;
    left: 0
  }

  .site-shell .tool-visual__caption {
    text-overflow: clip;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
  }

  .tool-card {
    min-height: 430px
  }

  .floating-card {
    display: none
  }

  .final-cta-inner,
  .feature-final-inner {
    min-height: 0;
    padding-block: 42px
  }
}

@media (min-width:761px) and (max-width:1279px) {
  .feature-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "number kicker" "scene scene" "title title" "copy copy" "result result";
    gap: 0 14px;
    min-height: 0;
    display: grid
  }

  .feature-card-number {
    grid-area: number;
    align-self: center
  }

  .feature-card-kicker {
    grid-area: kicker;
    align-self: center;
    font-size: .72rem;
    line-height: 1.3;
    position: static
  }

  .feature-card-scene {
    grid-area: scene;
    width: 100%;
    height: 136px;
    margin: 18px 0 24px;
    position: relative;
    top: auto;
    left: auto;
    right: auto
  }

  .feature-card h3 {
    grid-area: title;
    margin: 0 0 8px
  }

  .feature-card p {
    grid-area: copy;
    margin: 0
  }

  .feature-card-result {
    white-space: normal;
    grid-area: result;
    width: fit-content;
    max-width: 100%;
    margin-top: 18px;
    position: static
  }

  .feature-card-scene--3 i:first-of-type {
    left: calc(50% - 70px)
  }

  .feature-card-scene--3 i:nth-of-type(2) {
    left: calc(50% - 53px)
  }

  .feature-card-scene--3 i:nth-of-type(3) {
    left: calc(50% - 36px)
  }

  .feature-card-scene--3 b {
    left: calc(50% - 19px)
  }
}

@media (min-width:761px) and (max-width:1100px) {
  .prompt-actions {
    grid-template-columns: minmax(0, 1fr);
    display: grid
  }

  .prompt-action {
    width: 100%;
    min-width: 0
  }

  .prompt-action__label {
    white-space: normal;
    min-width: 0
  }

  .prompt-submit {
    grid-column: 1/-1;
    width: 100%;
    min-width: 0;
    margin-left: 0
  }

  .final-prompt-actions {
    grid-template-columns: minmax(0, 1fr);
    display: grid
  }

  .final-attachments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid
  }

  .final-attachments .prompt-action,
  .final-submit {
    width: 100%;
    min-width: 0
  }
}

@media (max-width:360px) {
  .feature-hero-copy h1 {
    font-size: clamp(1.85rem, 10vw, 2.2rem)
  }

  .feature-card {
    padding: 22px 20px
  }

  .feature-card-scene {
    height: 136px;
    margin-block: 16px 22px
  }
}

@media (max-width:820px) {

  .media-frame img,
  .before-after>img,
  .video-stage img,
  .feature-visual img {
    object-fit: contain
  }

  .media-frame,
  .before-after,
  .video-stage,
  .feature-visual {
    background: radial-gradient(circle, #715bee26, #0000 58%), #101943
  }

  .site-header {
    border-radius: 26px;
    flex-wrap: wrap;
    gap: 7px 10px;
    height: auto;
    min-height: 64px;
    padding-block: 8px
  }

  .site-header .header-nav {
    background: #f4f6ffc7;
    border: 1px solid #434b751f;
    border-radius: 16px;
    flex: 0 0 100%;
    order: 3;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 48px;
    padding: 4px;
    display: flex;
    position: static;
    box-shadow: inset 0 1px #fffffff2
  }

  .site-header .header-nav a {
    color: #42485b;
    text-align: center;
    border-radius: 13px;
    flex: 1;
    justify-content: center;
    align-items: center;
    min-width: 0;
    min-height: 42px;
    padding: 8px 5px;
    font-size: clamp(.65rem, 2.7vw, .78rem);
    font-weight: 750;
    line-height: 1.15;
    display: inline-flex
  }

  .site-header .header-nav a:focus-visible {
    outline-offset: -2px;
    outline: 3px solid #2f66f140
  }
}

.feature-visual {
  aspect-ratio: 3/2;
  min-height: 0
}

.feature-slug--analiz-video-i-audio .feature-visual {
  aspect-ratio: 1280/659
}

@media (min-width:821px) {
  .capability-grid {
    grid-template-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch
  }

  .capability--wide:first-child,
  .capability--wide:last-child {
    grid-area: auto
  }
}

@media (hover:none),
(pointer:coarse) {
  .site-shell :is(a, button, summary, input[type=range]) {
    -webkit-tap-highlight-color: transparent
  }

  .site-shell :is(.button, .prompt-action, .prompt-submit, .prompt-status, .final-submit, .final-suggestions button, .workflow-tip__title, .edit-prompt__heading, .edit-prompt__eyebrow, .editor-toolbar button, .editor-command button, .formula-pills button, .video-title, .video-eyebrow, .analysis-chip, .playback-toggle, .playback-label, .timeline, .context-links a, .hero-context-links a, .related-grid nav a, .site-header nav a, .site-footer nav a, .breadcrumbs a, .brand) {
    min-height: 44px
  }

  .site-shell :is(.button:hover, .prompt-action:hover, .prompt-submit:hover, .prompt-status:hover, .final-submit:hover, .final-suggestions button:hover, .workflow-tip__title:hover, .edit-prompt__heading:hover, .edit-prompt__eyebrow:hover, .editor-toolbar button:hover, .editor-command button:hover, .formula-pills button:hover, .video-title:hover, .video-eyebrow:hover, .analysis-chip:hover, .playback-toggle:hover, .playback-label:hover, .context-links a:hover, .hero-context-links a:hover, .related-grid nav a:hover, .capability:hover, .feature-card:hover, .scenario-grid article:hover, .feature-steps li:hover, .media-insights>button:hover, .motion-card.motion-lift:hover) {
    filter: none;
    transform: translate(0)rotate(0)scale(1)
  }
}

html.forced-mobile-layout {
  font-size: var(--compact-root-size, 16px)
}

html.forced-mobile-layout,
html.forced-mobile-layout body,
html.forced-mobile-layout .site-shell {
  width: 100%;
  max-width: 100%;
  overflow-x: clip
}

html.forced-mobile-layout .site-shell :is(section, header, footer, div, article, nav, ol, ul, li, form, label) {
  min-width: 0
}

html.forced-mobile-layout .container {
  width: calc(100% - 28px);
  max-width: 100%
}

html.forced-mobile-layout .section {
  width: 100%;
  padding-block: 4rem
}

html.forced-mobile-layout .site-shell h1 {
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
  font-size: 3rem;
  line-height: 1.02
}

html.forced-mobile-layout .site-shell h2 {
  max-width: 100%;
  font-size: 2.2rem;
  line-height: 1.06
}

html.forced-mobile-layout .site-shell p {
  font-size: 1rem;
  line-height: 1.58
}

html.forced-mobile-layout .site-header {
  border-radius: 1.65rem;
  flex-wrap: wrap;
  gap: .45rem .65rem;
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  min-height: 4rem;
  margin: .65rem auto 1.15rem;
  padding: .5rem .8rem
}

html.forced-mobile-layout .site-header .header-nav {
  background: #f4f6ffd1;
  border: 1px solid #434b751f;
  border-radius: 1rem;
  flex: 0 0 100%;
  order: 3;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  width: 100%;
  min-height: 3rem;
  padding: .25rem;
  display: flex;
  position: static
}

html.forced-mobile-layout .site-header .header-nav a {
  text-align: center;
  border-radius: .8rem;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 2.75rem;
  padding: .5rem .3rem;
  font-size: .76rem;
  line-height: 1.15;
  display: inline-flex
}

html.forced-mobile-layout .header-actions .button {
  min-height: 2.9rem;
  padding: .7rem 1.1rem;
  font-size: .84rem
}

html.forced-mobile-layout .hero,
html.forced-mobile-layout .feature-hero {
  min-height: 0;
  padding-top: 0
}

html.forced-mobile-layout .hero-grid,
html.forced-mobile-layout .feature-hero-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  min-height: 0;
  padding: 1.8rem 0 1.4rem
}

html.forced-mobile-layout .hero-copy,
html.forced-mobile-layout .feature-hero-copy {
  width: 100%;
  max-width: 100%;
  padding: 0
}

html.forced-mobile-layout .hero-copy>p,
html.forced-mobile-layout .feature-hero-copy>p {
  max-width: 100%;
  margin-bottom: 1.5rem
}

html.forced-mobile-layout .hero-copy .button-row,
html.forced-mobile-layout .feature-hero-copy .button-row {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  display: grid
}

html.forced-mobile-layout .hero-copy .button-row .button,
html.forced-mobile-layout .feature-hero-copy .button-row .button {
  white-space: normal;
  width: 100%;
  min-width: 0;
  min-height: 3.65rem;
  padding: 1rem 1.35rem;
  font-size: .97rem
}

html.forced-mobile-layout .format-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%
}

html.forced-mobile-layout .format-list li {
  white-space: normal;
  justify-content: flex-start;
  min-width: 0;
  min-height: 2.75rem;
  padding: .55rem .7rem;
  font-size: .72rem
}

html.forced-mobile-layout .hero-window,
html.forced-mobile-layout .feature-visual {
  width: 100%;
  max-width: 100%;
  transform: none
}

html.forced-mobile-layout .hero-window {
  border-radius: 1.5rem;
  padding: .85rem
}

html.forced-mobile-layout .hero-result {
  height: 16rem
}

html.forced-mobile-layout .prompt-actions,
html.forced-mobile-layout .final-prompt-actions,
html.forced-mobile-layout .final-attachments {
  grid-template-columns: minmax(0, 1fr);
  display: grid
}

html.forced-mobile-layout :is(.prompt-action, .prompt-submit, .prompt-status, .final-submit) {
  width: 100%;
  min-width: 0;
  min-height: 3.2rem;
  margin-left: 0
}

html.forced-mobile-layout .prompt-submit {
  grid-column: 1/-1
}

html.forced-mobile-layout :is(.capability-grid, .tool-tabs, .audience-grid, .step-flow, .problem-notes, .media-insights, .scenario-detail, .context-grid, .faq-layout, .feature-card-grid, .feature-steps, .scenario-grid, .problem-grid, .proof-grid, .related-grid, .footer-grid, .feature-footer-grid) {
  grid-template-columns: minmax(0, 1fr)
}

html.forced-mobile-layout .capability--wide:first-child,
html.forced-mobile-layout .capability--wide:last-child {
  grid-area: auto
}

html.forced-mobile-layout .workspace-ui {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0
}

html.forced-mobile-layout .workspace-ui aside {
  display: none
}

html.forced-mobile-layout .workspace-main {
  width: 100%;
  padding: 1.3rem
}

html.forced-mobile-layout .workspace-phases {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

html.forced-mobile-layout :is(.workspace-detail, .result-orbit, .split-layout, .split-layout--media, .photo-layout) {
  grid-template-columns: minmax(0, 1fr)
}

html.forced-mobile-layout .result-orbit {
  width: 100%
}

html.forced-mobile-layout .orbit-core {
  order: -1
}

html.forced-mobile-layout :is(.media-frame, .before-after, .video-stage) {
  width: 100%;
  max-width: 100%
}

html.forced-mobile-layout :is(.media-frame img, .before-after>img, .video-stage img, .feature-visual img) {
  object-fit: contain
}

html.forced-mobile-layout .floating-card {
  display: none
}

html.forced-mobile-layout .feature-value-rail {
  margin-top: 1rem
}

html.forced-mobile-layout .feature-value-rail .container {
  grid-template-columns: minmax(0, 1fr)
}

html.forced-mobile-layout .feature-value-rail article+article {
  border-top: 1px solid #49538e1c;
  border-left: 0
}

html.forced-mobile-layout .feature-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "number kicker" "scene scene" "title title" "copy copy" "result result";
  gap: 0 .9rem;
  min-height: 0;
  padding: 1.55rem;
  display: grid
}

html.forced-mobile-layout .feature-card-number {
  grid-area: number;
  align-self: center
}

html.forced-mobile-layout .feature-card-kicker {
  grid-area: kicker;
  align-self: center;
  font-size: .78rem;
  position: static
}

html.forced-mobile-layout .feature-card-scene {
  grid-area: scene;
  width: 100%;
  height: 9rem;
  margin: 1.1rem 0 1.4rem;
  position: relative;
  inset: auto
}

html.forced-mobile-layout .feature-card h3 {
  grid-area: title;
  margin: 0 0 .5rem
}

html.forced-mobile-layout .feature-card p {
  grid-area: copy;
  margin: 0
}

html.forced-mobile-layout .feature-card-result {
  white-space: normal;
  grid-area: result;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.1rem;
  font-size: .76rem;
  position: static
}

html.forced-mobile-layout .feature-steps li,
html.forced-mobile-layout .scenario-grid article {
  min-height: 0
}

html.forced-mobile-layout .scenario-art {
  height: 10rem
}

html.forced-mobile-layout .proof-board {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  display: grid
}

html.forced-mobile-layout .proof-board span {
  width: 100%;
  min-width: 0
}

html.forced-mobile-layout .proof-board i {
  width: 3px;
  height: 1.5rem;
  margin: auto
}

html.forced-mobile-layout .feature-final-inner,
html.forced-mobile-layout .final-cta-inner {
  min-height: 0;
  padding-block: 3rem
}

@media (max-width:820px),
(hover:none),
(pointer:coarse) {
  .site-shell :is(button, .button, summary, .brand, .header-nav a, .context-links a, .hero-context-links a, .related-grid a) {
    min-height: 44px !important
  }

  .site-shell :is(.brand, .header-nav a, .context-links a, .hero-context-links a, .related-grid a) {
    align-items: center;
    display: inline-flex
  }

  .site-footer a {
    align-items: center;
    display: flex;
    min-height: 44px !important
  }
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid
}