/* ==========================================================================
   Radar Quaerion — product system
   MOBILE FIRST. Every base rule below targets the small screen; the
   `min-width` blocks at the end progressively add room. There is no
   `max-width` query in this file — a value only ever grows.

   White canvas for long reading, near-black blocks as punctuation, purple for
   action. One spacing scale, one type scale, three radii used deliberately.
   ========================================================================== */

:root {
  /* surface */
  --canvas: #ffffff;
  --tint: #f7f6fb;
  --tint-2: #f1eff8;
  --ink-block: #0e0c16;

  /* line */
  --line: #e9e6f0;
  --line-strong: #d8d3e4;
  --line-invert: rgba(255, 255, 255, .13);

  /* text */
  --ink: #12101a;
  --ink-soft: #57516a;
  --ink-muted: #8b8598;
  --ink-on-block: #f7f5fc;
  --ink-on-block-soft: #b3adc6;

  /* brand */
  --purple: #6d3bff;
  --purple-deep: #5326d6;
  --purple-lift: #8f6dff;
  --purple-wash: #f3efff;
  --purple-line: #d9ceff;
  --verify: #3f8f14;
  --verify-wash: #f0fae4;

  /* spacing scale — phone values; the min-width blocks scale the top end */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px; --s7: 32px;  --s8: 44px;  --s9: 56px;  --s10: 68px;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shell: calc(100% - var(--s6));
  --header-h: 60px;

  --display: "Space Grotesk", sans-serif;
  --ui: "Inter Tight", sans-serif;

  --shadow-card: 0 1px 2px rgba(19, 15, 40, .04), 0 8px 24px rgba(19, 15, 40, .05);
  --shadow-lift: 0 2px 4px rgba(19, 15, 40, .05), 0 18px 40px rgba(19, 15, 40, .1);

  /* aliases kept for the profile and panel sheets */
  --surface-1: var(--canvas);
  --surface-2: var(--tint);
  --surface-3: var(--tint-2);
  --primary: var(--purple);
  --primary-lift: var(--purple-lift);
  --primary-soft: var(--purple-wash);
  --radius-sm: var(--r-sm);
  --radius: var(--r);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-lg);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* type scale — the contrast between display and interface text is what keeps
   a page from reading as one flat grid of identical cards */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.04em; line-height: 1.06; }
