@import url('/cloud-public-base.css?v=20260810-1');

/* PR #39 desktop polish: preserve the working compressor and tighten presentation only. */
@media (min-width:701px){
  .cloud-header-inner{min-height:80px}
  .cloud-brand-link .brand-banner-img{width:min(380px,64vw);max-height:72px}
  .cloud-public .cloud-hero h1{overflow:visible;line-height:1.065;padding-bottom:.04em}
  .cloud-public .cloud-hero h1 span{padding-bottom:.16em;margin-bottom:-.07em}
  .workspace-section,.technology-section{padding:68px 0}
  .section-heading{margin-bottom:30px}
  .workflow-rail{min-height:640px;padding:32px 28px}
  .encoder-card{min-height:640px;padding:clamp(28px,4vw,44px)}
  .workflow-rail ol{margin:34px 0}
  .cloud-public .cloud-drop{padding:34px 22px 29px}
  .cloud-public .preset-fieldset{margin:22px 0 18px}
  .technology-grid article{min-height:270px;padding:24px}
  .tech-icon{margin-bottom:30px}
  .yologics-section{margin:30px 0 58px;padding:28px}
  .cloud-public .public-explainer{margin-bottom:42px}
}

@media (min-width:981px){
  .cloud-public .cloud-hero{min-height:570px;gap:clamp(38px,5vw,66px);padding:46px 0 56px}
  .hero-kicker{margin-bottom:17px}
  .cloud-public .cloud-hero .hero-lede{margin-top:20px;line-height:1.58}
  .hero-actions{margin-top:26px}
  .public-trust{margin-top:22px}
  .hero-system-card{padding:22px}
  .system-visual{height:270px;margin:8px 0}
}

