/* ===== Design tokens ===== */
:root {
  --color-bg: #faf9f7;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f4f1;
  --color-border: #e7e4df;
  --color-text: #1c1917;
  --color-text-muted: #78716c;
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-primary-soft: #eef0ff;
  --color-primary-contrast: #ffffff;
  --color-accent: #f59e0b;
  --color-success: #15803d;
  --color-success-bg: #f0fdf4;
  --color-error: #b91c1c;
  --color-error-bg: #fef2f2;
  --color-warn-bg: #fffbeb;
  --color-warn: #92400e;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(28,25,23,0.06);
  --shadow-md: 0 8px 24px rgba(28,25,23,0.08);
  --shadow-lg: 0 24px 60px rgba(79,70,229,0.14);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --max-width: 1180px;
}

@media (prefers-color-scheme: dark) {
  /* Reserved for future dark mode; current product intentionally ships one warm light theme. */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--color-text-muted); }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ===== Header / Nav ===== */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--color-text); flex-shrink: 0; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; display: block; box-shadow: 0 2px 8px rgba(79,70,229,0.35); flex-shrink: 0; }
.main-nav {
  display: flex; gap: 4px; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  flex: 1; min-width: 0;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  color: var(--color-text-muted); text-decoration: none; font-size: 0.92rem; font-weight: 600;
  padding: 8px 12px; border-radius: var(--radius-pill); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease;
}
.main-nav a:hover { color: var(--color-text); background: var(--color-surface-alt); }
.privacy-badge { font-size: 0.78rem; color: var(--color-success); background: var(--color-success-bg); padding: 5px 11px; border-radius: var(--radius-pill); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.header-admin-link { color: var(--color-text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.header-admin-link:hover { color: var(--color-text); }
.header-cta { white-space: nowrap; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 0.95rem; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--color-primary); color: var(--color-primary-contrast);
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--color-primary-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-primary-soft); }
.btn-small { padding: 7px 14px; font-size: 0.85rem; }
.btn-icon { background: transparent; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 1rem; padding: 4px 8px; border-radius: 6px; }
.btn-icon:hover { background: var(--color-surface-alt); color: var(--color-error); }
.btn-danger { background: var(--color-error); }
.btn-generate-all {
  padding: 15px 30px; font-size: 1.02rem; border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(79,70,229,0.3);
}
.btn-generate-all:not(:disabled):hover { box-shadow: 0 14px 30px rgba(79,70,229,0.38); }
.btn-pill { border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--color-primary), #8b5cf6); box-shadow: 0 6px 16px rgba(79,70,229,0.3); }
.btn-pill:hover { background: linear-gradient(135deg, var(--color-primary-hover), #7c3aed); }

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 64px 0 44px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(560px 320px at 15% -10%, rgba(79,70,229,0.10), transparent 60%),
    radial-gradient(480px 280px at 90% 0%, rgba(245,158,11,0.09), transparent 55%);
}
.hero-eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-primary); background: var(--color-primary-soft); padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 18px;
}
.hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; max-width: 720px; margin-left: auto; margin-right: auto; }
.hero .lead { font-size: 1.15rem; color: var(--color-text-muted); max-width: 620px; margin: 0 auto 32px; }
.hero-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.hero-badge { font-size: 0.84rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); padding: 6px 13px; border-radius: var(--radius-pill); }