h1 { font-size: 2.3rem; letter-spacing: -.05em; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.1rem; letter-spacing: -.03em; }
h4 { font-size: .96rem; letter-spacing: -.03em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lead { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.eyebrow { color: var(--purple); font-size: .71rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }

/* --- layout primitives ---------------------------------------------------- */

.shell { width: var(--shell); margin: 0 auto; }
.section { padding: var(--s9) 0; }
.section-tight { padding: var(--s8) 0; }
.section-head { max-width: 640px; margin-bottom: var(--s6); }
.section-head h2 { margin-top: var(--s3); }
.section-head .lead { margin-top: var(--s3); }

/* Punctuation block: a dark full-width band between white sections. Used
   sparingly — it is what stops the page reading as an endless card grid. */
.block { padding: var(--s9) 0; background: var(--ink-block); color: var(--ink-on-block); }
.block h2, .block h3 { color: var(--ink-on-block); }
.block .lead { color: var(--ink-on-block-soft); }
.block .eyebrow { color: var(--purple-lift); }

/* --- chip ----------------------------------------------------------------- */

.chip { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-soft); font-size: .73rem; font-weight: 650; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px var(--purple-wash); }
.chip-label { margin-bottom: var(--s3); }
.block .chip { border-color: var(--line-invert); background: rgba(255,255,255,.05); color: var(--ink-on-block-soft); }

/* --- buttons — 48px min target on touch ----------------------------------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border: 1px solid transparent; border-radius: var(--r-pill); font: 650 .89rem var(--ui); white-space: nowrap; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--purple-deep); }
.btn-purple { background: var(--purple); color: #fff; box-shadow: 0 6px 18px rgba(109, 59, 255, .26); }
.btn-purple:hover { background: var(--purple-deep); }
.btn-ghost { border-color: var(--line-strong); background: var(--canvas); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { min-height: 44px; padding: 0 var(--s4); font-size: .83rem; }
.block .btn-primary { background: #fff; color: var(--ink-block); }
.block .btn-ghost { border-color: var(--line-invert); background: transparent; color: var(--ink-on-block); }
.block .btn-ghost:hover { border-color: rgba(255,255,255,.42); }

/* --- header --------------------------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: var(--s4); width: var(--shell); margin: 0 auto; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: var(--s2); font: 650 1rem var(--display); letter-spacing: -.045em; }
.brand img { width: 24px; height: 24px; object-fit: contain; }
.site-nav { display: none; gap: var(--s5); }
.site-nav a { color: var(--ink-soft); font-size: .87rem; font-weight: 550; }
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.header-actions .btn { min-height: 40px; padding: 0 var(--s4); font-size: .82rem; }
.header-actions .btn-ghost { display: none; }

/* --- hero ----------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding: var(--s8) 0 var(--s7); text-align: center; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 34%, transparent 8%, #000 82%); mask-image: radial-gradient(ellipse 62% 58% at 50% 34%, transparent 8%, #000 82%); }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 34% at 50% 0%, rgba(109,59,255,.13), transparent 64%); }
.hero > .shell { position: relative; z-index: 1; }
.hero h1 { max-width: 16ch; margin: var(--s4) auto 0; }
.hero h1 em { color: var(--purple); font-style: normal; }
.hero .lead { max-width: 54ch; margin: var(--s4) auto 0; }
.hero-actions { display: grid; gap: var(--s3); margin-top: var(--s5); }
.hero-actions .btn { width: 100%; }

.command { max-width: 720px; margin: var(--s6) auto 0; padding: var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--canvas); box-shadow: var(--shadow-lift); text-align: left; }
.command-top { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; padding: var(--s2) var(--s3) var(--s3); color: var(--ink-muted); font-size: .66rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.command-top b { color: var(--purple); }
.command-field { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--tint); }
.command-field svg { flex: none; width: 17px; height: 17px; stroke: var(--ink-muted); fill: none; stroke-width: 2; }
/* 16px keeps iOS from zooming the viewport when the field takes focus */
.command-field input { flex: 1; min-width: 0; padding: 6px 0 var(--s3); border: 0; background: none; color: var(--ink); font: 500 16px var(--ui); outline: none; }
.command-field input::placeholder { color: var(--ink-muted); }
.command-field .btn { width: 100%; }
.command-filters { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s1) var(--s1); }
.filter { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-soft); font: 600 .79rem var(--ui); cursor: pointer; transition: .18s ease; }
.filter:hover { border-color: var(--line-strong); color: var(--ink); }
.filter[aria-pressed="true"] { border-color: var(--purple-line); background: var(--purple-wash); color: var(--purple-deep); }
.filter .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.filter[aria-pressed="true"] .dot { background: var(--verify); }
.hero-note { margin-top: var(--s4); color: var(--ink-muted); font-size: .79rem; }
.hero-note b { color: var(--ink); }

/* --- marquee -------------------------------------------------------------- */

.rail { position: relative; overflow: hidden; border-block: 1px solid var(--line); }
.rail:before, .rail:after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 60px; }
.rail:before { left: 0; background: linear-gradient(90deg, var(--canvas), transparent); }
.rail:after { right: 0; background: linear-gradient(270deg, var(--canvas), transparent); }
.rail-track { display: flex; gap: var(--s6); width: max-content; animation: rail-scroll 40s linear infinite; }
.rail-track:hover { animation-play-state: paused; }
.rail-item { padding: var(--s3) 0; color: var(--ink-muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
@keyframes rail-scroll { to { transform: translateX(-50%); } }

/* --- statement ------------------------------------------------------------ */

.statement { position: relative; overflow: hidden; padding: var(--s10) 0; text-align: center; }
.statement-ghost { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: transparent; font: 600 clamp(9rem, 44vw, 27rem)/.76 var(--display); letter-spacing: -.08em; background: linear-gradient(180deg, var(--tint-2), rgba(241,239,248,0) 88%); -webkit-background-clip: text; background-clip: text; user-select: none; pointer-events: none; }
.statement-copy { position: relative; max-width: 19ch; margin: 0 auto; font: 600 1.55rem/1.16 var(--display); letter-spacing: -.045em; }
.statement-copy span { color: var(--ink-muted); }
.statement-sub { position: relative; margin-top: var(--s4); color: var(--ink-muted); font-size: .84rem; }

/* --- numbered steps ------------------------------------------------------- */

.steps { display: grid; gap: var(--s3); }
.step { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: center; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--tint); }
.step-index { display: inline-flex; align-items: center; gap: var(--s2); color: var(--purple); font: 750 .73rem var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.step-index b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--purple-line); border-radius: 8px; background: var(--purple-wash); font-size: .74rem; }
.step-copy h3 { margin: var(--s3) 0 var(--s3); font-size: 1.32rem; }
.step-copy p { color: var(--ink-soft); line-height: 1.6; }
.step-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.step-meta span { padding: 6px var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-muted); font-size: .73rem; font-weight: 600; }

