/* ==========================================================================
   PrivacyMetaData — Image Metadata Remover & Image Privacy Tools
   Main stylesheet (v2 — matches the approved Home page design)
   ========================================================================== */

:root {
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #eef4ff;
  --navy: #10264a;
  --navy-deep: #0d2440;
  --ink: #15294a;
  --muted: #6d82a2;
  --line: #e4edf8;
  --page: #f4f8fd;
  --green: #22c55e;
  --green-dark: #16a34a;
  --orange: #f59e0b;
  --purple: #8b5cf6;
  --red: #ef4444;
  --shadow-xs: 0 1px 2px rgba(16, 42, 77, .05);
  --shadow: 0 6px 22px rgba(16, 42, 77, .07);
  --shadow-lg: 0 20px 48px rgba(16, 42, 77, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--page);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }

.shell { max-width: 1300px; margin: 0 auto; padding: 0 18px; }
.is-hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 9px; font-weight: 600; font-size: 15px;
  padding: 10px 20px; transition: .18s; white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.26); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.btn-green { background: var(--green-dark); color: #fff; }
.btn-green:hover { background: #15803d; }
.btn-soft { background: #e8f1ff; color: var(--blue); }
.btn-soft:hover { background: #d9e8ff; }
.btn-lg { padding: 13px 30px; font-size: 16px; border-radius: 10px; }
.btn-sm { padding: 8px 15px; font-size: 13.5px; }

/* ----------------------------------------------------------------- header */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.header-inner { display: flex; align-items: center; height: 68px; gap: 20px; }

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  display: grid; place-items: center; color: #fff; font-size: 16px;
  box-shadow: 0 6px 14px rgba(37,99,235,.3);
}
.brand-text { display: block; line-height: 1.15; }
.brand-name { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--navy); }
.brand-name .accent { color: var(--blue); }
.brand-tag { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .1px; }

/* centred nav */
.main-nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 30px;
}
.main-nav a {
  font-size: 16px; font-weight: 600; color: #4d6688;
  padding: 6px 0; position: relative; transition: color .18s;
}
.main-nav a:hover { color: var(--blue); }
.main-nav a.is-active { color: var(--blue); }
.main-nav a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2.5px; border-radius: 3px; background: var(--blue);
}

.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header-actions .btn { font-size: 16px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: #46618a;
  display: grid; place-items: center; transition: .18s; flex: none;
}
.icon-btn:hover { background: var(--blue-soft); color: var(--blue); border-color: #cfe1fb; }
.nav-toggle { display: none; }

/* -------------------------------------------------------------- page grid */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 22px; align-items: start;
  padding: 20px 0 34px;
}

/* -------------------------------------------------------------- sections */
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-xs); }

