/* style.css */
:root {
  --accent: #d4380d;
  --accent-pale: #fdf3f0;
  --accent-dark: #a82c0a;
  --accent-dim: rgba(212,56,13,0.08);
  --ink: #1a1612;
  --ink-elevated: #26201b;
  --ink-2: #3d342c;
  --ink-3: #7a6e65;
  --ink-4: #b5aca5;
  --paper: #faf9f7;
  --paper-2: #f3f1ee;
  --paper-3: #e8e4df;
  --border: #e0dbd5;
  --border-strong: #c8c2bb;
  --shadow: 0 1px 3px rgba(26,22,18,0.08), 0 4px 16px rgba(26,22,18,0.04);
  --shadow-md: 0 2px 8px rgba(26,22,18,0.1), 0 8px 32px rgba(26,22,18,0.06);
  --shadow-lg: 0 4px 16px rgba(26,22,18,0.12), 0 16px 48px rgba(26,22,18,0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overscroll-behavior: none; }

body {
  font-family: 'Sora', sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ── HEADER ── */
header { position: sticky; top: 0; z-index: 100; background: rgba(250,249,247,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 56px; display: flex; align-items: center; }
.logo { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 14px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; flex-shrink: 0; }
nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
nav a { font-size: 13px; font-weight: 400; color: var(--ink-3); text-decoration: none; padding: 5px 11px; border: 1px solid transparent; border-radius: 2px; transition: all 0.15s; letter-spacing: 0.01em; }
nav a:hover { color: var(--ink); background: var(--paper-2); }
nav a.active { color: var(--ink); background: #fff; border-color: var(--border); box-shadow: 0 1px 2px rgba(26,22,18,0.04); font-weight: 500; }
.search-bar { display: flex; align-items: center; gap: 8px; background: var(--paper-2); border: 1px solid var(--border); border-radius: 2px; padding: 0 8px 0 14px; height: 36px; width: 380px; transition: border-color 0.15s, box-shadow 0.15s; cursor: text; margin-left: 64px; margin-right: 64px; }
.search-bar:focus-within { border-color: var(--accent); }
.search-bar input { border: none; background: none; outline: none; font-family: 'Sora', sans-serif; font-size: 13px; color: var(--ink); width: 100%; caret-color: var(--accent); }
.search-bar input::placeholder { color: var(--ink-4); }
.search-icon { color: var(--ink-4); flex-shrink: 0; }
.search-shortcut { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink-4); background: var(--paper); border: 1px solid var(--border); border-radius: 2px; padding: 2px 6px; flex-shrink: 0; pointer-events: none; }

/* ── BUTTONS ── */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 500; padding: 12px 24px; border-radius: 4px; border: none; cursor: pointer; text-decoration: none; transition: background 0.15s; letter-spacing: 0.01em; }
.btn-primary:hover { background: var(--accent-dark); }

/* ── SECTION HEADERS ── */
.section-header { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.section-title { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 400; color: var(--ink); letter-spacing: -0.02em; }
.section-link { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.section-link:hover { opacity: 0.75; }

/* ── TOOLS GRID (Shared on Home and Color Picker) ── */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tool-card { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 18px 20px; cursor: pointer; text-decoration: none; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s; position: relative; overflow: hidden; }
.tool-card:hover { border-color: var(--accent); }
.tool-icon { width: 36px; height: 36px; border-radius: 2px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; color: var(--ink-3); flex-shrink: 0; transition: background 0.15s, color 0.15s; }
.tool-card:hover .tool-icon { background: var(--accent-pale); color: var(--accent); }
.tool-name { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; }
.tool-desc { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.tool-tag { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--ink-4); letter-spacing: 0.04em; text-transform: uppercase; margin-top: auto; }
.tc-arrow { position: absolute; top: 14px; right: 14px; color: var(--ink-4); transition: all 0.15s; }
.tool-card:hover .tc-arrow { color: var(--accent); transform: translate(2px, -2px); }

/* ── FOOTER ── */
footer { background: var(--ink); color: var(--ink-4); padding: 48px 0 32px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.footer-top { display: grid; grid-template-columns: 220px 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 28px; }
.footer-brand .logo { color: rgba(255,255,255,0.9); display: block; margin-bottom: 12px; }
.footer-brand p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.35); }
.footer-col h4 { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: 13px; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.15s; }
.footer-col a:hover { color: rgba(255,255,255,0.8); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.25); }
.footer-bottom a { color: rgba(255,255,255,0.25); text-decoration: none; transition: color 0.15s; }
.footer-bottom a:hover { color: rgba(255,255,255,0.5); }

/* ── DONATION BAR ── */
.donation-bar { background: var(--ink-elevated); color: rgba(255, 255, 255, 0.7); text-align: center; padding: 14px 20px; font-size: 13px; font-family: 'DM Mono', monospace; letter-spacing: 0.01em; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.donation-bar a { color: inherit; font-weight: 500; text-decoration: none; text-transform: uppercase; margin-left: 16px; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s; }
.donation-bar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; }

/* ── GLOBAL TOAST ── */
#toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; font-family: 'DM Mono', monospace; font-size: 12.5px; padding: 10px 20px; border-radius: 4px; letter-spacing: 0.02em; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 999; white-space: nowrap; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--paper); box-shadow: inset 1px 0 0 0 var(--border-strong); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ── TOOL PAGE HEADER ── */
.page-header { background: var(--paper-2); border-bottom: 1px solid var(--border); padding: 16px 0; }
.page-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: flex-start; gap: 28px; }
.page-header-text h1 { font-family: 'DM Mono', monospace; font-size: 28px; font-weight: 500; color: var(--ink); letter-spacing: -0.04em; margin-bottom: 6px; line-height: 1.2; }
.page-header-text p { font-size: 14px; color: var(--ink-3); font-weight: 300; line-height: 1.6; max-width: 620px; margin-bottom: 0; }
.page-header-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; align-self: center; }
.meta-badge { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--ink-3); background: var(--paper); border: 1px solid var(--border); border-radius: 2px; padding: 4px 10px; letter-spacing: 0.03em; display: flex; align-items: center; gap: 5px; }
.meta-badge svg { color: var(--ink-4); }

