/* VideoKOL portal — Figma A/4:278 and Mobile/4:280. Scoped to the home page. */
@font-face {
  font-family:PortalSans;
  src:url('/assets/portal/noto-sc.woff2') format('woff2');
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}
@font-face {
  font-family:PortalInter;
  src:url('/assets/portal/inter.woff2') format('woff2');
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}
:root {
  --vk-paper:#f7f8f4;
  --vk-white:#fff;
  --vk-ink:#183a32;
  --vk-muted:#62736c;
  --vk-green:#236b59;
  --vk-line:#dce5dc;
  --vk-soft:#eaf0e8;
  --vk-lime:#e3efad;
  --vk-dark:#193e34;
  --vk-dark-panel:#244b40;
  --vk-download:#eaf0d8;
  --vk-alternative:#eef1e7;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}
body {
  margin:0;
  background:var(--vk-paper);
  color:var(--vk-ink);
  font:400 14px/25px PortalSans,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure,ul,ol,dl {
  margin:0;
}
ul,ol {
  list-style:none;
  padding:0;
}
a {
  color:inherit;
  text-decoration:none;
}
button,select {
  font:inherit;
}
button,a,select,summary {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
  color:inherit;
}
button {
  border:0;
  background:none;
}
button:disabled {
  cursor:default;
}
[hidden] {
  display:none!important;
}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #688b30;
  outline-offset:5px;
}
h1 {
  font-size:62px;
  line-height:76px;
  font-weight:700;
}
h2 {
  font-size:36px;
  line-height:49px;
  font-weight:700;
}
h3 {
  font-size:28px;
  line-height:40px;
  font-weight:700;
}
.line {
  display:block;
}
p {
  overflow-wrap:break-word;
}
.container {
  width:calc(100% - 80px);
  max-width:1096px;
  margin-inline:auto;
}
.section {
  padding-block:80px;
}
.eyebrow {
  font:500 11px/18px PortalInter,PortalSans,sans-serif;
  color:var(--vk-green);
  margin-bottom:16px;
}
.small-text,small {
  font-size:11px;
  line-height:18px;
  color:var(--vk-muted);
}
.label {
  font-size:13px;
  line-height:20px;
  font-weight:500;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 22px;
  border-radius:8px;
  background:var(--vk-green);
  border:1px solid var(--vk-green);
  color:white;
  font-size:13px;
  line-height:20px;
  font-weight:500;
  gap:8px;
  transition:background .15s,box-shadow .15s;
  text-align:center;
}
.button:hover {
  background:#1a5949;
  box-shadow:0 3px 9px #183a3212;
}
.button.secondary {
  background:white;
  border-color:var(--vk-line);
  color:var(--vk-ink);
}
.button.secondary:hover,.chip:hover {
  background:var(--vk-soft);
}
.button.small {
  min-height:40px;
  padding:9px 16px;
}
.chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--vk-line);
  border-radius:6px;
  padding:6px 12px;
  background:white;
  font-size:13px;
  font-weight:500;
  line-height:20px;
  color:var(--vk-green);
  white-space:nowrap;
}
.chip[aria-selected=true] {
  background:var(--vk-green);
  color:white;
  border-color:var(--vk-green);
}
.chips,.tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.text-link {
  display:inline-flex;
  align-items:center;
  font-size:13px;
  line-height:20px;
  font-weight:500;
  color:var(--vk-green);
  padding:0;
  text-align:start;
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}
.card {
  background:white;
  border:1px solid var(--vk-line);
  border-radius:16px;
}
.icon {
  display:block;
  width:24px;
  height:24px;
  flex:0 0 24px;
  max-width:none;
}
.coast {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  padding:12px 20px;
  background:white;
  border:2px solid var(--vk-green);
  z-index:20;
}
.skip-link:focus {
  top:12px;
}
.site-header {
  height:83px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--vk-line);
  gap:24px;
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:700 21px/28px PortalInter,Arial,sans-serif;
  white-space:nowrap;
}
.brand-mark {
  width:31px;
  height:31px;
  background:var(--vk-green);
  border-radius:8px;
  display:grid;
  place-items:center;
}
.brand-mark .icon {
  width:24px;
  height:24px;
}
.nav-links {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px;
  line-height:20px;
  font-weight:500;
  color:var(--vk-muted);
}
.nav-link:hover {
  color:var(--vk-green);
}
.hero {
  text-align:center;
  padding-top:57px;
  min-height:797px;
  padding-bottom:80px;
}
.hero-eyebrow {
  font-size:11px;
  line-height:18px;
  color:var(--vk-green);
  margin-bottom:24px;
}
.hero-title .line:last-child {
  color:var(--vk-green);
}
.hero-description {
  margin-block:24px;
  color:var(--vk-muted);
  font-size:16px;
  line-height:30px;
}
.hero-actions {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-note {
  margin-top:12px;
}
.platforms {
  margin-top:52px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.download-steps {
  max-width:950px;
  margin:24px auto 0;
  background:var(--vk-soft);
  border-radius:16px;
  padding:24px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  text-align:start;
}
.download-steps li {
  display:flex;
  align-items:center;
  gap:14px;
}
.step-icon {
  display:grid;
  place-items:center;
  flex:0 0 44px;
  height:44px;
  border-radius:12px;
  background:white;
}
.download-steps .small-text {
  margin-top:4px;
}
.proof {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:28px;
  margin-top:40px;
  font-size:11px;
  line-height:18px;
  color:var(--vk-muted);
}
.proof li {
  display:flex;
  align-items:center;
  gap:0;
  min-width:150px;
}
.section-head {
  display:grid;
  grid-template-columns:590fr 446fr;
  gap:60px;
  align-items:center;
  margin-bottom:36px;
}
.section-head>p {
  color:var(--vk-muted);
}
.download-grid {
  display:grid;
  grid-template-columns:500fr 532fr;
  gap:64px;
  align-items:start;
}
.benefits {
  margin-top:28px;
}
.benefits li {
  display:flex;
  gap:14px;
  margin-bottom:22px;
}
.benefits .icon {
  flex-basis:22px;
}
.benefits p+p {
  margin-top:6px;
  color:var(--vk-muted);
}
.limit {
  margin-top:16px;
}
.download-demo {
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.demo-top {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:start;
  font-size:13px;
  line-height:20px;
}
.demo-top strong {
  font-weight:500;
}
.demo-top small {
  white-space:nowrap;
}
.download-photo {
  height:190px;
  position:relative;
  border-radius:8px;
  overflow:hidden;
}
.download-photo figcaption {
  position:absolute;
  inset-inline:0;
  bottom:0;
  background:#193e34e6;
  color:white;
  min-height:55px;
  padding:16px;
}
.download-panel {
  display:flex;
  flex-direction:column;
  gap:20px;
}
.download-panel>p {
  color:var(--vk-muted);
}
.workflow-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:24px;
}
.workflow-tabs button {
  border:1px solid var(--vk-line);
  background:white;
  border-radius:12px;
  padding:20px;
  text-align:start;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.workflow-tabs button:hover {
  border-color:#a5b7a8;
}
.workflow-tabs button[aria-selected=true] {
  background:var(--vk-soft);
}
.workflow-tabs .eyebrow {
  margin:0;
}
.workflow-tabs strong {
  font-size:13px;
  line-height:20px;
  font-weight:500;
}
.workbench {
  display:grid;
  grid-template-columns:360fr 648fr;
  gap:32px;
  padding:28px;
  border-radius:16px;
  background:var(--vk-soft);
  align-items:center;
  min-height:480px;
}
.workbench-copy {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.workbench-copy>p {
  color:var(--vk-muted);
}
.editor-demo {
  background:white;
  border:1px solid var(--vk-line);
  border-radius:8px;
  overflow:hidden;
  min-width:0;
  font-size:11px;
  line-height:18px;
  color:var(--vk-muted);
}
.editor-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px;
}
.editor-top span:first-child {
  color:var(--vk-ink);
}
.editor-top span:last-child {
  color:var(--vk-green);
}
.editor-middle {
  display:grid;
  grid-template-columns:92fr 448fr 108fr;
  height:200px;
}
.editor-media,.editor-properties {
  background:var(--vk-paper);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-wrap:anywhere;
}
.editor-properties {
  gap:14px;
}
.editor-media .coast {
  height:45px;
  border-radius:4px;
}
.editor-media span:first-child,.editor-properties span:first-child {
  color:var(--vk-ink);
}
.editor-preview {
  position:relative;
  align-self:center;
  background:var(--vk-dark);
  height:200px;
  padding-block:10px;
  min-width:0;
}
.editor-preview>.coast {
  height:180px;
}
.editor-subtitles {
  position:absolute;
  inset-inline:0;
  bottom:10px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:3px;
  text-align:center;
  color:white;
  text-shadow:0 1px 4px #0009;
}
.editor-subtitles span:first-child {
  font-size:13px;
  line-height:20px;
  font-weight:500;
}
.editor-transport {
  text-align:center;
  padding:8px;
  white-space:nowrap;
}
.timeline {
  background:var(--vk-paper);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.time-ruler {
  white-space:nowrap;
  overflow:hidden;
}
.track {
  display:flex;
  gap:8px;
  align-items:start;
}
.track>span {
  width:32px;
  flex-shrink:0;
  overflow-wrap:anywhere;
}
.clip {
  padding:5px;
  border-radius:6px;
  flex:1;
  min-width:0;
  background:var(--vk-soft);
  color:var(--vk-green);
}
.subtitle-clip {
  background:var(--vk-alternative);
}
.audio-clip {
  background:var(--vk-download);
}
.workflow-alternative {
  background:white;
  border:1px solid var(--vk-line);
  border-radius:12px;
  padding:32px;
  min-height:290px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}
.workflow-alternative h4 {
  font-size:28px;
  line-height:40px;
  margin:0;
}
.workflow-alternative>p {
  color:var(--vk-muted);
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
}
.feature-card {
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.feature-card>.eyebrow {
  margin:0;
}
.feature-card>p {
  color:var(--vk-muted);
}
.subtitle-demo {
  padding:20px;
  border-radius:8px;
  background:var(--vk-paper);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.subtitle-demo>p:first-child {
  color:var(--vk-green);
}
.subtitle-demo s {
  font-size:11px;
  line-height:18px;
  color:var(--vk-muted);
}
.export-card {
  background:var(--vk-dark);
  color:white;
  border-radius:16px;
}
.export-card>.eyebrow,.export-card>p {
  color:#bdcfc4;
}
.export-card>.text-link {
  color:var(--vk-lime);
}
.encode-demo {
  background:var(--vk-dark-panel);
  padding:20px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.encode-demo .demo-top {
  color:#bdcfc4;
}
.encode-demo small {
  color:inherit;
}
.encode-codec {
  font-size:16px;
  line-height:30px;
}
.encode-row {
  display:flex;
  justify-content:space-between;
  gap:16px;
}
.encode-row>span {
  font-size:11px;
  line-height:18px;
  color:#bdcfc4;
}
.encode-row strong {
  font-size:13px;
  line-height:20px;
  font-weight:500;
}
.small-tools {
  margin-top:28px;
  padding:24px;
  display:flex;
  gap:20px;
  align-items:center;
  border-radius:12px;
}
.small-tools>div:first-child {
  flex:0 0 240px;
}
.small-tools p+p {
  margin-top:4px;
}
.download-section {
  background:var(--vk-download);
  padding-block:80px;
}
.download-cta {
  display:grid;
  grid-template-columns:496fr 500fr;
  gap:100px;
}
.download-cta>div:first-child {
  display:flex;
  flex-direction:column;
  gap:18px;
}
.download-cta .eyebrow {
  margin:0;
}
.download-cta>div:first-child>p:last-child {
  color:var(--vk-muted);
  max-width:420px;
}
.package-card {
  padding:24px;
  background:white;
  border-radius:12px;
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.package-card>p:first-child {
  color:var(--vk-green);
}
.package-description {
  font-size:16px;
  line-height:30px;
}
.package-link {
  width:100%;
}
.release-note {
  margin-top:18px;
}
.faq-section {
  display:grid;
  grid-template-columns:380fr 616fr;
  gap:100px;
}
.faq-section .eyebrow {
  margin-bottom:18px;
}
.faq-list details {
  border-bottom:1px solid var(--vk-line);
}
.faq-list summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:71px;
  padding-block:20px;
  cursor:pointer;
}
.faq-list summary::-webkit-details-marker {
  display:none;
}
.faq-list summary>span:last-child {
  color:var(--vk-green);
  font-size:16px;
  transition:transform .15s;
}
.faq-list details[open] summary>span:last-child {
  transform:rotate(45deg);
}
.faq-list details>p {
  padding:0 24px 20px 0;
  color:var(--vk-muted);
}
.footer {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:center;
  padding-top:32px;
  padding-bottom:40px;
}
.footer .brand+p {
  margin-top:12px;
}
.footer-links {
  display:flex;
  gap:24px;
  align-items:center;
}
.footer-links .text-link {
  font-size:11px;
  color:var(--vk-muted);
  font-weight:400;
}
.langpick {
  max-width:150px;
  border:0;
  background:transparent;
  color:var(--vk-muted);
  font-size:11px;
  padding:6px;
  cursor:pointer;
}
.langpick option {
  background:white;
  color:var(--vk-ink);
}
dialog {
  border:1px solid var(--vk-line);
  border-radius:16px;
  background:var(--vk-paper);
  padding:28px;
  width:620px;
  max-width:calc(100vw - 36px);
  max-height:calc(100dvh - 48px);
  color:var(--vk-ink);
  box-shadow:0 25px 90px #102e3233;
}
dialog::backdrop {
  background:#10282066;
}
.dialog-heading {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.dialog-heading h2 {
  font-size:24px;
  line-height:34px;
}
.dialog-close {
  font-size:28px;
  line-height:36px;
  min-width:40px;
}
.export-options {
  margin:24px 0;
}
.export-options dt {
  font-weight:700;
  margin-top:18px;
}
.export-options dd {
  margin:6px 0 0;
  color:var(--vk-muted);
}
/* Breakpoints preserve the two approved artboards without fixed page heights. */
@media(min-width:1180px) {
  .container {
    width:calc(100% - 184px);
  }
}
@media(max-width:1050px) {
  .nav-links {
    gap:14px;
  }
  .section-head {
    gap:32px;
  }
  .download-grid {
    gap:32px;
  }
  .workbench {
    grid-template-columns:1fr;
    padding:28px;
    gap:28px;
  }
  .workbench-copy {
    max-width:600px;
  }
  .editor-demo {
    width:100%;
  }
  .download-cta,.faq-section {
    gap:48px;
  }
  .small-tools {
    flex-direction:column;
    align-items:start;
  }
  .small-tools>div:first-child {
    flex:auto;
  }
  .proof {
    gap:16px;
  }
  .download-steps {
    gap:20px;
  }
  .hero {
    min-height:797px;
  }
  h1 {
    font-size:54px;
    line-height:68px;
  }
}
@media(max-width:720px) {
  .container {
    width:calc(100% - 44px);
  }
  .site-header {
    height:71px;
    gap:12px;
  }
  .nav-links {
    display:none;
  }
  .brand {
    font-size:21px;
  }
  .site-header .button {
    white-space:nowrap;
  }
  .hero {
    min-height:0;
    padding-top:36px;
    padding-bottom:36px;
  }
  .hero-eyebrow {
    margin-bottom:20px;
  }
  .hero-title {
    font-size:37px;
    line-height:48px;
  }
  .hero-description {
    font-size:14px;
    line-height:25px;
    margin-block:22px 24px;
  }
  .hero-actions {
    flex-wrap:nowrap;
  }
  .hero-actions .button {
    flex:1;
    padding-inline:10px;
  }
  .platforms {
    margin-top:28px;
    max-width:340px;
    margin-inline:auto;
    column-gap:8px;
    row-gap:8px;
  }
  .download-steps {
    margin-top:24px;
    display:flex;
    flex-direction:column;
    padding:20px;
    gap:20px;
  }
  .proof {
    gap:10px 20px;
    margin-top:24px;
  }
  .proof li {
    width:calc(50% - 10px);
    min-width:0;
    justify-content:center;
  }
  .proof li:last-child {
    width:100%;
  }
  .section {
    padding-block:80px;
  }
  .hero+.section {
    padding-top:56px;
  }
  h2,h3 {
    font-size:29px;
    line-height:40px;
  }
  .section-head {
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:28px;
  }
  .download-grid {
    grid-template-columns:1fr;
    gap:32px;
  }
  .download-demo {
    padding:20px;
  }
  .download-photo {
    height:180px;
  }
  .download-copy h3[data-mobile-title] .line {
    display:none;
  }
  .download-copy h3[data-mobile-title]:before {
    content:attr(data-mobile-title);
    white-space:pre-line;
  }
  .download-panel h3 {
    font-size:28px;
    line-height:40px;
  }
  .workflow-tabs {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .workflow-tabs button {
    padding:14px;
  }
  .workbench {
    padding:20px;
    gap:28px;
    min-height:0;
  }
  .workbench-copy {
    gap:16px;
  }
  .editor-top {
    font-size:10px;
  }
  .editor-top span:last-child {
    display:none;
  }
  .editor-middle {
    grid-template-columns:1fr;
    height:184px;
  }
  .editor-preview {
    height:184px;
    padding-block:6px;
  }
  .editor-preview>.coast {
    height:172px;
  }
  .editor-media,.editor-properties {
    display:none;
  }
  .editor-transport {
    font-size:10px;
    padding:8px 2px;
  }
  .track .clip {
    font-size:10px;
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .feature-card {
    padding:24px;
  }
  .feature-card h3 {
    font-size:29px;
    line-height:40px;
  }
  .small-tools {
    padding:24px;
    gap:20px;
  }
  .download-section {
    padding-block:80px;
  }
  .download-cta {
    grid-template-columns:1fr;
    gap:32px;
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:28px;
  }
  .footer {
    display:block;
  }
  .footer-links {
    margin-top:24px;
    gap:20px;
    flex-wrap:wrap;
  }
  .langpick {
    max-width:140px;
  }
  .workflow-alternative {
    padding:20px;
  }
  .workflow-alternative h4 {
    font-size:24px;
    line-height:34px;
  }
}
@media(max-width:370px) {
  .hero-title {
    font-size:31px;
    line-height:43px;
  }
  .brand {
    font-size:18px;
    gap:7px;
  }
  .site-header .button {
    font-size:11px;
    padding-inline:10px;
  }
  .hero-actions .button {
    font-size:12px;
    padding-inline:8px;
  }
  .feature-card {
    padding:20px;
  }
  .chip {
    padding-inline:9px;
  }
  .hero-eyebrow {
    font-size:10px;
  }
  .proof {
    gap:10px;
  }
  .proof li {
    font-size:10px;
  }
  .small-tools {
    padding:20px;
  }
  .platform-tabs {
    gap:6px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}
.details-title .line {
  display:inline;
}
@media(max-width:720px) {
  .details-title .line {
    display:block;
  }
}