@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --paper: #EEF1F6;
  --paper-raised: #FFFFFF;
  --ink: #0F1B2D;
  --ink-soft: #55627A;
  --stamp: #2740E8;
  --stamp-dark: #1C2FB8;
  --teal: #0E8A6A;
  --line: #D5DBE6;
  --white: #FFFFFF;
  --mark: #FFD84D;
  --radius: 10px;
  --font-display: "Bricolage", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ui: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.6;
  direction: inherit;
}

a { color: inherit; }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo .mark {
  width: 26px; height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  transform: rotate(-8deg);
}
.site-nav { display: flex; gap: 22px; font-size: 0.92rem; }
.site-nav a { text-decoration: none; color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); }

/* ---------- Hero / Converter ---------- */
.hero {
  padding: 52px 0 20px;
  position: relative;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  margin: 0 0 14px;
  max-width: 16ch;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
}
.hero p.lede {
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 30px;
  font-size: 1.05rem;
}
.page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(160deg, #F7EDE2, #EFE0CB);
  border: 1px solid var(--line);
  margin-right: 14px;
  vertical-align: middle;
  position: relative;
  top: -4px;
}
.page-icon svg { width: 22px; height: 22px; stroke: var(--stamp); }

.stamp-mark {
  position: absolute;
  left: 20px;
  top: 30px;
  width: 92px; height: 92px;
  border: 2px solid var(--stamp);
  border-radius: 50%;
  color: var(--stamp);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  transform: rotate(9deg);
  opacity: 0.85;
  line-height: 1.3;
}

/* tabs = folder metaphor */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--ink-soft);
  position: relative;
  top: 1px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tab-icon { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; opacity: 0.75; }
.tab.active .tab-icon { opacity: 1; stroke: var(--stamp); }
.tab.active {
  background: var(--paper-raised);
  color: var(--ink);
  border-color: var(--line);
  border-bottom: 1px solid var(--paper-raised);
  font-weight: 600;
}

.panel {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 0 14px 14px 14px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(34, 48, 74, 0.04);
}
.panel[hidden] { display: none; }

.target-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 0.95rem;
}
.target-row label { color: var(--ink-soft); }

.ranges-row { margin-bottom: 18px; }
.ranges-row label { display: block; font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 6px; }
.ranges-row input[type="text"] {
  width: 100%;
  max-width: 280px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  display: block;
}
.ranges-row .hint { margin: 6px 0 0; }
select {
  font-family: var(--font-ui);
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

.dropzone {
  border: 2px dashed var(--line);
  border-radius: 16px;
  padding: 44px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(179, 64, 30, 0.04), transparent 60%),
    var(--white);
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
  cursor: pointer;
}
.dropzone:hover {
  border-color: #C7A98B;
  box-shadow: 0 6px 20px rgba(34, 48, 74, 0.07);
  transform: translateY(-1px);
}
.dropzone.drag {
  border-color: var(--stamp);
  background:
    radial-gradient(circle at 50% 0%, rgba(179, 64, 30, 0.08), transparent 60%),
    #FBF3EC;
  box-shadow: 0 8px 24px rgba(179, 64, 30, 0.12);
  transform: translateY(-1px) scale(1.005);
}
.dropzone-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #F7EDE2, #EFE0CB);
  border: 1px solid var(--line);
  transition: background .18s, transform .18s;
}
.dropzone:hover .dropzone-icon,
.dropzone.drag .dropzone-icon {
  transform: translateY(-2px);
  background: linear-gradient(160deg, #FBE4D7, #F6CDB4);
}
.dropzone-icon svg { width: 26px; height: 26px; stroke: var(--stamp); }
.dropzone p { margin: 6px 0; }
.dropzone .hint { color: var(--ink-soft); font-size: 0.85rem; }
.dropzone .ext {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.filelist { margin: 16px 0 0; padding: 0; list-style: none; }
.filelist li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 0.9rem;
  background: var(--white);
}
.filelist .ext-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 3px;
  padding: 1px 6px;
  margin-inline-start: 8px;
}
.filelist button {
  background: none; border: none; color: var(--stamp); cursor: pointer; font-size: 1rem;
}