/* ===== Homepage hero (two-column + floating tool list) ===== */
.hero-home {
  text-align: left; padding: 48px 0 40px;
  background:
    radial-gradient(700px 420px at 10% -15%, rgba(79,70,229,0.10), transparent 60%),
    radial-gradient(600px 360px at 100% 10%, rgba(236,72,153,0.09), transparent 55%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  position: relative;
}
@media (min-width: 1240px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 200px); }
}
.hero-copy { max-width: 480px; }
.hero-copy .hero-eyebrow { margin-bottom: 18px; }
.hero-copy h1 { margin: 0 0 16px; text-align: left; max-width: none; display: flex; flex-direction: column; }
.hero-line { display: block; }
.hero-gradient-text {
  background: linear-gradient(100deg, var(--color-primary) 15%, #d946ef 55%, #ec4899 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy .lead { text-align: left; margin: 0 0 28px; max-width: none; }
.hero-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.hero-benefits li { display: flex; align-items: flex-start; gap: 10px; }
.hero-benefit-icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.hero-benefit-icon svg { width: 16px; height: 16px; }
.hero-benefit-text { display: flex; flex-direction: column; font-size: 0.85rem; }
.hero-benefit-text strong { font-size: 0.9rem; font-weight: 700; }
.hero-benefit-text span { color: var(--color-text-muted); }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 46px 20px 30px; }
.hero-visual .upload-zone { position: relative; z-index: 3; margin: 34px auto 0; width: 100%; max-width: 400px; }
.hero-visual-stack {
  position: relative; z-index: 1; width: 100%; max-width: 400px; height: 190px; margin: 0 auto;
}
.hero-stack-img {
  position: absolute; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  border: 4px solid var(--color-surface);
}
.hero-stack-back2 { inset: 0 12% auto auto; width: 62%; height: 78%; transform: rotate(9deg); z-index: 1; }
.hero-stack-back1 { inset: auto auto 4% 0; width: 66%; height: 82%; transform: rotate(-7deg); z-index: 2; }
.hero-stack-main { inset: 6% 6% auto auto; width: 78%; height: 92%; margin-left: auto; transform: rotate(3deg); z-index: 3; box-shadow: var(--shadow-lg); }
.hero-stack-badge {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: 4;
  background: var(--color-text); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 6px 14px; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: var(--shadow-md);
}

/* Hand-drawn style annotation */
.hero-annotation {
  position: absolute; z-index: 4; font-family: "Segoe Print", "Bradley Hand", cursive, var(--font-sans);
  font-size: 0.9rem; font-weight: 700; color: var(--color-primary); line-height: 1.25; text-align: center;
  pointer-events: none;
}
.hero-annotation-turn { top: -2%; left: 4%; transform: rotate(-6deg); }

.hero-tool-list {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 8px 0 8px 8px;
}
.hero-tool-list-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted); margin: 0 0 6px 10px;
}
.hero-float-pill {
  display: inline-flex; align-items: center; gap: 9px; width: 100%;
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
  border-radius: var(--radius-pill); padding: 9px 18px 9px 10px; font-size: 0.85rem; font-weight: 700; color: var(--color-text);
  white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hero-float-pill:hover { transform: translateX(4px); box-shadow: var(--shadow-md); border-color: var(--tool-color, var(--color-primary)); }
.hero-float-pill-icon {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--tool-color, var(--color-primary)); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hero-float-pill-icon svg { width: 13px; height: 13px; }

/* ===== Upload zone ===== */
.upload-zone {
  position: relative;
  border: 2px dashed #c7c2f5;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: 52px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  max-width: 620px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
.upload-zone:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.upload-zone.dragover { border-color: var(--color-primary); background: var(--color-primary-soft); transform: scale(1.01); }
.upload-zone-icon {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px;
  background: linear-gradient(135deg, var(--color-primary), #8b5cf6); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.upload-zone-icon svg { width: 26px; height: 26px; }
.upload-zone h2 { font-size: 1.2rem; margin-bottom: 6px; }
.upload-browse { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.upload-zone .formats { font-size: 0.83rem; color: var(--color-text-muted); margin-top: 12px; margin-bottom: 0; }
.upload-zone .formats-privacy { color: var(--color-success); font-weight: 600; margin-top: 4px; }

.upload-zone-home { padding: 44px 28px; }
.upload-zone-home .upload-zone-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, var(--color-primary), #6366f1);
  box-shadow: 0 10px 22px rgba(79,70,229,0.35);
}
.upload-zone-home .upload-zone-icon svg { width: 30px; height: 30px; }
.upload-zone-or { margin: 4px 0; font-size: 0.85rem; }
.upload-browse-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), #6366f1); color: #fff;
  font-weight: 700; font-size: 0.92rem; padding: 12px 26px; border-radius: var(--radius-sm);
  margin: 4px 0 14px; box-shadow: 0 8px 18px rgba(79,70,229,0.3);
}

/* ===== Popular tools (homepage) ===== */
.popular-tools { padding: 24px 0 56px; }
.tool-grid-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tool-grid-header h2 { font-size: 1.6rem; margin-bottom: 6px; }
.tool-grid-header .section-sub { color: var(--color-text-muted); margin: 0; }
.tool-grid-header .explore-all { flex-shrink: 0; font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.tool-grid-header .explore-all:hover { text-decoration: underline; }

/* ===== Workspace layout (3-column: image / create / outputs+results) ===== */
.workspace {
  padding: 12px 0 48px;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 320px);
  grid-template-areas: "image create selected" "image create results";
  align-items: start;
}
#imagesPanel { grid-area: image; }
#outputsPanel { display: contents; }
.workspace-col-create { grid-area: create; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.workspace-col-selected { grid-area: selected; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); align-self: start; }
#resultsPanel { grid-area: results; }
#resultsPanel.panel { align-self: start; }

.workspace-pdf { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-areas: "image pdfpanel"; }
#pdfPanel { grid-area: pdfpanel; }

.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 0; box-shadow: var(--shadow-sm); }
.panel h2 { font-size: 1.15rem; }
.panel-sub { color: var(--color-text-muted); font-size: 0.9rem; margin-top: -8px; margin-bottom: 16px; }
.panel-sub-tight { margin-bottom: 12px; }

.image-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.image-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px; }
.image-card-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.image-card-meta { display: flex; flex-direction: column; overflow: hidden; flex: 1; }
.image-card-name { font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-card-dims { font-size: 0.78rem; color: var(--color-text-muted); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn { background: none; border: none; padding: 10px 14px; font-weight: 700; font-size: 0.9rem; color: var(--color-text-muted); cursor: pointer; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
.tab-btn:hover { color: var(--color-text); background: var(--color-surface-alt); }
.tab-btn[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-panel[hidden] { display: none; }

.field-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 0.85rem; font-weight: 700; }
.field input, .field select {
  padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.95rem; min-width: 120px; font-family: inherit;
}
.field input:hover, .field select:hover { border-color: #c7c2f5; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }

.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.preset-btn { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); padding: 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.12s ease, background 0.12s ease; }
.preset-btn:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.preset-btn-label { font-weight: 700; font-size: 0.9rem; }
.preset-btn-dims { font-size: 0.78rem; color: var(--color-text-muted); }
.platform-block { margin-bottom: 8px; }
.platform-title { font-size: 0.95rem; margin: 20px 0 10px; font-weight: 700; }
.platform-title:first-child { margin-top: 0; }

.resize-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.output-chips, .selected-outputs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.output-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--color-primary-soft); color: var(--color-primary); border-radius: var(--radius-sm);
  padding: 9px 8px 9px 14px; font-size: 0.85rem; font-weight: 700;
}
.chip-remove { background: none; border: none; cursor: pointer; color: inherit; font-size: 0.9rem; padding: 4px 8px; border-radius: var(--radius-pill); flex-shrink: 0; }
.chip-remove:hover { background: rgba(79,70,229,0.14); }
.selected-outputs:empty::before {
  content: "Nothing selected yet — choose an output on the left.";
  display: block; font-size: 0.85rem; color: var(--color-text-muted); padding: 10px 0;
}

.generate-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.progress-track { flex: 1; min-width: 140px; height: 8px; background: var(--color-surface-alt); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), #8b5cf6); width: 0%; transition: width 0.2s ease; }

.results-group { margin-bottom: 24px; }
.results-group-title { font-size: 1rem; margin-bottom: 10px; font-weight: 700; }
.results-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.result-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--color-surface); transition: box-shadow 0.15s ease, transform 0.1s ease; }
.result-card:hover { box-shadow: var(--shadow-sm); }
.result-card-label { font-size: 0.82rem; font-weight: 700; }
.result-card-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--color-surface-alt); }
.result-card-meta { font-size: 0.78rem; color: var(--color-text-muted); }
.result-card-state { font-size: 0.82rem; color: var(--color-text-muted); }
.result-card-state.error { color: var(--color-error); }
.result-card-warn { font-size: 0.75rem; color: var(--color-warn); background: var(--color-warn-bg); padding: 6px 8px; border-radius: 6px; }