/* ── TOOL PAGE LAYOUT & PANELS ── */
.tool-layout { max-width: 1200px; margin: 0 auto; padding: 28px 32px 64px; display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.left-panel { display: flex; flex-direction: column; gap: 16px; }
.right-panel { display: flex; flex-direction: column; gap: 14px; }

.panel-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.panel-card-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.panel-card-title { font-size: 11.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'DM Mono', monospace; }
.panel-card-action { font-size: 11.5px; color: var(--accent); background: none; border: none; cursor: pointer; font-family: 'Sora', sans-serif; font-weight: 500; padding: 0; transition: opacity 0.15s; }
.panel-card-action:hover { opacity: 0.75; }
.panel-card-body { padding: 14px 16px; }

/* ── SHARED UPLOAD ZONE ── */
.upload-zone { background: #fff; border: 2px dashed var(--border-strong); border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; position: relative; overflow: hidden; height: calc(100vh - 240px); min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.upload-zone::before { content: ''; position: absolute; inset: 0; background: var(--accent-dim); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.upload-zone:hover { border-color: var(--accent); }
.upload-zone:hover::before { opacity: 1; }
.upload-zone.dragging { border-color: var(--accent); background: var(--accent-pale); box-shadow: 0 0 0 4px var(--accent-dim); }
.upload-zone.has-image { border: 2px solid var(--border); padding: 0; cursor: default; align-items: stretch; justify-content: flex-start; }
.upload-zone.has-image:hover { border-color: var(--border); }
.upload-zone.has-image::before { display: none; }

.uz-icon { width: 52px; height: 52px; background: var(--paper-2); border: 1px solid var(--border); border-radius: 4px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.uz-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.uz-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 20px; line-height: 1.5; }
.uz-types { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.type-tag { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--ink-3); background: var(--paper-2); border: 1px solid var(--border); border-radius: 2px; padding: 3px 8px; letter-spacing: 0.03em; }

/* Ensure the dynamically loaded upload zone icon stays the correct size */
.uz-icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* ── RELATED TOOLS SECTION ── */
.related-wrapper { background: var(--paper-2); border-top: 1px solid var(--border); margin-top: 48px; }
.related-section { max-width: 1200px; margin: 0 auto; padding: 48px 32px 56px; }
.related-section .section-header { padding: 0; }

/* ── LEGAL & TEXT PAGES (Terms, Privacy) ── */
.legal-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: flex-start; gap: 28px; }
.legal-layout { max-width: 1200px; margin: 0 auto; padding: 48px 32px 80px; display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: start; }

/* Sticky Table of Contents */
.legal-sidebar { 
  position: sticky; 
  top: 88px; 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
  max-height: calc(100vh - 120px); 
  overflow-y: auto;
  scrollbar-width: none; 
}
.legal-sidebar::-webkit-scrollbar { display: none; }

.legal-sidebar-title { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; padding-left: 12px; }
.legal-nav-link { font-size: 13px; font-weight: 400; color: var(--ink-3); text-decoration: none; padding: 8px 12px; border-left: 2px solid transparent; transition: all 0.15s; line-height: 1.4; border-radius: 0 4px 4px 0; }
.legal-nav-link:hover { color: var(--ink); background: var(--paper-2); }
.legal-nav-link.active { color: var(--accent); border-color: var(--accent); background: var(--accent-pale); font-weight: 500; }

/* Content Formatting */
.legal-content { display: flex; flex-direction: column; gap: 56px; padding-left: 64px; max-width: 750px; }
.legal-section { scroll-margin-top: 88px; } 
.legal-section h2 { font-family: 'DM Mono', monospace; font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: 20px; letter-spacing: -0.02em; }
.legal-section p { font-size: 14px; color: var(--ink-2); line-height: 1.75; margin-bottom: 16px; max-width: 800px; }
.legal-section ul { list-style: none; margin-bottom: 16px; padding-left: 4px; max-width: 800px; }
.legal-section li { font-size: 14px; color: var(--ink-2); line-height: 1.75; margin-bottom: 8px; position: relative; padding-left: 20px; }
.legal-section li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: 'DM Mono', monospace; }
.legal-section a { color: var(--accent); text-decoration: none; transition: opacity 0.15s; }
.legal-section a:hover { opacity: 0.7; text-decoration: underline; text-underline-offset: 4px; }

