/* ============================================================
   SurgX Landing v3 — layout-only styles (lx-* prefix)
   Scopes every rule under .sxv3 (shared token root from surgx-pdp-v3.css).
   DO NOT redefine tokens or component classes that live in surgx-pdp-v3.css.
   Mobile-first: single column at 375px, multi-column grid at 980px+.
   Breakpoint idiom mirrors surgx-browse-v3.css (980px).
   ============================================================ */

/* ---- page shell ---- */
.sxv3.sx-landing { min-height: 100vh; }

.sxv3 .lx-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  display: grid;
  gap: 0;
}

@media (min-width: 980px) {
  .sxv3 .lx-page {
    padding: 24px 32px 64px;
  }
}

/* ---- section spacing ---- */
.sxv3 .lx-section {
  padding-top: 36px;
}

@media (min-width: 980px) {
  .sxv3 .lx-section {
    padding-top: 48px;
  }
}

/* ---- section head (kicker) ---- */
.sxv3 .lx-sec-head {
  margin-bottom: 14px;
}

/* ============================================================
   1. HERO
   ============================================================ */
.sxv3 .lx-hero {
  padding: 32px 0 0;
  display: grid;
  gap: 16px;
  max-width: 640px;
}

@media (min-width: 980px) {
  .sxv3 .lx-hero {
    padding: 56px 0 0;
    gap: 18px;
  }
}

.sxv3 .lx-hero-brand {
  display: flex;
  align-items: center;
}

/* official wordmark (trimmed transparent crop, 1043x205 source) */
.sxv3 .lx-hero-logo {
  height: 30px;
  width: auto;
  display: block;
}

.sxv3 .lx-hero-tagline {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink-900);
  margin: 0;
}

@media (min-width: 980px) {
  .sxv3 .lx-hero-tagline {
    font-size: 40px;
  }
}

.sxv3 .lx-hero-subline {
  font-size: 15px;
  color: var(--ink-600);
  line-height: 1.5;
  max-width: 540px;
}

@media (min-width: 980px) {
  .sxv3 .lx-hero-subline {
    font-size: 16px;
  }
}

.sxv3 .lx-hero-cta {
  padding-top: 4px;
}

/* ---- typeahead ---- */
.sxv3 .lx-typeahead {
  position: relative;
  max-width: 480px;
}

.sxv3 .lx-typeahead-input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: 0 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-900);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.sxv3 .lx-typeahead-input:focus {
  border-color: var(--accent-300);
  box-shadow: 0 0 0 3px var(--accent-50);
}

.sxv3 .lx-typeahead-input::placeholder {
  color: var(--ink-400);
}

.sxv3 .lx-typeahead-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  z-index: 50;
  overflow: hidden;
}

.sxv3 .lx-typeahead-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 80ms ease;
}

.sxv3 .lx-typeahead-row:last-of-type {
  border-bottom: 1px solid var(--line);
}

.sxv3 .lx-typeahead-row:hover {
  background: var(--surface-2);
}

.sxv3 .lx-ta-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sxv3 .lx-ta-vendor {
  font-size: 11px;
  color: var(--accent-600);
  flex: none;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sxv3 .lx-typeahead-seeall {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-600);
  cursor: pointer;
  text-align: left;
  transition: background 80ms ease;
}

.sxv3 .lx-typeahead-seeall:hover {
  background: var(--accent-50);
}

.sxv3 .lx-typeahead-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--ink-500);
}

.sxv3 .lx-ta-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent-600);
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   1b. HERO 3D CONSTELLATION (dark: ?hero=3d)
   ============================================================ */

/* wrapper that keeps the text block unstyled when 3d is off */
.sxv3 .lx-hero3d-text { min-width: 0; }

/* canvas — mobile band between subline and search */
.sxv3 .lx-hero3d-canvas {
  display: block;
  width: 100%;
  height: 220px;
  order: -1; /* band sits above search on mobile (between subline and typeahead in visual order) */
}

/* mobile: canvas is full-width band (flex column reorder) */
.sxv3 .lx-hero.lx-hero3d-active {
  display: flex;
  flex-direction: column;
  max-width: none;
}
.sxv3 .lx-hero.lx-hero3d-active .lx-hero3d-text {
  max-width: 640px;
}
.sxv3 .lx-hero.lx-hero3d-active .lx-hero3d-canvas {
  order: 0; /* between subline/search block — visually after the text */
}