.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Crop tool */
.crop-stage { position: relative; max-width: 480px; margin: 0 auto 16px; user-select: none; }
.crop-stage img { width: 100%; border-radius: var(--radius-md); }
.crop-overlay {
  position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 2000px rgba(28,25,23,0.5); cursor: move; touch-action: none;
}
.crop-handle { position: absolute; width: 20px; height: 20px; background: var(--color-primary); border: 2px solid #fff; border-radius: 50%; right: -11px; bottom: -11px; cursor: nwse-resize; touch-action: none; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }

/* PDF order list */
.pdf-order-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.pdf-order-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px; background: var(--color-surface); cursor: grab; }
.pdf-order-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }

/* Toasts */
#toastWrap { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; max-width: 340px; }
.toast { background: var(--color-text); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; box-shadow: var(--shadow-md); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { background: var(--color-error); }
.toast-success { background: var(--color-success); }

/* Info / SEO content sections */
.info-section { padding: 48px 0; }
.info-section h2 { font-size: 1.5rem; margin-bottom: 16px; }
.faq-item { border-bottom: 1px solid var(--color-border); padding: 16px 0; }
.faq-item h3 { font-size: 1rem; margin-bottom: 6px; }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin: 24px 0; }
.tool-card {
  position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 22px 20px 50px; text-decoration: none; color: var(--color-text);
  background:
    radial-gradient(120px 90px at 100% 0%, color-mix(in srgb, var(--tool-color, var(--color-primary)) 12%, transparent), transparent 70%),
    var(--color-surface);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}
.tool-card:hover { border-color: var(--tool-color, var(--color-primary)); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.tool-card:focus-visible { transform: translateY(-4px); }
.tool-card h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 5px; letter-spacing: -0.01em; }
.tool-card p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.tool-card-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px;
  border-radius: 14px; margin-bottom: 18px; color: #fff;
  background: linear-gradient(135deg, var(--tool-color, var(--color-primary)), color-mix(in srgb, var(--tool-color, var(--color-primary)) 60%, #000 8%));
  box-shadow: 0 8px 16px color-mix(in srgb, var(--tool-color, var(--color-primary)) 35%, transparent);
}
.tool-card-icon svg { width: 24px; height: 24px; }
.tool-card-arrow {
  position: absolute; left: 20px; bottom: 20px;
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: color-mix(in srgb, var(--tool-color, var(--color-primary)) 14%, transparent);
  color: var(--tool-color, var(--color-primary)); font-weight: 700; font-size: 0.9rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.tool-card:hover .tool-card-arrow { transform: translateX(4px); background: var(--tool-color, var(--color-primary)); color: #fff; }

/* ===== Workspace preview (static, decorative — homepage only) ===== */
.workspace-preview { padding: 8px 0 56px; }
.wsp-header { text-align: center; max-width: 560px; margin: 0 auto 32px; }
.wsp-header h2 { font-size: 1.6rem; margin-bottom: 8px; }
.wsp-header .section-sub { color: var(--color-text-muted); margin: 0; }
.wsp-flow {
  display: grid; grid-template-columns: 1fr auto 1.3fr auto 1.6fr; gap: 18px; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: 32px 28px; box-shadow: var(--shadow-sm);
}
.wsp-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.wsp-col-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.wsp-arrow { color: var(--color-border); display: flex; align-items: center; justify-content: center; }
.wsp-arrow svg { width: 26px; height: 26px; }
.wsp-image-card {
  width: 128px; height: 128px; border-radius: var(--radius-lg); overflow: hidden;
  border: 4px solid var(--color-surface); box-shadow: var(--shadow-md); transform: rotate(-2deg);
}
.wsp-image-card img { width: 100%; height: 100%; object-fit: cover; }
.wsp-create-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 220px; }
.wsp-create-list li {
  display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700;
  background: var(--color-surface-alt); border-radius: var(--radius-pill); padding: 7px 12px 7px 7px; text-align: left;
}
.wsp-create-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; color: #fff;
  background: var(--tool-color, var(--color-primary)); display: flex; align-items: center; justify-content: center;
}
.wsp-create-icon svg { width: 12px; height: 12px; }
.wsp-output-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.wsp-output-card {
  width: 118px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-surface-alt); box-shadow: var(--shadow-sm); transition: transform 0.15s ease;
}
.wsp-output-card img { width: 100%; height: 76px; object-fit: cover; display: block; }
.wsp-output-meta { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px 10px; text-align: left; }
.wsp-output-meta strong { font-size: 0.76rem; font-weight: 800; }
.wsp-output-meta span { font-size: 0.7rem; color: var(--color-text-muted); }