/* --- product mockups ------------------------------------------------------ */

.mock { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); box-shadow: var(--shadow-card); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--tint); }
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.mock-bar span { margin-left: var(--s2); overflow: hidden; color: var(--ink-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.mock-body { padding: var(--s3); }
.mock-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--canvas); }
.mock-row + .mock-row { margin-top: 6px; }
.mock-row .tag { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--purple-wash); color: var(--purple-deep); font-size: .68rem; font-weight: 750; }
.mock-row > div { min-width: 0; }
.mock-row strong { display: block; overflow: hidden; font-size: .81rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mock-row small { display: block; margin-top: 2px; overflow: hidden; color: var(--ink-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.mock-row .state { flex: none; margin-left: auto; padding: 4px 9px; border-radius: var(--r-pill); font-size: .66rem; font-weight: 700; white-space: nowrap; }
.state-verified { background: var(--verify-wash); color: var(--verify); }
.state-review { background: var(--tint-2); color: var(--ink-muted); }
.mock-row.is-dim { opacity: .5; }
.mock-bars { display: flex; align-items: end; gap: 6px; height: 104px; padding-top: var(--s3); }
.mock-bars i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--purple), var(--purple-lift)); }
.mock-legend { display: flex; justify-content: space-between; margin-top: var(--s3); color: var(--ink-muted); font-size: .7rem; }
.mock-meter + .mock-meter { margin-top: var(--s4); }
.mock-meter span { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: .77rem; }
.mock-meter i { display: block; height: 7px; margin-top: 7px; overflow: hidden; border-radius: var(--r-pill); background: var(--tint-2); }
.mock-meter i b { display: block; height: 100%; border-radius: inherit; background: var(--purple); }
.mock-meter span b { color: var(--ink); font-weight: 700; }

/* --- feature rows --------------------------------------------------------- */

.features { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.feature { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); }
.feature-lead { font-size: .99rem; line-height: 1.56; }
.feature-lead b { font-weight: 700; }
.feature-lead span { color: var(--ink-soft); }
.feature .mock { margin-top: var(--s4); }

/* --- trust layers (inside a dark block) ----------------------------------- */

.layers { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.layer { padding: var(--s5); border: 1px solid var(--line-invert); border-radius: var(--r); background: rgba(255,255,255,.04); }
.layer-mark { width: 32px; height: 3px; border-radius: var(--r-pill); background: var(--ink-on-block-soft); }
.layer h3 { margin: var(--s3) 0 var(--s2); font-size: 1.04rem; }
.layer p { color: var(--ink-on-block-soft); font-size: .85rem; line-height: 1.55; }
.layer-verified .layer-mark { background: #a3e65f; }
.layer-editorial .layer-mark { background: var(--purple-lift); }


/* --- selo de recomendação ------------------------------------------------
   Vive dentro do bloco escuro da seção de confiança. MOBILE FIRST: empilha no
   telefone e vira duas colunas só quando há largura. A arte tem fundo
   transparente, então nenhum retângulo aparece sobre o bloco. */

.seal { display: grid; gap: var(--s5); margin: var(--s7) 0 0; padding: var(--s6) var(--s5); border: 1px solid var(--line-invert); border-radius: var(--r-lg); background: rgba(255,255,255,.04); }

/* `width:100%` com `max-width` em vez de largura fixa: no telefone o selo ocupa
   a linha inteira e nunca estoura o bloco. */
.seal-art { width: 100%; max-width: 440px; height: auto; }

.seal-copy { min-width: 0; }
.seal-title { color: var(--ink-on-block); font-size: 1.02rem; font-weight: 650; }

.seal-rules { display: grid; gap: var(--s3); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.seal-rules li { position: relative; padding-left: var(--s5); color: var(--ink-on-block-soft); font-size: .88rem; line-height: 1.55; }
.seal-rules li:before { content: ""; position: absolute; top: .62em; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--purple-lift); }
.seal-rules b { color: var(--ink-on-block); font-weight: 700; }

/* O "não se compra" é o que separa este selo dos outros. Ganha regra própria e
   contraste, em vez de virar mais um item da lista. */
.seal-never { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-invert); color: var(--ink-on-block-soft); font-size: .86rem; line-height: 1.6; }
.seal-never b { color: #a3e65f; font-weight: 700; }

/* --- comparison ----------------------------------------------------------- */

.compare { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.compare-col { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--tint); }
.compare-col h3 { margin-bottom: var(--s4); }
.compare-col ul { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.compare-col li { display: flex; gap: var(--s3); color: var(--ink-soft); font-size: .88rem; line-height: 1.45; }
.compare-col li:before { content: "✕"; flex: none; color: var(--ink-muted); font-size: .82rem; }
.compare-radar { border-color: var(--purple-line); background: var(--purple-wash); }
.compare-radar li { color: var(--ink); }
.compare-radar li:before { content: "✓"; color: var(--verify); }

/* --- closing CTA ---------------------------------------------------------- */

.cta { position: relative; overflow: hidden; padding: var(--s8) var(--s5); border-radius: var(--r-lg); background: var(--ink-block); color: var(--ink-on-block); text-align: center; }
.cta:before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(109,59,255,.38), transparent 62%); }
.cta > * { position: relative; }
.cta h2 { color: var(--ink-on-block); }
.cta p { max-width: 50ch; margin: var(--s4) auto 0; color: var(--ink-on-block-soft); line-height: 1.6; }
.cta .hero-actions { margin-top: var(--s5); }

/* --- footer --------------------------------------------------------------- */

.site-footer { margin-top: var(--s9); padding: var(--s7) 0 var(--s8); border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: var(--s4); }
.site-footer p, .site-footer small { color: var(--ink-muted); font-size: .83rem; }

/* --- overlays ------------------------------------------------------------- */

.filter-menu { position: fixed; z-index: 80; display: grid; min-width: 216px; max-width: calc(100vw - var(--s6)); gap: 2px; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--canvas); box-shadow: var(--shadow-lift); }
.filter-menu[hidden] { display: none; }
.filter-menu button { display: flex; justify-content: space-between; gap: var(--s5); min-height: 44px; padding: 10px var(--s3); border: 0; border-radius: 8px; background: none; color: var(--ink-soft); font: 600 .84rem var(--ui); text-align: left; cursor: pointer; }
.filter-menu button:hover { background: var(--purple-wash); color: var(--purple-deep); }
.filter-menu span { color: var(--purple); }

.toast { position: fixed; z-index: 90; left: 50%; bottom: var(--s5); max-width: calc(100% - var(--s6)); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: .85rem; font-weight: 600; opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   DIRECTORY
   ========================================================================== */

.dir-hero { position: relative; overflow: hidden; padding: var(--s7) 0 var(--s4); }
.dir-hero > .shell { position: relative; z-index: 1; }
.dir-hero h1 { max-width: 19ch; margin-top: var(--s3); font-size: 1.95rem; }
.dir-hero .lead { max-width: 58ch; margin-top: var(--s3); }

.dir-command-wrap { position: sticky; top: var(--header-h); z-index: 50; padding: var(--s3) 0; background: rgba(255,255,255,.95); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.dir-command { display: flex; align-items: center; gap: var(--s2); padding: 5px 5px 5px var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--canvas); box-shadow: var(--shadow-card); }
.dir-command svg { flex: none; width: 17px; height: 17px; stroke: var(--ink-muted); fill: none; stroke-width: 2; }
.dir-command input { flex: 1; min-width: 0; padding: var(--s3) 0; border: 0; background: none; color: var(--ink); font: 500 16px var(--ui); outline: none; }
.dir-command input::placeholder { color: var(--ink-muted); }
.dir-command .btn { flex: none; min-height: 40px; padding: 0 var(--s3); font-size: 0; }
.dir-command .btn:after { content: "→"; font-size: 1rem; }

.chip-rail { display: flex; gap: var(--s2); overflow-x: auto; margin-top: var(--s3); padding-bottom: var(--s1); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chip-rail::-webkit-scrollbar { display: none; }
.chip-rail .filter { flex: none; }

.collections { display: grid; gap: var(--s7); padding: var(--s6) 0 var(--s5); }
.collections > div { min-width: 0; }
.collection-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.collection-head h2 { font-size: 1.2rem; }
.collection-head p { margin-top: 4px; color: var(--ink-muted); font-size: .79rem; }
.collection-nav { display: none; gap: 6px; }
.collection-nav button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--canvas); color: var(--ink-soft); cursor: pointer; transition: .18s ease; }
.collection-nav button:hover { border-color: var(--ink); color: var(--ink); }
/* Rails bleed to the screen edge on phones so a card is never clipped mid-swipe */
.collection-rail { display: flex; gap: var(--s3); overflow-x: auto; margin: 0 calc(var(--s3) * -1); padding: var(--s1) var(--s3) var(--s3); scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.collection-rail::-webkit-scrollbar { display: none; }
.collection-rail > * { flex: none; width: 78vw; max-width: 300px; scroll-snap-align: start; }

.co-card { display: flex; flex-direction: column; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); transition: border-color .18s ease, box-shadow .18s ease; }
.co-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.co-top { display: flex; align-items: center; gap: var(--s3); }
.co-logo { display: grid; place-items: center; flex: none; width: 42px; height: 42px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--tint); }
.co-logo img { width: 28px; height: 24px; object-fit: contain; }
.co-id { min-width: 0; }
.co-id p { color: var(--purple); font-size: .67rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.co-id h3 { margin-top: 3px; overflow: hidden; font-size: .96rem; text-overflow: ellipsis; white-space: nowrap; }
.co-tagline { margin-top: var(--s3); color: var(--ink-soft); font-size: .83rem; line-height: 1.48; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.co-meta span { padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-muted); font-size: .68rem; font-weight: 600; }
.co-signal { margin-top: var(--s3); }
.co-signal span { display: flex; justify-content: space-between; color: var(--ink-muted); font-size: .7rem; }
.co-signal span b { color: var(--ink); font-weight: 700; }
.co-signal i { display: block; height: 5px; margin-top: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--tint-2); }
.co-signal i b { display: block; height: 100%; border-radius: inherit; background: var(--purple); }
.co-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s4); }
.co-foot > span { color: var(--ink-muted); font-size: .74rem; }
.co-foot a { color: var(--purple); font-size: .79rem; font-weight: 700; }

.badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--r-pill); font-size: .66rem; font-weight: 750; white-space: nowrap; }
.badge-verified { background: var(--verify-wash); color: var(--verify); }
.badge-demo { background: var(--tint-2); color: var(--ink-muted); }
.co-rank { display: grid; place-items: center; flex: none; width: 25px; height: 25px; border-radius: 7px; background: var(--tint-2); color: var(--ink-muted); font: 750 .7rem var(--ui); }

.dir-layout { display: grid; grid-template-columns: 1fr; gap: var(--s5); padding: var(--s4) 0 var(--s7); }
.facets { min-width: 0; }
.facets-panel { display: grid; gap: var(--s5); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--tint); }
.facet h3 { margin-bottom: var(--s3); color: var(--ink-muted); font-family: var(--ui); font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.facet-list { display: grid; gap: 2px; }
.facet-list button { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-soft); font: 600 .83rem var(--ui); text-align: left; cursor: pointer; transition: .15s ease; }
.facet-list button:hover { background: var(--canvas); color: var(--ink); }
.facet-list button[aria-pressed="true"] { background: var(--purple-wash); color: var(--purple-deep); }
.facet-list em { color: var(--ink-muted); font-style: normal; font-size: .73rem; }
.facet-reset { width: 100%; min-height: 48px; padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--canvas); color: var(--ink-soft); font: 650 .81rem var(--ui); cursor: pointer; }
.facet-reset:hover { border-color: var(--ink); color: var(--ink); }

.dir-toolbar { display: flex; align-items: flex-start; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); }
.dir-toolbar strong { font: 600 1.1rem var(--display); letter-spacing: -.04em; }
.dir-toolbar small { display: block; margin-top: 2px; color: var(--ink-muted); font-size: .77rem; }
.toolbar-controls { display: flex; gap: var(--s2); }
.control { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-soft); font: 600 .78rem var(--ui); cursor: pointer; }
.control:hover { border-color: var(--ink); color: var(--ink); }
.view-toggle { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--tint); }
.view-toggle button { min-height: 34px; padding: 0 var(--s3); border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-muted); font: 650 .76rem var(--ui); cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-card); }

.dir-results { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.dir-results[data-view="list"] .co-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "logo id state" "logo body body" "logo foot foot"; gap: 0 var(--s3); }
.dir-results[data-view="list"] .co-logo { grid-area: logo; }
.dir-results[data-view="list"] .co-top { display: contents; }
.dir-results[data-view="list"] .co-id { grid-area: id; }
.dir-results[data-view="list"] .co-state { grid-area: state; }
.dir-results[data-view="list"] .co-tagline { grid-area: body; margin-top: 6px; -webkit-line-clamp: 1; }
.dir-results[data-view="list"] .co-meta { grid-area: body; }
.dir-results[data-view="list"] .co-signal { display: none; }
.dir-results[data-view="list"] .co-foot { grid-area: foot; padding-top: var(--s3); }

