/* Public introduction; application controls continue to use shared tokens. */
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

.landing-main,.landing-footer {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto
}

.landing-header {
  max-width:1240px;
  min-height:100px;
  margin-inline:auto;
  padding-inline:0;
  background:transparent
}

.landing-header .platform-brand {
  font-size:23px;
  letter-spacing:-.7px;
  gap:12px
}

.landing-header .platform-brand>[data-product-icon] {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:var(--accent);
  border-radius:10px;
  --product-icon-color:#fff8ef;
  --product-icon-depth:#ffc1a8
}

.landing-header .platform-account {
  padding:10px 15px;
  border-radius:5px;
  color:var(--text);
  max-width:none
}

.landing-header .platform-account>span {
  display:inline-flex
}

.landing-nav {
  display:flex;
  gap:24px;
  align-items:center
}

.landing-nav a {
  text-decoration:none;
  color:var(--muted);
  font-size:13px
}

.landing-nav a:hover {
  color:var(--accent)
}

.landing-eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  font-weight:650;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.7
}

.landing-eyebrow:before {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0
}

.hero {
  padding:86px 0 70px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:60px;
  align-items:center
}

.hero h1 {
  font-size:clamp(36px,4.3vw,61px);
  font-weight:650;
  letter-spacing:-2.5px;
  line-height:1.18;
  margin:24px 0
}

.hero h1 .hero-emphasis {
  color:var(--accent);
  display:block
}

.hero-description {
  max-width:510px;
  margin:0 0 29px;
  color:var(--muted);
  font-size:15px;
  line-height:1.9
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  align-items:center
}

.landing-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:var(--text);
  color:#fff;
  padding:14px 20px;
  border:1px solid var(--text);
  border-radius:5px;
  text-decoration:none;
  font-size:13px;
  font-weight:650;
  line-height:1.5
}

.landing-primary:hover {
  background:var(--forest);
  border-color:var(--forest);
  color:white
}

.landing-secondary {
  display:inline-flex;
  gap:15px;
  font-size:13px;
  text-decoration:none;
  color:var(--text);
  padding:12px 4px
}

.landing-secondary:hover {
  color:var(--accent)
}

.hero-note {
  font-size:10px;
  color:var(--muted);
  margin:24px 0 0;
  letter-spacing:.3px
}

.studio-preview {
  position:relative;
  background:#e8ece2;
  border:1px solid #d5dccd;
  border-radius:10px;
  transform:rotate(-1deg);
  box-shadow:0 28px 50px -30px #344f4055;
  overflow:hidden
}

.preview-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#eff1e9;
  border-bottom:1px solid #d5dccd;
  padding:14px 17px;
  color:#6c7969;
  font:10px ui-monospace,monospace;
  letter-spacing:.6px
}

.preview-dots {
  letter-spacing:3px;
  color:#aab4a2
}

.preview-content {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:16px;
  padding:26px
}

.preview-image {
  min-height:260px;
  background:#d5dfd6;
  border:7px solid #f9faf5;
  border-radius:4px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:end;
  justify-content:center;
  box-shadow:0 6px 15px #344f4010
}

.preview-image:before {
  content:'';
  position:absolute;
  width:50px;
  height:50px;
  border-radius:50%;
  background:#f2dfa8;
  top:25px;
  right:24px
}

.preview-hills {
  position:absolute;
  inset:30% -15% -5%;
  background:#9db29a;
  clip-path:polygon(0 70%,25% 10%,50% 60%,80% 5%,100% 60%,100% 100%,0 100%)
}

.preview-hills:after {
  content:'';
  position:absolute;
  inset:35% -5% -20%;
  background:#58745b;
  clip-path:polygon(0 100%,50% 0,100% 75%,100% 100%)
}

.preview-image-label {
  position:absolute;
  left:10px;
  bottom:10px;
  padding:5px 7px;
  border:1px solid #ffffff80;
  background:#f9faf5ee;
  border-radius:3px;
  font-size:8px;
  color:var(--forest)
}

.preview-tools {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:15px;
  min-width:0
}

.preview-tile {
  background:#f9faf5;
  border:1px solid #d9dfd1;
  border-radius:7px;
  padding:15px 12px;
  display:flex;
  gap:9px;
  align-items:center;
  font-size:11px;
  color:var(--forest);
  line-height:1.6
}

