:root {
  --bg:#111310;
  --panel:#1b1e18;
  --line:#ffffff21;
  --muted:#a7aea1;
  --lime:#d2ff5a;
  --paper:#f0f1e9;
  --ink:#20251b;
  --font:'Anuphan',sans-serif;
  --display:'Space Grotesk','Anuphan',sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--bg);
  color:#f5f6ed;
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
body.dialog-open {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,summary:focus-visible,pre:focus-visible {
  outline:3px solid #93c7ff;
  outline-offset:5px
}
button {
  border:0
}
img {
  max-width:100%;
  display:block
}
p,h1,h2,h3 {
  margin:0
}
button[hidden],[hidden] {
  display:none!important
}
.section-shell {
  width:min(1320px,calc(100% - 112px));
  margin-inline:auto
}
.section-space {
  padding-block:112px
}
.mono,.eyebrow {
  font-family:var(--display);
  font-weight:500
}
.eyebrow {
  display:block;
  font-size:11px;
  letter-spacing:1.8px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:24px
}
.accent {
  color:var(--lime)
}
.announcement {
  min-height:36px;
  padding:8px 20px;
  background:var(--lime);
  color:#253018;
  text-align:center;
  font-size:11px;
  letter-spacing:.5px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px
}
.announcement-divider {
  opacity:.4;
  margin-inline:4px
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid var(--line);
  background:#111310f2;
  backdrop-filter:blur(18px)
}
.nav-shell {
  width:min(1440px,calc(100% - 80px));
  height:82px;
  display:flex;
  align-items:center;
  margin:auto;
  gap:24px
}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  font:500 22px var(--display)
}
.brand b {
  font-weight:700
}
.brand img {
  object-fit:contain
}
.brand-cross {
  font-size:22px;
  color:#777e72;
  font-weight:300
}
.airova-brand {
  display:flex;
  align-items:center
}
.airova-brand img {
  width:128px;
  height:34px;
  object-fit:contain
}
.desktop-nav {
  margin-left:auto;
  display:flex;
  gap:29px;
  font-size:13px;
  color:#c3c8bd
}
.desktop-nav a:hover {
  color:var(--lime)
}
.button {
  padding:17px 24px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  transition:background .2s,transform .2s;
  white-space:nowrap;
  min-height:54px
}
.button:hover {
  transform:translateY(-2px)
}
.button span {
  font:400 22px var(--display)
}
.button-lime {
  background:var(--lime);
  color:#1e2614
}
.button-lime:hover {
  background:#e1ff94
}
.button-small {
  font-size:13px;
  padding:11px 16px;
  min-height:43px;
  gap:18px
}
.button-dark {
  background:#252c20;
  color:white
}
.button-dark:hover {
  background:#38452c
}
.button-outline {
  background:transparent;
  border-color:#535b49
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:14px;
  font-weight:500
}
.text-link:hover {
  color:var(--lime)
}
.text-link>span:last-child {
  font-size:20px
}
.menu-toggle,.mobile-nav {
  display:none
}
.hero {
  min-height:727px;
  position:relative;
  padding-top:67px;
  padding-bottom:100px
}
.hero-art {
  position:absolute;
  z-index:-1;
  inset:0 -56px 0 17%;
  overflow:hidden;
  pointer-events:none
}
.hero-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:66% 50%;
  opacity:.92
}
.hero-art:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,#111310bb 14%,#11131000 50%),linear-gradient(0deg,var(--bg),transparent 20%)
}
.hero-copy {
  position:relative;
  max-width:640px
}
.partner-badge {
  color:#dce3d2;
  display:inline-flex;
  gap:10px;
  align-items:center;
  border:1px solid #a4be812e;
  padding:7px 12px;
  border-radius:4px;
  letter-spacing:1.4px;
  font-size:10px;
  background:#2630194d;
  margin-bottom:26px
}
.seal {
  font-size:19px;
  color:var(--lime);
  line-height:1
}
.hero h1 {
  font-size:clamp(56px,5.75vw,84px);
  font-weight:550;
  letter-spacing:-3px;
  line-height:1.1
}
.hero h1>span {
  color:var(--lime)
}
.hero .lime-period {
  font-family:var(--display)
}
.hero-description {
  font-size:17px;
  line-height:1.85;
  color:#bcc3b4;
  margin-top:27px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:27px;
  margin-top:31px
}
.play-mini {
  font-size:10px!important;
  display:grid;
  place-items:center;
  border:1px solid #78826b;
  border-radius:50%;
  width:27px;
  height:27px;
  padding-left:2px
}
.hero-note {
  font-size:11px;
  color:#919b85;
  margin-top:16px
}
.mini-check {
  color:var(--lime);
  margin-right:6px
}
.hero-caption {
  position:absolute;
  right:0;
  top:58px;
  z-index:1;
  display:flex;
  gap:13px;
  align-items:center;
  width:36%;
  padding:14px 18px;
  border:1px solid #d2ff5a33;
  border-radius:8px;
  background:#111310db;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#fff;
  box-shadow:0 8px 28px #00000024;
  text-shadow:0 1px 4px #00000080
}
.hero-caption>div {
  min-width:0
}
.hero-caption>div>.mono {
  display:block
}
.hero-caption .crosshair {
  flex-shrink:0
}
.crosshair {
  font:300 32px var(--display);
  color:var(--lime)
}
.hero-caption .mono {
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:1px
}
.hero-caption small {
  display:block;
  margin-top:4px;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  opacity:1
}
.hero-caption .frame-index {
  flex-shrink:0;
  white-space:nowrap
}
.frame-index {
  margin-left:auto;
  font-size:10px!important
}
.credit-ticket {
  position:absolute;
  right:20px;
  bottom:42px;
  border:1px solid #d3e1b737;
  background:#1b221a91;
  backdrop-filter:blur(20px);
  padding:17px 22px;
  display:flex;
  gap:20px;
  align-items:center;
  border-radius:8px;
  transform:rotate(-3deg);
  box-shadow:0 8px 50px #0005
}
.ticket-icon {
  font-size:45px;
  color:var(--lime)
}
.credit-ticket .mono {
  font-size:8px;
  letter-spacing:1px;
  color:#c2cdb5
}
.credit-ticket strong {
  display:block;
  font:500 43px/1.1 var(--display);
  margin:5px 0;
  color:var(--lime)
}
.credit-ticket strong small {
  font:500 18px var(--font);
  color:white
}
.credit-ticket p {
  font-size:10px;
  color:#a8b09c
}
.ticket-code {
  writing-mode:vertical-rl;
  border-left:1px dashed #a4b99250;
  padding-left:12px;
  margin-left:10px
}
.model-strip {
  display:flex;
  align-items:center;
  gap:68px;
  border-block:1px solid var(--line);
  min-height:106px
}
.model-intro {
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
  letter-spacing:1.1px
}
.model-wordmark {
  display:flex;
  align-items:center;
  gap:12px
}
.omni>span {
  font:500 28px/1 var(--display)
}
.omni small {
  display:block;
  font:500 8px/1.5 var(--display);
  letter-spacing:1.3px;
  color:var(--muted);
  margin-top:7px
}
.seedance {
  gap:20px
}
.seedance>img {
  filter:invert(1);
  opacity:.8;
  width:116px
}
.seedance>span {
  font:500 23px var(--display);
  white-space:nowrap;
  border-left:1px solid var(--line);
  padding-left:20px
}
.seedance b {
  color:var(--lime);
  font-weight:500
}
.model-link {
  font-size:11px;
  margin-left:auto;
  display:flex;
  gap:15px;
  align-items:center;
  color:var(--muted)
}
.model-link span {
  font-size:20px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:45px
}
h2 {
  font-size:46px;
  font-weight:550;
  line-height:1.25;
  letter-spacing:-1.5px
}
.section-aside {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  padding-bottom:5px
}
.source-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  margin-top:17px;
  color:#d0d9c3
}
.source-label .status-dot {
  color:var(--lime)
}
.showcase-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:24px;
  font-size:11px;
  color:var(--muted)
}
.showcase-footer .text-link {
  color:var(--lime);
  font-size:12px
}
.light-section {
  background:var(--paper);
  color:var(--ink)
}
.light-section .eyebrow {
  color:#6e7965
}
.benefits-layout {
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:100px
}
.benefits-intro h2 {
  font-size:49px;
  line-height:1.32
}
.ink-accent {
  position:relative;
  white-space:nowrap
}
.ink-accent:after {
  content:'';
  display:block;
  background:#b7e847;
  height:8px;
  width:100%;
  position:absolute;
  bottom:5px;
  left:0;
  z-index:0;
  opacity:.7;
  transform:rotate(-2deg)
}
.benefits-intro p {
  font-size:14px;
  color:#6e7567;
  line-height:1.9;
  margin:25px 0 30px
}
.benefits-intro .button {
  font-size:13px;
  gap:25px
}
.partner-lockup {
  margin-top:42px;
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap
}
.partner-lockup img:last-of-type {
  width:100px;
  height:30px;
  object-fit:contain
}
.partner-lockup small {
  font:500 8px var(--display);
  color:#798570;
  letter-spacing:1px;
  border-left:1px solid #23301230;
  padding-left:15px
}
.benefit-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:39px;
  row-gap:29px
}
.benefit {
  position:relative;
  border-top:1px solid #202e182b;
  padding-top:18px
}
.benefit-number {
  font-size:10px;
  letter-spacing:1px;
  color:#849077
}
.benefit-symbol {
  position:absolute;
  right:2px;
  top:10px;
  font:400 32px var(--display);
  color:#596c3e
}
.benefit h3 {
  font-size:20px;
  letter-spacing:-.4px;
  margin-top:20px;
  font-weight:600
}
.benefit p {
  font-size:12px;
  color:#697160;
  line-height:1.9;
  margin-top:9px
}
.free-label {
  color:var(--lime);
  border:1px solid #d2ff5a55;
  border-radius:3px;
  padding:5px 8px;
  font-size:9px;
  letter-spacing:1px;
  display:inline-block;
  margin-bottom:15px
}
.template-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}
.template-card {
  overflow:hidden
}
.template-cover {
  aspect-ratio:1.45;
  position:relative;
  background:var(--panel);
  overflow:hidden;
  border-radius:6px
}
.template-cover:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#0007,transparent 30%,#0002)
}
.template-cover>img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.65);
  transition:transform .6s
}
.template-card:hover .template-cover>img {
  transform:scale(1.04)
}
.product-cover img {
  object-position:50% 45%
}
.character-cover img {
  object-position:50% 36%
}
.cinematic-cover img {
  object-position:50% 35%
}
.template-label {
  position:absolute;
  top:18px;
  left:17px;
  z-index:1;
  font-size:9px;
  letter-spacing:1px
}
.free-tag {
  position:absolute;
  top:13px;
  right:14px;
  background:var(--lime);
  color:var(--ink);
  font:500 9px var(--display);
  padding:5px 7px;
  z-index:1;
  letter-spacing:1px;
  border-radius:2px
}
.template-info {
  padding:23px 0 0
}
.template-type {
  color:var(--muted);
  font-size:10px
}
.template-info h3 {
  font-size:23px;
  font-weight:500;
  margin:7px 0;
  letter-spacing:-.5px
}
.template-info p {
  font-size:12px;
  color:var(--muted)
}
.template-action {
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-block:1px solid var(--line);
  width:100%;
  text-align:left;
  font-size:12px;
  padding:15px 0;
  margin-top:24px;
  color:var(--lime)
}
.template-action span {
  font-size:22px
}
.template-action:hover {
  color:white;
  border-bottom-color:var(--lime)
}
.template-note {
  font-size:10px;
  line-height:1.9;
  color:#87917d;
  margin-top:24px
}
.template-follow {
  border:1px solid var(--line);
  border-radius:5px;
  background:#c3e79b06;
  margin-top:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:21px 25px;
  font-size:13px
}
.template-follow>span {
  display:flex;
  align-items:center;
  gap:16px
}
.template-follow>span>span {
  font-size:30px;
  color:var(--lime);
  line-height:1
}
.template-follow a {
  font-size:12px;
  color:var(--muted)
}
.template-follow a:hover {
  color:var(--lime)
}
.template-follow a span {
  margin-left:25px
}
.course-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:38px
}
.course-heading .eyebrow {
  margin:0
}
.academy-partner {
  font:500 9px var(--display);
  letter-spacing:1px;
  border:1px solid #53663d40;
  padding:7px 10px;
  border-radius:3px
}
.course-grid {
  display:grid;
  grid-template-columns:1.14fr 1fr;
  gap:65px;
  align-items:center
}
.course-art {
  display:block;
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:#10101a;
  box-shadow:0 20px 65px #19231515
}
.course-art>img {
  width:100%;
  height:auto
}
.course-image-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#d6dbec;
  padding:18px 22px;
  font-size:11px;
  background:#121721
}
.course-image-link>span {
  font-size:18px
}
.pir-logo {
  width:105px;
  height:38px;
  object-fit:contain;
  object-position:left;
  margin-bottom:20px
}
.course-copy h2 {
  font:600 48px/1.2 var(--display);
  letter-spacing:-2px
}
.course-copy h2 span {
  color:#6d873f
}
.course-copy h3 {
  font:500 20px var(--display);
  letter-spacing:-.3px;
  margin-top:7px
}
.course-copy>p {
  font-size:13px;
  line-height:1.9;
  color:#6e7567;
  margin-top:22px
}
.course-topics {
  list-style:none;
  padding:0;
  margin:21px 0 27px
}
.course-topics li {
  font-size:12px;
  border-bottom:1px solid #2333151a;
  padding:10px 0
}
.course-topics span {
  font:500 10px var(--display);
  color:#81906e;
  margin-right:15px
}
.course-copy .button {
  font-size:13px
}
.course-note {
  display:block;
  font-size:9px;
  color:#7c8671;
  margin-top:12px
}
.community-section {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:100px;
  align-items:center
}
.community-copy>p {
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
  margin-top:25px
}
.community-actions {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:20px;
  margin-top:30px
}
.community-actions .button {
  font-size:13px
}
.community-actions .text-link {
  font-size:12px;
  color:#c7d1b9
}
.community-poster {
  border:1px solid #b6d19629;
  padding:30px 35px 23px;
  border-radius:4px;
  background:linear-gradient(135deg,#272f1b,#151a13);
  transform:rotate(2deg);
  box-shadow:12px 12px 0 #d2ff5a0b
}
.community-poster>.mono {
  font-size:9px;
  letter-spacing:1px;
  line-height:1.8;
  color:#bbcf9f;
  display:block
}
.community-words {
  font:600 clamp(44px,5.6vw,82px)/1.1 var(--display);
  letter-spacing:-4px;
  margin:26px 0
}
.community-words>span {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.community-words .grow {
  color:var(--lime)
}
.poster-star {
  color:var(--lime);
  font-size:.8em;
  font-weight:400;
  animation:turn 36s linear infinite
}
.poster-arrow {
  color:var(--lime);
  font-weight:400
}
.poster-footer {
  border-top:1px solid #b6d19635;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:#a8bb8f;
  font-size:8px;
  letter-spacing:.5px
}
.faq {
  border-top:1px solid var(--line);
  padding-top:62px;
  padding-bottom:62px;
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:100px
}
.faq h2 {
  font-size:30px
}
.faq .eyebrow {
  margin-bottom:13px;
  font-size:9px
}
.faq-list details {
  border-bottom:1px solid var(--line)
}
.faq-list summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  cursor:pointer;
  font-size:14px
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary>span {
  font:300 23px var(--display);
  color:var(--lime)
}
.faq-list details[open] summary>span {
  transform:rotate(45deg)
}
.faq-list p {
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
  padding-bottom:21px;
  padding-right:35px
}
.faq-list a {
  text-decoration:underline;
  color:var(--lime)
}
.final-cta {
  text-align:center;
  padding-block:93px 102px;
  border-top:1px solid var(--line)
}
.final-cta .eyebrow {
  font-size:10px;
  color:var(--lime)
}
.final-cta h2 {
  font-size:64px;
  letter-spacing:-2px;
  line-height:1.25
}
.final-cta h2>span:not(.accent) {
  color:#8f9b81
}
.final-cta .button {
  margin-top:33px
}
.final-cta>p {
  font-size:10px;
  color:var(--muted);
  margin-top:16px
}
.site-footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:25px;
  border-top:1px solid var(--line);
  padding-block:28px
}
.site-footer .brand {
  font-size:19px
}
.site-footer>span {
  font-size:10px;
  color:#8f9a82
}
.site-footer>div {
  margin-left:auto;
  display:flex;
  gap:23px;
  font-size:11px;
  color:#b6c0aa
}
.site-footer>small {
  font-size:9px;
  color:#738168;
  flex-basis:100%
}
.mobile-bottom {
  display:none
}
.skip-link {
  position:fixed;
  z-index:100;
  top:10px;
  left:10px;
  padding:12px 18px;
  background:var(--lime);
  color:var(--ink);
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:translateY(0)
}
dialog {
  color:white;
  background:#191e16;
  border:1px solid #71845c5c;
  border-radius:10px;
  padding:0;
  max-height:90dvh;
  overflow:auto;
  box-shadow:0 25px 120px #000c
}
dialog::backdrop {
  background:#030601de;
  backdrop-filter:blur(10px)
}
.media-dialog {
  width:min(620px,calc(100% - 32px))
}
.dialog-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 22px;
  border-bottom:1px solid var(--line)
}
.dialog-header h2 {
  font-size:15px;
  line-height:1.5;
  letter-spacing:0
}
.dialog-close {
  flex-shrink:0;
  border:1px solid var(--line);
  background:#ffffff09;
  border-radius:50%;
  width:37px;
  height:37px;
  font:300 25px var(--display)
}
.dialog-close:hover {
  background:var(--lime);
  color:var(--ink)
}
.media-dialog video {
  width:100%;
  max-height:68dvh;
  display:block;
  background:black
}
.dialog-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px 22px;
  font-size:10px;
  color:var(--muted)
}
.dialog-footer a {
  color:var(--lime)
}
.video-error {
  padding:20px;
  font-size:12px
}
.video-error a {
  color:var(--lime)
}
.prompt-dialog {
  width:min(700px,calc(100% - 32px));
  padding:0 25px 22px
}
.prompt-dialog .dialog-header {
  padding-inline:0
}
.prompt-dialog .eyebrow {
  font-size:8px;
  margin-bottom:7px;
  color:var(--lime)
}
.prompt-dialog .dialog-header h2 {
  font-size:23px;
  font-weight:500;
  letter-spacing:-.5px
}
.prompt-dialog>p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
  margin-top:18px
}
.prompt-dialog pre {
  font:13px/1.9 var(--font);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#0e130b;
  border:1px solid var(--line);
  border-radius:5px;
  padding:20px;
  max-height:40dvh;
  overflow:auto;
  margin:18px 0
}
.prompt-actions {
  display:flex;
  gap:12px
}
.prompt-actions .button {
  font-size:12px;
  gap:20px;
  min-height:47px
}
.copy-status {
  min-height:20px;
  font-size:11px!important;
  color:var(--lime)!important;
  margin-top:8px!important
}
.prompt-studio-link {
  font-size:12px;
  color:var(--lime);
  display:inline-block;
  margin-top:4px
}
.prompt-fine {
  font-size:10px!important;
  border-top:1px solid var(--line);
  padding-top:15px
}
@keyframes turn {
  to {
    transform:rotate(360deg)
  }
}
@media(min-width:1600px) {
  .hero-art {
    inset:0 -100px 0 20%
  }
  .hero {
    min-height:780px
  }
  .hero h1 {
    font-size:86px
  }
  .credit-ticket {
    right:65px;
    bottom:64px
  }
}
@media(max-width:1199px) {
  .section-shell {
    width:calc(100% - 72px)
  }
  .nav-shell {
    width:calc(100% - 48px);
    gap:18px
  }
  .desktop-nav {
    gap:20px;
    font-size:12px
  }
  .airova-brand img {
    width:105px
  }
  .brand {
    font-size:20px
  }
  .model-strip {
    gap:35px
  }
  .seedance>img {
    width:94px
  }
  .seedance>span {
    font-size:21px
  }
  .model-link {
    max-width:115px
  }
  .hero-art {
    inset:0 -36px 0 15%
  }
  .hero {
    min-height:690px
  }
  .hero h1 {
    font-size:73px
  }
  .hero-description {
    font-size:15px
  }
  .hero-caption {
    width:40%
  }
  .hero-caption .mono {
    font-size:12px
  }
  .credit-ticket {
    right:0;
    bottom:45px;
    scale:.9;
    transform-origin:bottom right
  }
  .section-space {
    padding-block:90px
  }
  .benefits-layout,.community-section,.faq {
    gap:60px
  }
  .benefits-layout {
    grid-template-columns:1fr 1.5fr
  }
  .benefits-intro h2 {
    font-size:42px
  }
  .benefit-grid {
    column-gap:26px
  }
  .benefit h3 {
    font-size:18px
  }
  .course-grid {
    gap:40px
  }
  .course-copy h2 {
    font-size:42px
  }
  .course-copy h3 {
    font-size:17px
  }
}
@media(max-width:960px) {
  .desktop-nav {
    display:none
  }
  .nav-signup {
    margin-left:auto
  }
  .model-strip {
    gap:30px;
    flex-wrap:wrap;
    padding-block:25px;
    justify-content:space-between
  }
  .model-link {
    display:none
  }
  .seedance>img {
    display:none
  }
  .seedance>span {
    border:0;
    padding:0
  }
  .hero-art {
    left:4%;
    opacity:.75
  }
  .hero h1 {
    font-size:69px
  }
  .hero-caption {
    display:none
  }
  .hero {
    min-height:680px
  }
  .hero-actions {
    gap:20px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .credit-ticket {
    bottom:20px
  }
  .benefits-layout {
    gap:48px;
    grid-template-columns:1fr 1.4fr
  }
  .benefit-grid {
    gap:25px
  }
  .benefit h3 {
    font-size:16px
  }
  .benefit p {
    font-size:11px
  }
  .partner-lockup {
    gap:12px
  }
  .partner-lockup small {
    flex-basis:100%;
    border:0;
    padding:0
  }
  .section-aside {
    font-size:12px
  }
  .section-heading h2,h2 {
    font-size:38px
  }
  .template-grid {
    gap:17px
  }
  .template-info h3 {
    font-size:20px
  }
  .template-info p {
    font-size:11px
  }
  .template-label {
    font-size:7px;
    left:13px
  }
  .free-tag {
    font-size:7px;
    right:10px
  }
  .course-grid {
    grid-template-columns:1fr 1fr;
    gap:30px
  }
  .course-copy h2 {
    font-size:36px
  }
  .course-copy h3 {
    font-size:14px
  }
  .course-copy>p,.course-topics li {
    font-size:11px
  }
  .community-section {
    gap:50px
  }
  .community-poster {
    padding:25px
  }
  .community-words {
    font-size:58px
  }
  .faq {
    gap:50px
  }
  .faq-list summary {
    font-size:12px
  }
}
@media(max-width:700px) {
  html {
    scroll-padding-top:85px
  }
  .announcement {
    font-size:9px;
    gap:7px;
    padding-inline:12px;
    min-height:32px
  }
  .announcement-divider {
    margin-inline:0
  }
  .announcement .status-dot {
    width:4px;
    height:4px
  }
  .section-shell {
    width:calc(100% - 40px)
  }
  .section-space {
    padding-block:64px
  }
  .nav-shell {
    height:67px;
    width:calc(100% - 32px);
    gap:12px
  }
  .brand {
    font-size:18px;
    gap:7px
  }
  .brand img {
    width:25px;
    height:25px
  }
  .brand-cross {
    font-size:17px
  }
  .airova-brand img {
    width:91px;
    height:28px
  }
  .nav-signup {
    display:none
  }
  .menu-toggle {
    background:none;
    width:40px;
    height:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-left:auto;
    padding:8px
  }
  .menu-toggle span {
    display:block;
    width:21px;
    height:1px;
    background:#e6efdd;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .mobile-nav:not([hidden]) {
    display:flex;
    flex-direction:column;
    padding:8px 20px 20px;
    border-top:1px solid var(--line)
  }
  .mobile-nav a {
    padding:12px 3px;
    font-size:14px;
    color:#d0d9c6
  }
  .hero {
    padding-top:39px;
    padding-bottom:385px;
    min-height:0
  }
  .hero-art {
    top:285px;
    left:-20px;
    right:-20px;
    bottom:0;
    opacity:1
  }
  .hero-art img {
    object-position:61% 50%
  }
  .hero-art:after {
    background:linear-gradient(180deg,var(--bg) 0%,#11131000 35%,#11131000 75%,var(--bg)),linear-gradient(90deg,#11131077,transparent 50%)
  }
  .hero-copy {
    max-width:100%
  }
  .partner-badge {
    font-size:8px;
    letter-spacing:1.3px;
    padding:6px 10px;
    margin-bottom:23px
  }
  .seal {
    font-size:16px
  }
  .hero h1 {
    font-size:clamp(53px,12vw,76px);
    letter-spacing:-2.2px;
    line-height:1.1
  }
  .hero h1 br:first-of-type {
    display:none
  }
  .hero h1>span {
    display:block
  }
  .hero-description {
    font-size:14px;
    line-height:1.85;
    margin-top:22px
  }
  .hero-actions {
    margin-top:24px;
    gap:20px;
    flex-wrap:wrap
  }
  .hero-actions .button {
    padding:15px 17px;
    font-size:13px;
    min-height:50px;
    gap:20px
  }
  .hero-actions .text-link {
    font-size:11px;
    gap:8px
  }
  .hero-note {
    font-size:9px;
    margin-top:13px
  }
  .credit-ticket {
    bottom:28px;
    right:0;
    scale:.83;
    transform:rotate(-4deg);
    padding:14px 18px
  }
  .hero-caption {
    display:none
  }
  .model-strip {
    padding-block:20px;
    gap:20px;
    min-height:83px
  }
  .model-intro {
    font-size:7px;
    letter-spacing:.5px
  }
  .model-wordmark {
    gap:8px
  }
  .omni img {
    width:29px;
    height:29px
  }
  .omni>span {
    font-size:20px
  }
  .omni small {
    font-size:6px;
    letter-spacing:.5px;
    margin-top:5px
  }
  .seedance>span {
    font-size:18px;
    letter-spacing:-.5px
  }
  .section-heading {
    display:block;
    margin-bottom:29px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.5px;
    margin-bottom:19px
  }
  .section-heading h2,h2 {
    font-size:35px;
    letter-spacing:-1px
  }
  .section-aside {
    margin-top:20px;
    padding:0;
    font-size:12px;
    line-height:1.9
  }
  .source-label {
    margin-top:12px;
    font-size:9px
  }
  .showcase-footer {
    align-items:flex-start;
    gap:20px;
    font-size:9px;
    margin-top:18px;
    line-height:1.8
  }
  .showcase-footer>p {
    max-width:170px
  }
  .showcase-footer .text-link {
    font-size:10px;
    gap:8px;
    white-space:nowrap
  }
  .benefits-layout {
    display:block
  }
  .benefits-intro h2 {
    font-size:40px;
    line-height:1.27
  }
  .benefits-intro h2 br:nth-of-type(2) {
    display:none
  }
  .benefits-intro>p {
    font-size:13px;
    margin-block:22px
  }
  .benefits-intro .button {
    font-size:12px;
    min-height:50px
  }
  .partner-lockup {
    margin-block:26px 37px
  }
  .partner-lockup small {
    flex-basis:auto;
    border-left:1px solid #23301230;
    padding-left:12px
  }
  .benefit-grid {
    gap:29px 22px
  }
  .benefit {
    padding-top:13px
  }
  .benefit-symbol {
    font-size:27px;
    top:6px
  }
  .benefit-number {
    font-size:8px
  }
  .benefit h3 {
    font-size:17px;
    line-height:1.5;
    margin-top:15px
  }
  .benefit p {
    font-size:11px;
    line-height:1.85;
    margin-top:8px
  }
  .free-label {
    font-size:8px;
    margin-bottom:12px
  }
  .template-grid {
    grid-template-columns:1fr;
    gap:33px
  }
  .template-cover {
    aspect-ratio:1.7
  }
  .template-label {
    font-size:9px;
    top:16px;
    left:16px
  }
  .free-tag {
    font-size:9px;
    top:13px;
    right:15px
  }
  .template-info {
    padding-top:17px
  }
  .template-type {
    font-size:10px
  }
  .template-info h3 {
    font-size:24px;
    margin-top:7px
  }
  .template-info p {
    font-size:12px
  }
  .template-action {
    font-size:12px;
    margin-top:17px;
    padding:12px 0
  }
  .template-note {
    font-size:9px;
    margin-top:24px
  }
  .template-follow {
    margin-top:26px;
    padding:19px;
    display:block
  }
  .template-follow>span {
    font-size:12px;
    gap:12px
  }
  .template-follow>a {
    display:block;
    font-size:11px;
    margin:13px 0 0 35px
  }
  .template-follow a span {
    margin-left:10px
  }
  .course-heading {
    display:block;
    margin-bottom:26px
  }
  .course-heading .eyebrow {
    margin-bottom:12px
  }
  .academy-partner {
    font-size:8px;
    display:inline-block
  }
  .course-grid {
    grid-template-columns:1fr;
    gap:33px
  }
  .course-art {
    border-radius:6px
  }
  .course-image-link {
    font-size:10px;
    padding:14px 17px
  }
  .course-copy h2 {
    font-size:46px
  }
  .pir-logo {
    width:91px;
    height:32px;
    margin-bottom:15px
  }
  .course-copy h3 {
    font-size:18px
  }
  .course-copy>p {
    font-size:13px;
    margin-top:17px
  }
  .course-topics {
    margin-block:18px 25px
  }
  .course-topics li {
    font-size:12px;
    padding:11px 0
  }
  .course-note {
    font-size:9px
  }
  .community-section {
    grid-template-columns:1fr;
    gap:43px
  }
  .community-copy>p {
    font-size:13px;
    margin-top:21px
  }
  .community-actions {
    gap:20px;
    margin-top:24px
  }
  .community-actions .button {
    font-size:12px
  }
  .community-actions .text-link {
    font-size:11px
  }
  .community-poster {
    width:calc(100% - 10px);
    margin-inline:auto;
    padding:25px 30px 21px
  }
  .community-words {
    font-size:clamp(60px,16vw,86px);
    letter-spacing:-3px;
    margin-block:22px
  }
  .community-poster>.mono {
    font-size:8px
  }
  .poster-footer {
    font-size:7px
  }
  .faq {
    grid-template-columns:1fr;
    gap:15px;
    padding-block:45px
  }
  .faq h2 {
    font-size:28px
  }
  .faq .eyebrow {
    font-size:8px
  }
  .faq-list summary {
    font-size:13px;
    padding-block:19px
  }
  .faq-list p {
    font-size:12px;
    padding-right:15px
  }
  .final-cta {
    padding-block:62px
  }
  .final-cta .eyebrow {
    font-size:8px
  }
  .final-cta h2 {
    font-size:43px;
    letter-spacing:-1.8px
  }
  .final-cta .button {
    font-size:13px;
    padding:16px 20px;
    margin-top:28px;
    gap:22px
  }
  .final-cta>p {
    font-size:9px
  }
  .site-footer {
    padding-block:25px 110px;
    gap:18px
  }
  .site-footer>span {
    font-size:9px;
    margin-left:auto
  }
  .site-footer>div {
    margin-left:0;
    flex-basis:100%;
    font-size:10px;
    gap:25px
  }
  .site-footer>small {
    font-size:8px
  }
  .mobile-bottom {
    position:fixed;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    z-index:25;
    bottom:0;
    left:0;
    right:0;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom));
    background:#1b2415f5;
    backdrop-filter:blur(15px);
    border-top:1px solid #d2ff5a40
  }
  .mobile-bottom>span {
    font-size:12px;
    color:#c3cfb3
  }
  .mobile-bottom b {
    font:500 24px var(--display);
    color:var(--lime);
    margin-right:5px
  }
  .mobile-bottom .button {
    font-size:12px;
    min-height:43px;
    padding:9px 16px;
    gap:20px
  }
  .dialog-header {
    padding:14px 16px
  }
  .dialog-header h2 {
    font-size:12px
  }
  .dialog-footer {
    font-size:9px;
    padding:15px 16px
  }
  .media-dialog video {
    max-height:64dvh
  }
  .prompt-dialog {
    padding:0 18px 20px
  }
  .prompt-dialog .dialog-header h2 {
    font-size:21px
  }
  .prompt-dialog pre {
    padding:15px;
    font-size:12px
  }
  .prompt-actions {
    gap:9px;
    flex-wrap:wrap
  }
  .prompt-actions .button {
    font-size:11px;
    padding:12px;
    gap:12px;
    flex:1
  }
  .prompt-dialog>p {
    font-size:11px
  }
}
@media(max-width:374px) {
  .section-shell {
    width:calc(100% - 32px)
  }
  .announcement {
    font-size:8px;
    gap:5px
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions .text-link {
    font-size:10px
  }
  .hero h1 {
    font-size:51px
  }
  .model-strip {
    gap:10px
  }
  .model-intro {
    font-size:6px
  }
  .seedance>span {
    font-size:16px
  }
  .omni>span {
    font-size:18px
  }
  .benefit h3 {
    font-size:16px
  }
  .partner-lockup small {
    font-size:7px
  }
  .final-cta h2 {
    font-size:38px
  }
  .site-footer>span {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
@media(min-width:701px) and (max-width:960px) {
  .nav-signup {
    margin-left:auto
  }
  .menu-toggle {
    background:none;
    width:40px;
    height:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px
  }
  .menu-toggle span {
    display:block;
    width:21px;
    height:1px;
    background:#e6efdd;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .mobile-nav:not([hidden]) {
    display:flex;
    flex-direction:column;
    padding:8px 36px 20px;
    border-top:1px solid var(--line)
  }
  .mobile-nav a {
    padding:12px 3px;
    font-size:14px;
    color:#d0d9c6
  }
}
@media(max-width:960px) {
  .seedance {
    flex-direction:column;
    gap:6px;
    align-items:flex-start
  }
  .seedance>img {
    display:block;
    width:82px;
    height:auto
  }
  .seedance>span {
    line-height:1.15
  }
}
:root {
  color-scheme:dark
}
@media(max-width:700px) {
  .hero h1 br:first-of-type {
    display:initial
  }
  .hero-art {
    top:385px
  }
  .hero-art img {
    width:165%;
    max-width:none;
    object-fit:contain;
    transform:translateX(-34%)
  }
  .hero-art:after {
    background:linear-gradient(180deg,var(--bg),transparent 30%,transparent 80%,var(--bg))
  }
  .hero-note {
    color:#b0bca1
  }
  .hero {
    padding-bottom:350px
  }
}
.template-card {
  display:flex;
  flex-direction:column
}
.template-cover {
  flex-shrink:0
}
.template-info {
  display:flex;
  flex-direction:column;
  flex:1
}
.template-info p {
  flex:1
}
@media(max-width:700px) {
  .benefits-intro h2 br:nth-of-type(2) {
    display:initial
  }
}

/* Autoplay showcase: a dense wall with independent sound and expanded viewing. */
.wall-toolbar {
  position: sticky;
  top: 81px;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  margin-bottom: 16px;
  border-block: 1px solid var(--line);
  background: #111310f2;
  backdrop-filter: blur(18px);
}
.wall-toolbar-copy {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.wall-count {
  border: 1px solid #d2ff5a50;
  border-radius: 4px;
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  color: var(--lime);
  font-size: 20px;
}
.wall-toolbar-copy strong {
  font-size: 10px;
  letter-spacing: 1.5px;
}
.wall-toolbar-copy p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.wall-pause {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 15px;
  font-size: 11px;
  border: 1px solid #64735480;
  background: #252d1e;
  border-radius: 5px;
}
.wall-pause svg {
  width: 16px;
  height: 16px;
  stroke: var(--lime);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wall-pause .resume-symbol,
.wall-pause[aria-pressed="true"] .pause-symbol {
  display: none;
}
.wall-pause[aria-pressed="true"] .resume-symbol {
  display: block;
}
.wall-pause:hover {
  background: #3a462e;
}
.video-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.wall-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 3 / 4.2;
  background: #252d20;
  border-radius: 7px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #ffffff1c;
}
.wall-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #070c054d, transparent 24%, transparent 59%, #070c05d9 100%);
}
.wall-card[data-audible="true"] {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px #d2ff5a36;
}
.wall-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.wall-card-top {
  position: absolute;
  z-index: 2;
  inset: 10px 10px auto 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.wall-index {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 1px;
  text-shadow: 0 1px 6px #0009;
}
.wall-index::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #ffffff8a;
  border-radius: 50%;
}
.wall-card[data-playing="true"] .wall-index::before {
  background: var(--lime);
  box-shadow: 0 0 8px #d2ff5a77;
}
.wall-expand {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff50;
  background: #11170e65;
  backdrop-filter: blur(8px);
  border-radius: 50%;
  color: white;
  font-size: 23px;
  line-height: 1;
}
.wall-expand:hover {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}
.wall-caption {
  position: absolute;
  z-index: 2;
  inset: auto 14px 17px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}
.wall-caption-copy {
  min-width: 0;
}
.wall-category {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: #e1ead6;
  margin-bottom: 4px;
  letter-spacing: .6px;
}
.wall-caption h3 {
  font-size: 18px;
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: -.4px;
  color: white;
  text-wrap: balance;
  text-shadow: 0 2px 8px #0008;
}
.wall-sound {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #ffffff5c;
  background: #11170eab;
  backdrop-filter: blur(8px);
  border-radius: 5px;
  color: white;
  padding: 10px;
}
.wall-sound svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wall-sound .sound-on,
.wall-sound[aria-pressed="true"] .sound-off {
  display: none;
}
.wall-sound[aria-pressed="true"] .sound-on {
  display: block;
}
.wall-sound[aria-pressed="true"] {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}
.wall-sound:hover {
  border-color: var(--lime);
}
.sound-label {
  font-size: 10px;
  white-space: nowrap;
}
.wall-retry {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  min-height: 44px;
  max-width: calc(100% - 24px);
  padding: 10px 16px;
  border-radius: 5px;
  background: var(--lime);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 20px #0003;
}
.wall-card[data-error="true"] {
  border-color: #e5b881;
}
@media (max-width: 1199px) {
  .wall-caption {
    inset: auto 12px 13px;
    gap: 8px;
  }
  .wall-caption h3 {
    font-size: 16px;
  }
  .sound-label {
    display: none;
  }
}
@media (min-width: 701px) and (max-width: 960px) {
  .video-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .wall-card:last-child {
    grid-column: 2;
  }
}
@media (max-width: 700px) {
  .wall-toolbar {
    top: 66px;
    padding: 12px 0;
    margin-bottom: 13px;
    gap: 12px;
  }
  .wall-toolbar-copy {
    gap: 9px;
  }
  .wall-count {
    width: 36px;
    height: 41px;
    font-size: 17px;
  }
  .wall-toolbar-copy strong {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .wall-toolbar-copy p {
    font-size: 9px;
    max-width: 155px;
    line-height: 1.65;
  }
  .wall-pause {
    font-size: 10px;
    gap: 7px;
    padding: 10px;
  }
  .wall-pause svg {
    width: 13px;
    height: 13px;
  }
  .video-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .wall-card {
    aspect-ratio: 9 / 14;
    border-radius: 5px;
  }
  .wall-card-top {
    inset: 8px 7px auto 11px;
  }
  .wall-index {
    font-size: 8px;
    gap: 5px;
  }
  .wall-expand {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .wall-caption {
    inset: auto 9px 10px;
    align-items: flex-end;
    gap: 5px;
  }
  .wall-caption h3 {
    font-size: 14px;
    line-height: 1.45;
  }
  .wall-category {
    font-size: 7px;
    line-height: 1.5;
    letter-spacing: 0;
    margin-bottom: 4px;
  }
  .wall-sound {
    padding: 9px;
    align-self: flex-end;
  }
  .wall-sound svg {
    width: 18px;
    height: 18px;
  }
  .showcase-footer > p {
    max-width: 190px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wall-card, .wall-sound, .wall-expand {
    transition: none;
  }
}

/* A lightweight, clearly labelled playground using the existing sample clips. */
.demo-studio {
  padding:28px;
  border:1px solid #d6e5c326;
  border-radius:20px;
  background:linear-gradient(145deg,#20261c 0,#141911 48%,#141713 100%);
  box-shadow:0 24px 70px #00000024;
}
.demo-composer {
  padding-bottom:24px;
}
.demo-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}
.demo-brand {
  color:#e8efdf;
  font:600 11px/1.5 var(--display);
  letter-spacing:1.6px;
}
.demo-label {
  padding:4px 9px;
  border:1px solid #d2ff5a4d;
  border-radius:5px;
  color:var(--lime);
  font:500 9px/1.4 var(--display);
  letter-spacing:1.7px;
}
.demo-workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:stretch;
}
.demo-prompt-box {
  min-width:0;
  padding:17px 20px;
  border:1px solid #ffffff19;
  border-radius:10px;
  background:#0c100bbb;
  box-shadow:inset 0 1px 5px #00000012;
}
.demo-field-label {
  display:block;
  margin-bottom:7px;
  color:#9ca694;
  font-size:11px;
  font-weight:500;
}
#demo-prompt {
  color:#f2f5eb;
  font-size:16px;
  line-height:1.7;
  text-wrap:pretty;
}
.demo-settings {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:center;
  gap:8px;
  min-width:190px;
}
.demo-settings>span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:37px;
  padding:6px 13px;
  border:1px solid #ffffff13;
  border-radius:6px;
  background:#ffffff04;
  color:#bdc8b4;
  font-size:11px;
  line-height:1.5;
  white-space:nowrap;
}
.demo-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:18px;
}
.demo-composer .button {
  min-height:52px;
  gap:12px;
  padding:14px 22px;
  border-radius:8px;
  font-size:14px;
}
.demo-composer .button span {
  font:inherit;
}
.demo-composer .button .demo-generate-icon {
  font-size:20px;
  line-height:1;
}
#demo-generate {
  min-width:230px;
  box-shadow:0 5px 22px #a4df2114;
}
#demo-generate:disabled {
  cursor:wait;
  color:#d9edbd;
  background:#39472d;
  border-color:#d2ff5a40;
  box-shadow:none;
  transform:none;
}
.demo-own {
  color:#d9e2d1;
  border-color:#d7e8c82b;
  background:#ffffff04;
}
.demo-own:hover {
  border-color:#d2ff5a80;
  background:#ffffff0a;
}
.demo-composer[data-complete="true"] .demo-own {
  color:#1e2614;
  background:var(--lime);
  border-color:var(--lime);
  box-shadow:0 6px 25px #b5f33d21;
}
.demo-composer[data-complete="true"] .demo-own:hover {
  background:#e1ff94;
}
.demo-feedback {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"copy reset" "bar reset" "status reset";
  column-gap:22px;
  row-gap:7px;
  margin-top:22px;
}
.demo-progress-copy {
  grid-area:copy;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#aebba4;
  font-size:10px;
  line-height:1.5;
}
#demo-counter {
  color:#dce9d1;
  font:500 11px/1.5 var(--display);
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
}
#demo-progress {
  grid-area:bar;
  display:block;
  width:100%;
  height:3px;
  overflow:hidden;
  appearance:none;
  border:0;
  border-radius:10px;
  background:#ffffff0d;
  color:var(--lime);
}
#demo-progress::-webkit-progress-bar {
  background:#ffffff0d;
  border-radius:10px;
}
#demo-progress::-webkit-progress-value {
  background:var(--lime);
  border-radius:10px;
  transition:width .3s ease;
}
#demo-progress::-moz-progress-bar {
  background:var(--lime);
  border-radius:10px;
}
#demo-status {
  grid-area:status;
  min-height:19px;
  color:#a8b59f;
  font-size:11px;
  line-height:1.7;
}
#demo-reset {
  grid-area:reset;
  align-self:center;
  min-height:44px;
  padding:8px 0 8px 12px;
  color:#bbc9b1;
  background:none;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:#bbc9b150;
}
#demo-reset:hover {
  color:var(--lime);
}
.demo-disclosure {
  display:block;
  margin-top:9px;
  color:#8d9a85;
  font-size:10px;
  line-height:1.7;
}
.demo-studio .wall-toolbar {
  padding:15px 0;
  margin-bottom:16px;
  background:#171d14f5;
}
.demo-studio .video-wall {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.demo-studio .wall-card:last-child {
  grid-column:auto;
}
.video-wall[data-demo="true"] .wall-card:not([data-demo-state="ready"]) {
  border:1px solid #d5e8c020;
  background:#10150d;
}
.video-wall[data-demo="true"] .wall-card:not([data-demo-state="ready"])::after {
  display:none;
}
.video-wall[data-demo="true"] .wall-card:not([data-demo-state="ready"]) .wall-video,
.video-wall[data-demo="true"] .wall-card:not([data-demo-state="ready"]) .wall-card-top,
.video-wall[data-demo="true"] .wall-card:not([data-demo-state="ready"]) .wall-caption,
.video-wall[data-demo="true"] .wall-card:not([data-demo-state="ready"]) .wall-retry {
  display:none;
}
.wall-slot {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  overflow:hidden;
  isolation:isolate;
  padding:18px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 42%,#80985612,transparent 65%);
}
.wall-slot::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:13% 13%;
  border:1px solid #bbd59e0c;
  border-radius:16px;
  background:linear-gradient(115deg,#d2ff5a03,transparent 58%);
  transform:rotate(-7deg);
}
.wall-slot::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:54%;
  aspect-ratio:1;
  border:1px solid #d2ff5a0c;
  border-radius:50%;
  box-shadow:0 0 0 20px #d2ff5a02,0 0 0 42px #d2ff5a02;
}
.slot-symbol {
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border:1px solid #d2ff5a29;
  border-radius:13px;
  background:#cbeaa10a;
  color:#c4de9e;
  font:400 24px/1 var(--display);
}
.slot-label {
  max-width:100%;
  color:#92a384;
  font-size:11px;
  line-height:1.6;
}
.slot-spinner {
  display:none;
  width:32px;
  height:32px;
  margin:9px;
  border:2px solid #d2ff5a20;
  border-top-color:var(--lime);
  border-right-color:#d2ff5a77;
  border-radius:50%;
}
.wall-card[data-demo-state="queued"] {
  border-color:#d2ff5a38!important;
}
.wall-card[data-demo-state="queued"] .wall-slot {
  background:radial-gradient(ellipse at 50% 42%,#b1e06314,transparent 68%);
}
.wall-card[data-demo-state="queued"] .slot-symbol {
  display:none;
}
.wall-card[data-demo-state="queued"] .slot-spinner {
  display:block;
  animation:demo-spin .7s linear infinite;
}
.wall-card[data-demo-state="queued"] .slot-label {
  color:#d0e2b9;
}
.wall-card[data-demo-state="ready"] .wall-slot {
  display:none;
}
.video-wall[data-demo="true"] .wall-card[data-demo-state="ready"] .wall-video {
  animation:demo-reveal .36s ease-out both;
}
.demo-studio .showcase-footer {
  margin-top:23px;
  padding-top:0;
  border-top:0;
}
.demo-dock {
  position:fixed;
  z-index:24;
  left:50%;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:11px;
  width:max-content;
  max-width:calc(100% - 40px);
  padding:10px 12px;
  border:1px solid #cdea9860;
  border-radius:13px;
  background:#151d11fa;
  box-shadow:0 12px 45px #0009,0 0 0 4px #10170d55;
  backdrop-filter:blur(16px);
  transform:translateX(-50%);
}
.demo-dock-count {
  padding:0 8px;
  color:#c5d5b5;
  font:500 12px/1.5 var(--display);
  font-variant-numeric:tabular-nums;
  letter-spacing:.7px;
  white-space:nowrap;
}
.demo-dock .button {
  min-height:45px;
  gap:8px;
  padding:11px 18px;
  border-radius:7px;
  font-size:13px;
}
.demo-dock .button span {
  font:inherit;
}
#demo-dock-generate {
  min-width:173px;
}
#demo-dock-generate:disabled {
  cursor:wait;
  color:#d9edbd;
  background:#39472d;
  border-color:#d2ff5a40;
  transform:none;
}
.demo-dock[data-complete="true"] .demo-own {
  color:#1e2614;
  background:var(--lime);
  border-color:var(--lime);
}
.demo-dock[data-complete="true"] .demo-own:hover {
  background:#e1ff94;
}
@keyframes demo-spin {
  to { transform:rotate(360deg); }
}
@keyframes demo-reveal {
  from { opacity:0; transform:scale(1.025); }
  to { opacity:1; transform:scale(1); }
}
@media(max-width:960px) {
  .demo-studio {
    padding:22px;
  }
  .demo-workspace {
    grid-template-columns:minmax(0,1fr);
    gap:11px;
  }
  .demo-settings {
    display:flex;
    flex-wrap:wrap;
    min-width:0;
    gap:6px;
  }
  .demo-settings>span {
    min-height:30px;
    padding:4px 11px;
    font-size:10px;
  }
  .demo-studio .video-wall {
    gap:9px;
  }
  .demo-studio .wall-caption h3 {
    font-size:14px;
  }
}
@media(max-width:700px) {
  .demo-dock {
    bottom:calc(14px + env(safe-area-inset-bottom));
    width:calc(100% - 24px);
    max-width:430px;
    gap:7px;
    padding:8px;
    border-radius:11px;
  }
  .demo-dock-count {
    display:none;
  }
  .demo-dock .button {
    flex:1 1 0;
    min-width:0;
    min-height:44px;
    padding:10px 7px;
    font-size:11.5px;
    letter-spacing:-.1px;
  }
  #demo-dock-generate {
    min-width:0;
  }
  .demo-studio {
    padding:16px;
    border-radius:13px;
  }
  .demo-composer {
    padding-bottom:19px;
  }
  .demo-topline {
    margin-bottom:16px;
    gap:9px;
  }
  .demo-brand {
    font-size:9px;
    letter-spacing:1.1px;
  }
  .demo-label {
    font-size:8px;
    padding:4px 7px;
  }
  .demo-prompt-box {
    padding:13px 14px;
    border-radius:8px;
  }
  .demo-field-label {
    font-size:10px;
    margin-bottom:6px;
  }
  #demo-prompt {
    font-size:14px;
    line-height:1.65;
  }
  .demo-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    margin-top:15px;
  }
  .demo-composer .button {
    width:100%;
    min-height:49px;
    padding:12px 14px;
    font-size:13px;
  }
  #demo-generate {
    min-width:0;
  }
  .demo-own {
    min-height:44px!important;
    background:none;
  }
  .demo-feedback {
    column-gap:8px;
    margin-top:17px;
  }
  #demo-reset {
    font-size:10px;
    padding-left:7px;
  }
  #demo-status {
    font-size:10px;
  }
  .demo-disclosure {
    font-size:9px;
  }
  .demo-studio .wall-toolbar {
    margin-bottom:11px;
    padding:12px 0;
    gap:7px;
  }
  .demo-studio .wall-toolbar-copy {
    gap:7px;
  }
  .demo-studio .wall-toolbar-copy strong {
    font-size:7px;
    letter-spacing:.8px;
  }
  .demo-studio .wall-toolbar-copy p {
    max-width:130px;
    font-size:8px;
  }
  .demo-studio .wall-count {
    width:29px;
    height:37px;
    font-size:15px;
  }
  .demo-studio .wall-pause {
    padding:9px 8px;
    font-size:9px;
    gap:5px;
  }
  .demo-studio .video-wall {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .wall-slot {
    gap:12px;
    padding:10px;
  }
  .slot-symbol {
    width:43px;
    height:43px;
    border-radius:11px;
    font-size:21px;
  }
  .slot-label {
    font-size:10px;
  }
  .slot-spinner {
    width:29px;
    height:29px;
    margin:7px;
  }
  .demo-studio .wall-caption h3 {
    font-size:12px;
  }
  .demo-studio .wall-category {
    font-size:6.5px;
  }
  .demo-studio .wall-caption {
    inset:auto 7px 9px;
    gap:3px;
  }
  .demo-studio .showcase-footer {
    margin-top:19px;
    gap:9px;
  }
  .demo-studio .showcase-footer>p {
    max-width:170px;
    font-size:10px;
  }
  .demo-studio .showcase-footer .text-link {
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .wall-card[data-demo-state="queued"] .slot-spinner,
  .video-wall[data-demo="true"] .wall-card[data-demo-state="ready"] .wall-video {
    animation:none;
  }
  #demo-progress::-webkit-progress-value {
    transition:none;
  }
}