.dir-empty { padding: var(--s7) var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); text-align: center; }
.dir-empty p { max-width: 44ch; margin: var(--s3) auto var(--s4); color: var(--ink-muted); font-size: .88rem; }
.dir-note { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--purple-line); border-radius: var(--r-sm); background: var(--tint); color: var(--ink-soft); font-size: .79rem; line-height: 1.55; }
.dir-note b { color: var(--ink); }

/* ==========================================================================
   COVER ART
   Real photographs go in `company.cover`; until one is supplied and cleared,
   generated brand art fills the slot and labels itself so it is never
   mistaken for a photo of a real place.
   ========================================================================== */

.cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--tint-2); }
.cover > img:not(.cover-logo) { width: 100%; height: 100%; object-fit: cover; }
.cover-generated { background: linear-gradient(var(--cover-tilt, 140deg), var(--cover-a), var(--cover-b)); }
.cover-art { position: absolute; inset: 0; opacity: .5; }
.cover-generated[data-pattern="grid"] .cover-art { background-image: linear-gradient(rgba(255,255,255,.34) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px); background-size: 28px 28px; }
.cover-generated[data-pattern="rings"] .cover-art { background-image: repeating-radial-gradient(circle at 76% 22%, rgba(255,255,255,.3) 0 1px, transparent 1px 26px); }
.cover-generated[data-pattern="rays"] .cover-art { background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.26) 0 2px, transparent 2px 22px); }
.cover-generated[data-pattern="stack"] .cover-art { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 18px); }
.cover-generated:after { content: ""; position: absolute; inset: 0; background: linear-gradient(190deg, transparent 42%, rgba(10, 6, 26, .5)); }
.cover-logo { position: absolute; z-index: 2; top: 50%; left: 50%; width: 44%; max-height: 42%; object-fit: contain; transform: translate(-50%, -50%); filter: brightness(0) invert(1); opacity: .96; }
.cover-pill { position: absolute; z-index: 3; top: var(--s3); left: var(--s3); padding: 6px var(--s3); border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); color: var(--ink); font-size: .7rem; font-weight: 700; }
.cover-note { position: absolute; z-index: 3; right: var(--s3); bottom: var(--s3); color: rgba(255,255,255,.72); font-size: .61rem; font-weight: 600; }

.cov-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.cov-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.cov-card .cover { border-radius: 0; }
.cov-body { display: flex; flex: 1; flex-direction: column; padding: var(--s4) var(--s4) var(--s5); }
.cov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.cov-head > div { min-width: 0; }
.cov-head h3 { overflow: hidden; font-size: 1.02rem; text-overflow: ellipsis; white-space: nowrap; }
.cov-place { margin-top: 4px; color: var(--ink-muted); font-size: .77rem; }
.cov-tagline { margin-top: var(--s3); color: var(--ink-soft); font-size: .84rem; line-height: 1.48; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cov-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s4); }
.cov-foot span { overflow: hidden; color: var(--ink-muted); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.cov-foot a { flex: none; color: var(--purple); font-size: .79rem; font-weight: 700; }

/* ==========================================================================
   HOME SHOWCASE MAP
   ========================================================================== */

.hmap { position: relative; overflow: hidden; padding: var(--s9) 0; background: var(--ink-block); color: var(--ink-on-block); }
.hmap:before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(109,59,255,.34), transparent 62%); pointer-events: none; }
.hmap > .shell { position: relative; z-index: 1; }
.hmap h2 { color: var(--ink-on-block); }
.hmap .lead { color: var(--ink-on-block-soft); }
.hmap-head { display: grid; gap: var(--s5); margin-bottom: var(--s5); }
.hmap-head .btn { justify-self: start; }

.hmap-stage { position: relative; height: 62vh; min-height: 380px; max-height: 560px; overflow: hidden; border: 1px solid var(--line-invert); border-radius: var(--r-lg); background: #0a0812; }
.hmap-stage #home-map { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.hmap-stage.is-ready #home-map { opacity: 1; }
.hmap-stage:after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 90px rgba(6, 4, 16, .85); }