.actions { margin-top: 20px; display: flex; align-items: center; gap: 14px; }
.btn-convert {
  background: var(--stamp);
  color: var(--white);
  border: none;
  padding: 12px 28px;
  border-radius: 9px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(179, 64, 30, 0.25);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn-convert:hover:not(:disabled) {
  background: var(--stamp-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(179, 64, 30, 0.32);
}
.btn-convert:active:not(:disabled) { transform: translateY(0); }
.btn-convert:disabled { background: #C9BFA6; cursor: not-allowed; box-shadow: none; }

.status { font-size: 0.9rem; color: var(--ink-soft); }
.status.error { color: var(--stamp); }
.status.ok { color: var(--teal); }

.progress {
  margin-top: 14px;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress[hidden] { display: none; }
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--stamp), var(--stamp-dark));
  border-radius: 999px;
  transition: width .15s ease-out;
}

/* ---------- Trust / info section ---------- */
.trust {
  padding: 50px 0;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 24px;
}
.trust-grid h3 { font-size: 1rem; margin: 0 0 6px; }
.trust-grid h3 a { text-decoration: none; }
.trust-grid h3 a:hover { text-decoration: underline; }
.trust-grid p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.trust-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #F7EDE2, #EFE0CB);
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.trust-icon svg { width: 20px; height: 20px; stroke: var(--stamp); }

@media (max-width: 1150px) {
  .stamp-mark { display: none; }
}

@media (max-width: 680px) {
  .trust-grid { grid-template-columns: 1fr; }
  .stamp-mark { display: none; }
  .site-header .wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-nav { gap: 16px; }
  .panel { padding: 18px; }
  .actions { flex-wrap: wrap; }
}

/* ---------- Content pages ---------- */
.content-page { padding: 40px 0 70px; }
.content-page h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.content-page .updated { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 30px; }
.content-page h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-top: 34px; }
.content-page p, .content-page li { color: #33415C; }
.content-page ul { padding-inline-start: 22px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 26px 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer nav { display: flex; gap: 16px; }
.site-footer a { text-decoration: none; color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}

/* ---------- SEO content blocks ---------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; color: var(--ink); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  min-height: 96px;
}
.related-card:hover { border-color: var(--teal); }
.related-card strong { font-size: 0.98rem; color: var(--ink); }
.related-card span { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; }
.seo-prose { padding: 8px 0 0; }
.seo-prose h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 40px 0 10px; }
.seo-prose h3 { font-size: 1.02rem; margin: 22px 0 8px; }
.seo-prose p, .seo-prose li { color: #33415C; }
.seo-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 0.92rem;
  background: var(--white);
}
.seo-prose th, .seo-prose td {
  border: 1px solid var(--line);
  padding: 9px 11px;
  text-align: start;
  vertical-align: top;
}
.seo-prose th { background: var(--paper-raised); }
.cta-row {
  margin: 28px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cta-row a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.cta-row .cta-primary { background: var(--teal); color: #fff; }
.cta-row .cta-ghost { border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 22px;
}
@media (max-width: 680px) {
  .related-grid, .tools-grid { grid-template-columns: 1fr; }
}




/* =====================  v2 look  ===================== */
body { background: var(--paper); }
.wrap { max-width: 960px; }

.site-header { background: var(--paper-raised); border-bottom: 1px solid var(--line); padding: 14px 0; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.logo .mark {
  width: 28px; height: 28px; border: 0; border-radius: 7px;
  background: var(--stamp); color: #fff; transform: none;
  font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0;
  clip-path: polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%);
}
.site-nav a { font-weight: 500; padding: 6px 2px; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--stamp); }

.stamp-mark { display: none; }
.hero { padding: 56px 0 28px; }
.hero h1, .content-page h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); max-width: 14ch; line-height: 1.04; }
.page-icon { background: var(--ink); border: 0; border-radius: 12px; }
.page-icon svg { stroke: var(--mark); }

