/* YT Video Save: shared visual and interaction refinement. */
:root {
    --ink: #142037;
    --muted: #526174;
    --red: #d62b3d;
    --red-dark: #b51f31;
    --line: #e3e7ef;
    --paper: #f7f8fc;
}
body.ytvs-site { color: var(--ink); }
.ytvs-site :focus-visible {
    outline: 2px solid var(--red-dark);
    outline-offset: 3px;
}
.ytvs-site .url-entry input:focus,
.ytvs-site .url-entry input:focus-visible {
    outline: none;
    box-shadow: none;
}
.ytvs-site .elementor .hero .hero-form-shell.elementor-widget:focus-within,
.ytvs-site .results-search:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(214, 43, 61, .09), 0 10px 32px rgba(20, 32, 55, .04);
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .96);
    border-bottom-color: rgba(226, 230, 238, .85);
    backdrop-filter: blur(16px);
}
body.admin-bar .site-header { top: 32px; }
.header-inner { height: 82px; }
.brand { font-size: 23px; letter-spacing: -.9px; }
.brand-symbol { width: 37px; height: 37px; }
.primary-navigation a { font-size: 13px; line-height: 82px; }
.primary-navigation a[aria-current=page]:after { width: 22px; bottom: 19px; }
.language-switcher summary {
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    padding-inline: 5px;
}
.language-switcher summary:hover { color: var(--red); }
.language-options {
    top: calc(100% + 8px);
    width: 240px;
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(20, 32, 55, .13);
}
.language-options a { min-height: 44px; }
.menu-toggle { min-width: 44px; min-height: 44px; border-radius: 9px; }
.menu-toggle:hover, .menu-toggle[aria-expanded=true] { background: #f3f5fa; }
.ytvs-site .elementor .hero.e-con {
    padding: 61px 0 32px;
    background:
        radial-gradient(ellipse at 20% 24%, rgba(255, 224, 211, .39), transparent 43%),
        radial-gradient(ellipse at 87% 78%, rgba(222, 232, 252, .43), transparent 43%),
        linear-gradient(180deg, #fffcfa, #fbfcff);
}
.hero:before, .hero:after { opacity: .28; }
.ytvs-site .elementor .hero h1 {
    max-width: 900px;
    font-size: clamp(48px, 5.3vw, 75px);
    line-height: 1.07;
    letter-spacing: -.06em;
    margin-bottom: 20px;
}
.hero-title-tail { color: var(--red); }
.hero-title-tail .red-dot { color: var(--ink); }
.hero-description {
    max-width: 610px;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 29px;
}
.ytvs-site .elementor .hero .hero-form-shell.elementor-widget {
    max-width: 850px !important;
    padding: 9px;
    border: 1px solid #dce1eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 42px rgba(20, 32, 55, .07), 0 2px 5px rgba(20, 32, 55, .025);
}
.ytvs-site .ytvs-form { grid-template-columns: minmax(0, 1fr) 166px; gap: 10px; }
.ytvs-site .url-entry { min-height: 58px; padding-left: 14px; gap: 11px; }
.ytvs-site .url-entry input { height: 58px; font-size: 15px; }
.ytvs-site .paste-button { min-width: 44px; min-height: 44px; padding: 10px 12px; background: #f2f4f8; font-size: 12px; }
.ytvs-site .paste-button .icon { width: 15px; height: 15px; flex-basis: 15px; }
.ytvs-site .form-submit { min-height: 58px; border-radius: 11px; font-size: 14px; background: var(--red); }
.ytvs-site .form-submit:hover { background: var(--red-dark); }
.ytvs-site .hero-responsibility { margin-top: 18px; font-size: 11px; line-height: 1.85; color: #617083; }
.hero-responsibility a { text-decoration-color: #9ba8b8; text-underline-offset: 3px; }
.format-strip { margin-top: 28px; padding-top: 18px; gap: 26px; border-top-color: #dfe4ed; }
.format-strip > span { font-size: 10px; letter-spacing: .08em; }
.format-strip strong { font-size: 15px; color: #596a81; }
.section { padding-block: 75px; }
.section-heading { margin-bottom: 35px; }
.section-heading h2, .clarity-copy h2, .faq-intro h2 { letter-spacing: -.05em; }
.section-heading p { font-size: 15px; line-height: 1.85; }
.eyebrow { font-size: 10px; letter-spacing: .13em; }
.step h3 { font-size: 23px; }
.step p { font-size: 14px; max-width: 310px; }
.step-visual { height: 60px; background: #f8f9fc; border-color: #e3e7ef; border-radius: 11px; }
.mini-label { font-size: 10px; }
.mini-label.selected { background: #fff1ed; border-color: #f5d3ce; color: #a92736; }
.section-tint { background: #f5f7fc; }
.choice-grid { gap: 25px; }
.choice-card {
    padding: 34px 36px;
    border-radius: 22px;
    border-color: #eadfdf;
    background: linear-gradient(135deg, #fff, #fff7f3);
    box-shadow: 0 4px 15px rgba(20, 32, 55, .025);
}
.choice-card.audio { border-color: #dce4f1; background: linear-gradient(135deg, #fff, #f0f5ff); }
.choice-card:hover { border-color: #d7969d; box-shadow: 0 12px 30px rgba(20, 32, 55, .065); transform: translateY(-3px); }
.choice-card.audio:hover { border-color: #a5bbdf; }
.choice-top { margin-bottom: 25px; }
.choice-icon { width: 52px; height: 52px; border-radius: 15px; background: #ffe9e2; color: #b82736; }
.choice-card.audio .choice-icon { background: #e5edfc; color: #355b9e; }
.choice-type { font-size: 10px; color: #5d6c80; }
.choice-card h3 { font-size: 31px; }
.choice-card p { font-size: 15px; line-height: 1.8; }
.quality-tags { gap: 8px; margin: 22px 0 28px; }
.quality-tags span { padding: 5px 9px; font-size: 11px; background: rgba(255, 255, 255, .8); border-color: #e0e4eb; }
.choice-card .text-link { font-size: 13px; }
.feature-icon { width: 45px; height: 45px; flex-basis: 45px; border-radius: 13px; background: #f6f8fc; }
.feature h3 { font-size: 16px; }
.feature p { font-size: 14px; }
.clarity-copy > p { line-height: 1.85; }
.limit-note { background: #fff6ef; border-color: #f2e0d5; color: #785146; font-size: 13px; }
.faq-layout { grid-template-columns: 330px minmax(0, 1fr); gap: 75px; }
.faq-list summary { padding-block: 23px; font-size: 15px; }
.faq-list details > p { font-size: 14px; line-height: 1.9; }
.faq-list details[open] summary { color: #b32637; }
.faq-list summary:hover { color: var(--red); }
.cta-band {
    padding: 36px 42px;
    margin-bottom: 65px;
    border-radius: 20px;
    background: radial-gradient(ellipse at 100% 100%, #293954, transparent 65%), #142037;
    box-shadow: 0 12px 25px rgba(20, 32, 55, .08);
}
.cta-band h2 { font-size: 30px; }
.cta-band p { font-size: 14px; color: #c5cede; }
.cta-band .button { font-size: 13px; min-height: 48px; }
.site-footer { background: #fcfcfe; }
.footer-grid { padding-block: 43px; gap: 30px; }
.footer-brand-block > p { font-size: 13px; line-height: 1.85; }
.footer-grid h2 { font-size: 12px; margin-bottom: 13px; }
.footer-grid > div > a:not(.brand) { min-height: 38px; font-size: 12px; padding-block: 8px; line-height: 1.7; }
.footer-language { font-size: 12px; }
.footer-bottom, .footer-bottom p { font-size: 11px; color: #5b6b80; }
.footer-bottom a { min-height: 32px; display: inline-flex; align-items: center; }
.document-hero { background: linear-gradient(120deg, #fff9f4, #f3f7fd); padding-block: 58px; }
.document-hero h1 { font-size: clamp(36px, 4.4vw, 56px); }
.document-body { max-width: 820px; }
.document-body h2 { margin-top: 37px; }
.document-body .note-box, .contact-card { border-radius: 12px; background: #f6f8fc; }
.results-main { background: linear-gradient(180deg, #f8f9fd, #f3f6fc); padding-bottom: 50px; }
.results-heading { padding-top: 26px; }
.results-heading .back-link { margin-bottom: 28px; font-size: 12px; }
.results-heading h1 { font-size: clamp(34px, 4vw, 49px); }
.results-heading > p { font-size: 15px; }
.results-search { border-radius: 16px; box-shadow: 0 6px 20px rgba(20, 32, 55, .035); }
.results-notice { font-size: 14px; border-radius: 13px; }
.loading-panel { border-radius: 18px; padding-block: 48px; }
.video-summary { padding: 24px; gap: 27px; border-radius: 19px; border-color: #dee5ef; box-shadow: 0 5px 20px rgba(20, 32, 55, .025); }
.video-thumbnail { border-radius: 11px; }
.video-summary h2 { font-size: 27px; }
.video-summary p { font-size: 13px; }
.video-summary a { font-size: 12px; min-height: 32px; display: inline-flex; align-items: center; }
.video-summary .eyebrow { font-size: 10px; }
.format-heading h2 { font-size: 30px; }
.format-heading p { font-size: 13px; }
.format-tabs { padding: 5px; border-radius: 12px; background: #e7ecf5; }
.format-tabs button { min-height: 44px; padding: 10px 17px; border-radius: 8px; font-size: 13px; }
.format-grid { gap: 15px; }
.format-option {
    min-height: 178px;
    padding: 22px;
    border-radius: 15px;
    border-color: #dfe5ef;
    box-shadow: 0 3px 8px rgba(20, 32, 55, .02);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.format-option:hover { transform: translateY(-2px); border-color: #dc929d; box-shadow: 0 7px 20px rgba(20, 32, 55, .06); }
.format-option.is-selected { border-color: #d62b3d; background: #fff7f5; box-shadow: 0 0 0 1px #d62b3d; }
.format-option .quality { font-size: 29px; }
.format-option .format-type { font-size: 10px; color: #596a80; }
.format-option .size { font-size: 13px; color: #526174; }
.format-option .option-action { font-size: 12px; padding-top: 13px; }
.format-option .limit-badge { font-size: 9px; }
.format-option.is-oversized { background: #f7f8fb; border-style: dashed; }
.format-option.is-oversized:hover { border-color: #a0a9b7; }
.formats-note { font-size: 12px; line-height: 1.8; }
.conversion-panel { padding: 28px; border-radius: 18px; border-color: #f0c1c5; }
.conversion-top h2 { font-size: 23px; }
.conversion-top p { font-size: 13px; }
.close-conversion { width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; border-radius: 9px; }
.close-conversion:hover { background: #f2f4f8; }
.progress-track { height: 8px; }
.progress-label { font-size: 12px; margin-top: 12px; }
.conversion-panel #download-ready > p { font-size: 14px; }
.conversion-panel .download-expiry { font-size: 12px; }
.conversion-panel[data-state=ready] { border-color: #a7c9bc; background: linear-gradient(135deg, #fff, #f4fbf7); }
.conversion-panel[data-state=ready] .conversion-symbol { color: #1d6a4d; background: #e3f3e9; }
.conversion-panel[data-state=ready] .progress-track span { background: #267a58; }
.conversion-panel[data-state=error] { border-color: #e7afb6; }
.conversion-panel[data-state=error] .conversion-symbol { background: #fff0f1; }
.results-help { font-size: 12px; gap: 22px; }
.responsible-note { font-size: 11px; line-height: 1.8; }
@media (max-width: 1100px) {
    .ytvs-site:not(.ytvs-lang-en) .header-inner { height: 74px; }
    .ytvs-site:not(.ytvs-lang-en) .primary-navigation { top: 74px; }
}
@media (max-width: 820px) {
    .header-inner { height: 74px; }
    .primary-navigation a { line-height: 74px; }
    .section { padding-block: 59px; }
    .faq-layout { grid-template-columns: 245px minmax(0, 1fr); gap: 34px; }
    .choice-card { padding: 27px; }
    .choice-card h3 { font-size: 27px; }
    .video-summary { grid-template-columns: 200px minmax(0, 1fr); }
    .video-summary h2 { font-size: 24px; }
}
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media (max-width: 640px) {
    .header-inner, .ytvs-site:not(.ytvs-lang-en) .header-inner { height: 70px; gap: 7px; }
    .brand { font-size: 20px; gap: 7px; }
    .brand-symbol { width: 33px; height: 33px; }
    .menu-toggle { width: 44px; padding: 11px; }
    .primary-navigation { top: 70px; padding: 9px 14px; }
    .primary-navigation a { min-height: 44px; line-height: 1.5; font-size: 14px; }
    .ytvs-site .elementor .hero.e-con { padding: 35px 0 27px; }
    .ytvs-site .elementor .hero h1 { font-size: clamp(40px, 10.4vw, 55px); margin-bottom: 18px; line-height: 1.1; }
    .ytvs-site:not(.ytvs-lang-en) .elementor .hero h1 { font-size: clamp(31px, 8.9vw, 45px); }
    .hero-description { font-size: 15px; line-height: 1.8; margin-bottom: 24px; }
    .ytvs-site .elementor .hero .hero-form-shell.elementor-widget { padding: 7px; border-radius: 16px; }
    .ytvs-site .ytvs-form { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    .ytvs-site .url-entry, .ytvs-site:not(.ytvs-lang-en) .url-entry { min-height: 54px; padding-left: 8px; gap: 8px; }
    .ytvs-site .url-entry input, .ytvs-site:not(.ytvs-lang-en) .url-entry input { height: 54px; font-size: 16px; padding-block: 14px; }
    .ytvs-site .paste-button, .ytvs-site:not(.ytvs-lang-en) .paste-button { min-width: 44px; min-height: 44px; padding: 11px; margin-right: 0; }
    .ytvs-site .paste-button span { display: none; }
    .ytvs-site .form-submit { min-height: 52px; font-size: 14px; padding-block: 14px; }
    .ytvs-site .hero-responsibility { font-size: 11px; margin-top: 16px; line-height: 1.85; }
    .hero-responsibility a { display: inline-block; padding-block: 3px; }
    .format-strip { margin-top: 23px; padding-top: 17px; gap: 15px; }
    .format-strip > span { font-size: 9px; max-width: 100px; line-height: 1.6; }
    .format-strip strong { font-size: 13px; }
    .section { padding-block: 43px; }
    .section-heading { margin-bottom: 28px; }
    .section-heading h2, .clarity-copy h2, .faq-intro h2 { font-size: 31px; }
    .section-heading p, .step p, .choice-card p, .clarity-copy > p, .faq-intro p { font-size: 14px; line-height: 1.85; }
    .eyebrow { font-size: 10px; }
    .steps-grid { gap: 25px; }
    .step { padding-left: 45px; }
    .step h3 { font-size: 21px; }
    .step-number { width: 31px; height: 31px; font-size: 11px; }
    .step-visual { margin-top: 13px; min-height: 51px; height: auto; padding: 12px; font-size: 11px; }
    .mini-label { font-size: 9px; }
    .choice-grid { gap: 17px; }
    .choice-card { padding: 25px; border-radius: 18px; }
    .choice-card h3 { font-size: 29px; }
    .choice-icon { width: 46px; height: 46px; border-radius: 13px; }
    .choice-top { margin-bottom: 20px; }
    .quality-tags { margin-block: 18px 23px; }
    .quality-tags span { font-size: 11px; padding: 4px 7px; }
    .choice-card .text-link { font-size: 13px; }
    .feature-list { gap: 23px; }
    .feature h3 { font-size: 15px; }
    .feature p { font-size: 14px; }
    .feature-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
    .feature { gap: 13px; }
    .limit-note { font-size: 12px; padding: 15px; }
    .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 21px; }
    .faq-list summary { font-size: 14px; padding-block: 20px; }
    .faq-list details > p { font-size: 14px; padding-right: 12px; }
    .cta-band { padding: 27px; border-radius: 18px; margin-bottom: 43px; }
    .cta-band h2 { font-size: 28px; }
    .cta-band p { font-size: 14px; }
    .cta-band .button { min-height: 48px; font-size: 13px; }
    .footer-grid { padding-block: 33px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 25px 17px; }
    .footer-brand-block { grid-column: 1 / -1; }
    .footer-grid > div:nth-child(3) { grid-column: auto; grid-row: auto; }
    .footer-grid > div:last-child { grid-column: 1 / -1; grid-row: auto; padding-top: 19px; border-top: 1px solid #e5e9f0; }
    .footer-grid > div:last-child > a { display: inline-flex; margin-right: 16px; }
    .footer-grid h2 { font-size: 12px; margin-bottom: 8px; }
    .footer-grid > div > a:not(.brand) { min-height: 44px; font-size: 12px; line-height: 1.7; padding-block: 10px; }
    .footer-brand-block > p { font-size: 13px; margin-block: 13px; }
    .footer-bottom, .footer-bottom p, .footer-bottom p:nth-child(2) { font-size: 11px; line-height: 1.8; }
    .footer-bottom a { font-size: 12px; min-height: 44px; }
    .document-hero { padding-block: 38px; }
    .document-hero h1 { font-size: 37px; }
    .document-hero p { font-size: 15px; }
    .document-body p, .document-body li { font-size: 15px; line-height: 1.9; }
    .document-body { padding-block: 35px 45px; }
    .results-heading { padding-top: 21px; }
    .results-heading h1 { font-size: 34px; }
    .results-heading > p { font-size: 14px; }
    .results-heading .back-link { margin-bottom: 24px; font-size: 12px; }
    .results-search { padding: 7px; border-radius: 15px; }
    .video-summary { grid-template-columns: minmax(0, 1fr); padding: 17px; gap: 18px; border-radius: 17px; }
    .video-summary h2 { font-size: 24px; }
    .video-summary p { font-size: 13px; }
    .video-summary a { min-height: 40px; font-size: 12px; }
    .format-heading h2 { font-size: 29px; }
    .format-heading p { font-size: 13px; }
    .format-tabs { width: 100%; }
    .format-tabs button { min-height: 44px; flex: 1; padding: 10px; font-size: 13px; }
    .format-grid { gap: 11px; }
    .format-option { min-height: 169px; padding: 18px 14px; border-radius: 13px; }
    .format-option .quality { font-size: 24px; }
    .format-option .format-type { font-size: 10px; letter-spacing: .06em; }
    .format-option .size { font-size: 12px; }
    .format-option .option-action { font-size: 12px; }
    .formats-note, .responsible-note { font-size: 11px; }
    .conversion-panel { padding: 21px 18px; border-radius: 17px; }
    .conversion-top { gap: 10px; }
    .conversion-top h2 { font-size: 20px; }
    .conversion-top p { font-size: 12px; }
    .conversion-symbol { width: 38px; height: 38px; flex-basis: 38px; }
    .close-conversion { padding: 10px; margin-top: -5px; margin-right: -6px; }
    .progress-label, .results-help { font-size: 11px; }
    .conversion-panel #download-ready > p { font-size: 13px; }
    .conversion-panel .button { min-height: 52px; font-size: 14px; }
    .audio-fallback-note { font-size: 12px; }
}
@media (max-width: 600px) { body.admin-bar .site-header { top: 0; } }
@media (max-width: 359px) {
    .brand { font-size: 18px; gap: 6px; }
    .brand-symbol { width: 30px; height: 30px; }
    .ytvs-site .elementor .hero h1 { font-size: 40px; }
    .ytvs-site:not(.ytvs-lang-en) .elementor .hero h1 { font-size: 31px; }
    .format-strip { gap: 12px; }
    .format-strip > span { font-size: 8px; max-width: 87px; }
    .format-strip strong { font-size: 12px; }
    .section-heading h2, .clarity-copy h2, .faq-intro h2 { font-size: 29px; }
    .choice-card { padding: 23px; }
    .format-option .quality { font-size: 22px; }
    .format-option .option-action { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .format-option:hover, .choice-card:hover, .button-primary:hover { transform: none; }
}
.ytvs-site .url-entry input { font-size: 16px; }
.footer-grid > div > a:not(.brand) { min-height: 44px; }
@media (max-width: 820px) {
    .ytvs-site .menu-toggle { display: flex; align-items: center; justify-content: center; order: 3; }
    .ytvs-site .header-language { margin-left: auto; padding-left: 0; border-left: 0; }
    .ytvs-site .primary-navigation {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 74px;
        padding: 10px 18px;
        background: #fff;
        border-bottom: 1px solid #e2e6ec;
        box-shadow: 0 12px 18px rgba(20, 32, 55, .08);
    }
    .ytvs-site .primary-navigation.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .ytvs-site .primary-navigation a { min-height: 44px; line-height: 1.5; font-size: 14px; padding: 13px 12px; }
    .ytvs-site .primary-navigation a[aria-current=page] { background: #fff4f3; border-radius: 7px; }
    .ytvs-site .primary-navigation a[aria-current=page]:after { display: none; }
}
@media (max-width: 640px) {
    .ytvs-site .primary-navigation { top: 70px; }
}


/* A clear recovery path for missing pages. */
.not-found-page {
    display: grid;
    place-items: center;
    min-height: 68vh;
    padding-block: clamp(60px, 8vw, 104px);
    text-align: center;
    background: radial-gradient(ellipse at 50% 38%, #fff0ed, transparent 62%), #fffdfc;
}
.not-found-content { max-width: 760px; }
.not-found-code {
    margin: 0 0 24px;
    color: var(--red);
    font-family: var(--heading);
    font-size: clamp(120px, 22vw, 220px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.07em;
}
.not-found-page h1 {
    margin-bottom: 18px;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.2;
    letter-spacing: -.045em;
}
.not-found-description {
    max-width: 480px;
    margin: 0 auto 30px;
    font-size: 16px;
    line-height: 1.8;
}
.not-found-home { min-height: 52px; padding-inline: 25px; }
.not-found-home .icon { transform: rotate(180deg); }
.clarity-copy .brand-home-link {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--red);
    text-underline-offset: 3px;
}
.clarity-copy .brand-home-link:hover { color: var(--red-dark); }