.preview-tile [data-product-icon] {
  display:inline-flex;
  --product-icon-color:#42614a;
  --product-icon-depth:#bacbb0
}

.preview-tile.audio {
  display:block
}

.waveform {
  height:24px;
  display:flex;
  gap:4px;
  align-items:center;
  margin-top:10px
}

.waveform i {
  display:block;
  width:4px;
  height:40%;
  border-radius:2px;
  background:#8a9e7b
}

.waveform i:nth-child(3n) {
  height:85%;
  background:#cf7751
}

.waveform i:nth-child(2n) {
  height:60%
}

.waveform i:nth-child(5n) {
  height:100%
}

.preview-caption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:0 25px 17px;
  font-size:8px;
  color:#6c7969;
  letter-spacing:.4px;
  line-height:1.7
}

.preview-caption>span:last-child {
  text-align:right
}

.landing-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  padding:23px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-size:12px
}

.landing-strip>span {
  display:flex;
  gap:10px;
  align-items:center
}

.landing-strip [data-product-icon] {
  display:inline-flex;
  --product-icon-color:#6f8463;
  --product-icon-depth:#c6d0bb
}

.features {
  padding:80px 0
}

.landing-section-head {
  display:flex;
  gap:40px;
  justify-content:space-between;
  align-items:end;
  margin-bottom:35px
}

.landing-section-head h2,.workflow h2 {
  font-size:34px;
  letter-spacing:-1.1px;
  font-weight:600;
  line-height:1.35;
  margin:16px 0 0
}

.landing-section-head p {
  max-width:360px;
  color:var(--muted);
  line-height:1.8;
  font-size:13px;
  margin:0
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--border)
}

.feature-card {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:28px 24px;
  border-bottom:1px solid var(--border);
  position:relative;
  min-width:0;
  transition:background .15s
}

.feature-card:not(:nth-child(3n)) {
  border-right:1px solid var(--border)
}

.feature-card:hover {
  background:#edf0e7
}

.feature-card .icon {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border:1px solid #dbe1d1;
  border-radius:10px;
  background:#e9ede2;
  --product-icon-color:#42614a;
  --product-icon-depth:#becdb3
}

.feature-card .product-icon-lg {
  width:24px;
  height:24px
}

.feature-card .title {
  font-size:17px;
  font-weight:650;
  margin-top:3px
}

.feature-card .desc {
  flex:1;
  color:var(--muted);
  font-size:13px;
  line-height:1.8
}

.feature-card .foot {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:10px;
  font-size:11px;
  margin-top:10px
}

.feature-card .tag {
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--muted);
  font:9px ui-monospace,monospace;
  white-space:nowrap;
  max-width:65%
}

.feature-card .foot a {
  font-size:12px;
  text-decoration:none;
  font-weight:600;
  flex-shrink:0
}

.feature-card .foot a:after {
  content:' ↗'
}

.workflow {
  background:#e9ede3;
  border:1px solid #dce1d3;
  border-radius:8px;
  padding:44px 48px;
  margin-bottom:70px
}

.workflow-title {
  max-width:620px
}

.workflow-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:38px
}

.workflow-step {
  min-width:0
}

.workflow-step>span {
  font:11px ui-monospace,monospace;
  color:var(--accent)
}

.workflow-step h3 {
  font-size:16px;
  font-weight:600;
  margin:13px 0 8px
}

.workflow-step p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin:0
}

.workflow .landing-primary {
  margin-top:30px
}

.ads-section {
  margin-bottom:65px
}

.ads-section h2 {
  font-size:20px;
  font-weight:600;
  margin-bottom:24px
}

.ad-grid {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))
}

.landing-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:32px 0 38px;
  border-top:1px solid var(--border)
}

.landing-footer .platform-brand {
  font-size:18px
}

.landing-footer p {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  margin:10px 0 0
}

.landing-footer nav {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  font-size:12px
}

.landing-footer nav a {
  text-decoration:none;
  color:var(--muted)
}

.landing-footer nav a:hover {
  color:var(--accent)
}

@media(max-width:1300px) {
  .landing-header {
    margin-inline:48px
  }

}