@media (max-width: 900px) {
  .wsp-flow { grid-template-columns: 1fr; }
  .wsp-arrow { transform: rotate(90deg); }
}

/* Footer */
.site-footer { border-top: 1px solid var(--color-border); padding: 32px 0; color: var(--color-text-muted); font-size: 0.85rem; }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-links { display: flex; gap: 10px 16px; flex-wrap: wrap; }
.footer-links a { color: var(--color-text-muted); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Legal / informational pages (privacy, terms, disclaimer, about, contact, cookies) */
.legal-page { padding: 48px 0 64px; }
.legal-container { max-width: 760px; }
.legal-container h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 0.25em; }
.legal-updated { color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 2em; }
.legal-container h2 { font-size: 1.2rem; margin-top: 1.8em; }
.legal-container ul, .legal-container ol { margin: 0 0 1em; padding-left: 1.3em; }
.legal-container li { margin-bottom: 0.45em; }
.legal-container a { text-decoration: underline; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 2.2em; }
.legal-nav a { font-size: 0.82rem; background: var(--color-surface); border: 1px solid var(--color-border); padding: 6px 13px; border-radius: var(--radius-pill); text-decoration: none; color: var(--color-text-muted); }
.legal-nav a:hover { color: var(--color-text); border-color: var(--color-primary); }
.legal-container .placeholder-note { background: var(--color-warn-bg); color: var(--color-warn); border: 1px solid #f5dca1; border-radius: var(--radius-md); padding: 12px 16px; font-size: 0.9rem; margin: 0 0 1em; }
.legal-container .placeholder-note code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }

/* ===== Responsive ===== */
@media (max-width: 1239px) {
  .hero-tool-list { display: none; }
}

@media (max-width: 1024px) {
  .workspace, .workspace-pdf {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "create" "selected" "results";
  }
  .workspace-pdf { grid-template-areas: "image" "pdfpanel"; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: none; text-align: center; margin: 0 auto; }
  .hero-copy h1 { align-items: center; }
  .hero-copy h1, .hero-copy .lead { text-align: center; margin-left: auto; margin-right: auto; }
  .hero-benefits { max-width: 420px; margin: 0 auto; text-align: left; }
  .hero-visual { max-width: 480px; margin: 0 auto; padding: 32px 16px; }
  .hero-annotation { display: none; }
  .header-actions .header-admin-link { display: none; }
}