/* Three image-led chapters: learn, create, and grow with myClover. */
.visual-story {
  border-top:1px solid var(--line)
}
.story-heading {
  gap:32px;
  margin-bottom:42px
}
.story-heading h2 {
  font-size:clamp(36px,4.1vw,58px);
  line-height:1.28;
  letter-spacing:-1.5px
}
.story-heading>.text-link {
  flex-shrink:0;
  min-height:44px;
  margin-bottom:5px;
  color:#bcc5b2
}
.story-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px
}
.story-card {
  min-width:0;
  scroll-margin-top:100px
}
.story-picture {
  position:relative;
  display:block;
  overflow:hidden;
  isolation:isolate;
  aspect-ratio:4/5;
  border-radius:9px;
  background:#20261d
}
.story-picture::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,#08101740,transparent 27%,transparent 46%,#07100a24 65%,#070d09cc 100%);
  box-shadow:inset 0 0 0 1px #ffffff16;
  border-radius:inherit
}
.story-picture img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)
}
.story-picture:hover img {
  transform:scale(1.035)
}
.story-index {
  position:absolute;
  z-index:2;
  top:22px;
  left:23px;
  color:#f2f7ed;
  font-family:var(--display);
  font-size:12px;
  letter-spacing:1px;
  line-height:1.4;
  text-shadow:0 1px 12px #0009
}
.story-word {
  position:absolute;
  z-index:2;
  left:23px;
  right:18px;
  bottom:19px;
  color:#f8f9f1;
  font-size:clamp(48px,5.3vw,76px);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-2px;
  text-shadow:0 2px 28px #0004
}
.story-caption {
  padding:23px 2px 0
}
.story-pain {
  color:#98a68b;
  font-size:13px;
  line-height:1.7;
  margin-bottom:5px
}
.story-caption h3 {
  font-size:clamp(20px,2.05vw,27px);
  font-weight:550;
  line-height:1.5;
  letter-spacing:-.5px;
  color:#f3f6ed;
  text-wrap:balance
}
.story-tags {
  display:flex;
  flex-wrap:wrap;
  gap:5px 0;
  margin-top:9px;
  color:#aab49f;
  font-size:13px;
  line-height:1.7
}
.story-tags span+span::before {
  content:'·';
  display:inline-block;
  padding-inline:10px;
  color:#677b55
}
.story-caption>.text-link,
.story-links .text-link {
  min-height:44px;
  margin-top:10px;
  font-size:14px;
  color:var(--lime)
}
.story-caption>.text-link:hover,
.story-links .text-link:hover {
  color:#e4ff9e
}
.story-links {
  display:flex;
  flex-wrap:wrap;
  gap:0 20px
}
.story-links .text-link+.text-link {
  color:#aebda0
}
.story-flow {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 23px;
  margin-top:40px;
  padding:28px 12px 0;
  border-top:1px solid var(--line);
  color:#b3bfaa;
  font-size:15px;
  font-weight:400;
  line-height:1.8;
  text-align:center
}
.story-flow>i,
.story-flow>.flow-arrow,
.story-flow>[aria-hidden='true'] {
  color:#687b57;
  font-family:var(--display);
  font-style:normal
}
.story-start {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:26px;
  text-align:center
}
.story-start .button {
  min-width:260px
}
.story-start>p {
  color:#aab49f;
  font-size:13px
}
.partner-strip {
  position:relative
}
.partner-strip-inner {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:72px;
  align-items:center;
  padding-block:64px
}
.partner-identity {
  min-width:0
}
.partner-brands {
  display:flex;
  align-items:center;
  gap:14px
}
.partner-brands>img {
  flex-shrink:0;
  width:57px;
  height:57px;
  object-fit:contain
}
.partner-brands>span {
  color:#27311e;
  font-family:var(--display);
  font-size:26px;
  font-weight:600;
  line-height:1;
  letter-spacing:-1px;
  white-space:nowrap
}
.partner-brands>i {
  margin-inline:2px;
  font-family:var(--display);
  font-size:23px;
  font-style:normal;
  font-weight:400;
  color:#859476
}
.partner-brands>img.airova-partner {
  width:190px;
  height:65px;
  object-fit:contain
}
.partner-identity>small {
  display:block;
  margin-top:21px;
  padding-left:2px;
  color:#6f7b63;
  font-family:var(--display);
  font-size:10px;
  line-height:1.5;
  letter-spacing:3px
}
.partner-offer {
  min-width:0;
  padding-left:45px;
  border-left:1px solid #26351a2b
}
.partner-offer h2 {
  color:#27351d;
  font-size:clamp(27px,2.8vw,38px);
  font-weight:550;
  line-height:1.35;
  letter-spacing:-1px
}
.partner-perks {
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin:18px 0 8px;
  padding:0;
  list-style:none;
  color:#617052;
  font-size:13px;
  line-height:1.8
}
.partner-perks li::before {
  content:'+';
  padding-right:6px;
  color:#7c944e
}
.partner-offer>.text-link {
  color:#405924;
  min-height:44px;
  font-size:14px
}
.partner-offer>.text-link:hover {
  color:#708d32
}
@media(max-width:1199px) {
  .story-grid {
    gap:20px
  }
  .story-word {
    left:20px;
    bottom:17px
  }
  .partner-strip-inner {
    gap:34px
  }
  .partner-brands {
    gap:10px
  }
  .partner-brands>span {
    font-size:24px
  }
  .partner-brands>img.airova-partner {
    width:168px;
    height:58px
  }
  .partner-offer {
    padding-left:32px
  }
}
@media(max-width:960px) {
  .story-heading {
    align-items:flex-end
  }
  .story-grid {
    gap:18px
  }
  .story-index {
    top:17px;
    left:16px;
    font-size:10px
  }
  .story-word {
    left:16px;
    right:12px;
    bottom:13px;
    font-size:48px
  }
  .story-caption {
    padding-top:19px
  }
  .story-caption h3 {
    font-size:21px
  }
  .story-tags {
    font-size:12px
  }
  .story-tags span+span::before {
    padding-inline:6px
  }
  .story-flow {
    gap:8px 18px;
    font-size:14px
  }
  .partner-strip-inner {
    grid-template-columns:1fr;
    gap:31px;
    padding-block:52px;
    justify-items:center;
    text-align:center
  }
  .partner-identity>small {
    padding-left:0;
    margin-top:16px
  }
  .partner-offer {
    padding:29px 0 0;
    border-left:0;
    border-top:1px solid #26351a2b;
    width:100%
  }
  .partner-offer h2 {
    font-size:32px
  }
  .partner-perks {
    justify-content:center
  }
}
@media(max-width:700px) {
  .story-heading {
    margin-bottom:28px
  }
  .story-heading h2 {
    font-size:clamp(34px,8.9vw,44px);
    line-height:1.32;
    letter-spacing:-1px
  }
  .story-heading .eyebrow {
    font-size:9px;
    margin-bottom:17px
  }
  .story-heading>.text-link {
    margin:13px 0 0;
    font-size:12px
  }
  .story-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .story-picture {
    aspect-ratio:4/3;
    border-radius:7px
  }
  .story-picture img {
    object-position:center 43%
  }
  .story-index {
    top:19px;
    left:20px;
    font-size:11px
  }
  .story-word {
    left:20px;
    bottom:13px;
    font-size:clamp(54px,14.4vw,78px);
    letter-spacing:-1.5px
  }
  .story-caption {
    padding:17px 2px 0
  }
  .story-pain {
    font-size:12px;
    margin-bottom:3px
  }
  .story-caption h3 {
    font-size:24px;
    line-height:1.4
  }
  .story-tags {
    font-size:13px;
    margin-top:7px
  }
  .story-tags span+span::before {
    padding-inline:9px
  }
  .story-caption>.text-link,
  .story-links .text-link {
    margin-top:5px;
    font-size:13px
  }
  .story-flow {
    gap:6px 9px;
    margin-top:31px;
    padding:23px 0 0;
    font-size:12px
  }
  .story-start {
    flex-direction:column;
    gap:12px;
    margin-top:21px
  }
  .story-start .button {
    width:100%;
    min-width:0;
    justify-content:center
  }
  .partner-strip-inner {
    gap:25px;
    padding-block:44px
  }
  .partner-brands {
    gap:8px;
    justify-content:center
  }
  .partner-brands>img {
    width:43px;
    height:43px
  }
  .partner-brands>span {
    font-size:21px;
    letter-spacing:-.8px
  }
  .partner-brands>i {
    margin-inline:1px;
    font-size:18px
  }
  .partner-brands>img.airova-partner {
    width:135px;
    height:48px
  }
  .partner-identity>small {
    margin-top:15px;
    font-size:9px;
    letter-spacing:2.3px
  }
  .partner-offer {
    padding-top:25px
  }
  .partner-offer h2 {
    font-size:30px;
    line-height:1.35
  }
  .partner-perks {
    gap:5px 13px;
    font-size:12px;
    margin-top:15px
  }
  .partner-perks li::before {
    padding-right:4px
  }
  .partner-offer>.text-link {
    font-size:13px
  }
}
@media(prefers-reduced-motion:reduce) {
  .story-picture img {
    transition:none
  }
  .story-picture:hover img {
    transform:none
  }
}

@media (max-width:700px) {
  body:has(#demo-dock:not([hidden])) .mobile-bottom { display:none; }
}