/* PR64 refinement: keep the proven light UI, simplify hierarchy, and use the gradient only as an accent. */
.cloud-public .preset-option.hidden{display:none!important}
.cloud-public .preset-option.selected{
  border-color:#5d8ef2;
  background:linear-gradient(145deg,#ffffff 0%,#f7faff 68%,#f4fcf9 100%);
  box-shadow:0 0 0 2px rgba(72,126,235,.08),0 8px 20px rgba(43,96,176,.06);
}
.cloud-public .start-cloud,.cloud-public .download-result{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,#2778ff 0%,#526fe9 54%,#39cdb3 100%);
  box-shadow:0 10px 24px rgba(39,120,255,.20);
}
.cloud-public .start-cloud:hover:not(:disabled),.cloud-public .download-result:hover{
  box-shadow:0 13px 28px rgba(39,120,255,.27);
}
.cloud-public .public-security{
  border-color:#e2eaf4;
  background:#f8fbfe;
}
.cloud-public .result-grid .result-saved{
  border-color:#bfe8d8;
  background:#f2fbf7;
}
.cloud-public .result-grid .result-saved strong{color:#147a5c}
.cloud-public .mobile-upload-tip{
  margin:10px 0 0;
  padding:10px 12px;
  border:1px solid #c9ddf4;
  border-radius:12px;
  background:#f3f8ff;
  color:#58708e;
  font-size:.78rem;
  font-weight:650;
  line-height:1.45;
}

/* PR64 envy pass: premium, mobile-first, no pipeline changes. */
.cloud-public body{
  background:
    radial-gradient(circle at 78% 2%,rgba(39,120,255,.22),transparent 30rem),
    radial-gradient(circle at 13% 24%,rgba(105,230,223,.14),transparent 28rem),
    radial-gradient(circle at 50% 88%,rgba(116,239,197,.07),transparent 26rem),
    linear-gradient(180deg,#071426 0%,#06111f 46%,#030914 100%);
}
.cloud-public .workspace-layout{
  border-color:rgba(151,190,246,.25);
  background:linear-gradient(155deg,rgba(16,39,71,.93),rgba(6,18,35,.96));
  box-shadow:0 36px 95px rgba(0,8,24,.46),0 0 0 1px rgba(255,255,255,.03) inset;
}
.cloud-public .encoder-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% -8%,rgba(39,120,255,.08),transparent 19rem),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 62%,#f6faff 100%);
}
.cloud-public .encoder-card::before{
  position:absolute;
  inset:0 0 auto;
  height:1px;
  content:"";
  background:linear-gradient(90deg,transparent,rgba(82,195,232,.5),rgba(116,239,197,.42),transparent);
}

/* Super-smooth iPhone-style On-device / Cloud switch. */
.cloud-public .video-engine-switch{
  isolation:isolate!important;
  position:sticky!important;
  top:10px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  margin:0 0 12px!important;
  padding:7px!important;
  border:1px solid rgba(190,212,242,.92)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(246,250,255,.96),rgba(232,240,252,.92))!important;
  box-shadow:0 16px 38px rgba(27,63,103,.13),inset 0 1px rgba(255,255,255,.95)!important;
  backdrop-filter:blur(18px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;
}
.cloud-public .video-engine-switch::before{
  position:absolute;
  z-index:-1;
  top:7px;
  left:7px;
  width:calc(50% - 7px);
  height:calc(100% - 14px);
  border-radius:16px;
  content:"";
  background:linear-gradient(135deg,#2778ff 0%,#506eed 48%,#39cdb3 100%);
  box-shadow:0 15px 32px rgba(39,120,255,.28),0 2px 9px rgba(21,80,160,.16),inset 0 1px rgba(255,255,255,.32);
  transform:translateX(0);
  transition:transform .42s cubic-bezier(.18,.9,.2,1),box-shadow .24s ease,filter .24s ease;
  will-change:transform;
}
.cloud-public .video-engine-switch:has(.video-engine-button[data-engine="cloud"].is-active)::before{transform:translateX(100%)}
.cloud-public .video-engine-button{
  position:relative!important;
  z-index:1!important;
  min-height:56px!important;
  padding:0 16px!important;
  border:0!important;
  border-radius:16px!important;
  background:transparent!important;
  color:#58708f!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  transition:color .24s ease,transform .18s ease,text-shadow .24s ease!important;
}
.cloud-public .video-engine-button:hover{transform:translateY(-1px)!important;color:#243d60!important}
.cloud-public .video-engine-button:active{transform:scale(.982)!important}
.cloud-public .video-engine-button.is-active{
  color:#fff!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:0 1px 16px rgba(255,255,255,.2)!important;
}
.cloud-public .video-engine-status{
  min-height:24px!important;
  margin:0 2px 14px!important;
  color:#516984!important;
  font-size:.75rem!important;
  font-weight:800!important;
}
.cloud-public .video-engine-status::before{width:8px!important;height:8px!important;box-shadow:0 0 0 5px rgba(69,201,168,.12),0 0 16px rgba(69,201,168,.55)!important}
.cloud-public .engine-route-note{
  margin:0 0 14px!important;
  padding:12px 14px!important;
  border:1px solid rgba(85,213,180,.24)!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#eefbf7,#f7fffd)!important;
  color:#11634f!important;
  box-shadow:0 10px 24px rgba(19,113,90,.06)!important;
}

.cloud-public .workflow-rail{
  background:
    radial-gradient(circle at 22% 10%,rgba(105,230,223,.1),transparent 14rem),
    linear-gradient(170deg,#112946,#07192e 72%,#071426);
}
.cloud-public .workflow-rail li>span{width:34px;height:34px;flex-basis:34px;background:rgba(4,14,29,.74)}
.cloud-public .workflow-rail li.is-active>span{box-shadow:0 0 0 5px rgba(84,217,211,.09),0 0 24px rgba(84,217,211,.35)}
.cloud-public .workflow-rail li div strong{font-size:.9rem}
.cloud-public .rail-privacy{
  margin-top:auto;
  padding:15px;
  border:1px solid rgba(116,239,197,.1);
  border-radius:16px;
  background:rgba(116,239,197,.045);
}
.cloud-public .rail-privacy p{font-size:.68rem;color:#8fa7c3}
.cloud-public .rail-privacy strong{color:#e2f4ff}

.cloud-public .workspace-card-heading{
  align-items:center;
  padding-bottom:2px;
}
.cloud-public .workspace-card-heading h2{color:#071830;font-weight:900}
.cloud-public .workspace-eyebrow{color:#2872db}
.cloud-public .workspace-limit{
  border-color:#d5e5f8;
  color:#194b82;
  background:linear-gradient(180deg,#f7fbff,#edf5ff);
  box-shadow:0 8px 18px rgba(27,92,170,.07),inset 0 1px rgba(255,255,255,.9);
}
.cloud-public .workspace-limit[data-access-tier="large-file-pass"],
.cloud-public .workspace-limit[data-access-tier="large-file-pass-candidate"],
.cloud-public .workspace-limit[data-access-tier="pass-active"]{
  position:relative;
  border-color:rgba(47,207,169,.48);
  color:#087357;
  background:linear-gradient(135deg,#e6fff5,#edfff9 56%,#dcfff0);
  box-shadow:0 8px 19px rgba(40,189,148,.14),inset 0 1px rgba(255,255,255,.92);
}
.cloud-public .workspace-limit[data-access-tier="pass-active"]::before{
  content:'✓';
  display:inline-grid;
  place-items:center;
  width:14px;
  height:14px;
  margin-right:5px;
  border-radius:50%;
  background:#16aa7c;
  color:#fff;
  font-size:.58rem;
  font-weight:950;
  vertical-align:1px;
  box-shadow:0 0 0 3px rgba(22,170,124,.1);
}

.cloud-public .file-summary{
  border-color:#dce8f6;
  background:linear-gradient(135deg,#f8fbff,#f1f7ff);
  box-shadow:inset 0 1px rgba(255,255,255,.9);
}
.cloud-public .file-type-icon{background:linear-gradient(135deg,#e7f1ff,#eef8ff);box-shadow:inset 0 1px rgba(255,255,255,.95)}
.cloud-public .cloud-drop{
  border-color:#c7d9ef;
  background:
    radial-gradient(circle at 50% -20%,rgba(39,120,255,.11),transparent 14rem),
    linear-gradient(145deg,#fbfdff,#f4f9ff 70%,#f5fffb);
  box-shadow:inset 0 1px rgba(255,255,255,.9);
}
.cloud-public .cloud-drop:hover,.cloud-public .cloud-drop:focus-visible{box-shadow:0 18px 48px rgba(37,112,221,.13),inset 0 1px rgba(255,255,255,.9)}

.cloud-public .preset-grid{gap:14px}
.cloud-public .preset-option{
  overflow:hidden;
  border-color:#dce7f4;
  background:linear-gradient(145deg,#ffffff,#f9fcff);
  box-shadow:0 10px 26px rgba(23,67,118,.035),inset 0 1px rgba(255,255,255,.9);
}
.cloud-public .preset-option::after{
  position:absolute;
  inset:auto -28px -46px auto;
  width:112px;
  height:112px;
  border-radius:50%;
  content:"";
  background:rgba(39,120,255,.05);
  transition:transform .22s ease,opacity .22s ease;
}
.cloud-public .preset-option:hover::after{transform:scale(1.18);opacity:.85}
.cloud-public .preset-option:hover{border-color:#9fc1ec;box-shadow:0 14px 32px rgba(33,92,166,.08)}
.cloud-public .preset-option.selected{
  border-color:#5d8ef2;
  background:linear-gradient(145deg,#ffffff 0%,#f7faff 58%,#f1fffb 100%);
  box-shadow:0 0 0 2px rgba(72,126,235,.09),0 15px 36px rgba(35,97,184,.1),inset 0 1px rgba(255,255,255,.9);
}
.cloud-public .preset-option input{width:20px;height:20px;accent-color:#2778ff}
.cloud-public .preset-copy strong{font-size:1.06rem;font-weight:900}
.cloud-public .preset-copy small{color:#607590;font-size:.75rem}
.cloud-public .preset-badge{background:linear-gradient(135deg,#ddf8ed,#effdf7);color:#0c6c52}
.cloud-public .preset-resolution{color:#254d7d}

.cloud-public .public-security{
  background:linear-gradient(135deg,#f8fbfe,#f5fbff);
  box-shadow:inset 0 1px rgba(255,255,255,.85);
}
.cloud-public .security-copy strong{font-weight:900}
.cloud-public .consent input{border-radius:6px}
.cloud-public .start-cloud,.cloud-public .download-result{
  min-height:60px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#2678ff 0%,#526fe9 52%,#36cdb2 100%)!important;
  box-shadow:0 16px 34px rgba(39,120,255,.26),0 2px 6px rgba(0,0,0,.06)!important;
}
.cloud-public .start-cloud:hover:not(:disabled),.cloud-public .download-result:hover{filter:saturate(1.08);transform:translateY(-1px)}
.cloud-public .start-cloud:active,.cloud-public .download-result:active{transform:scale(.992)}

.cloud-public .progress-panel,.cloud-public .result-panel{padding-top:36px}
.cloud-public .progress-track{height:12px;border-radius:999px;box-shadow:inset 0 1px 2px rgba(25,63,105,.08)}
.cloud-public .progress-track div{border-radius:999px;box-shadow:0 0 18px rgba(76,201,239,.42)}
.cloud-public .progress-steps span{border:1px solid #e1eaf5;background:#f5f8fc}
.cloud-public .progress-steps span.is-current{border-color:#d1e5ff;background:#eaf3ff;color:#105cae}
.cloud-public .result-check{display:grid;place-items:center;border-radius:50%}
.cloud-public .result-grid div{background:linear-gradient(180deg,#f8fbff,#f3f8fe);box-shadow:inset 0 1px rgba(255,255,255,.85)}
.cloud-public .direct-download-result,.cloud-public .cloud-button.support,#anotherCloud{border-radius:14px!important}
.cloud-public .payment-confirmation{
  margin:10px 0 0;
  padding:12px 14px;
  border:1px solid #a9e5cf;
  border-radius:14px;
  background:linear-gradient(135deg,#e9fff5,#f3fffa);
  color:#087354;
  font-size:.88rem;
  font-weight:800;
  line-height:1.45;
}
.cloud-public .payment-confirmation.hidden{display:none}

.cloud-public .technology-grid article,.cloud-public .yologics-section,.cloud-public .public-explainer{box-shadow:0 22px 62px rgba(0,7,20,.2),inset 0 1px rgba(255,255,255,.04)}
.cloud-public .technology-grid article:hover{transform:translateY(-2px);border-color:rgba(116,239,197,.2);transition:transform .2s ease,border-color .2s ease}

/* MOBILE EXPERIENCE: compressor first, compact, readable, and thoughtless. */
@media(max-width:700px){
  .cloud-public .cloud-product-header{display:none}
  /* Keep the shared five-tool mobile app navigation available on Cloud. */
  .cloud-public .top-nav{display:block}
  .cloud-public .cloud-hero{display:none}
  .turnstile-widget{width:100%!important}

  .cloud-public .cloud-beta-page{width:min(100% - 20px,580px)}
  .cloud-public .workspace-section{padding:10px 0 42px}
  .cloud-public .section-heading{display:none}
  .cloud-public .workspace-layout{display:block;border-radius:24px;box-shadow:0 22px 62px rgba(0,8,24,.42)}
  .cloud-public .workflow-rail{display:none}

  /* The uploader, limit badge, and large-file checkout already explain access.
     Keep routine connection status quiet; surface only a warning or failure. */
  .cloud-public .revenue-launch-banner,
  .cloud-public .network-assist.is-neutral,
  .cloud-public .network-assist.is-working,
  .cloud-public .network-assist.is-good{display:none!important}
  .cloud-public .encoder-card{min-height:0;padding:12px 12px 16px;border-radius:24px!important}

  .cloud-public .video-engine-switch{top:8px!important;margin:0 0 8px!important;padding:5px!important;border-radius:18px!important}
  .cloud-public .video-engine-switch::before{top:5px;left:5px;width:calc(50% - 5px);height:calc(100% - 10px);border-radius:14px}
  .cloud-public .video-engine-button{min-height:48px!important;font-size:.92rem!important}
  .cloud-public .video-engine-status{margin:0 2px 8px!important;font-size:.7rem!important;color:#5d718b!important}

  .cloud-public .workspace-card-heading{margin-bottom:10px}
  .cloud-public .workspace-eyebrow{display:none}
  .cloud-public .workspace-card-heading h2{font-size:1.55rem}
  .cloud-public .workspace-limit{padding:7px 9px;font-size:.56rem;letter-spacing:.08em}

  .cloud-public .cloud-drop{
    padding:18px 12px 15px;
    border:1.5px dashed #a8c4e8;
    border-radius:18px;
    background:linear-gradient(145deg,#fbfdff,#f5f9ff);
    box-shadow:none;
  }
  .cloud-public .cloud-drop::before{display:none}
  .cloud-public .drop-icon{width:46px;height:46px;margin-bottom:8px;border-radius:14px}
  .cloud-public .cloud-drop h3{font-size:1.02rem}
  .cloud-public .cloud-drop p{margin:5px 0 11px;color:#667991;font-size:.79rem;line-height:1.4}
  .cloud-public .cloud-drop small,.cloud-public .engine-inline-note{display:none!important}
  .cloud-public .file-summary{padding:12px;border-radius:15px}.cloud-public .file-type-icon{flex-basis:38px;height:38px}.file-summary strong{font-size:.92rem}

  .cloud-public .preset-fieldset{margin:13px 0 10px}
  .cloud-public .preset-fieldset legend{margin-bottom:8px;color:#18304f;font-size:.76rem;font-weight:900}
  .cloud-public .preset-grid{grid-template-columns:1fr;gap:8px}
  .cloud-public .preset-option{
    min-height:58px;
    padding:10px 11px;
    border:1px solid #dbe5f1;
    border-radius:15px;
    background:#fff;
    box-shadow:none;
  }
  .cloud-public .preset-option:hover{transform:none}
  .cloud-public .preset-option.selected{
    border-color:#6795ef;
    background:linear-gradient(90deg,#f7faff,#f5fcf9);
    box-shadow:0 0 0 2px rgba(72,126,235,.07);
  }
  .cloud-public .preset-option input{width:18px;height:18px}
  .cloud-public .preset-copy strong{color:#10213a;font-size:.94rem}
  .cloud-public .preset-copy small{display:none}
  .cloud-public .preset-badge{display:none}
  .cloud-public .preset-resolution{right:11px;bottom:10px;color:#55708f;font-size:.61rem;opacity:.9}

  .cloud-public .public-security{margin:10px 0 8px;padding:0;border:0;background:transparent;box-shadow:none}
  .cloud-public .security-copy{display:none}
  .turnstile-widget{min-width:0;max-width:100%;margin:0 auto}

  .cloud-public .consent{margin-top:8px;color:#536881;font-size:.78rem;line-height:1.38}
  .cloud-public .consent a{color:#1767cf}
  .cloud-public .start-cloud{min-height:54px!important;margin-top:10px;border-radius:15px;font-size:.98rem}
  .cloud-public .start-cloud:disabled{opacity:.52}
  .cloud-public .capacity-note{display:none}

  .cloud-public .progress-panel,.cloud-public .result-panel{min-height:0;padding:20px 4px 8px}
  .progress-visual{width:92px;height:92px;margin:4px auto 14px}
  .cloud-public .progress-panel>strong{font-size:2.65rem}
  .progress-steps{gap:5px;margin-bottom:16px}.progress-steps span{padding:7px 4px;font-size:.56rem}
  .cloud-public .progress-panel p{font-size:.78rem}

  .cloud-public .result-subtitle{display:none}
  .cloud-public .result-grid{grid-template-columns:1fr 1fr;gap:7px;margin:18px 0}
  .cloud-public .result-grid .result-saved{grid-column:1/-1}
  .cloud-public .result-grid .result-saved strong{font-size:1.22rem}
  .cloud-public .download-result{min-height:56px!important;border-radius:15px}

  .cloud-public .technology-section{padding:42px 0}
  .cloud-public .technology-heading{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:18px}
  .cloud-public .technology-heading h2{font-size:2rem}
  .cloud-public .technology-grid{grid-template-columns:1fr;gap:10px}
  .cloud-public .technology-grid article{min-height:0;padding:18px;border-radius:18px}
  .cloud-public .tech-icon{margin-bottom:22px}
  .cloud-public .tech-label{position:static;display:block;margin-top:18px}
  .cloud-public .yologics-section{grid-template-columns:1fr;gap:12px;margin:22px 0 28px;padding:18px;border-radius:18px;text-align:left}
  .cloud-public .yologics-mark{width:54px;height:54px;border-radius:16px;font-size:1.45rem}
  .cloud-public .yologics-link{white-space:normal}
  .cloud-public .public-explainer{display:none}
}

@media(prefers-reduced-motion:reduce){
  .cloud-public .video-engine-switch::before,.cloud-public .video-engine-button,.cloud-public .preset-option,.cloud-public .cloud-drop,.cloud-public .start-cloud,.cloud-public .download-result{transition:none!important}
}


/* Recovery desktop pass: one focused cloud workflow, mobile unchanged. */
.cloud-public .progress-return-note{display:none}
@media (min-width:701px){
  .cloud-public .cloud-hero{display:none}
  .cloud-public .cloud-beta-page{width:min(100% - 48px,1120px)}
  .cloud-public .workspace-section{padding:28px 0 42px}
  .cloud-public .workspace-section>.section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 18px}
  .cloud-public .workspace-section>.section-heading>p{display:none}
  .cloud-public .workspace-section .section-index{margin-bottom:4px}
  .cloud-public .workspace-section h2{font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.08}
  .cloud-public .workspace-layout{display:block;border-radius:22px;background:transparent;box-shadow:none}
  .cloud-public .workflow-rail{display:none}
  .cloud-public .encoder-card{border-radius:22px;box-shadow:0 18px 48px rgba(0,8,24,.22)}
  .cloud-public .encoder-card #choosePanel{padding:clamp(24px,3vw,36px)}
  .cloud-public .progress-panel,.cloud-public .result-panel{padding:34px clamp(26px,5vw,68px)}
  .cloud-public .progress-steps,.cloud-public #progressDetail,.cloud-public .network-assist,.cloud-public .revenue-launch-banner{display:none!important}
  .cloud-public .progress-return-note{display:block;max-width:620px;margin:18px auto 0;color:#6d7f94;font-size:.9rem;line-height:1.5}
  .cloud-public .technology-section,.cloud-public .yologics-section,.cloud-public .public-explainer{display:none}
  .cloud-public .cloud-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1120px;margin:0 auto;padding:24px}
}

/* Above-the-fold desktop launch: show the tool first, not the site chrome. */
@media (min-width:701px){
  .cloud-public .cloud-product-header{display:none}
  .cloud-public .top-nav{min-height:66px}
  .cloud-public .nav-shell{min-height:66px}
  .cloud-public .cloud-beta-page{width:min(100% - 36px,1120px)}
  .cloud-public .workspace-section{padding:18px 0 30px}
  .cloud-public .workspace-section>.section-heading{min-height:0;margin:0 0 12px}
  .cloud-public .workspace-section>.section-heading>div{display:none}
  .cloud-public .workspace-section>.section-heading>.video-route-switch{margin-left:0}
  .cloud-public .workspace-section{padding-top:77px}
  .cloud-public .workspace-section>.section-heading{margin-bottom:30px}
  .cloud-public .video-route-switch{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:322px;margin:0;padding:2px;border:0;border-radius:12px;background:transparent;box-shadow:none}
  .cloud-public .video-route-label{display:none}
  .cloud-public .video-route-option{min-height:42px;padding:7px 11px;border-radius:10px;text-align:center}
  .cloud-public .video-route-option::before{inset:auto 22% 3px;width:56%;height:2px}
  .cloud-public .video-route-option b{font-size:.78rem}
  .cloud-public .video-route-option small{display:none}
  .cloud-public .video-route-option.is-active{background:rgba(39,120,255,.16);box-shadow:none}
  .cloud-public .encoder-card #choosePanel{padding:24px 30px}
  .cloud-public .workspace-card-heading{margin-bottom:12px}
  .cloud-public .workspace-card-heading h2{font-size:1.65rem}
  .cloud-public .cloud-drop{min-height:210px;padding:22px}
  .cloud-public .cloud-drop .drop-icon{transform:scale(.8)}
  .cloud-public .cloud-drop h3{margin:2px 0;font-size:1.1rem}
  .cloud-public .cloud-drop p{margin:0}
}


/* Shared desktop tool geometry: Cloud and On-device feel like one product. */
@media (min-width:821px){
  .cloud-public .cloud-beta-page{width:min(100% - 36px,980px)}
  .cloud-public .encoder-card #choosePanel{padding:20px 24px}
  .cloud-public .cloud-drop{min-height:185px;padding:20px;border-radius:18px}
  .cloud-public .cloud-drop .drop-icon{transform:scale(.72)}
  .cloud-public .cloud-drop h3{font-size:1.2rem}
  .cloud-public .cloud-drop p{font-size:.92rem}
}

/* Premium cloud-job progress: visual-only.  This deliberately keeps the existing
   upload, Cloud Run polling, persistence, and cancellation hooks unchanged. */
.cloud-public .progress-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "visual visual"
    "kicker kicker"
    "phase percent"
    "track track"
    "steps steps"
    "detail detail"
    "return return"
    "cancel cancel";
  align-items:center;
  column-gap:18px;
  max-width:680px;
  margin:0 auto;
  padding:34px clamp(18px,5vw,42px) 28px;
  border:1px solid #d9e5f4;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 0,rgba(70,207,194,.13),transparent 13rem),
    linear-gradient(150deg,#ffffff 0%,#f7faff 100%);
  box-shadow:0 22px 52px rgba(19,60,105,.15),inset 0 1px rgba(255,255,255,.96);
}
.cloud-public .progress-visual{
  position:relative;
  display:grid;
  grid-area:visual;
  place-items:center;
  width:128px;
  height:128px;
  margin:0 auto 14px;
}
.cloud-public .progress-halo{
  position:relative;
  display:grid;
  place-items:center;
  width:98px;
  height:98px;
  border-radius:30px;
  background:linear-gradient(145deg,#071d39,#123761);
  box-shadow:0 18px 38px rgba(8,34,68,.26),inset 0 1px rgba(255,255,255,.15);
}
.cloud-public .progress-halo::before,
.cloud-public .progress-halo::after{
  position:absolute;
  inset:-9px;
  border:2px solid transparent;
  border-top-color:#3b82ff;
  border-right-color:#60e4c3;
  border-radius:35px;
  content:"";
  animation:vsCloudProgressOrbit 2.2s linear infinite;
}
.cloud-public .progress-halo::after{
  inset:-17px;
  border-width:1px;
  border-top-color:rgba(96,228,195,.62);
  border-right-color:transparent;
  border-bottom-color:rgba(59,130,255,.42);
  animation-duration:3.8s;
  animation-direction:reverse;
}
.cloud-public .progress-visual img{
  position:absolute;
  width:56px;
  height:56px;
  border-radius:17px;
  object-fit:cover;
  filter:saturate(1.16) contrast(1.04);
  box-shadow:0 0 26px rgba(82,220,194,.18);
}
.cloud-public .progress-kicker{
  grid-area:kicker;
  margin:0 0 15px;
  color:#5274a0;
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.19em;
}
.cloud-public .phase-label{
  grid-area:phase;
  min-width:0;
  margin:0;
  color:#172d4d;
  font-size:clamp(1.2rem,3.5vw,1.58rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.15;
  text-align:left;
}
.cloud-public .progress-panel>strong{
  grid-area:percent;
  margin:0;
  color:#0c2343;
  font-size:clamp(2rem,7vw,3.2rem);
  font-weight:950;
  letter-spacing:-.065em;
  line-height:.96;
}
.cloud-public .progress-track{
  grid-area:track;
  height:14px;
  margin:20px 0 18px;
  border:1px solid #dbe6f4;
  background:#eaf0f8;
  box-shadow:inset 0 1px 2px rgba(25,63,105,.08);
}
.cloud-public .progress-track div{
  background:linear-gradient(90deg,#3f83f8 0%,#59cbe9 48%,#63e3bd 100%);
  box-shadow:0 0 18px rgba(76,201,239,.42);
}
.cloud-public .progress-steps{
  grid-area:steps;
  margin:0 0 16px;
}
.cloud-public .progress-steps span{
  border-color:#dce7f4;
  background:rgba(245,248,252,.92);
  color:#7588a1;
}
.cloud-public .progress-steps span.is-current{
  border-color:#c9e4f6;
  background:linear-gradient(135deg,#edf5ff,#effdf8);
  color:#1762a9;
  box-shadow:0 6px 14px rgba(42,112,202,.08);
}
.cloud-public #progressDetail{
  grid-area:detail;
  margin:0;
  padding:16px 18px;
  border:1px solid #d9e5f6;
  border-radius:18px;
  background:linear-gradient(135deg,#edf4ff,#f4f9ff);
  color:#667b98;
  font-size:.92rem;
  font-weight:750;
  line-height:1.5;
}
.cloud-public .progress-return-note{
  grid-area:return;
  margin:16px 6px 0;
  color:#647994;
  font-size:.86rem;
  line-height:1.48;
}
.cloud-public #cancelCloud{
  grid-area:cancel;
  width:100%;
  margin:18px 0 0;
  border:1px solid #cbd9ea;
  border-radius:15px;
  background:#fff;
  color:#19385f;
  box-shadow:inset 0 1px rgba(255,255,255,.95);
}
@keyframes vsCloudProgressOrbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .cloud-public .progress-halo::before,.cloud-public .progress-halo::after{animation:none}
}
@media (max-width:700px){
  .cloud-public .progress-panel{padding:28px 18px 20px;border-radius:22px}
  .cloud-public .progress-visual{width:114px;height:114px;margin-bottom:11px}
  .cloud-public .progress-halo{width:88px;height:88px;border-radius:27px}
  .cloud-public .progress-visual img{width:51px;height:51px;border-radius:16px}
  .cloud-public .progress-halo::before{inset:-8px}
  .cloud-public .progress-halo::after{inset:-14px}
  .cloud-public .progress-kicker{margin-bottom:12px;font-size:.61rem}
  .cloud-public .phase-label{font-size:1.22rem}
  .cloud-public .progress-panel>strong{font-size:2.65rem}
  .cloud-public .progress-track{margin:17px 0 14px}
  .cloud-public #progressDetail{padding:14px 15px;font-size:.8rem}
  .cloud-public .progress-return-note{margin:14px 2px 0;font-size:.78rem}
}


/* Release-candidate desktop workbench: fit the full setup flow into one focused view. */
@media (min-width:821px){
  .cloud-public .encoder-card #choosePanel{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "heading heading"
      "source presets"
      "security security"
      "consent action"
      "error error";
    gap:12px 16px;
    padding:18px 22px 16px;
  }
  .cloud-public .workspace-card-heading{
    grid-area:heading;
    min-height:40px;
    margin:0;
  }
  .cloud-public .workspace-card-heading h2{font-size:1.45rem}
  .cloud-public .cloud-drop,
  .cloud-public .file-summary{grid-area:source}
  .cloud-public .cloud-drop{
    min-height:210px;
    height:100%;
    padding:16px;
  }
  .cloud-public .cloud-drop .drop-icon{
    width:48px;
    height:48px;
    margin-bottom:8px;
    transform:none;
  }
  .cloud-public .cloud-drop h3{font-size:1.05rem}
  .cloud-public .cloud-drop p{font-size:.84rem}
  .cloud-public .cloud-drop small{font-size:.68rem}
  .cloud-public .file-summary{
    min-height:210px;
    align-self:stretch;
    padding:16px;
  }
  .cloud-public .preset-fieldset{
    grid-area:presets;
    min-width:0;
    margin:0;
  }
  .cloud-public .preset-fieldset legend{
    margin-bottom:7px;
    font-size:.78rem;
  }
  .cloud-public .preset-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .cloud-public .preset-option{
    min-height:96px;
    margin:0;
    padding:10px 11px;
    gap:9px;
    border-radius:12px;
  }
  .cloud-public .preset-option input{
    width:16px;
    height:16px;
  }
  .cloud-public .preset-copy strong{font-size:.9rem}
  .cloud-public .preset-copy small{
    margin-top:2px;
    font-size:.69rem;
    line-height:1.3;
  }
  .cloud-public .preset-badge{
    padding:4px 7px;
    font-size:.52rem;
  }
  .cloud-public .preset-resolution{
    right:10px;
    bottom:8px;
    font-size:.63rem;
  }
  .cloud-public .public-security{
    grid-area:security;
    min-height:68px;
    margin:0;
    padding:9px 12px;
    border-radius:13px;
  }
  .cloud-public .security-copy{gap:10px}
  .cloud-public .security-copy strong{font-size:.78rem}
  .cloud-public .security-copy p{
    margin-top:2px;
    font-size:.68rem;
    line-height:1.35;
  }
  .cloud-public .security-shield{
    width:32px;
    height:32px;
  }
  .cloud-public .turnstile-widget{transform:scale(.86);transform-origin:right center}
  .cloud-public .consent{
    grid-area:consent;
    align-self:center;
    margin:0;
    font-size:.72rem;
    line-height:1.35;
  }
  .cloud-public .start-cloud{
    grid-area:action;
    align-self:center;
    min-height:50px!important;
    margin:0;
    border-radius:13px!important;
    font-size:.9rem;
  }
  .cloud-public #startError{
    grid-area:error;
    margin:0;
    min-height:0;
    font-size:.75rem;
  }
  .cloud-public #mobileUploadTip{grid-area:error;margin:0}
  .cloud-public #paymentConfirmation{grid-area:error;margin:0}
  .cloud-public #startError:empty{display:none}
  .cloud-public .capacity-note{display:none}
}


/* Short-viewport finish: keep consent and the primary action inside the first desktop view. */
@media (min-width:821px){
  .cloud-public .encoder-card{min-height:0}
  .cloud-public .encoder-card #choosePanel{
    gap:10px 14px;
    padding:16px 20px 14px;
  }
  .cloud-public .workspace-card-heading{min-height:36px}
  .cloud-public .cloud-drop,
  .cloud-public .file-summary{min-height:180px}
  .cloud-public .cloud-drop{padding:12px}
  .cloud-public .cloud-drop .drop-icon{
    width:42px;
    height:42px;
    margin-bottom:5px;
  }
  .cloud-public .preset-fieldset legend{margin-bottom:5px}
  .cloud-public .preset-grid{gap:6px}
  .cloud-public .preset-option{
    min-height:84px;
    padding:8px 9px;
  }
  .cloud-public .preset-copy small{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size:.64rem;
    line-height:1.22;
  }
  .cloud-public .preset-badge{padding:3px 6px}
  .cloud-public .public-security{
    min-height:74px;
    height:74px;
    padding:4px 9px;
    overflow:hidden;
  }
  .cloud-public .security-copy p{display:none}
  .cloud-public .turnstile-widget{transform:scale(.82)}
  .cloud-public .consent{font-size:.68rem}
  .cloud-public .start-cloud{min-height:46px!important}
}


@media (min-width:821px){
  .cloud-public .encoder-card{padding:0}
}


/* Desktop shell finish: keep short Cloud states visually complete without changing mobile or compressor flow. */
@media (min-width:701px){
  .cloud-public body{
    display:flex;
    min-height:100vh;
    flex-direction:column;
  }
  .cloud-public .cloud-beta-page{
    flex:0 0 auto;
    margin-bottom:0;
  }
  .cloud-public .cloud-ambient-two{
    display:none;
  }
  .cloud-public .cloud-footer{
    box-sizing:border-box;
    width:min(calc(100% - 36px),1120px);
    margin-top:auto;
    margin-right:auto;
    margin-bottom:24px;
    margin-left:auto;
  }
}

/* Keep the richer, truthful job status visible on the desktop cloud card too. */
@media (min-width:701px){
  .cloud-public .progress-panel{padding:34px clamp(26px,5vw,42px) 28px}
  .cloud-public .progress-steps{display:flex!important}
  .cloud-public #progressDetail{display:block!important}
  .cloud-public .progress-return-note{margin:16px 6px 0}
}