.block {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-xs); padding: 24px; margin-top: 20px;
}
.section-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.section-icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: var(--blue-soft); color: var(--blue);
  display: grid; place-items: center; font-size: 14px;
}
.section-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: var(--navy); }
.section-head p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; overflow: hidden;
  border-radius: 18px; border: 1px solid #e6f0fb;
  background:
    radial-gradient(760px 420px at 86% -8%, #e3eefe 0%, rgba(227,238,254,0) 65%),
    linear-gradient(180deg, #fbfdff 0%, #eff6fe 100%);
  padding: 30px 30px 26px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 26px; align-items: center;
}
.hero-copy { padding-top: 4px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #e7f0ff; color: var(--blue);
  font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 6px 14px;
}
.pill i { font-size: 11px; }

.hero h1 {
  margin: 16px 0 0;
  font-size: 40px; line-height: 1.17; font-weight: 800;
  letter-spacing: -1.3px; color: #0b1f3f;
}
.hero h1 .accent { display: block; color: var(--blue); }

.hero-lead { margin: 15px 0 0; font-size: 15.5px; color: #5c7490; max-width: 460px; }

.hero-checks {
  display: flex; flex-wrap: wrap; gap: 9px 22px;
  margin: 20px 0 0; padding: 0; list-style: none;
}
.hero-checks li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #3f587a; }
.hero-checks i { color: var(--green); font-size: 14px; }

/* ----- hero visual ----- */
.hero-visual { position: relative; min-height: 290px; }

.dot-grid {
  position: absolute; top: 2px; right: 4px; width: 92px; height: 70px;
  background-image: radial-gradient(#8fc5f2 1.6px, transparent 1.6px);
  background-size: 11px 11px; opacity: .85;
}
.hero-blob {
  position: absolute; left: 2%; bottom: -14%; width: 94%; height: 86%;
  background: radial-gradient(60% 60% at 42% 48%, #dbe9fc 0%, rgba(219,233,252,0) 72%);
  border-radius: 50% 42% 46% 54%;
}

.photo-card {
  position: relative; margin: 10px 0 0 0; width: 72%;
  background: #fff; padding: 9px; border-radius: 16px;
  box-shadow: var(--shadow-lg);
  transform: rotate(-2.2deg);
}
.photo-card img { width: 100%; height: 186px; object-fit: cover; border-radius: 10px; }

.exif-card {
  position: absolute; right: 2%; top: 22px; width: 196px;
  background: #fff; border-radius: 13px; padding: 13px 14px;
  box-shadow: 0 14px 36px rgba(16,42,77,.17);
}
.exif-pin {
  position: absolute; top: 11px; right: 12px;
  color: var(--blue); font-size: 11px;
}
.exif-card h3 { font-size: 13.5px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.exif-card dl { margin: 0; display: grid; gap: 4px; }
.exif-card dl > div { display: flex; gap: 8px; font-size: 10.5px; line-height: 1.5; }
.exif-card dt { color: #93a7c4; flex: none; min-width: 52px; }
.exif-card dd { margin: 0; color: #35506f; font-weight: 500; }

.curve-arrow {
  position: absolute; right: 10%; top: 112px;
  width: 118px; height: 94px; overflow: visible;
}

.lock-badge {
  position: absolute; right: 7%; bottom: 10px;
  width: 50px; height: 50px; border-radius: 15px;
  background: linear-gradient(150deg, #3b82f6, #1d4ed8); color: #fff;
  display: grid; place-items: center; font-size: 19px;
  box-shadow: 0 14px 28px rgba(37,99,235,.4);
}
.script-note {
  position: absolute; left: 44%; bottom: 6px; margin: 0;
  font-family: 'Caveat', cursive; font-size: 22px; line-height: 1.05;
  color: var(--blue); text-align: center; transform: rotate(-5deg);
}

/* ------------------------------------------------------------ upload box */
.upload-box {
  position: relative; margin-top: 26px;
  border: 2px dashed #b9d4f5; border-radius: 16px;
  background: #f7fbff; padding: 32px 22px 30px;
  text-align: center; transition: .2s;
}
.upload-box.is-drag { border-color: var(--blue); background: #eff6ff; }
.upload-icon { font-size: 44px; color: var(--blue); line-height: 1; margin-bottom: 16px; }
.upload-title { font-size: 21px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; }
.upload-or { margin: 12px 0 16px; font-size: 14px; color: #9db0c9; }
.upload-meta { margin: 18px 0 0; font-size: 13px; color: #93a7c4; }
.upload-extra { margin: 12px 0 0; font-size: 13px; color: #93a7c4; }
.upload-extra button { background: none; border: 0; color: var(--blue); font-size: 13px; font-weight: 600; padding: 0; }
.upload-extra button:hover { text-decoration: underline; }
/* Link styled to match the sibling buttons above (global `a` is colour:inherit). */
.upload-extra a { color: var(--blue); font-weight: 600; }
.upload-extra a:hover { text-decoration: underline; }
.upload-extra .sep { margin: 0 8px; }

.url-row { display: none; gap: 8px; max-width: 440px; margin: 14px auto 0; }
.url-row.is-open { display: flex; }
.url-row input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--ink); background: #fff;
}
.url-row input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* --------------------------------------------------- banner ad (728x90) */
.banner-ad { margin-top: 20px; text-align: center; }

/* Reserves the scaled height so the page never jumps when the ad paints. */
.banner-ad-frame {
  --ad-w: 728px;
  --ad-h: 90px;
  --ad-scale: 1;
  width: 100%;
  height: calc(var(--ad-h) * var(--ad-scale));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Always a true 728x90 box; shrunk visually by transform so third-party ad
   markup keeps its exact required pixel dimensions. */
.banner-ad-unit {
  width: var(--ad-w); height: var(--ad-h);
  flex: none;
  transform: scale(var(--ad-scale));
  transform-origin: center center;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.banner-ad-placeholder {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #9db0c9; font-weight: 600;
}
.banner-ad-placeholder i { font-size: 20px; color: #bcd1e8; }
.banner-ad-placeholder b { color: #7d93b2; font-weight: 700; }

/* ------------------------------------------- sidebar box ad (300x250) */
/* Same technique as the 728x90 leaderboard: the unit keeps its true pixel
   size so third-party ad code gets the dimensions it requires, while the
   frame scales it to fit the 296px sidebar column and reserves its height. */
.box-ad-frame {
  --box-w: 300px;
  --box-h: 250px;
  --box-scale: .96;
  width: 100%;
  height: calc(var(--box-h) * var(--box-scale));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.box-ad-unit {
  width: var(--box-w); height: var(--box-h);
  flex: none;
  transform: scale(var(--box-scale));
  transform-origin: center center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.box-ad-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 13px; color: #9db0c9; font-weight: 600;
}
.box-ad-placeholder i { font-size: 26px; color: #bcd1e8; }
.box-ad-placeholder b { color: #7d93b2; font-weight: 700; }

/* ------------------------------------ sidebar skyscrapers (160x600 x2) */
/* Two 160x600 units side by side, like the reference pair. Same technique as
   the other slots: each unit keeps its true pixel size so third-party ad code
   gets the dimensions it requires, and is scaled to fit the sidebar column. */
.sky-ad-pair { display: flex; gap: 10px; justify-content: center; align-items: flex-start; }

.sky-ad-frame {
  --sky-w: 160px;
  --sky-h: 600px;
  --sky-scale: .88;
  width: calc(var(--sky-w) * var(--sky-scale));
  height: calc(var(--sky-h) * var(--sky-scale));
  flex: none;
  display: flex; align-items: flex-start; justify-content: center;
  overflow: hidden;
}
.sky-ad-unit {
  width: var(--sky-w); height: var(--sky-h);
  flex: none;
  transform: scale(var(--sky-scale));
  transform-origin: top left;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sky-ad-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px; color: #9db0c9; font-weight: 600; text-align: center;
}
.sky-ad-placeholder i { font-size: 24px; color: #bcd1e8; }
.sky-ad-placeholder b { display: block; color: #7d93b2; font-weight: 700; }

/* -------------------------------------------------------- before / after */
.compare-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; margin-top: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-xs); padding: 18px;
}

.ba-card {
  margin: 0; display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 12px; overflow: hidden; background: #0f2d57;
  box-shadow: var(--shadow);
}
.ba-half { position: relative; overflow: hidden; }
.ba-half:first-child { border-right: 2px solid #fff; }
.ba-half img { width: 100%; height: 148px; object-fit: cover; }
.ba-tag {
  position: absolute; top: 9px; left: 9px;
  font-size: 10.5px; font-weight: 700; line-height: 1.25;
  padding: 5px 9px; border-radius: 6px; color: #fff;
}
.ba-tag small { display: block; font-weight: 500; opacity: .8; font-size: 9.5px; }
.ba-tag.dark { background: rgba(13,36,64,.88); }
.ba-tag.green { background: rgba(22,163,74,.92); }

.removed-panel { display: flex; flex-direction: column; padding: 4px 4px 0 6px; }
.removed-panel h2 { font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.removed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.removed-list li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: #42587a; }
.removed-list i { color: var(--green); font-size: 13px; flex: none; }
.removed-actions {
  margin-top: auto; padding-top: 14px;
  display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap;
}

/* ---------------------------------------------------------- details panel */
.details-panel { margin-top: 20px; padding: 20px; }
.details-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.details-head h2 { font-size: 17px; font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: 9px; }
.details-head h2 i { color: var(--blue); }
.details-head-actions { display: flex; align-items: center; gap: 10px; }
.details-body { display: grid; grid-template-columns: 206px minmax(0, 1fr); gap: 18px; }

.preview-box { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f8fbfe; }
.preview-box img { width: 100%; height: 142px; object-fit: cover; }
.preview-box .info { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.preview-box .info b { display: block; color: var(--ink); font-size: 13.5px; word-break: break-all; }

.meta-scroll { max-height: 250px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.meta-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.meta-table th, .meta-table td { text-align: left; padding: 7px 11px; border-bottom: 1px solid #eef4fc; }
.meta-table th { color: var(--muted); font-weight: 600; width: 42%; }
.meta-table td { color: var(--ink); font-weight: 500; word-break: break-word; }
.empty-meta { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 14px; }

.state-badge { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.badge-found { background: #fef2f2; color: #dc2626; }
.badge-clean { background: #ecfdf5; color: #059669; }

/* ------------------------------------------------------ batch file queue */
/* Scoped entirely to the Batch Metadata Remover tool page — a multi-file
   list with per-file status and a single "Download All as ZIP" action.
   Reuses existing tokens (--line, --navy, --blue, --green, etc.) and the
   same card/button language as the rest of the site, so nothing here
   changes any other page. */
.queue-wrap {
  margin-top: 20px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-xs); padding: 18px 20px 20px;
}
.queue-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.queue-head h2 { font-size: 16px; font-weight: 800; color: var(--navy); }
.queue-summary { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.queue-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.queue-empty {
  text-align: center; padding: 22px 10px; font-size: 13.5px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 12px;
}
.queue-item {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
  background: #fbfdff; flex-wrap: wrap;
}
.queue-ico {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-size: 14px;
}
.queue-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; }
.queue-name { font-size: 13.5px; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-meta { font-size: 11.5px; color: var(--muted); }
.queue-status {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; flex: none;
}
.queue-status.is-queued { background: #eef4fc; color: #5c7490; }
.queue-status.is-scanning { background: var(--blue-soft); color: var(--blue); }
.queue-status.is-done { background: #ecfdf5; color: #059669; }
.queue-status.is-error { background: #fef2f2; color: #dc2626; }
.queue-actions { display: flex; gap: 6px; flex: none; }
.queue-actions button {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: var(--blue);
}
.queue-actions button:hover { background: var(--blue-soft); border-color: #cfe1fb; }

@media (max-width: 480px) {
  .queue-item { justify-content: center; text-align: center; }
  .queue-info { flex: 1 1 100%; align-items: center; }
  .queue-actions { flex: 1 1 100%; justify-content: center; }
}

/* --------------------------------------------------------- how it works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { text-align: center; }
.step-num {
  width: 25px; height: 25px; border-radius: 50%; margin: 0 auto 11px;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700;
}
.step-ico {
  width: 50px; height: 50px; border-radius: 15px; margin: 0 auto 12px;
  display: grid; place-items: center; font-size: 18px;
}
.step h3 { font-size: 14.5px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.step p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ----------------------------------------------------------------- tools */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tool-card {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 13px; padding: 15px; position: relative; transition: .2s;
}
.tool-card:hover { border-color: #bfd8fa; box-shadow: 0 10px 26px rgba(16,42,77,.09); transform: translateY(-3px); }
.tool-ico { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 11px; display: grid; place-items: center; font-size: 14px; }
.tool-card h3 { font-size: 13.5px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; color: var(--navy); }
.tool-card h3 a { color: var(--navy); transition: color .18s; }
.tool-card:hover h3 a { color: var(--blue); }
.tool-card p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.tool-card .go { position: absolute; right: 13px; bottom: 13px; color: #b7c8de; font-size: 12px; transition: .2s; }
.tool-card:hover .go { color: var(--blue); transform: translateX(2px); }

/* "Open Tool" button at the foot of every tool card.
   The card becomes a flex column purely so the button can be pushed to the
   bottom with margin-top:auto; children still stretch to the full width, so
   the icon, heading and copy lay out exactly as they did before.
   height:100% is essential: a grid item stretches its BOX to the row height,
   but without it the flex container itself only grows to fit its content, so
   margin-top:auto would have nothing spare to push against and the buttons
   would sit at different heights across a row. */
.tool-card { display: flex; flex-direction: column; height: 100%; }
/* Written as `.tool-card .tool-cta` on purpose: the earlier `.tool-card p`
   rule sets `margin: 0` and outranks a lone `.tool-cta` selector, which
   silently cancelled the auto margin and left the buttons unaligned. */
.tool-card .tool-cta { margin: auto 0 0; padding-top: 13px; }
.tool-cta .btn {
  width: 100%; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; gap: 6px;
}
.tool-cta .btn i { font-size: 11px; transition: transform .18s; }
/* Hovering anywhere on the card promotes the button, matching the way the
   heading already turns blue on hover. */
.tool-card:hover .tool-cta .btn { background: var(--blue); color: #fff; }
.tool-card:hover .tool-cta .btn i { transform: translateX(2px); }
.tool-cta .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* honest availability label on each tool */
.tool-badge {
  position: absolute; top: 14px; right: 13px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .2px;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}
.tool-badge.live { background: #ecfdf5; color: #047857; }
.tool-badge.soon { background: #fff7eb; color: #b45309; }
.tool-badge.partial { background: var(--blue-soft); color: var(--blue-dark); }

/* short note under the tools grid */
.tools-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); line-height: 1.65; }
.tools-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* 300x250 ad in the last cell of the Our Tools grid (home page only).
   Same technique as the sidebar box ads: the unit keeps its true pixel size
   and the frame scales it to fit the grid cell. The 4-column cell is only
   ~180-260px wide, so the scale steps down with the viewport and returns to
   the sidebar default once the grid drops to 2 and 1 columns. */
.tool-ad { min-width: 0; }
.tool-ad .box-ad-frame { --box-scale: .72; }
@media (max-width: 1299px) { .tool-ad .box-ad-frame { --box-scale: .6; } }
@media (max-width: 1140px) { .tool-ad .box-ad-frame { --box-scale: .8; } }
@media (max-width: 1060px) { .tool-ad .box-ad-frame { --box-scale: .72; } }
@media (max-width: 980px)  { .tool-ad .box-ad-frame { --box-scale: .96; } }

.ico-blue { background: var(--blue-soft); color: var(--blue); }
.ico-red { background: #fef2f2; color: var(--red); }
.ico-green { background: #ecfdf5; color: #059669; }
.ico-purple { background: #f5f1ff; color: var(--purple); }
.ico-orange { background: #fff7eb; color: var(--orange); }
.ico-teal { background: #ecfeff; color: #0891b2; }
.bg-blue { background: var(--blue); }
.bg-green { background: var(--green); }
.bg-orange { background: var(--orange); }

/* ------------------------------------------------------- article prose */
/* Long-form copy blocks: What Is Metadata, How To, Why, Who Uses It, About */
.prose p {
  margin: 0 0 13px; font-size: 14.5px; line-height: 1.75; color: #42587a;
  max-width: 74ch;
}
.prose p:last-child { margin-bottom: 0; }
.prose h3 {
  margin: 22px 0 7px; font-size: 15.5px; font-weight: 700; color: var(--navy);
}
.prose h3:first-of-type { margin-top: 4px; }
.prose strong { color: var(--navy); font-weight: 700; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--blue-dark); }

.prose-list { margin: 0 0 15px; padding: 0 0 0 2px; list-style: none; max-width: 74ch; }
.prose-list li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 14.5px; line-height: 1.7; color: #42587a;
}
.prose-list li::before {
  content: ''; position: absolute; left: 4px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
}

.steps-list {
  margin: 4px 0 15px; padding-left: 0; list-style: none;
  counter-reset: step; max-width: 74ch;
}
.steps-list li {
  position: relative; counter-increment: step;
  padding: 0 0 0 42px; margin-bottom: 16px;
  font-size: 14.5px; line-height: 1.75; color: #42587a;
}
.steps-list li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.steps-list em { font-style: normal; font-weight: 600; color: var(--navy); }

/* author + last-updated line for E-E-A-T */
.page-meta {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: 20px 0 0; padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.page-meta span { display: flex; align-items: center; gap: 7px; }
.page-meta i { color: var(--blue); }
.page-meta a { color: var(--blue); }

/* ------------------------------------------------------------------- faq */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.faq-item { border: 1px solid var(--line); border-radius: 9px; background: #fbfdff; overflow: hidden; }
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: 0; padding: 11px 14px; text-align: left;
  font-size: 13px; font-weight: 600; color: #30486b;
}
.faq-q .sign { color: var(--blue); font-size: 15px; font-weight: 400; line-height: 1; flex: none; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { margin: 0; padding: 0 14px 13px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.faq-item.is-open { border-color: #c9ddfa; background: #f6fbff; }

/* --------------------------------------------------------------- sidebar */
.sidebar { display: grid; gap: 16px; position: sticky; top: 86px; }
.ad-label { font-size: 10px; letter-spacing: .5px; color: #9db0c9; text-transform: uppercase; margin: 0 0 6px; font-weight: 600; }
.ad-box { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px; }
.ad-google { position: relative; text-align: center; }
.ad-google .close { position: absolute; left: 10px; top: 9px; color: #9db0c9; font-size: 12px; background: none; border: 0; }
.ad-google .by { font-size: 12px; color: #70809a; margin: 2px 0 12px; }
.ad-google .by b { color: #4285f4; font-weight: 600; }
.ad-google .cta {
  display: block; width: 100%; background: var(--blue); color: #fff; border: 0;
  border-radius: 7px; padding: 9px; font-size: 13.5px; font-weight: 600; margin-bottom: 8px;
}
.ad-google .why-ad { font-size: 12px; color: #8698b4; margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }

.promo { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.promo-head { background: #0f172a; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 12px; display: flex; align-items: center; gap: 7px; }
.promo-head i { color: #82cf3c; }
.promo-body { padding: 14px; }
.promo-body h3 { font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.25; margin-bottom: 6px; }
.promo-body p { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.promo-img { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; margin-top: 12px; }

.side-card { padding: 16px; }
.side-card h2 { font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 13px; }
.side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.side-head h2 { margin: 0; }
.side-head a { font-size: 12px; color: var(--blue); font-weight: 600; }

.qt-list { display: grid; gap: 9px; }
.qt { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; transition: .18s; }
.qt:hover { border-color: #bfd8fa; background: #f8fbff; }
.qt .ico { width: 31px; height: 31px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 12px; }
.qt h3 { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.qt p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.45; }
.qt .chev { margin-left: auto; color: #c3d2e6; font-size: 11px; }

/* "View All Articles" link under the Popular Articles sidebar list. New
   class used only by that block, so no existing sidebar card is affected. */
.side-more {
  display: block; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line); text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--blue); transition: color .18s;
}
.side-more:hover { color: var(--blue-dark); }
.side-more i { font-size: 10px; margin-left: 6px; }

/* Icon badge inside a Popular Articles row. `.article .ico` was unused
   before this block, so sizing it here affects nothing else. */
.article .ico {
  width: 31px; height: 31px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-size: 12px;
}

.article { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid #f0f5fc; }
.article:last-child { border-bottom: 0; padding-bottom: 0; }
.article img { width: 54px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.article h3 { font-size: 12.5px; font-weight: 700; color: var(--navy); line-height: 1.45; margin-bottom: 4px; }
.article span { font-size: 11px; color: #93a8c4; }
.article:hover h3 { color: var(--blue); }

/* ---------------------------------------------------------------- footer */
/* Compact two-row footer: brand + centred nav + socials on row 1, a thin
   divider, then copyright + legal links on row 2. */
.site-footer { background: var(--navy-deep); color: #c3d4e8; }

.footer-top {
  display: flex; align-items: center; gap: 28px;
  padding: 18px 0;
}
.footer-brand { flex: none; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-tag { color: #89a2bf; }

.footer-nav {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 26px;
  margin: 0 auto;
}
.footer-nav a { font-size: 14px; color: #c3d4e8; transition: color .18s; }
.footer-nav a:hover { color: #fff; }

.socials { display: flex; align-items: center; gap: 9px; flex: none; }
.socials a {
  width: 31px; height: 31px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: grid; place-items: center; color: #fff; font-size: 12px;
  transition: .18s;
}
.socials a:hover { background: var(--blue); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 14px 0; font-size: 12.5px; color: #89a2bf;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-bottom a { color: #89a2bf; transition: color .18s; }
.footer-bottom a:hover { color: #fff; }

/* ------------------------------------------- sticky footer ad (728x90) */
/* Full-width white bar pinned to the bottom of the viewport, overlaying the
   page. The unit keeps its true 728x90 pixel size (so third-party ad code
   gets the dimensions it requires) and is scaled down on narrow screens. */
.sticky-ad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(16, 42, 77, .1);
  display: flex; align-items: center; justify-content: center;
  padding: 4px 34px 4px 10px;
}
.sticky-ad.is-closed { display: none; }

.sticky-ad-frame {
  --sa-w: 728px;
  --sa-h: 90px;
  --sa-scale: 1;
  width: calc(var(--sa-w) * var(--sa-scale));
  height: calc(var(--sa-h) * var(--sa-scale));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sticky-ad-unit {
  width: var(--sa-w); height: var(--sa-h);
  flex: none;
  transform: scale(var(--sa-scale));
  transform-origin: center center;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sticky-ad-placeholder {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #9db0c9; font-weight: 600;
}
.sticky-ad-placeholder i { font-size: 20px; color: #bcd1e8; }
.sticky-ad-placeholder b { color: #7d93b2; font-weight: 700; }

.sticky-ad-close {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: none; color: #93a7c4; font-size: 13px;
  display: grid; place-items: center; transition: .18s; padding: 0;
}
.sticky-ad-close:hover { background: #eef4fc; color: var(--ink); }

/* Keep the toast clear of the sticky bar. */
body:not(.sticky-ad-dismissed) .toast { bottom: 120px; }

/* Reserve room at the end of the page so the fixed bar never hides the
   footer's last row. Removed once the visitor dismisses the ad. */
body:not(.sticky-ad-dismissed) .site-footer { padding-bottom: 104px; }

/* ----------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 24px);
  background: var(--navy); color: #fff; padding: 11px 20px; border-radius: 10px;
  font-size: 14px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: .25s; z-index: 200;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1200px) {
  .main-nav { gap: 22px; }
}
@media (max-width: 1040px) {
  .main-nav { gap: 16px; }
}

/* 728x90 ad: keep the unit's real pixel size, scale it down to fit narrow
   screens proportionally so it never overflows the content column. */
@media (max-width: 771px) { .banner-ad-frame { --ad-scale: .82; } }
@media (max-width: 640px) { .banner-ad-frame { --ad-scale: .68; } }
@media (max-width: 538px) { .banner-ad-frame { --ad-scale: .54; } }
@media (max-width: 436px) { .banner-ad-frame { --ad-scale: .43; } }
@media (max-width: 356px) { .banner-ad-frame { --ad-scale: .35; } }

/* Sticky bottom ad: same approach, but allow for the close button's gutter.
   The footer's reserved space shrinks with the bar so no gap is left over. */
@media (max-width: 800px) {
  .sticky-ad-frame { --sa-scale: .86; }
  body:not(.sticky-ad-dismissed) .site-footer { padding-bottom: 92px; }
}
@media (max-width: 680px) {
  .sticky-ad-frame { --sa-scale: .72; }
  body:not(.sticky-ad-dismissed) .site-footer { padding-bottom: 80px; }
}
@media (max-width: 570px) {
  .sticky-ad-frame { --sa-scale: .58; }
  body:not(.sticky-ad-dismissed) .site-footer { padding-bottom: 68px; }
}
@media (max-width: 470px) {
  .sticky-ad-frame { --sa-scale: .46; }
  body:not(.sticky-ad-dismissed) .site-footer { padding-bottom: 58px; }
}
@media (max-width: 390px) {
  .sticky-ad-frame { --sa-scale: .38; }
  body:not(.sticky-ad-dismissed) .site-footer { padding-bottom: 52px; }
}
@media (max-width: 340px) {
  .sticky-ad-frame { --sa-scale: .32; }
  body:not(.sticky-ad-dismissed) .site-footer { padding-bottom: 46px; }
}
@media (max-width: 1140px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; grid-template-columns: repeat(2, 1fr); align-items: start; }
}
@media (max-width: 980px) {
  .hero { padding: 24px 20px 22px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero-visual { min-height: 310px; margin-top: 8px; }
  .photo-card { width: 66%; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .compare-row { grid-template-columns: minmax(0, 1fr); }
  /* footer: stack the three row-1 blocks once they no longer fit on one line */
  .footer-top { flex-direction: column; align-items: center; gap: 16px; padding: 20px 0; }
  .footer-nav { margin: 0; }
  .removed-actions { justify-content: flex-start; }
}
@media (max-width: 860px) {
  .main-nav {
    position: absolute; left: 0; right: 0; top: 68px; transform: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 6px 18px 14px; display: none; box-shadow: var(--shadow);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 11px 0; border-bottom: 1px solid #f1f6fc; }
  .main-nav a.is-active::after { display: none; }
  .nav-toggle { display: grid; }
  .header-actions .btn { display: none; }
  .details-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* hide the tagline in the tight header only; the footer keeps it */
  .site-header .brand-tag { display: none; }
  .hero h1 { font-size: 28px; letter-spacing: -.8px; }
  .hero-visual { min-height: 270px; }
  .photo-card { width: 76%; transform: rotate(-2deg); }
  .photo-card img { height: 150px; }
  .exif-card { width: 160px; right: 0; top: 10px; padding: 11px; }
  .exif-card dt { min-width: 42px; }
  .curve-arrow { right: 6%; top: 158px; width: 88px; height: 64px; }
  .lock-badge { right: 4%; bottom: 6px; width: 44px; height: 44px; font-size: 17px; }
  .script-note { left: 2%; bottom: 10px; font-size: 19px; text-align: left; }
  .upload-box { padding: 26px 16px; }
  .upload-title { font-size: 17.5px; }
  .upload-icon { font-size: 38px; }
  .sidebar { grid-template-columns: 1fr; }
  .steps, .tools-grid { grid-template-columns: 1fr; }
  .block { padding: 18px 16px; }
  .ba-half img { height: 118px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   MOBILE ONLY — centre all text and section content.
   Applies at <=640px, the same breakpoint the layout already collapses at.
   Desktop and tablet layouts are untouched. The hero illustration (photo
   card, EXIF card, dashed arrow, lock badge, script note) is deliberately
   left alone: its pieces are absolutely positioned relative to each other,
   so moving them individually would break the composition.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* The 160x600 skyscraper pair is a desktop-only unit: two tall columns do
     not fit a phone, so the whole slot (label included) is hidden here. */
  #side-ad-sky { display: none; }

  /* hero copy */
  .hero-copy { text-align: center; }
  .hero-checks { justify-content: center; }

  /* section headings: icon stacked above the centred title */
  .section-head { flex-direction: column; align-items: center; text-align: center; }

  /* Before/After + Metadata Removed */
  .removed-panel { text-align: center; padding: 4px 0 0; }
  .removed-list li { justify-content: center; }
  .removed-actions { justify-content: center; }

  /* full metadata report */
  .details-head { justify-content: center; text-align: center; }
  .details-head h2 { justify-content: center; }
  .details-head-actions { justify-content: center; }
  .preview-box .info { text-align: center; }
  .meta-table th, .meta-table td { text-align: center; }
  .meta-table th { width: 45%; }

  /* tools: icon and copy centred; the badge stays pinned top-right */
  .tool-card { text-align: center; padding-top: 34px; }
  .tool-ico { margin-left: auto; margin-right: auto; }
  .tool-card p { margin: 0; }
  .tool-card .go { left: 0; right: 0; text-align: center; }
  .tool-badge { top: 11px; right: 50%; transform: translateX(50%); }

  /* long-form copy: centre the text but keep list markers readable */
  .prose p, .prose h3 { text-align: center; max-width: 100%; }
  .prose-list { max-width: 100%; }
  .prose-list li { padding-left: 0; text-align: center; }
  .prose-list li::before { display: none; }
  .steps-list { max-width: 100%; }
  .steps-list li { padding-left: 0; padding-top: 38px; text-align: center; }
  .steps-list li::before { left: 50%; transform: translateX(-50%); top: 0; }
  .page-meta { justify-content: center; text-align: center; }
  .page-meta span { justify-content: center; }

  /* FAQ: question text and the +/- sign centred together */
  .faq-q { justify-content: center; gap: 9px; text-align: center; }
  .faq-a p { text-align: center; }

  /* sidebar */
  .ad-label { text-align: center; }
  .side-card h2 { text-align: center; }
  .side-head { justify-content: center; }
  /* the Quick Tools row is icon + text wrapper + chevron: stack them centred */
  .qt { flex-direction: column; justify-content: center; text-align: center; gap: 7px; }
  .qt .chev { margin-left: 0; }

  /* footer */
  .footer-top { text-align: center; }
  .footer-brand { justify-content: center; }
  .footer-nav { justify-content: center; }
  .socials { justify-content: center; }
  .footer-bottom { align-items: center; text-align: center; }
  .footer-bottom nav { justify-content: center; }
}