/* Landing content under the upload card. Hidden while the flow shows progress or a result. */
.uf-section { padding:96px 0; }
.uf-soft-band { background:linear-gradient(180deg,var(--uf-soft),var(--uf-softer)); border-top:1px solid var(--uf-border); border-bottom:1px solid var(--uf-border); }
.uf-section-head { max-width:720px; margin:0 auto 52px; text-align:center; }
.uf-section-head.uf-left { margin:0; text-align:start; }
.uf-section-head h2, .uf-proof-copy h2, .uf-uses-grid h2 { margin-top:12px!important; font-size:clamp(30px,3.4vw,44px); line-height:1.12; letter-spacing:-.03em; font-weight:760; text-wrap:balance; }
.uf-section-head > p:not(.uf-kicker), .uf-lead { margin-top:16px!important; color:var(--uf-muted); font-size:18px; line-height:1.65; }
.uf-center { text-align:center; }
.uf-more-link { display:inline-flex; align-items:center; min-height:44px; font-weight:650; }
.uf-language-links { display:flex; flex-wrap:wrap; justify-content:center; gap:0 28px; }
.uf-fine { color:var(--uf-subtle); font-size:13px; line-height:1.6; }

/* Proof */
.uf-proof { padding-top:40px; }
.uf-proof-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:64px; align-items:center; }
.uf-window { overflow:hidden; border:1px solid var(--uf-border); border-radius:18px; background:var(--uf-night); box-shadow:var(--uf-shadow-lg); }
.uf-window-bar { display:flex; align-items:center; gap:7px; height:40px; padding:0 14px; background:#121d3d; color:#9fb0d6; font-size:13px; font-weight:600; }
.uf-window-bar i { width:10px; height:10px; border-radius:50%; background:#33416a; }
.uf-window-bar span { margin-inline-start:10px; }
.uf-proof-player { position:relative; aspect-ratio:16/9; background:#000; }
.uf-proof-player video { display:block; width:100%; height:100%; object-fit:cover; }
.uf-proof-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; border:0; background:linear-gradient(180deg,#0b143000,#0b14308c); color:#fff; font-size:16px; font-weight:650; cursor:pointer; }
.uf-proof-play span { display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%; background:#ffffffeb; box-shadow:0 10px 30px #0006; transition:transform .2s; }
.uf-proof-play svg { width:30px; height:30px; margin-left:4px; fill:var(--uf-blue); }
.uf-proof-play:hover span { transform:scale(1.06); }
.uf-proof-media figcaption { margin-top:14px; color:var(--uf-subtle); font-size:13px; line-height:1.6; }
.uf-proof-copy > p:not(.uf-kicker):not(.uf-fine) { margin-top:16px!important; color:var(--uf-muted); font-size:18px; line-height:1.65; }
.uf-file-list { display:grid; gap:10px; margin:28px 0 18px!important; padding:0; list-style:none; }
.uf-file-list a { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; min-height:56px; padding:10px 16px 10px 10px; border:1px solid var(--uf-border); border-radius:12px; background:var(--uf-surface); color:var(--uf-ink)!important; font-weight:560; text-decoration:none!important; box-shadow:var(--uf-shadow-xs); transition:border-color .15s,transform .15s; }
.uf-file-list a:hover { border-color:var(--uf-blue); transform:translateY(-1px); }
.uf-file-list b { display:inline-flex; align-items:center; justify-content:center; min-width:48px; height:34px; border-radius:8px; background:var(--uf-tint); color:var(--uf-link); font-size:12px; letter-spacing:.05em; }
.uf-file-list em { color:var(--uf-subtle); font-size:13px; font-style:normal; }

/* Steps */
.uf-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0; list-style:none; }
.uf-step { position:relative; padding:20px 20px 26px; border:1px solid var(--uf-border); border-radius:20px; background:var(--uf-surface); box-shadow:var(--uf-shadow); }
.uf-step h3 { margin-top:14px!important; font-size:20px; letter-spacing:-.02em; }
.uf-step p { margin-top:8px!important; color:var(--uf-muted); line-height:1.6; }
.uf-step-number { position:absolute; top:-14px; inset-inline-start:20px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--uf-blue); color:#fff; font-size:15px; font-weight:750; box-shadow:0 4px 12px #2854e84d; }
.uf-illustration { display:flex; align-items:center; justify-content:center; height:190px; padding:18px; border-radius:14px; background:radial-gradient(80% 90% at 50% 0%,var(--uf-tint),var(--uf-soft)); overflow:hidden; }
.uf-mock-drop { display:grid; justify-items:center; gap:6px; width:100%; max-width:240px; padding:18px; border:2px dashed #a9bbf6; border-radius:14px; background:var(--uf-surface); text-align:center; }
.uf-mock-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg,#3461f0,#6a4ff0); }
.uf-mock-icon svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.uf-mock-drop b { font-size:14px; } .uf-mock-drop small { color:var(--uf-muted); font-size:12px; }
.uf-mock-bar { display:block; width:100%; height:6px; border-radius:99px; background:var(--uf-tint); overflow:hidden; }
.uf-mock-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#3461f0,#6a4ff0); }
.uf-mock-langs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:260px; }
.uf-mock-langs span { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--uf-border); border-radius:999px; background:var(--uf-surface); color:var(--uf-ink-soft); font-size:13px; font-weight:600; box-shadow:var(--uf-shadow-xs); }
.uf-mock-langs .is-on { border-color:var(--uf-blue); background:var(--uf-blue); color:#fff; box-shadow:0 6px 16px #2854e840; }
.uf-mock-langs svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.uf-mock-player { position:relative; width:100%; max-width:280px; aspect-ratio:16/10; overflow:hidden; border-radius:12px; box-shadow:0 12px 28px #0d183833; }
.uf-mock-player img { width:100%; height:100%; object-fit:cover; display:block; }
.uf-mock-caption { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); padding:4px 10px; border-radius:4px; background:#000000b3; color:#fff; font-size:12px; font-weight:600; white-space:nowrap; }
.uf-mock-badge { position:absolute; top:10px; inset-inline-start:10px; padding:3px 9px; border-radius:999px; background:#ffffffeb; color:var(--uf-blue); font-size:11px; font-weight:750; }

/* Features */
.uf-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:0; list-style:none; }
.uf-feature-grid li { padding:28px; border:1px solid var(--uf-border); border-radius:18px; background:var(--uf-surface); transition:border-color .2s,box-shadow .2s,transform .2s; }
.uf-feature-grid li:hover { border-color:#b8c7f3; box-shadow:var(--uf-shadow); transform:translateY(-2px); }
.uf-feature-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; background:var(--uf-tint); }
.uf-feature-icon svg { width:24px; height:24px; fill:none; stroke:var(--uf-link); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.uf-feature-grid h3 { margin-top:18px!important; font-size:19px; letter-spacing:-.015em; }
.uf-feature-grid p { margin-top:8px!important; color:var(--uf-muted); line-height:1.6; }

/* Use cases */
.uf-uses-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.uf-uses-media { position:relative; overflow:hidden; border-radius:22px; box-shadow:var(--uf-shadow-lg); }
.uf-uses-media img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.uf-uses-caption { position:absolute; left:20px; right:20px; bottom:20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.uf-uses-caption span[lang] { padding:6px 14px; border-radius:6px; background:#000000b8; color:#fff; font-size:18px; font-weight:650; }
.uf-uses-caption .uf-pill { background:#fffffff0; }
.uf-use-list { display:grid; gap:12px; margin-top:28px!important; padding:0; list-style:none; }
.uf-use-list a { display:grid; gap:2px; padding:16px 18px; border:1px solid var(--uf-border); border-radius:14px; background:var(--uf-surface); color:var(--uf-ink)!important; text-decoration:none!important; transition:border-color .15s,box-shadow .15s; }
.uf-use-list a:hover { border-color:var(--uf-blue); box-shadow:var(--uf-shadow); }
.uf-use-list b { font-size:16px; } .uf-use-list span { color:var(--uf-muted); font-size:15px; }

/* Languages */
.uf-languages .uf-section-head { margin-bottom:32px; }
.uf-language-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:980px; margin:0 auto 18px!important; padding:0; list-style:none; }
.uf-language-chips a { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid var(--uf-border); border-radius:999px; background:var(--uf-surface); color:var(--uf-ink-soft)!important; font-weight:560; text-decoration:none!important; transition:border-color .15s,color .15s; }
.uf-language-chips a:hover { border-color:var(--uf-blue); color:var(--uf-link)!important; }

/* Pricing summary */
.uf-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:900px; margin:0 auto; }
.uf-plan { position:relative; display:flex; flex-direction:column; padding:32px; border:1px solid var(--uf-border); border-radius:20px; background:var(--uf-surface); box-shadow:var(--uf-shadow); }
.uf-plan.is-featured { border:1.5px solid var(--uf-blue); box-shadow:0 2px 6px #2854e814,0 24px 60px #2854e821; }
.uf-plan h3 { font-size:20px; }
.uf-plan-price { margin-top:10px!important; font-family:var(--uf-display); font-size:40px; font-weight:780; letter-spacing:-.035em; line-height:1.1; }
.uf-plan.is-featured .uf-plan-price { font-size:28px; letter-spacing:-.02em; padding:8px 0 4px; }
.uf-plan-price span { font-family:var(--uf-body); font-size:16px; font-weight:500; letter-spacing:0; color:var(--uf-muted); }
.uf-plan .uf-includes { flex:1; margin:20px 0 24px!important; }
.uf-plan-flag { position:absolute; top:-13px; inset-inline-start:28px; padding:4px 12px; border-radius:999px; background:var(--uf-blue); color:#fff; font-size:13px; font-weight:700; }

/* FAQ */
.uf-faq-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:64px; align-items:start; }
.uf-faq { display:grid; gap:12px; }
.uf-faq details { border:1px solid var(--uf-border); border-radius:14px; background:var(--uf-surface); transition:border-color .15s,box-shadow .15s; }
.uf-faq details[open] { border-color:#b8c7f3; box-shadow:var(--uf-shadow); }
.uf-faq summary { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:60px; padding:16px 20px; cursor:pointer; font-size:17px; font-weight:650; list-style:none; }
.uf-faq summary::-webkit-details-marker { display:none; }
.uf-faq summary::after { content:""; flex:none; width:22px; height:22px; border-radius:50%; background:var(--uf-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232450e0' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat; transition:transform .2s; }
.uf-faq details[open] summary::after { transform:rotate(45deg); }
.uf-faq details p { padding:0 20px 20px; color:var(--uf-muted); line-height:1.7; }

/* Closing call to action */
.uf-cta-band { padding:0 0 96px; }
.uf-cta-inner { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:56px; border-radius:28px; background:radial-gradient(60% 120% at 100% 0%,#4b3bd8 0%,transparent 60%),linear-gradient(135deg,#132060,#0b1430); color:#fff; box-shadow:var(--uf-shadow-lg); }
.uf-cta-inner h2 { color:#fff; font-size:clamp(28px,3vw,40px); letter-spacing:-.03em; line-height:1.15; }
.uf-cta-inner p { margin-top:10px!important; color:#c9d3ee; font-size:18px; }
.uf-cta-button { background:#fff; color:var(--uf-blue-deep)!important; box-shadow:0 8px 24px #0006; }
.uf-cta-button:hover { background:#eef2ff; }

@media(max-width:1024px) { .uf-section { padding:80px 0; } .uf-proof-grid, .uf-uses-grid { gap:40px; } .uf-feature-grid { grid-template-columns:repeat(2,1fr); } .uf-faq-grid { gap:40px; } }
@media(max-width:900px) { .uf-proof-grid, .uf-uses-grid, .uf-faq-grid { grid-template-columns:1fr; } .uf-steps { grid-template-columns:1fr; max-width:560px; margin:0 auto; gap:32px; } .uf-uses-media { order:2; } .uf-section-head.uf-left { text-align:center; } }
@media(max-width:640px) {
    .uf-section { padding:64px 0; } .uf-proof { padding-top:24px; } .uf-section-head { margin-bottom:36px; } .uf-section-head > p:not(.uf-kicker), .uf-lead, .uf-proof-copy > p:not(.uf-kicker):not(.uf-fine) { font-size:16px; }
    .uf-feature-grid { grid-template-columns:1fr; } .uf-feature-grid li { padding:22px; }
    .uf-plan-grid { grid-template-columns:1fr; } .uf-plan { padding:26px 22px; }
    .uf-language-chips a { min-height:44px; padding:0 14px; font-size:15px; }
    .uf-cta-band { padding-bottom:64px; } .uf-cta-inner { flex-direction:column; align-items:flex-start; padding:36px 24px; border-radius:22px; } .uf-cta-button { width:100%; }
    .uf-proof-play span { width:64px; height:64px; } .uf-uses-caption span[lang] { font-size:15px; }
}