/* TL;DR Callout Boxes */
.tldr-box { background: var(--paper-2); border-radius: 6px; padding: 20px 24px; margin-bottom: 24px; position: relative; overflow: hidden; border: 1px solid var(--border); max-width: 800px; }
.tldr-box::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--accent); }
.tldr-title { font-family: 'DM Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tldr-text { font-size: 13.5px; color: var(--ink); line-height: 1.6; font-weight: 500; margin: 0 !important; }

@media (max-width: 768px) {
  .legal-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-sidebar { display: none; } 
}

/* ── ADVANCED SEARCH DROPDOWN ── */
.search-bar { 
  position: relative; /* Anchors the absolute dropdown */
} 

.search-results-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: var(--paper); /* Matches your site background */
  border: 1px solid var(--border-strong); /* Stronger border instead of a shadow */
  border-radius: 6px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  flex-direction: column;
  padding: 6px; /* Inner padding so items don't touch the edges */
}

.search-results-dropdown.show { display: flex; }

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 4px; /* Rounded items inside the container */
  transition: background 0.15s;
}

.search-result-item:hover, .search-result-item.active { 
  background: var(--paper-2); /* Subtle flat highlight */
}

.sr-icon { 
  width: 30px; 
  height: 30px; 
  border-radius: 4px; 
  background: #fff; /* Crisp white background for the icon */
  border: 1px solid var(--border); /* Flat border instead of plain background */
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: var(--ink-2); 
  flex-shrink: 0; 
}