@media (max-width: 640px) {
  .site-header .container { height: 58px; gap: 10px; }
  .brand { font-size: 1rem; }
  .main-nav a { padding: 7px 10px; font-size: 0.86rem; }
  /* On narrow phones the nav row has no room for all three links plus the
     brand and CTA — "How It Works"/"Privacy" would scroll off-screen with
     no visible affordance (overflow-x:auto has a hidden scrollbar). The
     "Tools" link is enough for navigation at this width; the others are
     still reachable via the footer and in-page anchors. */
  .main-nav a[href="/#how-it-works"], .main-nav a[href="/#privacy"] { display: none; }
  .privacy-badge { display: none; }
  .hero { padding: 40px 0 30px; }
  .hero-home { padding: 32px 0 28px; }
  .hero-benefits { grid-template-columns: 1fr; }
  .upload-zone { padding: 36px 18px; }
  .tool-grid-header { flex-direction: column; align-items: flex-start; }
  .panel, .workspace-col-create, .workspace-col-selected { padding: 16px; }
  .field input, .field select { min-width: 0; flex: 1; }
  .btn-generate-all { width: 100%; }
  .generate-bar { flex-direction: column; align-items: stretch; }
  .results-row { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ===== Workspace mode ===== =============================================
   Once an image is uploaded, the site switches from "marketing/landing
   page" mode into "product/workspace" mode: body.workspace-active hides
   the homepage/marketing sections so the uploaded image and its controls
   are the very next thing the user sees — no scrolling past Popular
   Tools, "See it in action", or SEO content required. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.workspace-active .hero,
body.workspace-active .popular-tools,
body.workspace-active .workspace-preview,
body.workspace-active .info-section {
  display: none;
}
body.workspace-active .workspace,
body.workspace-active .workspace-pdf {
  padding-top: 28px;
  scroll-margin-top: 12px;
}
body.workspace-active #imagesPanel { scroll-margin-top: 12px; }

/* ===== Tool picker tabs ("What do you want to do?") ===== */
.tabs { align-items: stretch; gap: 8px; }
.tab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); text-decoration: none; color: var(--color-text);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.tab-btn:hover { border-color: var(--tool-color, var(--color-primary)); background: var(--color-surface-alt); transform: translateY(-1px); }
.tab-btn[aria-selected="true"] {
  border-color: var(--tool-color, var(--color-primary));
  background: color-mix(in srgb, var(--tool-color, var(--color-primary)) 10%, var(--color-surface));
  color: var(--tool-color, var(--color-primary));
}
.tab-btn-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.tab-btn-icon svg { width: 100%; height: 100%; }
.tab-btn-link { opacity: 0.92; }
.tab-btn-link:hover { opacity: 1; }

/* ===== "Your Image" panel — the uploaded image is the centerpiece ===== */
.image-card-primary { padding: 14px; gap: 16px; }
.image-card-primary .image-card-thumb { width: 108px; height: 108px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.image-card-primary .image-card-name { font-size: 0.95rem; }
.image-card-primary .image-card-dims { font-size: 0.84rem; }

/* ===== "Your Outputs" chips — a small colored marker per tool kind ===== */
.output-chip { padding-left: 10px; }
.output-chip-icon {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: currentColor; opacity: 0.55;
}
/* ===== OurPaisa Tools platform homepage additions ===== */
/* Category intro (e.g. "Image Tools" label above the Popular Tools grid) */
.category-intro { max-width: 640px; margin: 0 0 28px; }
.category-eyebrow { margin-bottom: 12px; }
.category-heading { font-size: 1.9rem; margin-bottom: 8px; }
.category-intro .section-sub { margin: 0; }

/* ===== Coming Soon categories ===== */
.coming-soon { padding: 8px 0 56px; }
.coming-soon-panel {
  background: linear-gradient(160deg, var(--color-primary-soft), #f7f1ff 60%, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
}
.coming-soon-header { margin-bottom: 28px; max-width: 680px; }
.coming-soon-eyebrow { margin-bottom: 14px; }
.coming-soon-header h2 { font-size: 1.6rem; margin-bottom: 6px; }
.coming-soon-header .section-sub { margin: 0; }
.coming-soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.coming-soon-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 20px 54px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.15s ease;
}
.coming-soon-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.coming-soon-card .tool-card-icon { margin-bottom: 16px; opacity: 0.94; }
.coming-soon-card h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 5px; }
.coming-soon-card p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.coming-soon-badge {
  position: absolute; left: 20px; bottom: 18px;
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-text-muted); background: var(--color-surface-alt);
  border: 1px solid var(--color-border); padding: 5px 12px; border-radius: var(--radius-pill);
}
.tool-request-box {
  margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.tool-request-box strong { font-size: 0.98rem; }

/* ===== Why OurPaisa Tools grid ===== */
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 24px; margin: 24px 0 36px;
}
.why-item { display: flex; align-items: flex-start; gap: 12px; }

/* ===== More from OurPaisa ecosystem banner ===== */
.ecosystem-banner { padding: 8px 0 56px; }
.ecosystem-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, #1e1b4b 0%, #4f46e5 55%, #9333ea 100%);
  padding: 44px 40px;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.ecosystem-content { max-width: 640px; }
