/* Shared styles for /freetools/convert/ pair pages.
   Mirrors the page-local .cvt- system on /freetools/audio-converter.html
   plus the standard toolfoot, so the 30 generated pages stay light. */

.cvt-hero { padding: 140px 24px 36px; text-align: center; max-width: 820px; margin: 0 auto; }
.cvt-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(168,130,255,.28); border-radius:999px; padding:6px 14px; margin-bottom:22px; }
.cvt-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:#b07bff; box-shadow:0 0 10px #b07bff; }
.cvt-hero h1 { font-family:var(--font-display); font-size:clamp(36px,5.2vw,56px); font-weight:600; line-height:1.1; margin:0 0 16px; color:var(--text); }
.cvt-hero h1 em { font-style:normal; color:var(--accent); }
.cvt-hero p { font-size:clamp(15px,2vw,18px); line-height:1.6; color:var(--text-dim); margin:0 auto; max-width:560px; }

.cvt-wrap { max-width: 860px; margin: 8px auto 24px; padding: 0 20px; }
.cvt-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:26px; box-shadow:var(--card-shadow); }

.cvt-drop { border:1.5px dashed rgba(111,91,211,.4); border-radius:14px; background:var(--bg-card); padding:44px 20px; text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease; display:block; }
.cvt-drop:hover, .cvt-drop.is-over { border-color:var(--accent); background:rgba(124,70,255,.06); }
.cvt-drop h2 { font-family:'Inter',sans-serif; font-size:18px; font-weight:700; color:var(--text); margin:0 0 6px; }
.cvt-drop p { font-size:13.5px; color:var(--text-dim); margin:0; }
.cvt-drop .priv { margin-top:10px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.cvt-file { display:none; margin-top:14px; font:500 13.5px 'Inter',sans-serif; color:var(--text); background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:11px 14px; }

.cvt-opts { display:none; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.cvt-opt label { display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); margin-bottom:7px; }
.cvt-opt select { width:100%; background:var(--bg-card); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:12px 12px; font:500 14px 'Inter',sans-serif; }

.cvt-go { display:none; width:100%; margin-top:16px; background:var(--accent); color:#fff; border:0; border-radius:12px; font:600 15.5px 'Inter',sans-serif; padding:15px; cursor:pointer; transition:opacity .12s ease, transform .12s ease; }
.cvt-go:hover { opacity:.92; transform:translateY(-1px); }
.cvt-go:disabled { opacity:.55; cursor:progress; transform:none; }

.cvt-status { margin-top:14px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.04em; color:var(--text-dim); min-height:18px; }
.cvt-bar { height:5px; border-radius:99px; background:var(--bg-card); margin-top:8px; overflow:hidden; display:none; }
.cvt-bar i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .2s ease; }

.cvt-done { display:none; margin-top:16px; background:var(--card-bg-tint); border:1px solid var(--card-border); border-radius:14px; padding:18px 20px; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cvt-done .n { font:600 14.5px 'Inter',sans-serif; color:var(--text); }
.cvt-done .s { font-family:'Space Mono',monospace; font-size:11.5px; color:var(--text-mute); margin-top:4px; }
.cvt-dl { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; font:600 14px 'Inter',sans-serif; text-decoration:none; border-radius:11px; padding:12px 22px; }
.cvt-dl:hover { opacity:.92; }

.cvt-copy { max-width:760px; margin:0 auto; padding:34px 24px 8px; }
.cvt-copy h2 { font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--text); margin:26px 0 10px; }
.cvt-copy p { font-size:15px; line-height:1.65; color:var(--text-dim); margin:0 0 12px; }
.cvt-copy strong { color:var(--text); font-weight:600; }

.cvt-faq { max-width:760px; margin:0 auto; padding:10px 24px 8px; }
.cvt-faq h2 { font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--text); margin:26px 0 14px; }
.cvt-faq details { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:0 18px; margin:0 0 10px; }
.cvt-faq summary { font:600 15px 'Inter',sans-serif; color:var(--text); padding:15px 0; cursor:pointer; list-style:none; position:relative; padding-right:26px; }
.cvt-faq summary::after { content:'+'; position:absolute; right:2px; top:13px; font:400 18px 'Space Mono',monospace; color:var(--accent); }
.cvt-faq details[open] summary::after { content:'\2212'; }
.cvt-faq summary::-webkit-details-marker { display:none; }
.cvt-faq details p { font-size:14.5px; line-height:1.6; color:var(--text-dim); margin:0 0 15px; }

.cvt-related { max-width:860px; margin:14px auto 8px; padding:0 20px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.cvt-rel { font:500 13px 'Inter',sans-serif; color:var(--accent); text-decoration:none; border:1px solid rgba(168,130,255,.3); border-radius:999px; padding:8px 15px; transition:background .13s ease; }
.cvt-rel:hover { background:rgba(124,70,255,.07); }
.cvt-related-h { max-width:860px; margin:22px auto 0; padding:0 20px; text-align:center; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); }

.cvt-promo { max-width:860px; margin:26px auto 46px; padding:0 20px; }
.cvt-promo-inner { background:linear-gradient(135deg, rgba(111,60,255,.16), rgba(124,70,255,.05)); border:1px solid rgba(176,123,255,.28); border-radius:20px; padding:26px 28px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cvt-promo h3 { font-family:var(--font-display); font-size:22px; color:var(--text); margin:0 0 6px; font-weight:600; }
.cvt-promo p { font-size:14px; color:var(--text-dim); margin:0; max-width:520px; line-height:1.55; }

@media (max-width:640px){ .cvt-hero{padding-top:116px;} .cvt-opts{grid-template-columns:1fr;} }

/* ── toolfoot (standard freetools footer) ── */
.toolfoot { background:var(--x-dark); border-top:1px solid rgba(255,255,255,.08); padding:52px 24px 34px; }
.toolfoot-in { max-width:1040px; margin:0 auto; display:flex; flex-wrap:wrap; gap:34px 56px; justify-content:space-between; }
.toolfoot-brand { max-width:330px; }
.toolfoot-brand img { height:96px; margin:-18px 0; display:block; }
.toolfoot-brand p { font:400 13.5px/1.6 'Inter',sans-serif; color:rgba(233,226,250,.55); margin:0 0 16px; }
.toolfoot-dl { display:inline-flex; align-items:center; gap:7px; background:#fff; color:#160a26; font:700 13px 'Inter',sans-serif; text-decoration:none; border-radius:999px; padding:10px 20px; }
.toolfoot-cols { display:flex; gap:56px; flex-wrap:wrap; }
.toolfoot-col { display:flex; flex-direction:column; gap:10px; }
.toolfoot-col .h { font:700 11px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,226,250,.4); margin-bottom:2px; }
.toolfoot-col a { font:500 13.5px 'Inter',sans-serif; color:rgba(233,226,250,.62); text-decoration:none; transition:color .12s ease; }
.toolfoot-col a:hover { color:#fff; }
.toolfoot-bottom { max-width:1040px; margin:30px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font:500 12px 'Inter',sans-serif; color:rgba(233,226,250,.4); }
.toolfoot-bottom a { color:rgba(233,226,250,.5); text-decoration:none; margin-left:18px; }
.toolfoot-bottom a:hover { color:#fff; }
@media (max-width:640px){ .toolfoot-in{gap:26px;} .toolfoot-cols{gap:40px;} .toolfoot-brand img{height:52px;margin:-8px 0;} }