/* the file converters: /converters/ and one converter's page (converters.py) */
.cv-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 340px at 82% -10%, var(--glow), transparent 70%), linear-gradient(135deg, var(--hero), var(--hero-2)); }
.cv-hero .wrap { position: relative; padding-top: 16px; padding-bottom: 38px; }
.cv-hero .crumbs, .cv-hero .crumbs a { color: rgba(255,255,255,.65); }
.cv-hero .crumbs a:hover { color: #fff; }
.cv-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 12px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font: 600 12px var(--mono); letter-spacing: .08em; color: var(--hi); text-transform: uppercase; }
.cv-hero h1 { margin: 0; font: 700 clamp(30px, 5vw, 46px)/1.08 var(--display); letter-spacing: -.02em; color: #fff; }
.cv-hero .lead { color: rgba(255,255,255,.76); }
.cv-points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); }
.cv-points li { display: flex; align-items: center; gap: 8px; }
.cv-points li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hi); }

.cv-preview { margin: 18px 0 0; padding: 11px 14px; border-radius: 12px; border: 1px dashed var(--warn); background: #FFF7E6; color: #6B4300; font-size: 14px; }

/* the list */
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; margin: 26px 0 8px; }
.cv-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, transform .12s, box-shadow .15s; }
a.cv-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 18px 34px -24px var(--glow); }
.cv-card.soon { border-style: dashed; background: transparent; color: var(--muted); }
.cv-card h2 { margin: 0; font: 700 19px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.cv-card.soon h2 { color: var(--muted); }
.cv-card p { margin: 0; font-size: 14.5px; color: var(--muted); }
.cv-fmts { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-fmt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: var(--chip); font: 600 12.5px var(--mono); color: var(--ink-2); }
.cv-fmt i { font-style: normal; color: var(--accent); font-weight: 700; }
.cv-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.cv-meta b { color: var(--ink-2); font-weight: 600; }
.cv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.cv-price { font: 700 16px var(--display); color: var(--ink); }
.cv-price.none { font: 600 13px Inter, sans-serif; color: var(--muted); }
.cv-open { font-weight: 700; font-size: 14px; color: var(--accent-dark); white-space: nowrap; }

.cv-sec { margin: 34px 0 0; }
.cv-sec > h2 { margin: 0 0 12px; font: 700 23px/1.2 var(--display); letter-spacing: -.01em; }
.cv-steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cv-steps li { counter-increment: s; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); font-size: 14.5px; }
.cv-steps li::before { content: counter(s); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 8px; background: var(--hero); color: var(--hi); font: 700 13px var(--mono); }
.cv-steps b { display: block; margin-bottom: 2px; }
.cv-steps .key { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* the tool */
.cv-app { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin: 22px 0 0; align-items: start; }
@media (max-width: 960px) { .cv-app { grid-template-columns: minmax(0, 1fr); } }
.cv-col { display: grid; gap: 16px; min-width: 0; }
.cv-box { min-width: 0; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.cv-box h2 { margin: 0 0 12px; font: 700 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cv-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 12px; background: var(--chip); }
.cv-tabs button { padding: 9px 18px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 700 14.5px var(--mono); cursor: pointer; }
.cv-tabs button.on { background: var(--hero); color: #fff; }
.cv-tabs button:focus-visible, .cv-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.cv-drop { display: grid; gap: 4px; margin-bottom: 12px; padding: 18px 16px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s; }
.cv-drop:hover, .cv-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.cv-drop.has { border-style: solid; border-color: var(--ok); background: #EFFAF5; }
.cv-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cv-drop b { font-size: 14.5px; }
.cv-drop span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.cv-drop.has span { font: 600 13px var(--mono); color: var(--ok); }
.cv-confirm { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 14px; padding: 12px 14px; border-radius: 12px; background: #FFF7E6; color: #6B4300; font-size: 14px; font-weight: 600; cursor: pointer; }
.cv-confirm input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.cv-help { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.cv-go { width: 100%; }
.cv-go:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; background: var(--accent); }
.cv-out { display: grid; gap: 8px; margin-top: 12px; }
.cv-out .btn { overflow-wrap: anywhere; text-align: center; }
.cv-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.cv-ids { margin: 0; display: grid; }
.cv-ids div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cv-ids dt { color: var(--muted); }
.cv-ids dd { margin: 0; font: 600 12.5px var(--mono); text-align: right; overflow-wrap: anywhere; }
.cv-empty { margin: 0; font-size: 13.5px; color: var(--muted); }
.cv-bar { display: flex; height: 14px; overflow: hidden; border-radius: 4px; background: var(--chip); }
.cv-bar span { height: 100%; }
.cv-bar .w { background: var(--accent); }
.cv-bar .e { background: var(--chip); }
.cv-map { width: 100%; margin-top: 10px; border-collapse: collapse; font: 500 12px var(--mono); }
.cv-map td { padding: 4px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cv-map td:last-child { text-align: right; color: var(--muted); }
.cv-log { display: grid; gap: 4px; max-height: 240px; overflow: auto; font: 500 12.5px var(--mono); overflow-wrap: anywhere; }
.cv-log .ok { color: var(--ok); }
.cv-log .warn { color: var(--warn); }
.cv-log .err { color: var(--accent-dark); font-weight: 700; }
.cv-buybox { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cv-full { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 22px 0 0; padding: 22px; border-radius: var(--radius); color: #fff; background: radial-gradient(600px 200px at 90% 0, var(--glow), transparent 70%), linear-gradient(135deg, var(--hero), var(--hero-2)); }
.cv-full h2 { margin: 0 0 4px; font: 700 21px/1.2 var(--display); color: #fff; }
.cv-full p { margin: 0; max-width: 620px; font-size: 14.5px; color: rgba(255,255,255,.78); }
.cv-full .btn { overflow-wrap: anywhere; text-align: center; }
.cv-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cv-proof div { padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.cv-proof b { display: block; margin-bottom: 4px; font: 700 21px/1.2 var(--display); color: var(--accent-dark); }
.cv-proof span { font-size: 14px; color: var(--muted); }
.cv-rep-top { display: flex; gap: 8px; margin-bottom: 14px; }
.cv-rep-top input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: 500 14px Inter, sans-serif; }
.cv-copy { padding: 9px 14px; font-size: 14px; white-space: nowrap; }
.cv-rep-sec { margin-top: 18px; } .cv-rep-sec:first-child { margin-top: 0; }
.cv-rep-sec h3 { margin: 0 0 6px; font: 700 15.5px var(--display); }
.cv-rep-t td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; font: 500 13px Inter, sans-serif; color: var(--muted); }
.cv-rep-t td.v { font: 600 12.5px var(--mono); color: var(--ink); min-width: 140px; }
.cv-scroll { overflow-x: auto; }
.cv-tbl { width: 100%; border-collapse: collapse; font: 500 12.5px var(--mono); }
.cv-tbl th { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); text-align: left; font: 600 12px Inter, sans-serif; color: var(--muted); white-space: nowrap; }
.cv-tbl td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cv-tbl .err { color: var(--accent-dark); font-weight: 700; }

/* the text under the tool */
.cv-text { max-width: 820px; font-size: 15.5px; }
.cv-text p { margin: 0 0 10px; }
.cv-tested { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.cv-tested th, .cv-tested td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.cv-tested th { width: 44%; color: var(--muted); font-weight: 500; }
.cv-tested td { font-weight: 600; }
.cv-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cv-files li { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--muted); }
.cv-files code { display: block; margin-bottom: 2px; font-weight: 700; color: var(--ink); }
.cv-warn { padding: 14px 16px; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--accent-soft); font-size: 15px; color: var(--ink-2); }
.cv-faq details { padding: 13px 0; border-bottom: 1px solid var(--line); }
.cv-faq summary { font-weight: 600; cursor: pointer; }
.cv-faq p { margin: 8px 0 0; color: var(--muted); }
@media (max-width: 560px) { .cv-box { padding: 16px; } .cv-tabs { display: flex; } .cv-tabs button { flex: 1; padding: 9px 8px; } }

/* a paid step: the price, the e-mail and the confirmations, then Stripe's form on the page */
.cv-pay { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cv-pay[hidden], .cv-stripe[hidden], .cv-note[hidden] { display: none; }
.cv-pay-head { margin: 0; font-weight: 700; color: var(--ink, inherit); }
.cv-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.cv-field input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-weight: 400; background: var(--surface); }
.cv-pay .cv-confirm { margin: 0; }
.cv-pay .cv-confirm a { text-decoration: underline; }
.cv-stripe { min-height: 120px; }
.cv-box .cv-warn { margin: 0 0 12px; font-size: 14px; }
.cv-pay .cv-warn { margin: 0; }
.cv-pay [data-email-err] { margin: 0; font-weight: 600; color: var(--accent-dark); }
.cv-keep { display: grid; gap: 4px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--ok); border-radius: 12px; background: #EFFAF5; font-size: 13.5px; }
.cv-keep[hidden] { display: none; }
.cv-keep a { font: 600 13px var(--mono); overflow-wrap: anywhere; text-decoration: underline; }
.cv-log a { color: inherit; text-decoration: underline; }
.cv-confirmed { margin-top: 14px; font-size: 13px; color: var(--muted); }
.cv-confirmed p { margin: 0 0 6px; }
.cv-confirmed a { text-decoration: underline; }
.cv-confirmed ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }