:root {
  /* --- base palette --- */
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #2a2a2a;
  --muted: #6b6b6b;
  --line: #e7e7e7;
  --card: #ffffff;
  --surface: var(--surface);
  --surface-soft: var(--surface-soft);
  --input-bg: var(--input-bg);
  --primary: #000000;
  --primary-2: #2a2a2a;
  --primary-ink: #ffffff;
  --accent: #ff6a3d;
  --green: #15a06b;
  --amber: #d9851f;
  --red: #d12d4a;
  /* status tints */
  --tint-red:   #fff5f5;
  --tint-amber: #fff9ef;
  --tint-green: #f1faf5;
  --tint-blue:  #e8eeff;
  --tint-line-red:   #ffd8de;
  --tint-line-amber: #ffe3b8;
  --tint-line-green: #c9ecd9;
  /* shadows */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 40px 80px rgba(0, 0, 0, 0.16);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-display: "Expletus Sans", -apple-system, "Inter", "Segoe UI", sans-serif;
}

/* =========================================================
   Dark theme — same tokens, inverted. Brand accents stay.
   ========================================================= */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --ink: #f5f5f5;
  --ink-2: #cccccc;
  --muted: #8a8a8a;
  --line: #2a2a2a;
  --card: #141414;
  --surface: #1c1c1c;
  --surface-soft: #181818;
  --input-bg: #1a1a1a;
  --primary: #ffffff;
  --primary-2: #d4d4d4;
  --primary-ink: #0a0a0a;
  /* keep accent orange so the brand reads consistently */
  --tint-red:   #2a1416;
  --tint-amber: #2a2014;
  --tint-green: #112a1d;
  --tint-blue:  #1c2238;
  --tint-line-red:   #4a2024;
  --tint-line-amber: #4a3a20;
  --tint-line-green: #224a34;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 40px 80px rgba(0, 0, 0, 0.65);
}

/* =========================================================
   Dark-mode contrast overrides for components whose background
   is hardcoded to a light tint. Each invert-pairs the surface
   with a darker tint while preserving the colour intent (warm
   amber, peach for exact match, cool blue, etc.).
   ========================================================= */
[data-theme="dark"] .hc-head { background: #1a1a1a; }
[data-theme="dark"] .hc-row { background: var(--card); }

[data-theme="dark"] .chip:has(input:checked) {
  background: var(--surface); color: var(--ink);
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .matched-chip-full {
  background: var(--surface); color: var(--ink);
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .drop:hover,
[data-theme="dark"] .drop.drag {
  background: var(--surface);
}

/* Tier badges */
[data-theme="dark"] .tier-moderate {
  background: #3a2c14; color: #f5b85a;
  border-color: rgba(217, 133, 31, 0.35);
}
[data-theme="dark"] .wc-stars {
  background: #3a2c14; color: #f5b85a;
}

/* Risk badges */
[data-theme="dark"] .risk-low {
  background: var(--tint-blue); color: var(--ink);
}

/* Web cards / domain rows */
[data-theme="dark"] .web-card.exact {
  background: #2a1c14;
  border-color: rgba(255, 106, 61, 0.5);
}
[data-theme="dark"] .web-domain-row.taken { background: #2a1c14; }
[data-theme="dark"] .web-domain-row.free  { background: #112a1d; }

/* Match-list icons (used by demo banner) */
[data-theme="dark"] .match.high .m-ico   { background: var(--tint-red);   color: #ff8a9a; }
[data-theme="dark"] .match.medium .m-ico { background: var(--tint-amber); color: #f5b85a; }
[data-theme="dark"] .match.low .m-ico    { background: var(--tint-blue);  color: var(--ink); }

/* Theme swap: each colour property cross-fades over a quarter second on the
   surfaces that change. (No global opacity dip.) */
html, body, .nav-inner, .modal-card, .how-card, .india-table-wrap,
.india-table thead, .india-table td, .web-card, .web-domains,
.web-banner, .cov, .field input, .field select, textarea,
.tab, .chip, .step, .web-loading, .scan-log,
.tm-modal-card, .tm-class-row, .logo-tile {
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}

/* All titles use Expletus Sans; body & UI stays in Inter/system sans. */
h1, h2, h3, h4, h5,
.hero-title, .section-title,
.how-card h3, .aud-card h3 {
  font-family: var(--font-display);
}
/* Brand name on the results page uses the body font (Inter/system sans),
   not the display serif/sans, while keeping its size + weight. */
.results-head h3 { font-family: var(--font); font-weight: 700; }
/* Expletus is a touch wider — pull tracking in for the largest sizes. */
.hero-title { letter-spacing: -0.02em; font-weight: 600; }
.section-title { letter-spacing: -0.015em; font-weight: 600; }

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

/* Universal hidden override. Without !important, author CSS rules like
   `.scanning { display: flex }` override the user-agent `[hidden] { display: none }`
   and the element stays visible even when hidden=true is set in JS. */
[hidden] { display: none !important; }

/* ===================================================================
   Scroll-triggered reveal — elements slide up from below + fade in.
   The .reveal class is added by JS, so if scripts are blocked nothing
   gets hidden (no FOUC trap, no permanently invisible content).
   =================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible {
    opacity: 1; transform: none; transition: none;
  }
}

html, body { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: min(1180px, 92%); margin: 0 auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ============================================================
   Bottom fade overlay
   Pinned to the bottom of the viewport, page-bg colour, opaque at
   the very bottom and transparent 400 px up — so content scrolling
   past appears to emerge from underneath it.
   ============================================================ */
.page-fade {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 8%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 30;          /* above page content (auto), below nav (50) and modals (100) */
}

/* ---------- NAV (floating pill) ---------- */
.nav {
  /* Fixed instead of sticky: the nav floats over the page and takes no
     flow space, so the hero (or any first section) can extend to the
     very top edge of the viewport and read continuously behind it. */
  position: fixed; top: 60px; left: 0; right: 0; z-index: 50;
  background: transparent;
  pointer-events: none;            /* let outer area pass clicks through */
  padding: 0 10px;
  transition: top 0.3s cubic-bezier(0.25, 0.8, 0.3, 1);
}
body.scrolled .nav { top: 20px; }
.nav-inner {
  pointer-events: auto;            /* nav itself is interactive */
  width: min(1180px, 96%); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 10px 20px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04);
  animation: nav-float-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
[data-theme="dark"] .nav-inner {
  background: rgba(20, 20, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 30px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3);
}
@keyframes nav-float-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  line-height: 0;
}
.brand-dot { color: var(--accent); }

/* One-time sweep flourish when the page first loads. Subtle — under a second. */
.radar-logo-sweep {
  animation: radar-logo-spin 1.6s cubic-bezier(0.55, 0.05, 0.4, 0.95) 1 0.3s both;
}
@keyframes radar-logo-spin {
  0%   { transform: rotate(0deg);   opacity: 0.5; }
  60%  { opacity: 0.5; }
  100% { transform: rotate(360deg); opacity: 0.12; }
}

/* Gentle perpetual blip pulse so the mark feels alive without distracting. */
.radar-logo circle[fill="#ff6a3d"]:last-of-type {
  transform-origin: 22.6px 8.4px;
  animation: radar-logo-blip 2.6s ease-in-out infinite;
}
@keyframes radar-logo-blip {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 8px; align-items: center; }

/* Theme toggle (sun / moon) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  padding: 0; border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .25s ease, border-color .15s ease;
}
.theme-toggle:hover {
  background: var(--surface);
  color: var(--ink);
  transform: rotate(-12deg);
}
.theme-toggle:active { transform: rotate(-12deg) scale(0.92); }

/* Show the right icon for the current theme */
.theme-icon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root:not([data-theme="dark"]) .theme-icon-moon { display: block; }

/* ============================================================
   Scan modal
   ============================================================ */
body.modal-open { overflow: hidden; }

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 30px 16px;
  animation: modal-fade-in 0.2s ease;
}
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.modal-card {
  position: relative;
  background: var(--card);
  border-radius: 16px;
  width: min(1100px, 100%);
  max-height: 90vh;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex; flex-direction: column;
  animation: modal-pop-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@keyframes modal-pop-in {
  from { transform: translateY(14px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0)    scale(1);     opacity: 1; }
}

.modal-close {
  position: absolute; top: 14px; right: 18px;
  z-index: 2;
  width: 36px; height: 36px;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 50%;
  font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.modal-close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Top-right action cluster for the trademark detail modal — download icon
   on the left, close on the right, 24 px clear space between them. */
.modal-actions {
  position: absolute; top: 14px; right: 18px;
  z-index: 2;
  display: flex; align-items: center; gap: 24px;
}
.modal-actions .modal-close { position: static; top: auto; right: auto; }
.modal-icon-btn {
  width: 36px; height: 36px;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.modal-icon-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.modal-body {
  overflow-y: auto;
  padding: 44px 48px 0;        /* no bottom padding — sticky action bar owns it */
  scroll-behavior: smooth;
}

@media (max-width: 720px) {
  .modal { padding: 10px; }
  .modal-card { max-height: 95vh; border-radius: 14px; }
  .modal-body { padding: 30px 22px 0; }
  .modal-close { top: 10px; right: 12px; width: 32px; height: 32px; font-size: 19px; }
}

/* The scan section's old "alt" wrapper styles are no longer needed since
   it now lives inside the modal — body padding does the work. */
.scan-header { text-align: center; margin-bottom: 18px; }

/* ============================================================
   Trademark detail modal
   Opens when a row in the IP India results table is clicked.
   ============================================================ */
/* Match the result-list container: nav width minus 24 px on each side. */
.tm-modal-card { max-width: 1132px; width: calc(96% - 48px); }
.india-table tbody tr { cursor: pointer; }
.india-table tbody tr:hover td { background: var(--surface-soft); }

.tm-detail-image-row {
  display: flex; justify-content: center;
  margin-bottom: 22px;
}
.tm-detail-image,
.logo-tile-lg {
  width: 160px; height: 160px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tm-detail-image img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.logo-tile-lg {
  font-weight: 700; font-size: 60px; color: var(--ink-2);
  background: var(--surface);
}

.tm-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.tm-classes-blurb { margin: -4px 0 14px; }
.tm-detail-source {
  text-align: center; margin: 10px 0 0;
  font-size: 12px; letter-spacing: 0.04em;
}
.tm-detail-wm {
  font-family: var(--font);     /* match the results brand-name font */
  font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1.15;
}
.tm-detail-owner { color: var(--muted); font-size: 14px; margin-top: 4px; }

.tm-detail-status-pill { flex-shrink: 0; }

.tm-detail-section { margin-bottom: 28px; }
.tm-detail-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 12px;
}

.tm-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
}
.tm-detail-field { display: flex; flex-direction: column; gap: 2px; }
.tm-detail-label {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tm-detail-value { font-size: 15px; color: var(--ink); font-weight: 500; }
.tm-detail-value.appno { font-family: ui-monospace, Menlo, monospace; }
.tm-detail-value.goods { font-weight: 400; font-size: 14px; color: var(--ink-2); line-height: 1.5; }

.tm-class-list {
  display: grid; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); padding: 4px;
}

/* Class-detail table inside the popup report */
.tm-class-table-wrap {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); overflow: hidden;
}
.tm-class-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.tm-class-table thead th {
  text-align: left;
  background: var(--surface); color: var(--ink-2);
  font-family: var(--font);
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.tm-class-table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tm-class-table tbody tr:last-child td { border-bottom: none; }
.tm-class-table .td-class { width: 50%; }
.tm-class-table .td-appno {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; color: var(--ink-2);
  white-space: nowrap;
}
.tm-class-table .td-date {
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.tm-class-table .tm-class-num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--surface); padding: 4px 8px; border-radius: 6px;
  display: inline-block;
}
/* The "sublabel" — the detailed Nice description sits under the class number. */
.tm-class-table .tm-class-detail {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  letter-spacing: 0.01em;
  max-width: 540px;
}

/* The comma-separated class chip in the list view's Class column. */
.india-table td.class-list-cell { font-size: 13px; line-height: 1.5; min-width: 110px; }
.filings-count {
  font-size: 12px; font-weight: 600;
  background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 3px 10px;
}
.tm-class-row {
  display: grid;
  grid-template-columns: 70px minmax(150px, 1.4fr) 110px 130px 1fr;
  gap: 14px; align-items: center;
  padding: 10px 14px; border-radius: 8px;
  text-decoration: none; color: var(--ink);
  font-size: 14px;
}
.tm-class-shortname {
  font-size: 13.5px; color: var(--ink-2); font-weight: 500;
}
.tm-class-row.is-current .tm-class-shortname { color: var(--ink); }
.tm-class-row > :last-child { text-align: right; }
.tm-class-row:hover { background: var(--surface-soft); }
.tm-class-row.is-current {
  background: var(--surface); font-weight: 600;
  outline: 1px solid var(--line);
}
.tm-class-num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  background: var(--surface); padding: 4px 8px; border-radius: 6px;
  text-align: center;
}
.tm-class-appno {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; color: var(--muted);
}
.tm-class-date { font-size: 12.5px; color: var(--muted); }
.tm-class-current-marker {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: var(--ink); color: var(--bg);
  padding: 3px 8px; border-radius: 999px;
}

.tm-detail-footer {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 10px; margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.tm-detail-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink); font-weight: 600; font-size: 14px;
  text-decoration: none;
}
.tm-detail-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .tm-detail-grid { grid-template-columns: 1fr; }
  .tm-class-row { grid-template-columns: 60px 1fr; gap: 6px 12px; }
  .tm-class-row .tm-class-shortname { grid-column: 2; }
  .tm-class-row .tm-class-appno,
  .tm-class-row .tm-class-date,
  .tm-class-row .tm-class-current-marker { grid-column: 2; font-size: 12px; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; font-size: 14.5px; font-weight: 600;
  border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn-lg { padding: 13px 22px; font-size: 15px; }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32); }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-ghost:hover { background: var(--card); box-shadow: var(--shadow-sm); }

/* ---------- HERO ---------- */
.hero {
  /* Top padding bumped by ~60 px because the nav is fixed now and no longer
     reserves flow space — keeping the title in its original visual position. */
  padding: 240px 0 110px;
  background:
    radial-gradient(1000px 500px at 90% -10%, rgba(0, 0, 0, 0.05), transparent 60%),
    radial-gradient(700px 400px at -5% 20%, rgba(255, 106, 61, 0.05), transparent 60%),
    var(--bg);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center;
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(21, 160, 107, 0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(21, 160, 107, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(21, 160, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 160, 107, 0); }
}
.hero-title {
  font-size: clamp(32px, 5vw, 60px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-weight: 800;
  margin: 18px 0 18px;
  color: var(--ink);
  /* Modern browsers (Chrome 114+, Safari 17.4+, Firefox 121+) balance the
     wrap automatically so we never get an orphaned trailing word. */
  text-wrap: balance;
  /* Hyphen / split avoidance — keep "There's" and "It's" intact. */
  hyphens: manual;
}

/* Explicit break after "Original." for medium+ viewports — the title reads
   as two intentional lines. On narrow phones we drop this and let the
   browser's natural wrap (and text-wrap: balance) handle it. */
@media (max-width: 520px) {
  .title-break { display: none; }
}
.hero-sub { font-size: 17px; color: var(--ink-2); max-width: 56ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.trust-row {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 40px;
  padding-top: 26px; border-top: 1px dashed var(--line);
}
.trust-row li { display: flex; flex-direction: column; }
.trust-row strong { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.trust-row span { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* hero card */
.hero-card-wrap { position: relative; }
.hero-card {
  background: var(--card); border-radius: 18px; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}
.hc-head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: #f7f8fc;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #ff5f57; }
.dot-y { background: #febc2e; }
.dot-g { background: #28c840; }
.hc-title { margin-left: auto; font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.hc-body { padding: 14px; display: grid; gap: 10px; }
.hc-row {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fdfdff;
}
.hc-row-red    { background: var(--tint-red);   border-color: var(--tint-line-red); }
.hc-row-amber  { background: var(--tint-amber); border-color: var(--tint-line-amber); }
.hc-row-green  { background: var(--tint-green); border-color: var(--tint-line-green); }
.hc-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--card);
  display: grid; place-items: center; font-weight: 700; border: 1px solid var(--line);
}
.hc-strong { font-weight: 600; font-size: 14.5px; }
.hc-meta { font-size: 12.5px; color: var(--muted); }
.risk {
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.risk-high { background: var(--red); color: white; }
.risk-med  { background: var(--amber); color: white; }
.risk-low  { background: #e8eeff; color: var(--primary); }

.floating-pill {
  position: absolute; padding: 7px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.pill-1 { top: -14px; left: -20px; }
.pill-2 { top: 30%; left: -40px; }
.pill-3 { bottom: -14px; right: 20%; }
.pill-4 { bottom: 25%; right: -28px; }
.pill-5 { top: 8%; right: -10px; }

/* ---------- SECTIONS ---------- */
.section { padding: 90px 0; }
.section-alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-title { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; font-weight: 800; text-align: center; }
.section-sub { color: var(--ink-2); text-align: center; margin-top: 12px; max-width: 64ch; margin-inline: auto; }

/* HOW */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.how-card {
  background: var(--card); padding: 28px; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.how-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.how-card-highlight {
  background: linear-gradient(160deg, #1a1a1a, #000000);
  color: white; border-color: transparent;
}
.how-card-highlight .how-num { color: rgba(255,255,255,0.6); }
.how-num { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); letter-spacing: .15em; }
.how-card h3 { font-size: 20px; letter-spacing: -0.01em; }
.how-card ul { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.how-card ul li {
  font-size: 14px; padding-left: 22px; position: relative;
}
.how-card ul li::before {
  content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 700;
}
.how-card-highlight ul li::before { color: var(--accent); }

/* ---------- WIZARD ---------- */
.wizard {
  margin-top: 36px;
  background: var(--card); border-radius: 18px; border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 28px;
}
.steps {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 28px;
}
.step {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: var(--surface);
  font-size: 14px; color: var(--muted); font-weight: 600;
}
.step span {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 13px;
}
.step.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-ink);
}
.step.active span { background: rgba(255,255,255,0.18); border-color: transparent; color: var(--primary-ink); }
.step.done span { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
/* dark mode: the inner highlight on the active step needs to be DARK on the white pill */
[data-theme="dark"] .step.active span { background: rgba(0,0,0,0.15); }

.panel { display: none; animation: fade .25s ease; }
.panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-block { margin-top: 16px; display: block; }
.lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lbl em { color: var(--accent); font-style: normal; }
.optional-tag {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 4px;
  background: #eeeeee; color: var(--muted);
  text-transform: uppercase; vertical-align: 1px;
}
.field input, .field select, .field textarea, textarea, .panel input[type=text] {
  width: 100%; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--input-bg); font-size: 14.5px; color: var(--ink);
  font-family: inherit; transition: border .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus, textarea:focus {
  outline: none; background: var(--card);
  border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12);
}
textarea { resize: vertical; }

/* Wizard action bar — inline at the bottom of each panel on the dedicated
   /ipscan page. (No longer sticky; the page itself is the scroll container.) */
.wizard-actions,
.results-cta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-top: 28px;
}

/* ============================================================
   Dedicated /ipscan page layout
   Inset the scan section like a normal content section so the
   wizard reads as a page-native form, not a modal escapee.
   ============================================================ */
body.ipscan-page .ipscan-main {
  /* User wanted the heading pulled up 60 px (220 → 160). */
  padding: 160px 0 200px;
}
body.ipscan-page .ipscan-section .scan-header {
  text-align: center;
  max-width: 760px; margin: 0 auto 32px;
}
body.ipscan-page .wizard {
  /* Match nav width (min(1180px, 96%)) minus 24px on each side. */
  max-width: 1132px;
  width: calc(96% - 48px);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 40px 32px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 720px) {
  body.ipscan-page .ipscan-main { padding: 120px 0 160px; }
  body.ipscan-page .wizard { padding: 24px 20px 20px; border-radius: 14px; }
}

/* uploads */
.upload-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; }
.drop {
  display: block; position: relative;
  border: 2px dashed var(--line); border-radius: 14px;
  background: var(--input-bg);
  padding: 22px; cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
  min-height: 150px;
}
.drop:hover, .drop.drag { border-color: var(--primary); background: #f5f5f5; }
.drop-inner { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-height: 110px; }
.drop-ico {
  width: 38px; height: 38px; border-radius: 10px; background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 18px; color: var(--primary);
  margin-bottom: 8px;
}
.muted { color: var(--muted); }
.logo-preview {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
}
.logo-preview img { max-height: 90px; border-radius: 8px; border: 1px solid var(--line); }

.thumb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px; margin-top: 10px;
}
.thumb {
  position: relative; aspect-ratio: 1;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-audio {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ink-2); text-align: center; padding: 8px;
}

/* chip row */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s;
}
.chip:has(input:checked) { background: #f0f0f0; color: var(--primary); border-color: rgba(0,0,0,0.2); }
.chip input { display: none; }

.layer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.layer {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--input-bg);
  cursor: pointer;
}
.layer input { margin-top: 4px; accent-color: var(--primary); width: 16px; height: 16px; }
.layer strong { display: block; font-size: 14.5px; }
.layer span { font-size: 13px; color: var(--muted); }

/* ============================================================
   Scanning state — radar sweep animation
   ============================================================ */
.scanning {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 20px; gap: 32px;
}

.radar {
  position: relative;
  width: 260px; height: 260px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 106, 61, 0.04) 0%, transparent 70%),
    #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 30px 60px rgba(0, 0, 0, 0.08);
}

.radar-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.radar-ring.r1 { inset: 0; }
.radar-ring.r2 { inset: 18%; }
.radar-ring.r3 { inset: 36%; }

.radar-cross {
  position: absolute; background: rgba(0, 0, 0, 0.06);
  pointer-events: none;
}
.radar-cross-h { left: 4%; right: 4%; top: 50%; height: 1px; }
.radar-cross-v { top: 4%; bottom: 4%; left: 50%; width: 1px; }

/* The rotating sweep — a conic gradient masked to the radar circle */
.radar-sweep {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 106, 61, 0) 0deg,
    rgba(255, 106, 61, 0) 270deg,
    rgba(255, 106, 61, 0.05) 300deg,
    rgba(255, 106, 61, 0.2) 340deg,
    rgba(255, 106, 61, 0.5) 358deg,
    rgba(255, 106, 61, 0.65) 360deg
  );
  animation: radar-spin 2.4s linear infinite;
  pointer-events: none;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }

.radar-center {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px;
  background: var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
  animation: radar-pulse 1.4s ease-out infinite;
}
@keyframes radar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* Detected blips that flash on the scope */
.radar-blip {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(255, 106, 61, 0.4);
  animation: blip-flash 4.8s var(--delay, 0s) infinite;
}
@keyframes blip-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  4%   { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  10%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  40%  { opacity: 0.5; }
  80%  { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0; }
}

.radar-status { text-align: center; }
.radar-status-title {
  font-size: 17px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.005em;
}
.radar-status-sub {
  margin-top: 6px;
  font-size: 13.5px; font-family: ui-monospace, Menlo, monospace;
  color: var(--muted); min-height: 1.2em;
  transition: opacity 0.25s ease;
}

/* results */
/* Scan-failure panel — only shows when the backend/fetch truly errors,
   so the user can never confuse it with a legitimate "0 matches" result. */
.scan-error {
  margin: 40px auto; max-width: 520px;
  text-align: center;
  padding: 32px 28px;
  border: 1px solid var(--tint-line-red);
  background: var(--tint-red);
  border-radius: 14px;
}
.scan-error-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--red); color: white;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 800;
}
.scan-error-title {
  font-size: 19px; margin: 0 0 6px;
  color: var(--ink);
}
.scan-error-body { font-size: 14.5px; color: var(--ink-2); margin: 0 0 10px; }
.scan-error-help { margin: 0 0 22px; }
.scan-error-help code {
  background: var(--surface); padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
}
.scan-error-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* Scan-complete banner — slides in once IP India results land */
.scan-complete {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  padding: 10px 16px; border-radius: 10px;
  background: linear-gradient(135deg, #e7f6ee 0%, #f4fbf7 100%);
  border: 1px solid rgba(21, 160, 107, 0.25);
  color: #0a6b46;
  font-size: 14px; font-weight: 600;
}
[data-theme="dark"] .scan-complete {
  background: linear-gradient(135deg, #0e2a1d 0%, #0a1a13 100%);
  color: #6de3a5; border-color: rgba(21, 160, 107, 0.35);
  animation: scan-complete-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  transform-origin: center top;
}
.scan-complete-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: white; font-weight: 800;
  font-size: 13px;
  box-shadow: 0 0 0 0 rgba(21, 160, 107, 0.55);
  animation: scan-complete-pulse 1.6s ease-out;
}
@keyframes scan-complete-in {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes scan-complete-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(21, 160, 107, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(21, 160, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 160, 107, 0); }
}

.results-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.results-head h3 { font-size: 26px; letter-spacing: -0.01em; }
.gauge { position: relative; width: 140px; height: 140px; }
.gauge svg { width: 100%; height: 100%; transition: stroke-dashoffset 1.2s ease; }
#gaugeArc { transition: stroke-dashoffset 1.2s ease; }
.gauge-val {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
}
.gauge-val span { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.gauge-val small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }

.tabs {
  display: flex; gap: 8px; margin: 22px 0 16px; flex-wrap: wrap;
}
.tab {
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 14px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.tab.active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.badge {
  background: rgba(255,255,255,0.15); color: inherit;
  font-size: 12px; padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.tab:not(.active) .badge { background: var(--card); color: var(--ink-2); border: 1px solid var(--line); }

.match-list { display: grid; gap: 10px; }
.match {
  display: grid; grid-template-columns: 50px 1fr auto; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  transition: box-shadow .15s, transform .15s;
}
.match:hover { box-shadow: var(--shadow-sm); }
.m-ico {
  width: 50px; height: 50px; border-radius: 12px;
  background: var(--surface); display: grid; place-items: center;
  font-size: 20px; font-weight: 800; color: var(--ink-2);
}
.match.high .m-ico    { background: #ffe6ea; color: var(--red); }
.match.medium .m-ico  { background: #fff1d8; color: var(--amber); }
.match.low .m-ico     { background: #e9efff; color: var(--primary); }
.m-title { font-weight: 700; font-size: 15px; }
.m-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.m-explain { font-size: 13px; color: var(--ink-2); margin-top: 8px; }

/* results-cta layout/positioning is handled by the unified .wizard-actions, .results-cta rule above */

/* coverage */
.cov-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: 40px; max-width: 920px; margin-inline: auto;
}
.cov {
  padding: 10px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, background .15s;
}
.cov:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-ink); border-color: transparent; transform: translateY(-2px);
}

/* audience */
.aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.aud-card {
  background: var(--bg); padding: 26px; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.aud-ico { font-size: 30px; }
.aud-card h3 { font-size: 17px; margin: 10px 0 6px; letter-spacing: -0.01em; }
.aud-card p { font-size: 14px; color: var(--ink-2); }
.quote {
  margin: 60px auto 0; max-width: 760px; text-align: center;
  font-size: 19px; font-style: italic; color: var(--ink-2);
  padding: 30px; border-left: 3px solid var(--accent);
  background: var(--bg); border-radius: 8px;
}

/* footer */
.footer {
  background: #000000; color: #c8c8c8; padding: 60px 0 30px;
  /* Sit above the bottom page-fade overlay (z-index: 30) so the disclaimer
     text and links stay fully readable when scrolled to the bottom. */
  position: relative;
  z-index: 31;
}
.footer .brand { color: white; }
.footer-inner {
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; align-items: start;
}
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-cols h5 { color: white; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; }
.footer-cols a {
  display: block; font-size: 14px; color: #999999; padding: 4px 0;
}
.footer-cols a:hover { color: white; }
.disclaimer { margin-top: 50px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); color: #888888; }

/* ---------- chip tags ---------- */
.chip-tag {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 4px;
  vertical-align: 1px;
}
.chip-demo { background: #e7e7e7; color: var(--muted); }
.chip-live { background: linear-gradient(135deg, #15a06b, #109a5d); color: white; }

/* ---------- IP India panel in step 3 ---------- */
.ipindia-panel {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(21, 160, 107, 0.25);
  background: linear-gradient(135deg, #f3fbf7 0%, var(--card) 100%);
}
[data-theme="dark"] .ipindia-panel {
  background: linear-gradient(135deg, #0e2018 0%, var(--card) 100%);
}
[data-theme="dark"] .web-banner {
  background: linear-gradient(135deg, #0e2018 0%, var(--card) 100%);
}
.ipindia-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ipindia-head strong { font-size: 15px; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(21, 160, 107, 0.6);
  animation: pulse 1.8s infinite;
}
.ipindia-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
}

/* CAPTCHA UI removed — default scan flow uses the captcha-free QuickCompany
   mirror. The button-sm style below is kept because other small buttons use it. */
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* ---------- live badge in tabs ---------- */
.live-badge {
  background: linear-gradient(135deg, #15a06b, #109a5d) !important;
  color: white !important; border: none !important;
  font-size: 10px !important; padding: 3px 7px !important;
  letter-spacing: 0.06em;
}

/* ---------- IP India results ---------- */
.ipindia-results { display: block; }
.ipindia-results[hidden] { display: none; }
.india-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.india-meta { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.india-filters { display: flex; gap: 8px; align-items: center; }
.india-filters input, .india-filters select {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--input-bg); font-size: 13px; font-family: inherit;
}
/* Generic download icon button used at the right end of the filter rows
   on both IP India and Open Web tabs. */
.filter-download-btn {
  width: 36px; height: 36px;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  flex-shrink: 0;
}
.filter-download-btn:hover {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.india-table-wrap {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
  /* No internal scroll — let the page itself scroll so users see all rows
     by scrolling down naturally. */
  overflow: visible;
}
.india-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.india-table thead {
  /* Sticky thead removed — table flows naturally on the page now. */
}
.india-table th {
  text-align: left; padding: 12px 14px; font-weight: 700;
  color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 11.5px; border-bottom: 1px solid var(--line);
  /* Per-cell solid background — required for sticky thead to mask scrolling
     content underneath. Putting it on <thead> alone leaves <th> cells visually
     transparent in Safari + with border-collapse. */
  background: var(--surface);
}
.india-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.india-table tr:hover td { background: var(--surface-soft); }
.india-table .wm { font-weight: 700; color: var(--ink); }
.india-table .appno { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--ink-2); }

/* Logo thumbnail column — 60x60 tile, falls back to a monogram letter if no image. */
.india-table .th-logo { width: 76px; }
.india-table .td-logo { width: 76px; padding: 10px 8px 10px 14px; }
.logo-tile {
  width: 60px; height: 60px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-tile img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  background: white;       /* trademark images often have transparent / off-white bg */
}
.logo-tile.logo-placeholder {
  font-weight: 700; font-size: 22px; color: var(--ink-2);
  background: var(--surface);
  user-select: none;
}
.appno-link { color: var(--primary); text-decoration: none; }
.appno-link:hover { text-decoration: underline; }
.type-pill {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 4px;
  background: #eeeeee; color: var(--ink-2);
  vertical-align: 1px;
}
.goods-preview {
  font-size: 11.5px; color: var(--muted);
  margin-top: 3px; font-style: italic;
  max-width: 360px;
}

/* Matched-term chips on each row (shown when fan-out happened) */
.matched-row { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.matched-chip {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 999px;
  background: #eeeeee; color: var(--ink-2);
  border: 1px solid var(--line);
}
.matched-chip-full {
  background: #f0f0f0; color: var(--primary); border-color: rgba(0,0,0,0.2);
}

/* Token list in the India meta bar */
.india-tokens { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.india-tokens::before {
  content: ""; display: none;
}
.india-token {
  display: inline-block;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line);
}
.india-token-full {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white; border-color: transparent;
}
.india-token-skipped {
  background: #fff4e0; color: var(--amber);
  border-color: rgba(217, 133, 31, 0.25);
  text-decoration: line-through;
  text-decoration-color: rgba(217, 133, 31, 0.4);
  cursor: help;
}
.india-tokens-label {
  font-size: 11.5px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Sort indicator in the meta bar */
.sort-indicator {
  display: inline-block; margin-left: 12px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--card); padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  vertical-align: 2px;
}

/* Relevance tier badges (under the wordmark, on their own row) */
.wm-text { font-weight: 700; }
.wm-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tier-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; cursor: help;
  line-height: 1;
}
.tier-icon { flex-shrink: 0; }
.tier-exact {
  /* Red gradient — communicates "stop, identical mark already exists". */
  background: linear-gradient(135deg, #e11d2e 0%, #7a0d18 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(193, 18, 31, 0.30);
}
.tier-strong {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-ink);
}
.tier-moderate {
  background: #fff4e0; color: var(--amber);
  border: 1px solid rgba(217,133,31,0.25);
}

/* Row tint by relevance tier (very subtle — just a left accent stripe) */
.india-table tr.rel-exact td:first-child  { box-shadow: inset 3px 0 0 #c1121f; }
.india-table tr.rel-strong td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.india-table tr.rel-exact  { background: linear-gradient(90deg, #fff7f3 0%, var(--card) 30%); }
.india-table tr.rel-strong { background: linear-gradient(90deg, var(--surface), var(--card) 30%); }
[data-theme="dark"] .india-table tr.rel-exact  { background: linear-gradient(90deg, #2a1c14 0%, var(--card) 30%); }
.india-table tr.rel-exact:hover td,
.india-table tr.rel-strong:hover td { background: var(--surface-soft); }
.status-pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.status-registered { background: var(--tint-green); color: var(--green); }
.status-pending    { background: var(--tint-amber); color: var(--amber); }
.status-opposed    { background: var(--tint-red); color: var(--red); }
.status-objected   { background: var(--tint-red); color: var(--red); }
.status-abandoned  { background: var(--surface); color: var(--muted); }
.status-refused    { background: var(--surface); color: var(--muted); }
.status-accepted   { background: var(--tint-blue); color: var(--ink); }
.status-other      { background: var(--surface); color: var(--ink-2); }
.india-source { margin-top: 10px; }
.india-empty {
  padding: 40px 20px; text-align: center; color: var(--muted);
}

/* Open-web tab loading state */
.web-loading {
  display: flex; align-items: center; gap: 18px;
  padding: 28px; border-radius: 12px;
  background: var(--surface-soft); border: 1px dashed var(--line);
}
.web-loading-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: radar-spin 0.9s linear infinite;
  flex-shrink: 0;
}
.web-loading-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.web-loading-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ---------- Open Web tab (real scrape results) ---------- */
.web-toolbar {
  display: flex; gap: 12px; align-items: stretch;
  margin-bottom: 18px;
}
.web-toolbar .web-banner { flex: 1 1 auto; margin-bottom: 0; }
.web-toolbar .filter-download-btn { align-self: stretch; height: auto; }
.web-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 12px;
  background: linear-gradient(135deg, #f3fbf7 0%, var(--card) 100%);
  border: 1px solid rgba(21, 160, 107, 0.25);
  margin-bottom: 18px; font-size: 14px; color: var(--ink-2);
}

.web-group { margin-bottom: 22px; }
.web-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.web-group-head strong { font-size: 15px; }
.web-ico {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 16px;
}
.web-empty {
  padding: 18px; text-align: center; color: var(--muted);
  font-style: italic; font-size: 14px;
  background: var(--surface-soft); border-radius: 8px;
}

/* generic web result cards */
.web-results { display: grid; gap: 10px; }
.web-card {
  display: block; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.web-card:hover {
  border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.web-card.exact { border-color: rgba(255, 106, 61, 0.5); background: #fff7f3; }
.wc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-title { font-weight: 700; font-size: 15px; flex: 1 1 auto; color: var(--ink); }
.wc-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: white;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
}
.wc-stars {
  font-size: 12px; font-weight: 700; color: var(--amber);
  background: #fff4e0; padding: 2px 8px; border-radius: 999px;
}
.wc-url {
  font-size: 12px; color: var(--muted); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: ui-monospace, Menlo, monospace;
}
.wc-snippet { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }

/* domain table */
.web-domains {
  display: grid; gap: 6px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; background: var(--card);
}
.web-domain-row {
  display: grid; grid-template-columns: minmax(180px, 1fr) auto 2fr;
  align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 8px;
}
.web-domain-row.taken { background: #fff7f3; }
.web-domain-row.free  { background: #f3fbf7; }
.dom-name { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 14px; }
.dom-meta { font-size: 12.5px; color: var(--muted); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { transform: none; }
  .how-grid, .aud-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .upload-grid, .grid-2, .layer-grid, .ipindia-grid { grid-template-columns: 1fr; }
  .web-domain-row { grid-template-columns: 1fr; gap: 6px; }
  .nav-links { display: none; }
  .trust-row { grid-template-columns: repeat(2, 1fr); }
  .floating-pill { display: none; }
}
@media (max-width: 600px) {
  .how-grid, .aud-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .results-head { flex-direction: column; align-items: flex-start; }
}