@media(max-width:1000px) {
  .landing-main,.landing-footer {
    width:calc(100% - 64px)
  }

  .landing-header {
    margin-inline:32px
  }

  .hero {
    gap:30px;
    padding-top:65px
  }

  .hero h1 {
    font-size:43px
  }

  .preview-content {
    padding:18px;
    gap:12px
  }

  .preview-image {
    min-height:230px
  }

  .preview-tile {
    padding:12px 9px;
    font-size:10px
  }

  .preview-caption {
    padding-inline:18px
  }

  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .feature-card:not(:nth-child(3n)) {
    border-right:0
  }

  .feature-card:nth-child(odd) {
    border-right:1px solid var(--border)
  }

  .landing-section-head h2,.workflow h2 {
    font-size:30px
  }

}

@media(max-width:700px) {
  .landing-main,.landing-footer {
    width:calc(100% - 40px)
  }

  .landing-header {
    margin-inline:20px;
    min-height:90px;
    flex-wrap:wrap;
    padding-block:18px;
    gap:14px
  }

  .landing-header .platform-brand {
    font-size:21px
  }

  .landing-header .spacer {
    display:none
  }

  .landing-header .landing-nav {
    order:3;
    width:100%;
    justify-content:space-between;
    gap:12px
  }

  .landing-header .lang-switcher {
    margin-left:auto
  }

  .landing-header .platform-account {
    padding:7px 10px;
    font-size:11px
  }

  .landing-header .platform-account>span[data-product-icon] {
    display:none
  }

  .landing-header .platform-account>span:not([data-product-icon]) {
    display:inline
  }

  .landing-nav>a {
    font-size:12px
  }

  .hero {
    grid-template-columns:minmax(0,1fr);
    padding:44px 0 42px;
    gap:36px
  }

  .hero h1 {
    font-size:43px;
    letter-spacing:-1.8px
  }

  .hero-description {
    font-size:14px
  }

  .studio-preview {
    transform:none;
    max-width:550px
  }

  .preview-image {
    min-height:230px
  }

  .preview-tools {
    gap:12px
  }

  .preview-content {
    grid-template-columns:1.1fr 1fr;
    padding:18px
  }

  .landing-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:20px;
    font-size:11px
  }

  .features {
    padding:52px 0
  }

  .landing-section-head {
    display:block;
    margin-bottom:27px
  }

  .landing-section-head p {
    margin-top:18px;
    max-width:100%
  }

  .landing-section-head h2,.workflow h2 {
    font-size:29px
  }

  .workflow {
    padding:27px 24px;
    margin-bottom:48px
  }

  .workflow-grid {
    grid-template-columns:minmax(0,1fr);
    gap:27px;
    margin-top:30px
  }

  .workflow-step p {
    font-size:14px
  }

  .landing-footer {
    align-items:start;
    flex-direction:column;
    gap:23px
  }

  .landing-footer nav {
    gap:18px
  }

  .feature-card {
    padding:24px 16px
  }

  .feature-card .title {
    font-size:16px
  }

  .feature-card .foot {
    flex-wrap:wrap
  }

  .feature-card .tag {
    max-width:100%
  }

}

@media(max-width:460px) {
  .feature-grid {
    grid-template-columns:minmax(0,1fr)
  }

  .feature-card:nth-child(odd) {
    border-right:0
  }

  .feature-card {
    padding:25px 4px
  }

  .feature-card .desc {
    font-size:14px
  }

  .hero h1 {
    font-size:39px
  }

  .preview-content {
    gap:10px;
    padding:15px
  }

  .preview-tile {
    font-size:9px
  }

  .preview-tile .product-icon {
    width:19px;
    height:19px
  }

  .preview-caption {
    font-size:7px;
    padding-inline:15px
  }

  .landing-header .platform-brand {
    font-size:19px
  }

  .landing-header .platform-brand>[data-product-icon] {
    width:30px;
    height:30px
  }

  .landing-header .lang-select {
    max-width:95px
  }

  .hero-actions {
    align-items:start;
    flex-direction:column;
    gap:8px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .feature-card {
    transition:none
  }

}

/* Keep the brand/language and navigation/account aligned in two mobile rows. */
@media(max-width:700px) {
  .landing-header {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:14px;
    row-gap:18px
  }

  .landing-header .platform-brand {
    grid-column:1;
    grid-row:1
  }

  .landing-header .lang-switcher {
    grid-column:2;
    grid-row:1;
    justify-self:end
  }

  .landing-header .landing-nav {
    grid-column:1;
    grid-row:2;
    order:initial;
    width:auto;
    justify-content:start;
    gap:24px
  }

  .landing-header .platform-account {
    grid-column:2;
    grid-row:2;
    justify-self:end
  }

}