/* the one memorable element: a tray with a hard offset shadow */
.tabs { border-bottom: 0; gap: 6px; padding-bottom: 12px; }
.tab { border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper-raised); top: 0; padding: 8px 16px; font-weight: 500; }
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab.active { background: var(--ink); color: #fff; border: 1.5px solid var(--ink); font-weight: 600; }
.tab.active .tab-icon { stroke: var(--mark); }

.panel { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--stamp); padding: 26px; }
.dropzone { border: 2px dashed #9AA7C2; border-radius: 14px; background: #F7F9FD; }
.dropzone:hover, .dropzone.drag { border-color: var(--stamp); background: #EEF1FF; }
.dropzone-icon svg { stroke: var(--stamp); }
.btn-convert { background: var(--stamp); color: #fff; border: 0; border-radius: 10px; font-weight: 600; padding: 12px 26px; }
.btn-convert:hover:not(:disabled) { background: var(--stamp-dark); }
.btn-convert:disabled { background: #C3CAD9; color: #fff; }
.progress-bar { background: var(--stamp); }
a:focus-visible, button:focus-visible, .dropzone:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }

.badge-new { background: var(--mark); color: var(--ink); font-weight: 700; font-size: 0.7rem; padding: 2px 8px; border-radius: 6px; margin-left: 6px; }

.trust { border-top: 1px solid var(--line); }
.trust-grid > div { background: transparent; }
.trust-icon { background: var(--ink); border: 0; border-radius: 10px; }
.trust-icon svg { stroke: var(--mark); }
.related-card, .tools-grid a { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; }
.related-card:hover, .tools-grid a:hover { border-color: var(--stamp); }
.cta-row .cta-primary { background: var(--stamp); border-radius: 10px; color: #fff; }
.site-footer { background: var(--ink); color: #AEB8CC; border-top: 0; }
.site-footer a { color: #D8DEEC; }
.site-footer a:hover { color: var(--mark); }
.seo-prose th { background: var(--ink); color: #fff; }


/* =====================  v3 polish: motion, responsiveness, icons  ===================== */

/* -- motion tokens -- */
:root {
  --ease: cubic-bezier(.22,.9,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* -- header: sticky + subtle elevation on scroll -- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(255,255,255,0.86);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgba(15,27,45,.35); }
.logo .mark { transition: transform var(--dur) var(--ease); }
.logo:hover .mark { transform: rotate(-6deg) scale(1.05); }
.site-nav a { position: relative; transition: color var(--dur-fast) var(--ease); }
.site-nav a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: -3px; height: 2px;
  background: var(--stamp); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }

/* -- hero entrance -- */
.hero h1, .hero p.lede, .hero .tabs, .hero .panel { animation: riseIn var(--dur-slow) var(--ease-out) both; }
.hero p.lede { animation-delay: 60ms; }
.hero .tabs { animation-delay: 110ms; }
.hero .panel { animation-delay: 150ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hero h1, .hero p.lede, .hero .tabs, .hero .panel { animation: none; } }

/* -- tabs: smoother pill interaction, horizontal scroll on narrow screens -- */
.tabs {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* overflow-x: auto also clips the Y axis, so the active tab and its focus
     ring need real padding here — a negative margin used to pull the panel
     up into that clipped zone, cutting the tab's bottom edge off. */
  padding: 6px 2px 16px;
  margin-bottom: 8px;
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tab:hover { transform: translateY(-1px); }
.tab:active { transform: translateY(0); }
.tab-icon { transition: transform var(--dur) var(--ease); }
.tab:hover .tab-icon { transform: scale(1.08); }

/* -- panel switch fade -- */
.panel:not([hidden]) { animation: panelIn var(--dur) var(--ease-out) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .panel:not([hidden]) { animation: none; } }

/* -- dropzone: friendlier hover/drag feedback -- */
.dropzone {
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.dropzone:hover { border-color: var(--stamp); background: #F2F5FF; }
.dropzone.drag { transform: scale(1.012); background: #E9EEFF; }
.dropzone-icon { transition: transform var(--dur) var(--ease-out); }
.dropzone:hover .dropzone-icon, .dropzone.drag .dropzone-icon { transform: translateY(-3px); }
.dropzone.drag .dropzone-icon svg { animation: bob 1.1s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dropzone.drag .dropzone-icon svg { animation: none; } }

/* -- file list rows: entrance + remove affordance -- */
.filelist li {
  animation: rowIn var(--dur) var(--ease-out) both;
  transition: background var(--dur-fast) var(--ease);
}
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .filelist li { animation: none; } }
.filelist li:hover { background: #F4F6FB; }
.filelist button {
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  border-radius: 6px; padding: 3px 8px;
}
.filelist button:hover { background: #FBEAEA; color: #B3261E; }

/* -- convert button: lift + loading shimmer -- */
.btn-convert {
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn-convert:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(39,64,232,.55); }
.btn-convert:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

/* -- progress bar: smooth fill + shimmer sweep -- */
.progress-bar { transition: width var(--dur-slow) var(--ease-out); position: relative; overflow: hidden; }
.progress-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%); animation: sweep 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .progress-bar::after { animation: none; } }
@keyframes sweep { to { transform: translateX(100%); } }

/* -- status text: gentle pop when it changes -- */
.status { transition: color var(--dur-fast) var(--ease); }
.status:not(:empty) { animation: statusIn var(--dur-fast) var(--ease-out); }
@keyframes statusIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* -- trust / related cards: lift on hover -- */
.trust-icon { transition: transform var(--dur) var(--ease); }
.related-card, .tools-grid a {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.related-card:hover, .tools-grid a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -20px rgba(15,27,45,.45);
}
.related-card:hover .trust-icon, .trust-grid > div:hover .trust-icon { transform: scale(1.08) rotate(-3deg); }

/* -- buttons/links: consistent focus ring + tap feedback everywhere -- */
a, button { -webkit-tap-highlight-color: transparent; }
.cta-row .cta-primary {
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cta-row .cta-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(39,64,232,.55); }

/* =====================  banner (home page)  ===================== */
.promo-banner {
  position: relative;
  margin: 8px 0 44px;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background: linear-gradient(135deg, var(--ink) 0%, #182451 60%, var(--stamp-dark) 100%);
  color: #EEF1F6;
  box-shadow: 6px 6px 0 var(--mark);
}
.promo-banner::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 40%),
                     radial-gradient(circle at 85% 80%, rgba(255,255,255,.07), transparent 45%);
}
.promo-banner-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 30px; flex-wrap: wrap;
}
.promo-banner-text h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0 0 6px; color: #fff;
}
.promo-banner-text p { margin: 0; color: #C7CEE3; font-size: .95rem; max-width: 56ch; }
.promo-banner-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.promo-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #EEF1F6; font-size: .82rem; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
}
.promo-badge svg { width: 15px; height: 15px; stroke: var(--mark); flex: 0 0 auto; }
.promo-banner-cta {
  background: var(--mark); color: var(--ink); font-weight: 700; font-size: .92rem;
  padding: 11px 20px; border-radius: 10px; white-space: nowrap; flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.promo-banner-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(255,216,77,.6); }

@media (max-width: 680px) {
  .promo-banner-inner { padding: 20px; flex-direction: column; align-items: flex-start; }
  .promo-banner-cta { width: 100%; text-align: center; }
}

/* =====================  responsiveness pass  ===================== */
@media (max-width: 960px) {
  .hero { padding: 40px 0 20px; }
}
@media (max-width: 680px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); max-width: 100%; }
  .hero p.lede { font-size: .95rem; }
  .panel { padding: 16px; border-radius: 14px; box-shadow: 4px 4px 0 var(--stamp); }
  .tab { padding: 8px 13px; font-size: .88rem; }
  .dropzone { padding: 28px 14px !important; }
  .target-row, .ranges-row { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  .target-row select, .ranges-row input { width: 100%; }
  .actions { flex-wrap: wrap; gap: 10px; }
  .btn-convert { width: 100%; text-align: center; }
  .trust-grid, .related-grid, .tools-grid { grid-template-columns: 1fr !important; }
  .site-nav { gap: 14px; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .logo { font-size: 1.1rem; }
  .filelist li { flex-direction: column; align-items: flex-start !important; gap: 6px; }
}

/* Larger, friendlier tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .tab, .btn-convert, .dropzone, .related-card, .tools-grid a { min-height: 44px; }
  .filelist button { min-height: 32px; min-width: 32px; }
}

/* =====================  v4: tool icons, favicon-matched header mark, 2026 polish  ===================== */

/* -- card icon badges (injected by tool-icons.js) -- */
.related-card, .tools-grid a { align-items: flex-start; }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(155deg, #EEF1FF, #E2E7FC);
  border: 1px solid #D7DDF5;
  margin-bottom: 4px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card-icon svg { width: 19px; height: 19px; stroke: var(--stamp); }
.related-card:hover .card-icon, .tools-grid a:hover .card-icon {
  transform: translateY(-2px) scale(1.04);
  background: linear-gradient(155deg, var(--stamp), var(--stamp-dark));
}
.related-card:hover .card-icon svg, .tools-grid a:hover .card-icon svg { stroke: #fff; }

/* -- logo mark: small accent dot to match the new favicon -- */
.logo .mark { position: relative; overflow: visible; }
.logo .mark::after {
  content: ""; position: absolute; right: -3px; bottom: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mark); border: 2px solid var(--paper-raised);
}

/* -- subtle 2026-grade depth: soft ambient shadow under the panel, refined ring -- */
.panel { box-shadow: 6px 6px 0 var(--stamp), 0 24px 48px -32px rgba(15,27,45,.35); }
.promo-banner { box-shadow: 6px 6px 0 var(--mark), 0 28px 56px -30px rgba(15,27,45,.55); }

/* -- consistent icon tint on trust-grid / guide step icons for brand cohesion -- */
.trust-icon svg { stroke: var(--mark); }