.sr-text { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }

.sr-title { 
  font-family: 'Sora', sans-serif; 
  font-size: 13px; 
  font-weight: 600; 
  color: var(--ink); 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.sr-desc { 
  font-size: 11.5px; 
  color: var(--ink-3); 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.sr-empty { 
  padding: 12px; 
  text-align: center; 
  font-size: 13px; 
  color: var(--ink-4); 
}

/* Highlights matching text typed by the user */
.sr-highlight { 
  color: var(--accent); 
  background: var(--accent-pale); 
  font-weight: 600; 
  border-radius: 2px; 
}

/* Fix squared-off corners by curving the track to match the container */
.search-results-dropdown::-webkit-scrollbar-track {
  margin: 0; /* Let it reach the absolute top and bottom */
  border-top-right-radius: 6px; /* Match the dropdown's top right curve */
  border-bottom-right-radius: 6px; /* Match the dropdown's bottom right curve */
  background: transparent; /* Prevents the track's background color from drawing outside the curve */
}

/* ── SHARED WORKSPACE & CANVAS VIEWER ── */
.image-canvas-wrapper { position: relative; width: 100%; flex: 1; min-height: 0; border-radius: 6px 6px 0 0; overflow: hidden; background: repeating-conic-gradient(var(--paper-2) 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; cursor: grab; }
.image-canvas-wrapper:active { cursor: grabbing; }

.canvas-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border-top: 1px solid var(--border); flex-shrink: 0; }
.canvas-toolbar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 4px; background: #fff; font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: all 0.15s; }
.canvas-toolbar-btn:hover { background: var(--paper-2); color: var(--ink); border-color: var(--border-strong); }

.toolbar-stats { display: flex; align-items: center; gap: 12px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink-3); margin-right: auto; }
.stat-item { display: inline-flex; align-items: center; gap: 6px; }
.stat-badge { background: var(--paper-2); padding: 4px 8px; border-radius: 4px; color: var(--ink); border: 1px solid var(--border); }
.stat-arrow { color: var(--ink-4); }

/* ── SHARED RIGHT PANEL CONTROLS ── */
.ratio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.ratio-btn { padding: 8px; border: 1px solid var(--border); border-radius: 4px; background: #fff; font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; text-align: center; transition: all 0.1s; }
.ratio-btn:hover { border-color: var(--border-strong); background: var(--paper-2); }
.ratio-btn.active { border-color: var(--ink); background: var(--ink); color: #fff; }

.dim-row { display: flex; gap: 8px; margin-bottom: 4px; align-items: stretch; }
.dim-input { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dim-input label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.dim-input input { padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; font-family: 'DM Mono', monospace; color: var(--ink); width: 100%; box-sizing: border-box; background: var(--paper-2); }
.dim-input input:focus { outline: none; border-color: var(--accent); background: #fff; }

.btn-download { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 4px; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s; }
.btn-download:hover { background: var(--accent-dark); }
.btn-download:disabled { background: var(--border-strong); cursor: not-allowed; }

.segment-ctrl { display: flex; background: var(--paper-2); border-radius: 6px; padding: 4px; gap: 4px; margin-bottom: 16px; border: 1px solid var(--border); }
.seg-btn { flex: 1; padding: 8px 12px; border: none; background: transparent; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: 'Sora', sans-serif; font-weight: 600; color: var(--ink-3); transition: all 0.15s; }
.seg-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.input-wrapper { position: relative; display: flex; align-items: center; }
.input-suffix { position: absolute; right: 10px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink-4); pointer-events: none; }

.lock-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 4px; background: var(--paper-2); border: 1px solid var(--border); cursor: pointer; color: var(--ink-3); transition: all 0.15s; flex-shrink: 0; box-sizing: border-box; }
.lock-btn:hover { background: var(--border); color: var(--ink); }
.lock-btn.locked { color: var(--accent); border-color: var(--accent); background: var(--accent-pale); }

/* ── CANVAS TITLE STRIP ── */
.canvas-title-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
}

.strip-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.strip-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* Overwrite existing canvas wrapper to remove the top border radius since the title strip has it now */
.image-canvas-wrapper { 
  border-radius: 0; 
}

/* ── MOBILE RESPONSIVENESS (PHONES & TABLETS) ── */
@media (max-width: 768px) {
  /* 1. Header & Navigation */
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 12px;
  }
  .search-bar {
    width: 100%;       /* Allow search bar to fill screen */
    margin: 0;         /* Remove hardcoded 64px margins */
    order: 3;          /* Push the search bar below the logo and nav links */
  }

  .search-shortcut {
    display: none;
  }
  
  nav {
    display: none;
  }

  /* 1. Make the container wrap and remove extra padding */
  .header-stats {
    display: flex;
    gap: 8px;        /* Tighter gap for small screens */
    width: 100%;
  }

  /* 2. Make each stat item scale down */
  .hstat {
    flex: 1 1 auto;  /* Grow and shrink based on content */
    min-width: 0;    /* Prevents the item from overflowing its parent */
    padding: 8px;    /* Smaller padding */
    text-align: center;
  }

  /* 3. Shrink the text sizes so they don't force a huge width */
  .hstat-value {
    font-size: 16px; /* Smaller numbers */
  }
  
  .hstat-label {
    font-size: 10px; /* Smaller labels */
    white-space: nowrap; /* Keep "Files Processed" on one line */
  }
  
  .sidebar {
    display: none;
  }
  
  /* 2. Global Padding Reductions (32px is too wide for phones) */
  .section-header, 
  .footer-inner, 
  .page-header-inner, 
  .tool-layout,
  .related-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 3. Footer Layout */
  .footer-top {
    grid-template-columns: 1fr; /* Stack footer columns vertically */
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* 4. Tool Page Layouts */
  .tool-layout {
    grid-template-columns: 1fr; /* Stack the canvas and right-side controls */
    padding-top: 24px;
    padding-bottom: 32px;
  }
  .page-header-inner {
    flex-direction: column; /* Stack tool title and format badge */
    gap: 16px;
  }
  .upload-zone {
    min-height: 300px;
    height: auto;
    padding: 24px;
  }
  .canvas-toolbar {
    flex-wrap: wrap; /* Prevent toolbar buttons from overflowing */
  }

  /* 1. Hide the sidebar */
  .legal-sidebar {
    display: none;
  }

  /* 2. Collapse the grid to a single column and remove side padding */
  .legal-layout {
    grid-template-columns: 1fr;
    padding-left: 24px;
    padding-right: 24px;
    gap: 32px;
  }

  /* 3. Center the content area and remove the 64px left offset */
  .legal-content {
    padding-left: 0;
    margin: 0 auto; /* Centers the container itself */
    max-width: 100%; /* Ensures it doesn't overflow */
  }

  /* 5. Left-align lists for readability even when the section is centered */
  .legal-section ul {
    text-align: left;
    display: inline-block; /* Keeps the list block centered while text is left-aligned */
    max-width: 100%;
  }

  /* Mobile Canvas Toolbar Updates */
  .canvas-toolbar {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 12px;
  }
  .toolbar-stats {
    width: 100%;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 12px;
    gap: 8px;
  }
  .stat-label {
    display: none; 
  }
  .canvas-toolbar-btn {
    flex: 1;
    justify-content: center;
    padding: 8px 4px;
  }
}