.ecosystem-tag {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(255,255,255,0.16); color: #fff; padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.ecosystem-content h2 { color: #fff; font-size: 1.7rem; margin-bottom: 10px; }
.ecosystem-content p { color: rgba(255,255,255,0.86); margin-bottom: 18px; }
.ecosystem-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.ecosystem-badge {
  font-size: 0.8rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.ecosystem-cta { background: #fff; color: var(--color-primary); }
.ecosystem-cta:hover { background: #f2f1ff; }
.ecosystem-note { font-size: 0.78rem; color: rgba(255,255,255,0.72); margin: 14px 0 0; }

@media (max-width: 640px) {
  .coming-soon-panel { padding: 28px 18px; }
  .ecosystem-card { padding: 30px 22px; }
  .tool-request-box { flex-direction: column; align-items: flex-start; }
}

/* ===== Everyday Tools: shared additive styles (calculators, generators, timers) =====
   Purely additive -- no existing selector is modified. Reuses existing design tokens
   (colors, radii, fonts) already defined above so these match the site's visual system. */
.result-value { font-size: 2.4rem; font-weight: 800; color: var(--color-primary); line-height: 1.15; word-break: break-word; }
.result-value-sm { font-size: 1.4rem; font-weight: 700; color: var(--color-text); }
.result-sub { font-size: 0.92rem; color: var(--color-text-muted); margin-top: 4px; }
.result-error-text { color: var(--color-error); font-size: 0.92rem; }
.qr-canvas-wrap { display: flex; justify-content: center; padding: 16px; background: var(--color-surface-alt); border-radius: var(--radius-md); }
.qr-canvas-wrap canvas, .qr-canvas-wrap img { max-width: 220px; width: 100%; height: auto; }
.timer-display { font-size: clamp(2.2rem, 8vw, 3.6rem); font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; text-align: center; letter-spacing: 1px; }
.timer-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.lap-list { list-style: none; margin: 16px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.lap-list li { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.result-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.result-rows .result-row-item { display: flex; justify-content: space-between; font-size: 0.92rem; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.result-rows .result-row-item:last-child { border-bottom: none; }

/* =====================================================================
   OurPaisa Tools — homepage redesign additions (2026-09-25)
   Purely additive: every selector below is new and does not exist
   anywhere above in this file. Nothing already defined in this
   stylesheet is modified, renamed or removed by this block, so every
   existing page (tool pages, hub pages, legal pages) keeps rendering
   exactly as it did before. Scoped to only the new homepage
   (index.html) and the new /decision-tools/ hub page.

   Color notes: this block intentionally does NOT use the shared
   --color-primary / --color-bg / --color-surface-alt / --color-border
   tokens above, because those are indigo/neutral tones shared by every
   page on the site. The new homepage design (per the approved
   reference image) uses its own gold/cream accent instead, so this
   block defines its own small set of tokens (--op-*) and uses them —
   this keeps the new homepage on-brand with the reference image
   without recoloring any existing page's buttons, links or panels.
   ===================================================================== */
:root {
  --op-gold: #b8860b;
  --op-gold-hover: #96690a;
  --op-gold-soft: #f7ecd0;
  --op-cream-border: #e6dbbf;
  --op-cream-surface-alt: #f4ecd8;
}

/* --- New homepage hero --- */
.home-hero-new {
  padding: 56px 0 40px;
  background:
    radial-gradient(760px 420px at 15% -15%, rgba(184,134,11,0.13), transparent 60%),
    radial-gradient(520px 320px at 100% 0%, rgba(26,22,19,0.05), transparent 55%);
  overflow: hidden;
}
.hero-new-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; align-items: center; }
.hero-new-copy { max-width: 620px; }
.hero-new-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.hero-new-brand-name { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); }
.hero-new-brand-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--color-text); color: #fff;
  font-weight: 800; font-size: 1.1rem; padding: 6px 14px 6px 10px; border-radius: var(--radius-md); letter-spacing: -0.01em;
}
.hero-new-brand-badge svg { width: 18px; height: 18px; }
.hero-new-tagline { display: block; font-size: 0.95rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.02em; margin-bottom: 20px; }
.home-hero-new h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; text-align: left; max-width: none; }
.hero-gradient-text { background: linear-gradient(100deg, var(--op-gold) 10%, #8a6d1f 60%, var(--color-text) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero-new .lead { text-align: left; margin: 0 0 26px; max-width: 520px; }
.hero-new-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
/* Scoped to .home-hero-new only, so the shared .btn-generate-all / .btn-ghost
   classes keep their normal (indigo) styling everywhere else they're used,
   such as the "Generate All" button inside each tool's workspace. */
.home-hero-new .btn-generate-all { background: var(--op-gold); box-shadow: 0 10px 24px rgba(184,134,11,0.3); }
.home-hero-new .btn-generate-all:not(:disabled):hover { background: var(--op-gold-hover); box-shadow: 0 14px 30px rgba(184,134,11,0.38); }
.home-hero-new .btn-ghost { color: var(--op-gold); border-color: var(--op-cream-border); }
.home-hero-new .btn-ghost:hover { background: var(--op-gold-soft); }
.hero-benefits-new { grid-template-columns: repeat(3, auto); gap: 22px; justify-content: flex-start; }
.hero-benefits-new .hero-benefit-icon { background: var(--op-gold-soft); color: var(--op-gold); }

.hero-new-visual { position: relative; height: 320px; display: flex; align-items: center; justify-content: center; }
.hero-new-visual-img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-lg); }
.hero-new-visual-core {
  width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--op-gold), var(--color-text)); color: #fff; box-shadow: 0 24px 60px rgba(184,134,11,0.14);
}
.hero-new-visual-core svg { width: 42px; height: 42px; }
.hero-chip {
  position: absolute; width: 58px; height: 58px; border-radius: 18px; background: var(--color-surface);
  border: 1px solid var(--op-cream-border); box-shadow: var(--shadow-md); color: var(--op-gold);
  display: flex; align-items: center; justify-content: center;
}
.hero-chip svg { width: 26px; height: 26px; }
.hero-chip.chip-1 { top: 6%; left: 8%; color: #1a1613; }
.hero-chip.chip-2 { top: 2%; right: 18%; color: #b8860b; }
.hero-chip.chip-3 { top: 40%; right: 0%; color: #b8860b; }
.hero-chip.chip-4 { bottom: 10%; right: 22%; color: #1a1613; }
.hero-chip.chip-5 { bottom: 2%; left: 20%; color: #b8860b; }

/* --- New homepage: category head + view-all pill (decision panel header) --- */
.category-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.category-head-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; background: linear-gradient(135deg, var(--op-gold), var(--op-gold-hover)); color: #fff;
}
.category-head-icon svg { width: 20px; height: 20px; }
.category-head h2 { font-size: 1.4rem; margin: 0; }
.category-sub { color: var(--color-text-muted); margin: 8px 0 24px; max-width: 640px; }
.view-all-btn {
  margin-left: auto; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--op-gold); color: #fff; border-color: transparent;
}
.view-all-btn:hover { background: var(--op-gold-hover); }

/* --- Decision Tools: one large rounded panel on the cream hero background --- */
.decision-section { padding: 0 0 36px; }
.decision-panel {
  background: linear-gradient(160deg, #fffdfa, #fbf1dc);
  border-radius: var(--radius-xl);
  padding: 30px 30px 34px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--op-cream-border);
}
.decision-card-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

/* --- Compact card: shared by decision cards (lg) and the three panels (sm) --- */
.compact-card {
  position: relative; display: block; text-decoration: none; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--op-cream-border); border-radius: var(--radius-lg);
  padding: 16px 14px 40px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.compact-card:hover { border-color: var(--op-gold); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.compact-card-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 11px; margin-bottom: 12px; color: #fff;
  background: linear-gradient(135deg, var(--op-gold), #96690a);
}
.compact-card-icon svg { width: 18px; height: 18px; }
.compact-card h3 { font-size: 0.86rem; font-weight: 800; line-height: 1.25; margin: 0; letter-spacing: -0.005em; }
.compact-card-arrow {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--op-gold); color: #fff; font-size: 0.8rem; font-weight: 700;
  transition: transform 0.15s ease;
}
.compact-card:hover .compact-card-arrow { transform: translateX(3px); }
.compact-card-arrow-soon { background: var(--op-cream-surface-alt); color: var(--color-text-muted); border: 1px solid var(--op-cream-border); }
.compact-card-soon { cursor: default; opacity: 0.82; }
.compact-card-soon:hover { transform: none; box-shadow: none; border-color: var(--op-cream-border); }
.compact-soon-tag {
  position: absolute; top: 10px; right: 10px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--color-text-muted); background: var(--op-cream-surface-alt);
  border: 1px solid var(--op-cream-border); padding: 2px 7px; border-radius: var(--radius-pill);
}
.compact-card-lg { padding-bottom: 42px; }
.compact-card-sm h3 { font-size: 0.82rem; }

/* --- Three compact category panels --- */
.three-panels-section { padding: 0 0 40px; }
.three-panels-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tool-panel { border-radius: var(--radius-xl); padding: 24px; }
.tool-panel-green { background: #eaf7ee; }
.tool-panel-blue { background: #eaf2fc; }
.tool-panel-purple { background: #f3ecfc; }
.tool-panel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.tool-panel-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px; color: #fff;
}
.tool-panel-icon svg { width: 18px; height: 18px; }
.tool-panel-green .tool-panel-icon { background: #16a34a; }
.tool-panel-blue .tool-panel-icon { background: #2563eb; }
.tool-panel-purple .tool-panel-icon { background: #7c3aed; }
.tool-panel-head-text { flex: 1; min-width: 0; }
.tool-panel-head-text h2 { font-size: 1.08rem; margin: 0 0 2px; }
.tool-panel-head-text p { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }
.tool-panel-viewall { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; white-space: nowrap; color: var(--op-gold); text-decoration: none; }
.tool-panel-viewall:hover { text-decoration: underline; }
.tool-panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.tool-panel-grid .compact-card { padding: 14px 10px 36px; }
.tool-panel-grid .compact-card-icon { width: 32px; height: 32px; border-radius: 9px; margin-bottom: 8px; }
.tool-panel-grid .compact-card-icon svg { width: 15px; height: 15px; }
.tool-panel-grid .compact-card h3 { font-size: 0.76rem; }
.tool-panel-grid .compact-card-arrow { width: 22px; height: 22px; right: 8px; bottom: 8px; }
.tool-panel-grid-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 1024px) {
  .hero-new-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-new-copy { max-width: none; text-align: center; margin: 0 auto; }
  .hero-new-brand, .hero-new-actions { justify-content: center; }
  .home-hero-new h1 { text-align: center; }
  .home-hero-new .lead { text-align: center; margin-left: auto; margin-right: auto; }
  .hero-benefits-new { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); justify-content: center; max-width: 480px; margin: 0 auto; }
  .hero-new-visual { display: none; }

  .decision-card-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .three-panels-grid { grid-template-columns: 1fr; }
  .tool-panel-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  /* The header/nav is shared by every page; production already collapses
     the nav to a single link at this width via the equivalent rule for the
     old link hrefs. This just matches that existing pattern to the new
     homepage's link hrefs (Tools / Image Tools / Privacy replacing
     Categories / How It Works / Privacy) -- no new behavior, no elements
     hidden that weren't already collapsed by the existing pattern. */
  .main-nav a[href="/#image-tools"], .main-nav a[href="/privacy-policy/"] { display: none; }

  .hero-new-actions { flex-direction: column; align-items: stretch; }
  .hero-new-actions .btn { width: 100%; }

  .decision-panel { padding: 22px 18px 26px; }
  .decision-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tool-panel { padding: 18px; }
  .tool-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-panel-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-panel-head { flex-wrap: wrap; }
  .tool-panel-viewall { margin-left: 50px; }
}

/* --- Dark benefits strip (bottom, before footer) --- */
.benefits-strip-section { padding: 0 0 44px; }
.benefits-strip {
  background: var(--color-text); border-radius: var(--radius-xl); padding: 26px 32px;
  display: flex; flex-wrap: wrap; gap: 22px 32px; justify-content: space-between;
}
.benefits-strip-item { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; min-width: 0; }
.benefits-strip-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px; background: rgba(184,134,11,0.18); color: var(--op-gold);
}
.benefits-strip-icon svg { width: 17px; height: 17px; }
.benefits-strip-text { display: flex; flex-direction: column; font-size: 0.82rem; min-width: 0; }
.benefits-strip-text strong { color: #fff; font-size: 0.92rem; font-weight: 800; }
.benefits-strip-text span { color: #b8ad98; }


/* ===== Ecosystem discovery bar (OurPaisa / Onetrader) =====
   A slim strip above the main header, present on the homepage and the
   9 category hub pages, that lets visitors discover the wider OurPaisa
   ecosystem without competing with the page's own Tools navigation. */
.ecosystem-bar {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.ecosystem-bar-inner {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  height: 34px; font-size: 0.78rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ecosystem-bar-inner::-webkit-scrollbar { display: none; }
.ecosystem-bar-label { color: var(--color-text-muted); white-space: nowrap; }
.ecosystem-link {
  color: var(--color-text-muted); text-decoration: none; font-weight: 700; white-space: nowrap;
  padding: 2px 2px; border-radius: 4px; transition: color 0.15s ease;
}
.ecosystem-link:hover, .ecosystem-link:focus-visible { color: var(--color-primary); }
.ecosystem-sep { color: var(--color-border); }
@media (max-width: 640px) {
  .ecosystem-bar-label { display: none; }
  .ecosystem-bar-inner { justify-content: center; }
}

/* ===== Ecosystem discovery banners (OurPaisa / Onetrader) =====
   Two full-width promo panels used only on the homepage, placed between
   existing sections (never at the very top, never back to back) so they
   read as part of the page rather than as an ad. */
.ecosystem-promo { padding: 10px 0; }
.ecosystem-promo-panel {
  display: flex; align-items: center; gap: 22px;
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  box-shadow: var(--shadow-md);
}
.ecosystem-promo-icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.ecosystem-promo-icon svg { width: 28px; height: 28px; }
.ecosystem-promo-copy { flex: 1; min-width: 0; }
.ecosystem-promo-eyebrow {
  display: block; font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 4px;
}
.ecosystem-promo-copy h2 { font-size: 1.4rem; margin-bottom: 4px; }
.ecosystem-promo-copy p { margin: 0; color: var(--color-text-muted); max-width: 60ch; }
.ecosystem-promo-cta { flex-shrink: 0; white-space: nowrap; }

.ecosystem-promo-ourpaisa .ecosystem-promo-panel {
  background: linear-gradient(160deg, #fffdfa, #fbf1dc);
  border: 1px solid var(--op-cream-border);
}
.ecosystem-promo-ourpaisa .ecosystem-promo-icon { background: linear-gradient(135deg, var(--op-gold), var(--op-gold-hover)); }
.ecosystem-promo-ourpaisa .ecosystem-promo-eyebrow { color: var(--op-gold-hover); }
.ecosystem-promo-ourpaisa .ecosystem-promo-cta { background: var(--op-gold); }
.ecosystem-promo-ourpaisa .ecosystem-promo-cta:hover { background: var(--op-gold-hover); }

.ecosystem-promo-onetrader .ecosystem-promo-panel {
  background: linear-gradient(160deg, #f5f4ff, #eef0ff);
  border: 1px solid #dcdcfc;
}
.ecosystem-promo-onetrader .ecosystem-promo-icon { background: linear-gradient(135deg, var(--color-primary), #7c3aed); }
.ecosystem-promo-onetrader .ecosystem-promo-eyebrow { color: var(--color-primary); }

@media (max-width: 640px) {
  .ecosystem-promo-panel {
    flex-direction: column; align-items: flex-start; text-align: left;
    padding: 22px 20px; gap: 14px;
  }
  .ecosystem-promo-icon { width: 44px; height: 44px; border-radius: 13px; }
  .ecosystem-promo-icon svg { width: 22px; height: 22px; }
  .ecosystem-promo-cta { width: 100%; justify-content: center; }
}


/* ===== CCTV & Security Tools -- shared layout (2026-09-27) =====
   Reused by the three CCTV calculators and the category hub page.
   Purely additive; reuses existing --color-* tokens. */
.cctv-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 24px; align-items: start; }
@media (max-width: 900px) { .cctv-layout { grid-template-columns: minmax(0, 1fr); } }
.cctv-inputs-col, .cctv-results-col { min-width: 0; }
.cctv-results-col { position: sticky; top: 84px; }
@media (max-width: 900px) { .cctv-results-col { position: static; } }

.cctv-panel-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cctv-panel-title-row .cctv-panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--color-primary-soft); color: var(--color-primary); flex-shrink: 0; }
.cctv-panel-title-row .cctv-panel-icon svg { width: 17px; height: 17px; }
.cctv-panel { margin-bottom: 16px; }
.cctv-field-hint { font-size: 0.78rem; color: var(--color-text-muted); margin: -2px 0 0; }

.cctv-hero-value { border-radius: var(--radius-lg); padding: 16px; text-align: center; background: var(--color-primary-soft); margin-bottom: 14px; min-width: 0; overflow-wrap: anywhere; }
.cctv-hero-value h3 { margin: 0 0 4px; font-size: 0.8rem; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.cctv-hero-value .cctv-hero-num { font-size: 1.9rem; font-weight: 800; color: var(--color-primary); line-height: 1.15; word-break: break-word; overflow-wrap: anywhere; }

.cctv-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 520px) { .cctv-stat-grid { grid-template-columns: minmax(0, 1fr); } }
.cctv-stat-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; background: var(--color-surface); text-align: center; min-width: 0; overflow-wrap: anywhere; }
.cctv-stat-card h4 { margin: 0 0 3px; font-size: 0.68rem; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.cctv-stat-card .cctv-stat-value { font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }

.cctv-mode-note { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 14px; }
.cctv-assumptions-notice { border-radius: var(--radius-md); padding: 12px 14px; font-size: 0.85rem; margin: 14px 0 0; background: var(--color-warn-bg); color: var(--color-text); }
.cctv-assumptions-notice strong { display: block; margin-bottom: 2px; }

.cctv-copy-row { display: flex; justify-content: flex-end; margin-top: 10px; }

/* Fourth homepage category-panel color, used only by the new CCTV & Security
   Tools panel so it is visually distinct from the existing green/blue/purple
   panels. Same structure as .tool-panel-green/-blue/-purple above. */
.tool-panel-amber { background: #fef3e2; }
.tool-panel-amber .tool-panel-icon { background: #d97706; }