.hmap-stats { position: absolute; z-index: 3; top: var(--s3); right: var(--s3); left: var(--s3); display: flex; gap: 6px; }
.hmap-stat { flex: 1; min-width: 0; padding: var(--s2) var(--s3); border: 1px solid var(--line-invert); border-radius: var(--r-sm); background: rgba(14, 12, 22, .84); backdrop-filter: blur(10px); }
.hmap-stat b { display: block; font: 600 1.2rem/1 var(--display); letter-spacing: -.05em; }
.hmap-stat span { display: block; margin-top: 4px; color: var(--ink-on-block-soft); font-size: .61rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }

.hmap-legend { position: absolute; z-index: 3; right: var(--s3); bottom: var(--s8); display: grid; gap: 5px; padding: var(--s2) var(--s3); border: 1px solid var(--line-invert); border-radius: var(--r-sm); background: rgba(14, 12, 22, .84); backdrop-filter: blur(10px); }
.hmap-legend span { display: flex; align-items: center; gap: var(--s2); color: var(--ink-on-block-soft); font-size: .69rem; font-weight: 600; }
.hmap-legend i { flex: none; width: 9px; height: 9px; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: var(--purple); }
.hmap-legend i.is-verified { background: #3f9c16; }

.hmap-note { margin-top: var(--s4); color: var(--ink-on-block-soft); font-size: .78rem; line-height: 1.55; }

.hmap-pop-shell .maplibregl-popup-content { padding: var(--s4); border: 1px solid var(--line-invert); border-radius: var(--r); background: #15121f; box-shadow: 0 20px 44px rgba(0,0,0,.6); }
.hmap-pop-shell .maplibregl-popup-tip { border-top-color: #15121f; border-bottom-color: #15121f; }
.hmap-pop-shell .maplibregl-popup-close-button { top: 4px; right: 6px; width: 34px; height: 34px; color: var(--ink-on-block-soft); font-size: 1.2rem; background: none; }
.hmap-pop-shell .maplibregl-popup-close-button:hover { color: #fff; background: none; }
.hmap-pop { width: min(218px, 62vw); color: var(--ink-on-block); }
.hmap-pop-cat { color: var(--purple-lift); font-size: .65rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.hmap-pop h3 { margin-top: 5px; color: var(--ink-on-block); font-size: .96rem; }
.hmap-pop-city { margin-top: 3px; color: var(--ink-on-block-soft); font-size: .76rem; }
.hmap-pop .btn { width: 100%; margin-top: var(--s4); background: #fff; color: var(--ink-block); }

/* ==========================================================================
   PROGRESSIVE ENHANCEMENT — each block only adds room
   ========================================================================== */

@media (min-width: 600px) {
  :root { --s5: 24px; --s6: 32px; --s7: 40px; --s8: 52px; --s9: 72px; --s10: 96px; --shell: calc(100% - var(--s7)); }

  h1 { font-size: 3rem; letter-spacing: -.055em; }
  h2 { font-size: 2.1rem; }

  .hero-actions { display: flex; justify-content: center; gap: var(--s3); }
  .hero-actions .btn { width: auto; }
  .command-top { align-items: center; flex-direction: row; justify-content: space-between; }
  .command-field { flex-wrap: nowrap; padding: 0 0 0 var(--s4); }
  .command-field input { padding: var(--s4) 0; }
  .command-field .btn { width: auto; margin: 6px; }

  .header-actions .btn-ghost { display: inline-flex; }
  .statement-copy { font-size: 2rem; }
  .features, .compare, .layers { grid-template-columns: repeat(2, 1fr); }
  .facets-panel { grid-template-columns: repeat(2, 1fr); }
  .facets-panel .facet-reset { grid-column: 1 / -1; }
  .dir-results { grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); }
  .dir-results[data-view="grid"].is-covers { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .collection-rail { margin: 0; padding: var(--s1) 0 var(--s3); }
  .collection-rail > * { width: 272px; }
  .collection-nav { display: flex; }
  .dir-toolbar { align-items: center; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
  .dir-command { padding: 6px 6px 6px var(--s4); gap: var(--s3); }
  .dir-command .btn { padding: 0 var(--s5); font-size: .89rem; }
  .dir-command .btn:after { content: none; }
  .footer-grid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .hmap-stats { right: auto; left: var(--s4); top: var(--s4); }
  .hmap-stat { flex: none; padding: var(--s3) var(--s4); }
  .hmap-stat b { font-size: 1.45rem; }
  .hmap-stat span { font-size: .68rem; }
  .cta { padding: var(--s9) var(--s7); }
}

@media (min-width: 860px) {
  .seal { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: var(--s7); align-items: center; padding: var(--s7); }
  :root { --header-h: 68px; --s9: 84px; --s10: 112px; }

  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.3rem; }

  .site-nav { display: flex; }
  .header-inner { gap: var(--s6); }
  .step { grid-template-columns: 1fr 1.25fr; gap: var(--s7); padding: var(--s6); }
  .step:nth-child(even) .step-copy { order: 2; }
  .step-copy h3 { font-size: 1.5rem; }
  .layers { grid-template-columns: repeat(4, 1fr); }
  .facets-panel { grid-template-columns: repeat(3, 1fr); }
  .statement-copy { font-size: 2.5rem; }
  .dir-hero h1 { font-size: 2.5rem; }
  .hmap-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
  .hmap-head > div { max-width: 620px; }
  .hmap-stage { height: 56vh; max-height: 580px; }
}

@media (min-width: 1040px) {
  :root { --shell: min(1180px, calc(100% - var(--s8))); --s9: 96px; --s10: 128px; }

  h1 { font-size: 4rem; }
  h2 { font-size: 2.5rem; }

  .step { padding: var(--s7); }
  .dir-layout { grid-template-columns: 244px minmax(0, 1fr); gap: var(--s6); padding: var(--s5) 0 var(--s8); }
  /* The grid item stretches the full row so the sticky panel inside it has
     room to travel; shortening the item pins the sticky box to a short area
     and the column slides under the search bar. */
  .facets-panel { position: sticky; top: var(--dir-stick, 212px); grid-template-columns: 1fr; max-height: calc(100vh - var(--dir-stick, 212px) - var(--s5)); overflow-y: auto; scrollbar-width: thin; }
  .facets-panel .facet-reset { grid-column: auto; }
  .dir-hero h1 { font-size: 3rem; }
  .dir-hero { padding: var(--s8) 0 var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  .rail-track { animation: none; }
  * { transition: none !important; }
}

/* ==========================================================================
   ICONS
   Text glyphs (arrows, chevrons) render in whatever the system font offers:
   wrong weight, wrong optical centre, no control. These are masked SVGs,
   so an icon inherits the current text colour and keeps one stroke weight.
   ========================================================================== */

:root {
  --i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-chev-left:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --i-chev-right:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --i-chev-down:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  --i-plus:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-minus:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --i-target:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
  --i-expand:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M15 20h5v-5M9 20H4v-5'/%3E%3C/svg%3E");
  --i-external:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M17 14v5H5V7h5'/%3E%3C/svg%3E");
}

.i {
  display: inline-block; flex: none;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  transition: transform .18s ease;
}
.i-arrow-right { -webkit-mask-image: var(--i-arrow-right); mask-image: var(--i-arrow-right); }
.i-chev-left   { -webkit-mask-image: var(--i-chev-left);   mask-image: var(--i-chev-left); }
.i-chev-right  { -webkit-mask-image: var(--i-chev-right);  mask-image: var(--i-chev-right); }
.i-chev-down   { -webkit-mask-image: var(--i-chev-down);   mask-image: var(--i-chev-down); }
.i-plus        { -webkit-mask-image: var(--i-plus);        mask-image: var(--i-plus); }
.i-minus       { -webkit-mask-image: var(--i-minus);       mask-image: var(--i-minus); }
.i-target      { -webkit-mask-image: var(--i-target);      mask-image: var(--i-target); }
.i-expand      { -webkit-mask-image: var(--i-expand);      mask-image: var(--i-expand); }
.i-external    { -webkit-mask-image: var(--i-external);    mask-image: var(--i-external); }

.btn .i { font-size: 1.05em; }
.btn:hover .i-arrow-right { transform: translateX(2px); }

/* inline go-link, replacing the bare arrow glyph in card footers */
.link-go { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); font-size: .79rem; font-weight: 700; }
.link-go .i { font-size: .95rem; }
.cov-card:hover .link-go .i-arrow-right,
.co-card:hover .link-go .i-arrow-right { transform: translateX(3px); }

/* rail prev/next — larger target, real hover, honest disabled state */
.collection-nav button { width: 40px; height: 40px; color: var(--ink-soft); }
.collection-nav button:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: #fff; }
.collection-nav button:disabled { opacity: .32; cursor: default; }
.collection-nav .i { font-size: 1.05rem; }

.control .i-chev-down, .filter .i-chev-down { font-size: .9rem; opacity: .6; }