html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f1f5f9; color: #0f172a; font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:hover { color: #2563eb; text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── HEADER ── */
.site-header { background: #0b1535; padding: 0 2rem; height: 70px; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 300; border-bottom: 1px solid rgba(255,255,255,.07); }
.site-logo { font-weight: 800; font-size: 1rem; color: white; display: flex; align-items: center; gap: 8px; }
.site-logo span { color: #60a5fa; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.header-date { color: rgba(255,255,255,.4); font-size: .75rem; }
.btn-outline-white { border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); padding: .4rem 1rem; border-radius: 7px; font-size: .78rem; font-weight: 600; cursor: pointer; background: transparent; font-family: inherit; text-decoration: none; transition: all .15s; }
.btn-outline-white:hover { background: rgba(255,255,255,.08); color: white; text-decoration: none; }

/* ── hero ── */
.hero { background: linear-gradient(135deg, #0b1535 0%, #0f2366 60%, #1a1060 100%); color: #fff; padding: 4rem 1.5rem 4.5rem; position: relative; overflow: hidden; text-align: center; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(37,99,235,.22) 0%, transparent 70%); pointer-events: none; }
.hero .container { position: relative; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.1rem; }
.hero h1 span { color: #60a5fa; }
.hero-sub { font-size: 1.1rem; color: rgba(255,255,255,.82); max-width: 640px; margin: 0 auto 1.5rem; }
.hero-cta { display: inline-flex; align-items: center; gap: 8px; background: #2563eb; color: white; padding: .9rem 2.2rem; border-radius: 10px; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; font-family: inherit; box-shadow: 0 4px 22px rgba(37,99,235,.5); transition: transform .15s, box-shadow .15s; }
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,99,235,.6); text-decoration: none; color: white; }
.hero-personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin: 2rem auto 1.5rem; max-width: 860px; text-align: left; }
.hero-persona { display: flex; align-items: flex-start; gap: .85rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 1rem 1.2rem; }
.hero-persona-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(96,165,250,.18); border: 1px solid rgba(96,165,250,.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #93c5fd; }
.hero-persona-title { font-size: .85rem; font-weight: 700; color: #fff; margin-bottom: .2rem; }
.hero-persona-desc { font-size: .78rem; color: rgba(255,255,255,.62); line-height: 1.5; }
@media (max-width: 700px) { .hero-personas { grid-template-columns: 1fr; } }
.hero-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; justify-content: center; }
.hero-tag { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: .2rem .75rem; font-size: .75rem; color: rgba(255,255,255,.75); }

/* ── alerts ── */
.alerts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.alert-card { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid #e2e8f0; border-left-width: 4px; border-radius: 12px; padding: 1rem 1.1rem; }
.alert-card.level-critical { border-left-color: #dc2626; }
.alert-card.level-warning  { border-left-color: #d97706; }
.alert-card.level-info     { border-left-color: #2563eb; }
.alert-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.level-critical .alert-icon { background: #fef2f2; color: #dc2626; }
.level-warning  .alert-icon { background: #fffbeb; color: #d97706; }
.level-info     .alert-icon { background: #eff6ff; color: #2563eb; }
.alert-meta  { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: .2rem; }
.alert-title { font-size: .85rem; font-weight: 700; color: #0f172a; margin-bottom: .2rem; }
.alert-body  { font-size: .78rem; color: #475569; line-height: 1.5; }
.alert-skeleton { height: 76px; background: #f1f5f9; border-radius: 12px; animation: skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes skeleton-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
/* CTA block */
.alerts-cta-block { display: block; background: linear-gradient(135deg,#0b1535,#1e3a8a); border-radius: 14px; padding: 1.25rem 1.5rem; text-decoration: none; transition: opacity .15s, transform .15s; margin-top: .25rem; }
.alerts-cta-block:hover { opacity: .92; transform: translateY(-1px); text-decoration: none; }
.alerts-cta-inner { display: flex; align-items: center; gap: 1rem; }
.alerts-cta-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #93c5fd; }
.alerts-cta-title { font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: .15rem; }
.alerts-cta-sub { font-size: .75rem; color: rgba(255,255,255,.6); }
.alerts-cta-arrow { margin-left: auto; font-size: 1.3rem; color: rgba(255,255,255,.5); flex-shrink: 0; }

/* ── locked section ── */
.locked-section { position: relative; overflow: hidden; border-radius: 14px; }
.locked-blur { filter: blur(6px); pointer-events: none; user-select: none; }
.locked-overlay { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 10; text-align: center; padding: 2rem; }
.lock-icon { width: 56px; height: 56px; background: rgba(255,255,255,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.locked-overlay h3 { color: white; font-size: 1.1rem; font-weight: 700; }
.locked-overlay p { color: rgba(255,255,255,.72); font-size: .85rem; max-width: 400px; }
.btn-unlock { background: #2563eb; color: white; border: none; cursor: pointer; padding: .7rem 1.75rem; border-radius: 9px; font-family: inherit; font-size: .88rem; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; transition: transform .15s; }
.btn-unlock:hover { transform: translateY(-1px); }
.locked-fake-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.locked-fake-tbl th { background: #f8fafc; padding: .55rem .75rem; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748b; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
.locked-fake-tbl td { padding: .5rem .75rem; border-bottom: 1px solid #f1f5f9; color: #334155; white-space: nowrap; }
.locked-fake-tbl tr:last-child td { border-bottom: none; }

/* ── lead section ── */
.lead-section { background: linear-gradient(135deg,#0b1535,#0f2366); color: white; padding: 8rem 1.5rem; min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lead-section h2 { font-size: 1.75rem; font-weight: 800; margin-bottom: .7rem; }
.lead-section p { color: rgba(255,255,255,.72); max-width: 540px; margin: 0 auto 2.5rem; font-size: .97rem; }
.tg-link { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.65); font-size: .85rem; border: 1px solid rgba(255,255,255,.2); padding: .45rem 1.1rem; border-radius: 999px; transition: all .15s; }
.tg-link:hover { background: rgba(255,255,255,.08); color: white; text-decoration: none; }

/* ── layout ── */
.container { max-width: 1480px; margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 1.4rem 0 0; }
.sec-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #475569; margin-bottom: .65rem; }

/* ── metrics ── */
.metrics { display: flex; flex-wrap: wrap; gap: .55rem; }
.metric { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .75rem 1rem; min-width: 100px; flex: 1; }
.metric.clickable { cursor: pointer; }
.metric.clickable:hover { border-color: #93c5fd; background: #eff6ff; }
.metric-val { font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.metric-lbl { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; margin-top: .25rem; }

/* ── retailer cards ── */
.ret-cards { display: flex; flex-wrap: wrap; gap: .55rem; }
.ret-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .8rem 1rem; min-width: 140px; flex: 1; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ret-card:hover { border-color: #93c5fd; box-shadow: 0 0 0 3px #eff6ff; }
.ret-card-name { display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; font-weight: 700; font-size: .88rem; }
.ret-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ret-sku { font-size: 1.45rem; font-weight: 700; line-height: 1; margin-bottom: .45rem; }
.ret-sku small { font-size: .72rem; font-weight: 400; color: #94a3b8; margin-left: .2rem; }
.ret-row { display: flex; justify-content: space-between; font-size: .72rem; color: #64748b; margin-top: .15rem; }
.ret-row span:first-child { color: #475569; }

/* ── analysis ── */
.analysis-hdr { display: flex; align-items: flex-start; margin-bottom: .9rem; }
.analysis-scope-row { display: flex; align-items: center; gap: .55rem; margin-top: .25rem; }
.analysis-scope { font-size: .75rem; font-weight: 700; color: #2563eb; background: #eff6ff; border-radius: 999px; padding: .15rem .7rem; }
.analysis-total { font-size: .75rem; color: #475569; }

.analysis-body { display: grid; grid-template-columns: 1fr 280px; gap: .65rem; align-items: stretch; }
.analysis-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.akpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .85rem 1.1rem 1rem; display: flex; flex-direction: column; }
.akpi-val { font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.akpi-sub { font-size: .72rem; color: #64748b; margin-top: .3rem; min-height: 1em; }
.akpi-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #475569; margin-top: .4rem; }

.c-green  { color: #16a34a; }
.c-amber  { color: #d97706; }
.c-red    { color: #dc2626; }
.c-blue   { color: #2563eb; }
.c-purple { color: #7c3aed; }
.c-slate  { color: #475569; }

@keyframes numFlash { 0%{opacity:.25} 100%{opacity:1} }
.num-flash { animation: numFlash .3s ease-out; }

.analysis-brands { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .85rem 1.1rem; display: flex; flex-direction: column; }
.abrand-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #475569; margin-bottom: .65rem; }
.abrand-row { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.abrand-row:last-child { margin-bottom: 0; }
.abrand-name { font-size: .76rem; font-weight: 600; color: #334155; width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.abrand-track { flex: 1; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.abrand-bar { height: 100%; background: #2563eb; border-radius: 3px; transition: width .45s ease; }
.abrand-stat { font-size: .72rem; color: #64748b; white-space: nowrap; min-width: 68px; text-align: right; }
.abrand-note { font-size: .72rem; color: #94a3b8; margin-top: auto; padding-top: .6rem; border-top: 1px solid #f1f5f9; }

/* ── tabs ── */
.tabs { display: flex; border-bottom: 1px solid #e2e8f0; margin-top: 1.4rem; }
.tab { padding: .5rem 1.1rem; font-size: .8rem; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; user-select: none; }
.tab.active { color: #2563eb; border-bottom-color: #2563eb; }
.tab-badge { font-size: .68rem; background: #ede9fe; color: #4c1d95; padding: 1px 8px; border-radius: 999px; margin-left: .3rem; }
.tab-pane { display: none; padding-top: .9rem; }
.tab-pane.active { display: block; }
.tab-desc { font-size: .78rem; color: #64748b; line-height: 1.65; max-width: 860px; margin-bottom: .8rem; }

/* ── filter bar ── */
.fbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .45rem; margin-bottom: .8rem; }
.fgroup { display: flex; flex-direction: column; gap: .2rem; }
.flabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #475569; }
.fbar input[type=text], .fbar input[type=number], .fbar select {
  height: 30px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; font-size: .8rem; font-family: inherit; color: #334155; padding: 0 .6rem; outline: none;
}
.fbar input[type=text]:focus, .fbar input[type=number]:focus, .fbar select:focus { border-color: #93c5fd; }
.fbar input[type=text] { width: 200px; }
.fbar input[type=number] { width: 72px; }
.row-count { font-size: .75rem; color: #94a3b8; margin-left: auto; padding-bottom: 3px; }

/* ── buttons ── */
.btn-ghost { height: 30px; padding: 0 .75rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: .75rem; color: #94a3b8; }
.btn-ghost:hover { color: #dc2626; border-color: #fca5a5; }
.btn-primary { height: 26px; padding: 0 .85rem; border-radius: 6px; background: #2563eb; color: #fff; font-size: .73rem; font-weight: 600; width: 100%; }
.btn-export { height: 30px; padding: 0 .75rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: .75rem; color: #334155; display: flex; align-items: center; gap: .35rem; }
.btn-export:hover { border-color: #93c5fd; color: #2563eb; background: #eff6ff; }
.btn-primary:hover { background: #1d4ed8; }

/* ── table ── */
.tbl-outer { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; white-space: nowrap; min-width: 100%; }

thead tr { border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
thead th { background: #f8fafc; position: sticky; top: 0; z-index: 10; border-right: 1px solid #f1f5f9; }
thead th:last-child { border-right: none; }

.th-cell { display: flex; align-items: center; gap: .25rem; padding: .45rem .75rem; position: relative; }
.th-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; display: flex; align-items: center; gap: .2rem; flex: 1; user-select: none; white-space: nowrap; }
.th-label:hover { color: #2563eb; }
.sort-icon { color: #cbd5e1; font-size: .6rem; }
th.sort-asc  .sort-icon::after { content: "↑"; color: #2563eb; }
th.sort-desc .sort-icon::after { content: "↓"; color: #2563eb; }
th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: "↕"; }
.flt-btn { color: #cbd5e1; flex-shrink: 0; line-height: 0; padding: 2px 3px; border-radius: 4px; transition: color .1s, background .1s; }
.flt-btn:hover { color: #64748b; background: #e2e8f0; }
.flt-btn.active { color: #2563eb; background: #eff6ff; }
.col-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 5px; cursor: col-resize; z-index: 1; }
.col-resize-handle:hover { background: #93c5fd; }

/* sticky product_name column */
thead th:first-child { position: sticky; left: 0; z-index: 20; background: #f8fafc; border-right: 1px solid #e2e8f0; }
tbody td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; border-right: 1px solid #e2e8f0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
tbody tr:nth-child(even) td:first-child { background: #fafbff; }
tbody tr:hover td:first-child { background: #eff6ff !important; }

/* product name cell content */
.name-cell { display: flex; align-items: center; gap: .35rem; max-width: 100%; }
.name-cell a, .name-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.name-thumb { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }

/* sticky group column in matching table */
.th-group-col { position: sticky !important; left: 0 !important; z-index: 20 !important; background: #f8fafc !important; min-width: 80px !important; border-right: 1px solid #e2e8f0 !important; }
.td-group-col { position: sticky !important; left: 0 !important; z-index: 1 !important; background: #fff !important; border-right: 1px solid #e2e8f0 !important; min-width: 80px; vertical-align: top; padding-top: .65rem !important; }
tbody tr:nth-child(even) .td-group-col { background: #fafbff !important; }
tbody tr:hover .td-group-col { background: #eff6ff !important; }

/* body rows */
tbody td { padding: .48rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: #fafbff; }
tbody tr:hover td { background: #eff6ff !important; }

/* group separator in matching table */
.grp-first > td { border-top: 2px solid #e2e8f0 !important; }

/* cell types */
.ret-dot-sm { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; margin-right: .3rem; flex-shrink: 0; }
.tag-promo { display: inline-block; font-size: .65rem; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: #fef3c7; color: #92400e; }
.tag-ean   { display: inline-block; font-size: .65rem; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: #d1fae5; color: #065f46; }
.tag-name  { display: inline-block; font-size: .65rem; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: #ede9fe; color: #4c1d95; }
.price-min { color: #16a34a; font-weight: 700; }
.price-max { color: #dc2626; font-weight: 700; }
.spread-hi { color: #dc2626; font-weight: 700; }
.spread-md { color: #d97706; font-weight: 600; }
.spread-lo { color: #94a3b8; }
.muted { color: #94a3b8; }
.mono  { font-family: monospace; font-size: .72rem; color: #64748b; }

.loading-cell { padding: 2.5rem; text-align: center; color: #94a3b8; }

/* ── pagination ── */
.pagination-wrap { display: flex; align-items: center; justify-content: space-between; padding: .4rem 0; flex-wrap: wrap; gap: .4rem; }
.pg-perpage { display: flex; align-items: center; gap: .45rem; font-size: .75rem; color: #64748b; }
.pg-perpage-sel { height: 28px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; font-size: .75rem; padding: 0 .4rem; color: #334155; cursor: pointer; }
.pg-perpage-sel:focus { outline: none; border-color: #93c5fd; }
.pagination { display: flex; align-items: center; gap: .3rem; padding: .2rem 0; font-size: .78rem; }
.pg-btn { height: 28px; padding: 0 .6rem; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; font-size: .75rem; color: #334155; }
.pg-btn:hover:not([disabled]) { background: #eff6ff; border-color: #93c5fd; }
.pg-btn[disabled] { opacity: .35; cursor: default; }
.pg-info { color: #94a3b8; font-size: .74rem; }
.pg-jump { width: 46px; height: 28px; text-align: center; border: 1px solid #e2e8f0; border-radius: 7px; font-size: .75rem; font-family: inherit; padding: 0; }

/* ── toast ── */
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; padding: .65rem 1.1rem; border-radius: 10px; font-size: .82rem; font-weight: 500; color: #fff; background: #334155; box-shadow: 0 4px 20px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s; pointer-events: none; }
.toast.toast-in { opacity: 1; transform: translateY(0); }
.toast.toast-error { background: #dc2626; }
.toast.toast-warn { background: #d97706; }

/* ── popover ── */
.popover { position: fixed; z-index: 500; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .6rem; min-width: 180px; max-width: 240px; }
.popover-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; margin-bottom: .4rem; }
.popover input[type=number] { width: 100%; height: 30px; border: 1px solid #e2e8f0; border-radius: 7px; padding: 0 .5rem; font-size: .8rem; font-family: inherit; outline: none; margin-bottom: .3rem; }
.popover input[type=number]:focus { border-color: #93c5fd; }
.pop-search { width: 100%; height: 28px; border: 1px solid #e2e8f0; border-radius: 7px; padding: 0 .5rem; font-size: .78rem; font-family: inherit; outline: none; margin-bottom: .3rem; display: block; }
.pop-search:focus { border-color: #93c5fd; }
.pop-options { max-height: 200px; overflow-y: auto; }
.pop-option { display: flex; align-items: center; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; font-size: .8rem; color: #334155; gap: .4rem; }
.pop-option:hover { background: #f1f5f9; }
.pop-option.selected { background: #eff6ff; color: #2563eb; font-weight: 600; }
.pop-option .check { font-size: .7rem; width: 14px; text-align: center; flex-shrink: 0; }
.popover-footer { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid #f1f5f9; }

/* ── mobile ── */
@media (max-width: 768px) {
  .site-header { padding: 0 1rem; height: 58px; }
  .site-logo img { height: 36px; }
  /* a) keep header CTA visible but smaller */
  .btn-outline-white { font-size: .72rem; padding: .35rem .7rem; }
  .hero { padding: 2.5rem 1rem 3rem; }
  .hero h1 { font-size: clamp(1.55rem, 6vw, 2.2rem); }
  .hero-sub { font-size: .95rem; }
  .hero-personas { grid-template-columns: 1fr; max-width: 100%; }
  .container { padding: 0 .75rem; }
  .analysis-body { grid-template-columns: 1fr; }
  .analysis-kpis { grid-template-columns: repeat(2, 1fr); }
  .analysis-brands { border-top: 1px solid #e2e8f0; padding-top: .75rem; }
  /* b) retailer cards compact on mobile: horizontal scroll row */
  .ret-cards { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .45rem; padding-bottom: .25rem; }
  .ret-card { min-width: 150px; flex-shrink: 0; padding: .6rem .75rem; }
  .ret-sku { font-size: 1.15rem; }
  .fbar { display: none; }
  .tabs { overflow-x: auto; }
  .tbl-outer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* d) hide per-page selector on mobile */
  .pg-perpage { display: none; }
  .pagination-wrap { justify-content: flex-end; }
  /* e) unfreeze first column on mobile */
  thead th:first-child { position: static; z-index: auto; }
  tbody td:first-child  { position: static; z-index: auto; }
  .alerts-grid { grid-template-columns: 1fr; }
  .alerts-cta-arrow { display: none; }
  /* c) lead section tall on mobile */
  .lead-section { padding: 4rem 1rem; min-height: 82vh; }
  .lead-section h2 { font-size: 1.35rem; }
}
@media (max-width: 480px) {
  .analysis-kpis { grid-template-columns: repeat(2, 1fr); }
  .hero-tags { justify-content: flex-start; }
  .pg-btn { font-size: .7rem; }
}