/* desktop: side-by-side, canvas right */
@media (min-width: 980px) {
  .sxv3 .lx-hero.lx-hero3d-active {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    max-width: none;
  }
  .sxv3 .lx-hero.lx-hero3d-active .lx-hero3d-text {
    flex: 1 1 0%;
    max-width: 540px;
  }
  .sxv3 .lx-hero.lx-hero3d-active .lx-hero3d-canvas {
    flex: 0 0 460px;
    width: 460px;
    height: 360px;
    order: 0;
  }
}

/* ============================================================
   2. SPECIALTY GRID
   ============================================================ */
.sxv3 .lx-specialty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (min-width: 640px) {
  .sxv3 .lx-specialty-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 980px) {
  .sxv3 .lx-specialty-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

.sxv3 a.lx-specialty-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 13px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.sxv3 a.lx-specialty-tile:hover {
  border-color: var(--accent-300);
  box-shadow: var(--shadow-md, var(--shadow-sm));
  transform: translateY(-1px);
}

.sxv3 .lx-st-glyph {
  color: var(--accent-600);
  flex: none;
  margin-bottom: 2px;
}

.sxv3 .lx-st-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.25;
}

.sxv3 .lx-st-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ============================================================
   3. RECEIPTS BAND
   ============================================================ */
.sxv3 .lx-receipts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (min-width: 640px) {
  .sxv3 .lx-receipts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 980px) {
  .sxv3 .lx-receipts-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
}

.sxv3 .lx-receipt-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 13px;
}

.sxv3 .lx-rc-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-600);
  line-height: 1;
}

.sxv3 .lx-rc-label {
  font-size: 12px;
  color: var(--ink-600);
  line-height: 1.35;
}

/* all receipt cards are links now (Drew walk annotation) */
.sxv3 a.lx-receipt-card {
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.sxv3 a.lx-receipt-card:hover {
  border-color: var(--accent-300);
  box-shadow: var(--shadow-md, var(--shadow-sm));
  transform: translateY(-1px);
}

.sxv3 .lx-receipt-statement .lx-rc-label {
  font-weight: 600;
  color: var(--ink-700);
}

/* ============================================================
   4. FEATURED ROW
   ============================================================ */
.sxv3 .lx-featured-grid {
  display: grid;
  gap: 8px;
}

@media (min-width: 640px) {
  .sxv3 .lx-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .sxv3 .lx-featured-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

.sxv3 a.lx-featured-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.sxv3 a.lx-featured-card:hover {
  border-color: var(--accent-300);
  box-shadow: var(--shadow-md);
}

.sxv3 .lx-fc-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.sxv3 .lx-fc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.25;
}

.sxv3 .lx-fc-vendor {
  font-size: 11px;
  color: var(--accent-600);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sxv3 .lx-fc-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
}

.sxv3 .lx-fc-audio-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--role-cst);
  padding: 1px 6px;
  border: 1px solid var(--accent-100);
  border-radius: 4px;
  background: var(--accent-50);
}

/* ============================================================
   5. EDUCATION / AUDIO
   ============================================================ */
.sxv3 .lx-edu-line {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.55;
  max-width: 640px;
  margin-bottom: 14px;
}

.sxv3 .lx-sample-player {
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  max-width: 480px;
}

.sxv3 .lx-sp-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-700);
}

.sxv3 .lx-sample-player audio {
  width: 100%;
  height: 32px;
}

/* ============================================================
   6. GROUNDING STRIP
   ============================================================ */
.sxv3 .lx-grounding-grid {
  display: grid;
  gap: 8px;
}

@media (min-width: 640px) {
  .sxv3 .lx-grounding-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

.sxv3 .lx-ground-card {
  padding: 14px 14px 16px;
  display: grid;
  gap: 6px;
}

.sxv3 .lx-gc-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.25;
}

.sxv3 .lx-gc-body {
  font-size: 12.5px;
  color: var(--ink-600);
  line-height: 1.5;
}

/* ============================================================
   7. FOOTER
   ============================================================ */
.sxv3 .lx-footer {
  padding-top: 40px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

@media (min-width: 980px) {
  .sxv3 .lx-footer {
    padding-top: 56px;
  }
}

/* ---- prevent column blowout on mobile ---- */
.sxv3 .lx-page { overflow-x: clip; }
.sxv3 .lx-typeahead, .sxv3 .lx-featured-card, .sxv3 .lx-fc-body { min-width: 0; }