/* Radius system: containers 16px, inner controls 12px, logo tiles 10px,
   chips and badges full pill. One accent (deep green), locked page-wide. */

:root {
  --bg: #f7f5f2;
  --surface: #ffffff;
  --ink: #191817;
  --ink-soft: #6e6a63;
  --line: #e6e2da;
  --accent: #1f6f4a;
  --accent-soft: #e6f2ec;
  --danger: #a32626;
  --danger-soft: #f9e8e8;
  --r-card: 16px;
  --r-control: 12px;
  --r-tile: 10px;
  /* Single-font system: everything is Inter. The mono/serif variables
     are kept as aliases so any existing references still resolve. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 110px;
}

.hero, .scan-bar, .history { max-width: 840px; }

/* Hero */

.hero { margin-bottom: 28px; }

/* Two-column hero: copy on the left, sample report on the right */

.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: center;
  padding: 28px 0 16px;
  margin-bottom: 28px;
}

.hero-grid .hero { margin-bottom: 0; }

.hero-grid h1 {
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.hero-grid .lede { font-size: 17.5px; max-width: 44ch; }

/* Hero preview card */

.hero-preview {
  position: relative;
  perspective: 1200px;
}

.preview-stamp {
  position: absolute;
  top: -14px;
  right: -8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  transform: rotate(5deg);
  box-shadow: 0 10px 22px rgba(31, 111, 74, 0.32);
}

.preview-stamp::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
}

.preview-card {
  position: relative;
  padding: 22px 22px 20px;
  background: linear-gradient(170deg, #ffffff 0%, #fbfaf5 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 38px 60px -32px rgba(31, 79, 58, 0.4),
    0 16px 28px -20px rgba(31, 79, 58, 0.18);
  transform: rotate(-1.5deg);
  transform-origin: center 60%;
}

.preview-row + .preview-row { margin-top: 16px; }

.preview-domain {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 700;
}

.preview-domain .logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
}
.preview-domain .logo.fallback::after { font-size: 14px; }

.preview-domain-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

.preview-scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.preview-score-num {
  display: block;
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
}

.preview-score-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.preview-score-verdict { margin-top: 10px; }

.preview-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 9px;
}

.preview-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.preview-apps .app-chip {
  padding: 4px 11px 4px 4px;
  font-size: 12px;
}

.preview-apps .app-chip .logo {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.preview-apps .app-chip .logo.fallback::after { font-size: 10px; }

.preview-foot {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 14px; }
  .hero-grid h1 { font-size: 42px; }
  .hero-preview { max-width: 460px; }
  .preview-card { transform: none; }
  .preview-stamp { transform: rotate(3deg); }
}

.hero-tagline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
}

.hero-tagline span {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 4px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1 {
  margin: 0 0 12px;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.lede {
  margin: 0;
  max-width: 56ch;
  font-size: 17px;
  color: var(--ink-soft);
}

/* Scan bar */

.scan-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin-bottom: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.scan-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#url-input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
}

#url-input::placeholder { color: #a39e95; }

#scan-btn {
  padding: 11px 22px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--r-control);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}

#scan-btn:hover { opacity: 0.92; }
#scan-btn:active { transform: scale(0.98); }
#scan-btn:disabled { opacity: 0.5; cursor: default; }

/* History */

.history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.history-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.history-chip:hover { border-color: var(--accent); color: var(--ink); }

.history-chip img {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.history-chip .count {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
}

/* Example chips under the scanner (seed users with a click-to-try set) */

.examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 30px;
  max-width: 840px;
  font-size: 13px;
  color: var(--ink-soft);
}

.examples-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.example-chip {
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.example-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Status */

.status {
  padding: 16px 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
}

.status.error {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

/* Logo tiles */

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  overflow: hidden;
}

.logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.logo.fallback::after {
  content: attr(data-letter);
  font-weight: 700;
  font-size: 17px;
}

.logo.fallback { border: none; }
.logo.tint-0.fallback { background: #e6f2ec; color: #1f6f4a; }
.logo.tint-1.fallback { background: #eceaf6; color: #4f4789; }
.logo.tint-2.fallback { background: #fbeee2; color: #9a5f23; }
.logo.tint-3.fallback { background: #e8f0f7; color: #2d5f8a; }
.logo.tint-4.fallback { background: #f9e9ee; color: #97394f; }
.logo.tint-5.fallback { background: #f0f0e2; color: #6b6b2a; }

/* Results layout: snapshot on the left, information on the right */

.results-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.snap-col {
  position: sticky;
  top: 24px;
}

.snap-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  /* The one elevated object on the page: a photograph of the store. */
  box-shadow: 0 24px 48px -28px rgba(31, 79, 58, 0.3);
}

.snap-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.snap-head .logo { width: 28px; height: 28px; border-radius: 8px; }
.snap-head .logo img { width: 18px; height: 18px; }
.snap-head .logo.fallback::after { font-size: 13px; }

.snap-domain {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snap-domain a {
  color: var(--ink);
  text-decoration: none;
}

.snap-domain a:hover { text-decoration: underline; }

.snap-frame {
  position: relative;
  background: var(--bg);
}

/* Reserve space only while loading; once the image arrives the frame
   takes its natural height so the full capture is visible, uncropped. */
.snap-frame:not(.loaded) { aspect-ratio: 6 / 5; }

.snap-skel {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
}

.snap-frame.loaded .snap-skel { display: none; }

.snap-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.35s;
}

.snap-img.loaded { opacity: 1; }

.snap-failed::after {
  content: "Snapshot unavailable";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 13px;
}

.snap-foot {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  margin-bottom: 18px;
}

/* Store summary */

.store-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.store-head .logo { width: 48px; height: 48px; }
.store-head .logo img { width: 28px; height: 28px; }

.store-id { flex: 1; min-width: 0; }

.store-title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-url {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
}

.store-url:hover { text-decoration: underline; }

.badge {
  display: inline-block;
  flex: none;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.badge.good { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.badge.warn { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.badge.amber { background: #f7eedd; border-color: transparent; color: #9a6620; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.theme-stat { grid-column: 1 / -1; }

.stat {
  padding: 14px 16px;
  background: var(--bg);
  border-radius: var(--r-control);
}

.stat-num {
  display: block;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}

.stat-label {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.theme-stat {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.theme-stat .logo { width: 36px; height: 36px; background: var(--surface); }

.theme-name {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-meta {
  font-size: 12px;
  color: var(--ink-soft);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.store-foot {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Groups and app cards */

.group-title {
  margin: 32px 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.group-title span {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 4px;
}

.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.15s;
}

.app-card:hover { border-color: #cdc8be; }
.app-card[open] { grid-column: 1 / -1; }

.app-card summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}

.app-card summary::-webkit-details-marker { display: none; }

.app-id { flex: 1; min-width: 0; }

.app-name {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-domain {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-count {
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
}

.evidence {
  border-top: 1px solid var(--line);
  padding: 14px 16px;
  background: var(--bg);
}

.evidence-item { margin-bottom: 12px; }
.evidence-item:last-child { margin-bottom: 0; }

.evidence-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.evidence-label a {
  color: var(--accent);
  text-decoration: none;
}

.evidence-label a:hover { text-decoration: underline; }

.evidence-snippet {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: 9px 12px;
  word-break: break-all;
  white-space: pre-wrap;
}

/* Embeds and proxy paths */

.embed-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.embed-id { flex: 1; min-width: 0; }

.embed-slug {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.footnote {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.empty-card {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: var(--ink-soft);
  font-size: 14.5px;
  margin-bottom: 18px;
}

/* Loading skeletons */

.skeleton-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.skeleton {
  height: 68px;
  border-radius: var(--r-card);
  background: linear-gradient(100deg, #efece7 40%, #f7f5f1 50%, #efece7 60%);
  background-size: 200% 100%;
}

.skeleton.tall { height: 150px; }

@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: shimmer 1.4s linear infinite; }

  .reveal {
    animation: rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Top navigation */

.topnav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topnav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent);
}

.topnav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  overflow-x: auto;
}

.topnav-links a {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.topnav-links a:hover { color: var(--ink); background: var(--bg); }
.topnav-links a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Tool menu (hub page) */

.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tool-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s;
}

.tool-card:hover { border-color: var(--accent); }
.tool-card .logo { width: 44px; height: 44px; }

.tool-name { display: block; font-size: 16.5px; font-weight: 700; }
.tool-desc { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-soft); }
.tool-meta {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* How-it-works strip */

.how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 36px;
}

.how-step {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.how-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 8px;
}

.how-title { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.how-body { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* Footer */

.site-footer {
  margin-top: 64px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 24px 28px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
}

.footer-brand p {
  margin: 12px 0 0;
  max-width: 32ch;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.footer-col h4 {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li { margin-bottom: 8px; }

.footer-col a {
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
}

.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
}

@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .how { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* Key-value rows */

.kv {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.kv:last-child { border-bottom: none; }
.kv-k { color: var(--ink-soft); font-weight: 600; }
.kv-v { min-width: 0; word-break: break-word; }
.kv-v code { font-family: var(--mono); font-size: 12.5px; }

/* Checklists (status dots convey pass / warn / fail state) */

.check-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.check-row:last-child { border-bottom: none; }

.check-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: relative;
  top: -1px;
}

.check-dot.pass { background: #2e8a5c; }
.check-dot.warn { background: #c98a2b; }
.check-dot.fail { background: #c14444; }

.check-label { flex: none; width: 200px; font-size: 14px; font-weight: 600; }
.check-detail { font-size: 13.5px; color: var(--ink-soft); word-break: break-word; }

.score-head {
  display: flex;
  align-items: center;
  gap: 22px;
}

.score-num {
  font-family: var(--mono);
  font-size: 54px;
  font-weight: 500;
  line-height: 1;
}

.score-meta { font-size: 13.5px; color: var(--ink-soft); }

.report-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* Overview scores on the front page */

.score-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.score-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--bg);
  border-radius: var(--r-control);
}

.score-tile .score-num { font-size: 38px; }

.score-tile-meta { min-width: 0; }

.score-tile-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.score-tile a {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.score-tile a:hover { text-decoration: underline; }

/* App chips on the front page overview */

.app-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.app-chip .logo { width: 24px; height: 24px; border-radius: 7px; }
.app-chip .logo img { width: 15px; height: 15px; }
.app-chip .logo.fallback::after { font-size: 11px; }

.dive-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.dive-links a {
  padding: 7px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.dive-links a:hover { border-color: var(--accent); color: var(--accent); }

/* Print: results become a clean one-page report */

@media print {
  .topnav, .scan-bar, .history, .examples, #tools, #how, .status, .dive-links, .site-footer, .hero-preview { display: none !important; }
  body { background: #fff; }
  .shell { max-width: 100%; padding: 0; }
  .hero { margin-bottom: 16px; }
  h1 { font-size: 26px; }
  .lede, .eyebrow { display: none; }
  .results-layout { grid-template-columns: 1fr; }
  .snap-col { position: static; }
  .card, .snap-card, .app-card, .embed-card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
  .reveal { animation: none !important; }
}

.verdict {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
}

.verdict.yes { background: var(--accent-soft); color: var(--accent); }
.verdict.no { background: var(--danger-soft); color: var(--danger); }

/* Revenue calculator */

.calc-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 22px;
  align-items: start;
}

.field { margin-bottom: 14px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.field input {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  outline: none;
  transition: border-color 0.15s;
}

.field input:focus { border-color: var(--accent); }

.field .hint { margin-top: 4px; font-size: 12px; color: var(--ink-soft); }

.bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 130px;
  margin-top: 8px;
}

.bar {
  flex: 1;
  background: var(--accent-soft);
  border-radius: 5px 5px 0 0;
  min-height: 3px;
}

.bar.now { background: var(--accent); }

.bar-labels {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.bar-labels span {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
}

@media (max-width: 980px) {
  .results-layout { grid-template-columns: 1fr; }
  .snap-col { position: static; }
  .tool-grid { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .check-label { width: 160px; }
}

@media (max-width: 640px) {
  h1 { font-size: 33px; }
  .scan-bar { flex-direction: column; align-items: stretch; padding: 6px; }
  #url-input { padding: 11px 12px; }
  .app-grid, .skeleton-row { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  /* Let the title wrap cleanly: without this, each overflowing line gets its
     own ellipsis ("Comfor…" / "Sustain…") because the base rule keeps
     text-overflow while the badge squeezes the flex column. */
  .store-title { white-space: normal; overflow: visible; text-overflow: clip; }
  .store-head { flex-wrap: wrap; }
}


/* ============================================================
   HOMEPAGE LAYER  (scoped to body.home)
   Liquid Kit visual language: warm cream canvas, white cards,
   Inter, big bold headlines with a green accent word, soft
   pastel blob radial gradients per section, solid pastel icon
   tiles, dark CTAs, 24px card radii with soft shadows.
   Shared result components and other six tools are untouched.
   ============================================================ */

body.home {
  --lk-bg:        #F7F6F1;
  --lk-surface:   #FFFFFF;
  --lk-subtle:    rgba(0,0,0,0.03);
  --lk-text:      #0D0D0D;
  --lk-text-sec:  #5C5C5C;
  --lk-text-mute: #9B9B9B;
  --lk-border:    rgba(0,0,0,0.07);
  --lk-dark:      #0D0D0D;
  --lk-accent-green: #4C9A5C;

  --lk-blob-yellow:   rgba(210,255,80,0.52);
  --lk-blob-pink:     rgba(255,185,210,0.52);
  --lk-blob-lavender: rgba(200,185,255,0.50);
  --lk-blob-mint:     rgba(165,255,215,0.45);

  --lk-tile-lavender: #DCCFE6;
  --lk-tile-green:    #CFE7D1;
  --lk-tile-peach:    #EFD8CC;
  --lk-tile-pink:     #F5D7E0;

  --lk-shadow-soft:  0 2px 16px rgba(0,0,0,0.05);
  --lk-shadow-hover: 0 6px 28px rgba(0,0,0,0.09);
  --lk-shadow-lift:  0 24px 72px rgba(17,17,17,0.10);

  /* Body itself is dark — overscroll, gaps, and the negative space behind
     the floating nav all share the same dark teal-black palette. */
  background: #03130f;
  color: var(--lk-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  /* Single-font system: tabular numerals so stats/scores still line up
     cleanly even though Inter is proportional. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Sticky nav — transparent over the sky hero, frosted as you scroll */

/* Outer nav: fixed transparent wrapper so the pill floats over the page
   instead of reserving space. This stops the body's dark teal from
   showing as a band above the pill at the top of the viewport. */
body.home .topnav.lk-nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  padding: 0 14px;
  pointer-events: none;
}
/* Only the pill itself accepts pointer events; the transparent wrapper
   around it doesn't intercept clicks outside the pill. */
body.home .topnav-inner { pointer-events: auto; }
/* Text-shadow on nav text for extra robustness over bright video frames */
body.home .topnav.lk-nav .brand,
body.home .topnav.lk-nav .lk-nav-links a,
body.home .topnav.lk-nav .lk-nav-dropdown-trigger {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* The floating frosted pill. Blurs whatever's behind it (video, dark
   sections, content) and stays the same shape across all states. */
body.home .topnav-inner {
  height: 66px;
  padding: 0 12px 0 22px;
  max-width: 1200px;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  background: rgba(8, 36, 32, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 18px 50px -22px rgba(0, 0, 0, 0.5);
  transition: background 0.25s, border-color 0.25s;
}
body.home .topnav.is-scrolled .topnav-inner {
  background: rgba(6, 26, 22, 0.62);
  border-color: rgba(255, 255, 255, 0.08);
}
body.home .topnav-inner > .brand { justify-self: start; }
body.home .topnav-inner > .lk-nav-links { justify-self: center; margin-left: 0 !important; }
body.home .topnav-inner > .lk-nav-cta {
  justify-self: end;
  margin-left: 0 !important;
  height: 44px;
  padding: 0 18px;
}

body.home .brand {
  display: inline-flex;
  align-items: baseline;
  font-family: "Inter", sans-serif;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}
body.home .topnav.is-scrolled .brand { color: #fff; }
body.home .brand-word {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.035em;
  color: #fff;
  text-transform: lowercase;
  line-height: 1;
}
body.home .brand-word em {
  font-style: normal;
  color: #E4FBD8;
  background: linear-gradient(180deg, transparent 60%, rgba(207, 231, 209, 0.35) 60%, rgba(207, 231, 209, 0.35) 92%, transparent 92%);
  padding: 0 2px;
  border-radius: 2px;
}
body.home .lk-footer-wordmark-text em {
  font-style: normal;
  /* keep the shared background-clip so em picks up the same texture; nothing extra needed */
}

body.home .lk-nav-links {
  display: flex; gap: 36px;
  align-items: center;
  overflow: visible;
}
body.home .topnav.lk-nav,
body.home .topnav-inner { overflow: visible; }
body.home .lk-nav-links a {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  padding: 6px 0;
  text-decoration: none;
  border-radius: 0;
  transition: color 0.18s;
  background: none !important;
  white-space: nowrap;
}
body.home .lk-nav-links a:hover { color: #fff; }
/* Scrolled state stays light because the nav frosts to dark teal */
body.home .topnav.is-scrolled .lk-nav-links a { color: rgba(255, 255, 255, 0.78); }
body.home .topnav.is-scrolled .lk-nav-links a:hover { color: #fff; }

/* Free Tools dropdown */
body.home .lk-nav-dropdown { position: relative; }
body.home .lk-nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  padding: 6px 0;
  transition: color 0.18s;
  white-space: nowrap;
}
body.home .lk-nav-dropdown:hover .lk-nav-dropdown-trigger,
body.home .lk-nav-dropdown:focus-within .lk-nav-dropdown-trigger { color: #fff; }
body.home .topnav.is-scrolled .lk-nav-dropdown-trigger { color: rgba(255, 255, 255, 0.78); }
body.home .topnav.is-scrolled .lk-nav-dropdown:hover .lk-nav-dropdown-trigger,
body.home .topnav.is-scrolled .lk-nav-dropdown:focus-within .lk-nav-dropdown-trigger { color: #fff; }
body.home .lk-nav-caret {
  width: 10px; height: 10px;
  opacity: 0.7;
  transition: transform 0.22s, opacity 0.18s;
}
body.home .lk-nav-dropdown:hover .lk-nav-caret { opacity: 1; }
body.home .lk-nav-dropdown:hover .lk-nav-caret,
body.home .lk-nav-dropdown:focus-within .lk-nav-caret {
  transform: rotate(180deg);
}
body.home .lk-nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 560px;
  /* Dark glass card matching the page theme — same gradient as the bento
     cards and other dark spotlight surfaces. */
  background:
    linear-gradient(180deg, rgba(14, 48, 40, 0.92) 0%, rgba(8, 32, 28, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 14px;
  margin-top: 12px;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 60px rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 200;
}
/* Hover-bridge: invisible patch above the menu that bridges the visual gap.
   Lives on the trigger so it's hoverable even while the menu is closed. */
body.home .lk-nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 18px;
}
body.home .lk-nav-dropdown-trigger { position: relative; }

body.home .lk-nav-dropdown:hover .lk-nav-menu,
body.home .lk-nav-dropdown:focus-within .lk-nav-menu,
body.home .lk-nav-dropdown.is-open .lk-nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
body.home .lk-nav-dropdown.is-open .lk-nav-caret { transform: rotate(180deg); opacity: 1; }
body.home .lk-nav-menu-item {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 12px !important;
  border-radius: 20px !important;
  text-decoration: none;
  color: #fff !important;
  background: none !important;
  transition: background 0.18s, transform 0.18s;
  /* Reset properties inherited from `.lk-nav-links a` (nowrap, uppercase, tight font)
     so the menu reads as a soft two-column grid instead of a single-line strip. */
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  min-width: 0;
}
body.home .lk-nav-menu-item,
body.home .lk-nav-menu-item * { white-space: normal !important; }
body.home .lk-nav-menu-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateX(2px);
}
body.home .lk-nav-menu-item .lk-icon-tile {
  width: 40px; height: 40px;
  border-radius: 12px;
  flex: none;
}
body.home .lk-nav-menu-item .lk-icon-tile svg { width: 19px; height: 19px; }
body.home .lk-nav-menu-text { display: block; min-width: 0; }
body.home .lk-nav-menu-name {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
body.home .lk-nav-menu-desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

/* CTA pill at the right of the nav. White over the sky, dark when scrolled. */
body.home .lk-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  padding: 0 18px;
  height: 40px;
  background: #fff;
  color: var(--lk-text) !important;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(13,32,56,0.2);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s;
  flex: none;
}
body.home .lk-nav-cta:hover {
  background: #f4f4ef;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(13,32,56,0.28);
}
/* Scrolled nav stays dark teal — CTA keeps the same white-pill treatment */
body.home .topnav.is-scrolled .lk-nav-cta {
  background: #fff;
  color: var(--lk-text) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
body.home .topnav.is-scrolled .lk-nav-cta:hover {
  background: #f4f4ef;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34);
}
body.home .lk-nav-cta svg { transition: transform 0.2s; }
body.home .lk-nav-cta:hover svg { transform: translateX(3px); }

body.home .lk-nav-soon::after {
  content: "Soon";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  vertical-align: middle;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* "Soon" badge stays frosted on the dark teal nav, slightly lifted */
body.home .topnav.is-scrolled .lk-nav-soon::after {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.92);
}

/* Shell */
body.home .lk-shell { max-width: none; padding: 0; }

/* ============= HERO (sky) ============= */

body.home .lk-hero-sky {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 180px 32px 120px;
  color: #fff;
  /* Dark-teal canvas for the animated world-map + grid scene. */
  background:
    radial-gradient(ellipse 90% 60% at 50% -14%, rgba(35, 100, 90, 0.32) 0%, transparent 68%),
    radial-gradient(ellipse 60% 50% at 82% 108%, rgba(40, 108, 92, 0.2) 0%, transparent 70%),
    #03130f;
}

/* Background video covers the entire hero, no controls, looped. */
body.home .lk-hero-video .lk-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Veil for legibility: gentle dark gradient bottom-to-top so the headline
   reads cleanly over whatever frame the video lands on. The bottom bleeds
   into the dark teal of the How-it-works section that follows, so the seam
   is dark-to-dark instead of cream. */
body.home .lk-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 52% 46% at 50% 44%, rgba(3, 19, 15, 0.42) 0%, rgba(3, 19, 15, 0.14) 48%, transparent 76%),
    linear-gradient(180deg, rgba(3, 19, 15, 0.3) 0%, transparent 34%, rgba(3, 19, 15, 0.5) 85%, #03130f 100%);
  pointer-events: none;
}
body.home .lk-hero-inner {
  position: relative; z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}

body.home .lk-eyebrow { display: none; }

body.home .lk-hero-badge {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(180, 215, 245, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #cfe4f5;
  backdrop-filter: blur(8px);
  margin-bottom: 32px;
}

body.home .lk-hero h1.lk-serif {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 26px;
  text-shadow: 0 2px 24px rgba(13, 32, 56, 0.18);
  /* Allow wrapping in translations (30-70% longer than English). Ideographic
     languages and long compound words get sensible break points. */
  overflow-wrap: break-word;
  max-width: 100%;
}
/* English fits on one line at the clamped size — keep it there for the
   tightest look. Other languages wrap onto two rows if they need to. */
html[lang="en"] body.home .lk-hero h1.lk-serif { white-space: nowrap; }
body.home .lk-hero h1.lk-serif em {
  font-style: normal;
  font-weight: 400;
}

body.home .lk-hero-sub {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin: 0 auto 38px;
  text-shadow: 0 1px 12px rgba(13, 32, 56, 0.18);
}

body.home .lk-hero-tag {
  margin: 18px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.005em;
}
body.home .lk-accent { color: var(--lk-accent-green); }

/* Search/scan bar: 60px tall, soft shadow, cmd-K style */
body.home .lk-search {
  position: relative;
  max-width: 680px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  height: 60px;
  background: var(--lk-surface);
  border: 1.5px solid var(--lk-border);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(17,17,17,0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.home .lk-search:focus-within {
  border-color: var(--lk-dark);
  box-shadow: 0 4px 24px rgba(17,17,17,0.12);
}

/* Glassy scan bar variant for the sky hero */
body.home .lk-search.lk-search-glass {
  max-width: 580px;
  background: rgba(13, 32, 56, 0.22);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 36px rgba(13, 32, 56, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.home .lk-search.lk-search-glass:focus-within {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(13, 32, 56, 0.3);
  box-shadow: 0 14px 40px rgba(13, 32, 56, 0.34);
}
body.home .lk-search.lk-search-glass .lk-search-icon {
  color: rgba(255, 255, 255, 0.7);
}
body.home .lk-search.lk-search-glass #url-input {
  color: #fff;
}
body.home .lk-search.lk-search-glass #url-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
body.home .lk-search.lk-search-glass #scan-btn {
  background: #fff;
  color: var(--lk-text);
  box-shadow: 0 2px 12px rgba(13, 32, 56, 0.18);
  gap: 6px;
  display: inline-flex;
  align-items: center;
}
body.home .lk-search.lk-search-glass #scan-btn:hover {
  background: #f4f4ef;
  box-shadow: 0 4px 18px rgba(13, 32, 56, 0.28);
}

/* Example chips re-tinted for the sky hero */
body.home .lk-hero-sky .examples { color: rgba(255, 255, 255, 0.85); }
body.home .lk-hero-sky .examples-label { color: rgba(255, 255, 255, 0.55); }
body.home .lk-hero-sky .example-chip {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}
body.home .lk-hero-sky .example-chip:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

/* Laurel cert CTAs (Chrome / Firefox) */
body.home .lk-cert-row {
  margin: 56px auto 0;
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
body.home .lk-cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  padding: 6px 4px;
  border-radius: 16px;
  transition: transform 0.22s, color 0.2s;
}
body.home .lk-cert:hover {
  color: #fff;
  transform: translateY(-2px);
}
body.home .lk-laurel {
  width: 36px;
  height: 100px;
  flex: none;
}
body.home .lk-cert-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 132px;
  padding: 0 4px;
}
body.home .lk-cert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
}
body.home .lk-cert-icon svg,
body.home .lk-cert-icon img { width: 42px; height: 42px; display: block; }
body.home .lk-cert-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.15;
}
body.home .lk-cert-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.82;
}
body.home .lk-cert-name {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.005em;
}
body.home .lk-search-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 100%;
  color: var(--lk-text-mute);
  flex: none;
}
body.home #url-input {
  flex: 1;
  height: 100%;
  padding: 0 12px 0 0;
  font-size: 15px;
  color: var(--lk-text);
  background: transparent;
  border: none;
  outline: none;
}
body.home #url-input::placeholder { color: var(--lk-text-mute); }

body.home #scan-btn {
  height: 44px;
  margin-right: 8px;
  padding: 0 22px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--lk-dark);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(22,21,29,0.22);
  transition: background 0.2s, box-shadow 0.2s;
}
body.home #scan-btn:hover { background: #2a2938; box-shadow: 0 4px 16px rgba(22,21,29,0.3); opacity: 1; }

body.home .examples {
  justify-content: center;
  margin: 32px auto 0;
  max-width: 680px;
  font-size: 13px;
  color: var(--lk-text-mute);
}
body.home .lk-hero-sky .examples { margin-top: 28px; }
body.home .examples-label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lk-text-mute);
}
body.home .example-chip {
  background: var(--lk-surface);
  border: 1px solid var(--lk-border);
  color: var(--lk-text-sec);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
body.home .example-chip:hover {
  border-color: var(--lk-dark);
  color: var(--lk-text);
  background: var(--lk-surface);
}

/* ============= SECTIONS ============= */

body.home .lk-sec {
  padding: 104px 32px;
  scroll-margin-top: 100px;
}
body.home .lk-sec-mint {
  background:
    radial-gradient(ellipse 75% 70% at 20% 80%, var(--lk-blob-mint) 0%, transparent 62%),
    var(--lk-bg);
}
body.home .lk-sec-lavender {
  background:
    radial-gradient(ellipse 65% 60% at 10% 30%, var(--lk-blob-lavender) 0%, transparent 58%),
    radial-gradient(ellipse 55% 50% at 90% 80%, var(--lk-blob-pink) 0%, transparent 55%),
    var(--lk-bg);
}
/* FAQ section: white carved-out plate, mirror of the Kit section. */
body.home .lk-sec-pink {
  background: #ffffff;
  border-radius: 96px;
  position: relative;
  z-index: 1;
  color: #000;
}
body.home .lk-sec-pink .lk-sec-head h2 { color: #000; }
body.home .lk-sec-pink .lk-sec-head .lk-lede { color: rgba(0, 0, 0, 0.6); }

body.home .lk-sec-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 72px;
}
body.home .lk-sec-head .lk-eyebrow { margin-bottom: 8px; }
body.home .lk-sec-head h2 {
  /* Matches the Kit headline exactly so every section's H2 reads with the
     same weight and rhythm across the page. Min lowered to 26px so the
     longer English titles ("What's inside The Kit", "What this won't show")
     stay on a single row even at iPhone SE / 320px viewport width. */
  font-family: "Inter", sans-serif;
  font-size: clamp(26px, 5.2vw, 76px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--lk-text);
  margin: 0 0 18px;
  overflow-wrap: break-word;
  max-width: 100%;
}
/* English keeps the single-line look; longer translations wrap. */
html[lang="en"] body.home .lk-sec-head h2 { white-space: nowrap; line-height: 1; }
body.home .lk-sec-head .lk-lede { margin: 0 auto; }

/* ===== HOW IT WORKS — dark spotlight cards ===== */

body.home .lk-sec-how {
  background: #03130f;
  margin-top: 0;
  padding: 120px 32px 80px;
}
body.home .lk-sec-how .lk-sec-head h2 { color: #fff; }
body.home .lk-sec-how .lk-sec-head .lk-lede { color: rgba(255, 255, 255, 0.64); }
body.home .lk-how-cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
body.home .lk-how-card {
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%, #103a34 0%, #0a2924 55%, #061a16 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 22px;
  padding: 28px 28px 36px;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  color: #fff;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 60px -36px rgba(0, 0, 0, 0.7);
  position: relative;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.home .lk-how-card:hover { transform: translateY(-4px); }

body.home .lk-how-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 12px;
  min-height: 280px;
  position: relative;
}
body.home .lk-how-stage::before {
  content: "";
  position: absolute;
  inset: 20% 10%;
  background: radial-gradient(circle, rgba(80, 220, 180, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

body.home .lk-how-text { position: relative; }
body.home .lk-how-card h3 {
  font-family: "Inter", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 10px;
}
body.home .lk-how-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  max-width: 32ch;
}

/* ===== Mock 1: search/scan pill ===== */
body.home .lk-mock { position: relative; z-index: 1; }
body.home .lk-mock-search {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 6px 6px 6px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
  min-width: 260px;
}
body.home .lk-mock-icon {
  color: rgba(255, 255, 255, 0.55);
  display: inline-flex;
  margin-right: 12px;
}
body.home .lk-mock-icon svg { width: 16px; height: 16px; }
body.home .lk-mock-input {
  flex: 1;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-right: 12px;
  white-space: nowrap;
}
body.home .lk-mock-cursor {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  background: rgba(255, 255, 255, 0.85);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: lkBlink 1.05s steps(1) infinite;
}
@keyframes lkBlink { 50% { opacity: 0; } }
body.home .lk-mock-btn {
  padding: 8px 18px;
  background: #fff;
  color: #0d2520;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

/* ===== Mock 2: HTML code block ===== */
body.home .lk-mock-code {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  width: 100%;
  max-width: 320px;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
  box-shadow: 0 16px 50px -16px rgba(0, 0, 0, 0.7);
}
body.home .lk-mock-codetop {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.home .lk-mock-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
body.home .lk-mock-codepath {
  margin-left: 8px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
}
body.home .lk-mock-line {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.home .lk-mock-mute { color: rgba(255, 255, 255, 0.34); }
body.home .lk-mock-match {
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
  color: #fff;
}
body.home .lk-mock-match.m1 { background: rgba(255, 132, 215, 0.32); }
body.home .lk-mock-match.m2 { background: rgba(106, 224, 184, 0.36); }
body.home .lk-mock-match.m3 { background: rgba(132, 184, 255, 0.36); }
body.home .lk-mock-match.m4 { background: rgba(255, 188, 92, 0.34); }

/* ===== Mock 3: mini result card ===== */
body.home .lk-mock-report {
  width: 100%;
  max-width: 320px;
  padding: 16px;
  background: #fff;
  color: var(--lk-text);
  border-radius: 16px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.5);
}
body.home .lk-mock-rephead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lk-border);
}
body.home .lk-mock-fav {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--lk-tile-green);
  color: #2D6A4F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  flex: none;
}
body.home .lk-mock-repid { flex: 1; min-width: 0; }
body.home .lk-mock-repname {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lk-text);
}
body.home .lk-mock-repsub {
  display: block;
  font-size: 11px;
  color: var(--lk-text-mute);
  margin-top: 1px;
}
body.home .lk-mock-repbadge {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  background: var(--lk-tile-green);
  color: #2D6A4F;
  border-radius: 999px;
}
body.home .lk-mock-repscores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lk-border);
}
body.home .lk-mock-repscores > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.home .lk-mock-num {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lk-text);
  line-height: 1;
}
body.home .lk-mock-lbl {
  margin-top: 3px;
  font-family: "Inter", sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lk-text-mute);
}
body.home .lk-mock-repapps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 12px;
}
body.home .lk-mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px 3px 4px;
  background: var(--lk-subtle);
  border: 1px solid var(--lk-border);
  border-radius: 999px;
  color: var(--lk-text);
}
/* Favicon inside each detected-app chip in the report-back mock */
body.home .lk-mock-chip-logo {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  object-fit: contain;
  flex: none;
  background: #fff;
  padding: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
body.home .lk-mock-chip-more {
  color: var(--lk-text-mute);
  padding: 3px 9px;
}

@media (max-width: 920px) {
  body.home .lk-how-cards { grid-template-columns: 1fr; }
  body.home .lk-how-card { min-height: 420px; }
}

/* ===== STEPS (legacy, kept for safety in case other markup uses it) ===== */

body.home .lk-steps {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items: stretch;
  gap: 0;
}
body.home .lk-step {
  background: var(--lk-surface);
  border-radius: 24px;
  padding: 36px 32px 32px;
  box-shadow: var(--lk-shadow-soft);
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
body.home .lk-step:hover {
  box-shadow: var(--lk-shadow-hover);
  transform: translateY(-4px);
}
body.home .lk-step-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px;
}
body.home .lk-icon-tile {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lk-text);
  flex: none;
}
body.home .lk-icon-tile svg { width: 24px; height: 24px; }
body.home .lk-tile-lavender { background: var(--lk-tile-lavender); }
body.home .lk-tile-green    { background: var(--lk-tile-green); }
body.home .lk-tile-peach    { background: var(--lk-tile-peach); }
body.home .lk-tile-pink     { background: var(--lk-tile-pink); }

body.home .lk-step-badges {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
body.home .lk-step-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--lk-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.home .lk-step-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--lk-text-mute);
  background: var(--lk-subtle);
  border: 1px solid var(--lk-border);
  padding: 3px 10px;
  border-radius: 999px;
}
body.home .lk-step h3 {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 28px;
  color: var(--lk-text);
  margin: 0 0 12px;
}
body.home .lk-step p {
  font-size: 15px;
  color: var(--lk-text-sec);
  line-height: 26px;
  margin: 0;
}

body.home .lk-step-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--lk-border);
}
body.home .lk-step-arrow svg { width: 18px; height: 18px; }

body.home .lk-summary {
  margin: 48px auto 0;
  max-width: 920px;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
body.home .lk-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  background: var(--lk-surface);
  border: 1px solid var(--lk-border);
  border-radius: 999px;
  box-shadow: var(--lk-shadow-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--lk-text);
}
body.home .lk-dot {
  width: 16px; height: 16px;
  border-radius: 6px;
}
body.home .lk-dot-yellow   { background: var(--lk-blob-yellow); }
body.home .lk-dot-mint     { background: var(--lk-blob-mint); }
body.home .lk-dot-lavender { background: var(--lk-blob-lavender); }
body.home .lk-dot-pink     { background: var(--lk-blob-pink); }

/* ===== TOOLS — bento on the dark canvas ===== */

body.home .lk-sec-kit {
  /* Pure white break between two dark sections, with rounded top and
     bottom corners so the dark page peeks around the edges and the
     section reads as a carved-out plate, not a flat band. */
  background: #ffffff;
  margin-top: 0;
  padding: 130px 32px 140px;
  color: #000;
  border-radius: 96px;
  position: relative;
  z-index: 1;
}

/* Header: small pill eyebrow + huge bold black headline with an embedded
   neon-green accent pill containing a 3D cube icon. */
body.home .lk-kit-head {
  text-align: center;
  margin-bottom: 72px;
}

body.home .lk-kit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #000;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.08);
  margin-bottom: 36px;
}
body.home .lk-kit-eyebrow-emoji {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
}

body.home .lk-kit-h2 {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #000;
  margin: 0 auto;
  max-width: 100%;
  overflow-wrap: break-word;
}
html[lang="en"] body.home .lk-kit-h2 { white-space: nowrap; line-height: 1; }

/* The neon-green pill embedded into the headline. Rotated slightly so it
   feels organic, not like a button. Contains a small 3D cube. */
body.home .lk-kit-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95em;
  height: 0.6em;
  margin: 0 0.08em 0 0.05em;
  background: #c8ff3a;
  border-radius: 999px;
  vertical-align: middle;
  transform: rotate(-7deg);
  box-shadow: 0 12px 30px -8px rgba(180, 230, 50, 0.55);
  line-height: 0;
}
body.home .lk-kit-accent svg {
  display: block;
  width: auto;
  height: 72%;
  /* Square cube SVG; aspect ratio preserves automatically and the flex
     parent centers it both horizontally and vertically. */
}

/* Shared accent pill used inside any section heading. Same geometry and
   color as the Kit headline pill — neon-green capsule, rotated a touch,
   icon dead-centered. */
body.home .lk-sec-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95em;
  height: 0.6em;
  margin: 0 0.08em 0 0.05em;
  background: #c8ff3a;
  border-radius: 999px;
  vertical-align: middle;
  transform: rotate(-7deg);
  box-shadow: 0 12px 30px -8px rgba(180, 230, 50, 0.55);
  line-height: 0;
}
body.home .lk-sec-accent svg {
  display: block;
  width: auto;
  height: 70%;
  color: #000;
}

body.home .lk-kit-sub {
  margin: 28px auto 0;
  max-width: 540px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.6);
}

/* Premium card: subtle linear surface (white at top fading to soft cream),
   multi-layer ambient + contact shadow, a 1px inset white highlight at the
   top for "light from above", and a tiny top-edge accent line that's
   invisible by default and lights up neon-green on hover. */
body.home .lk-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 18px;
  text-decoration: none;
  color: #000;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 1px 2px rgba(20, 18, 14, 0.04),
    0 2px 6px -2px rgba(20, 18, 14, 0.06),
    0 18px 30px -22px rgba(20, 18, 14, 0.12),
    0 36px 60px -36px rgba(20, 18, 14, 0.10);
  transition:
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.22s,
    box-shadow 0.32s;
}
/* Neon-green accent line at the very top edge of each card, normally
   muted to nearly invisible — it warms up on hover to tie cards to the
   green pill in the headline above. */
body.home .lk-bento-card::before {
  content: "";
  position: absolute;
  top: 0; left: 18%; right: 18%; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(200, 255, 58, 0.0), transparent);
  pointer-events: none;
  transition: background 0.3s;
}
body.home .lk-bento-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 1px 2px rgba(20, 18, 14, 0.05),
    0 4px 12px -4px rgba(20, 18, 14, 0.08),
    0 36px 60px -22px rgba(20, 18, 14, 0.20),
    0 70px 100px -36px rgba(20, 18, 14, 0.16);
}
body.home .lk-bento-card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(200, 255, 58, 0.85), transparent);
}
body.home .lk-bento-card h3 {
  color: #000;
  font-weight: 700;
  letter-spacing: -0.018em;
}
body.home .lk-bento-card p {
  color: rgba(0, 0, 0, 0.56);
  line-height: 1.58;
}

/* Refined icon tile: subtle inner highlight + soft drop shadow so the
   pastel tile reads as a sculpted material chip, not a flat color block. */
body.home .lk-sec-kit .lk-bento-card .lk-icon-tile {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(20, 18, 14, 0.06),
    0 6px 14px -6px rgba(20, 18, 14, 0.12);
}

/* Premium meta pill: soft surface, refined hairline, tiny inset highlight */
body.home .lk-bento-meta {
  background: linear-gradient(180deg, #ffffff 0%, #f7f5ee 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(20, 18, 14, 0.04);
  backdrop-filter: none;
}

/* CTA: dark refined arrow with a hairline pill outline that warms up
   on hover. The card's accent line at the top echoes the same green. */
body.home .lk-bento-cta {
  color: rgba(0, 0, 0, 0.78);
  font-weight: 600;
}
body.home .lk-bento-card:hover .lk-bento-cta { color: #000; }

/* Premium chip: refined white-to-cream surface, hairline border, tiny
   inset highlight + soft drop shadow so each chip reads as a sculpted
   capsule sitting on the card, not a flat label. */
body.home .lk-bento-chip {
  background: linear-gradient(180deg, #ffffff 0%, #f8f6ef 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #000;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(20, 18, 14, 0.05),
    0 4px 10px -4px rgba(20, 18, 14, 0.10);
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.18s,
    box-shadow 0.2s;
}
body.home .lk-bento-chip:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(20, 18, 14, 0.06),
    0 6px 14px -4px rgba(20, 18, 14, 0.16);
}
/* Favicon background: pure white with a refined hairline + tiny shadow */
body.home .lk-bento-logo {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(20, 18, 14, 0.08);
}
body.home .lk-bento-chip-more {
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.16);
  color: rgba(0, 0, 0, 0.45);
  box-shadow: none;
}
body.home .lk-bento-chip-more:hover {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.28);
  box-shadow: none;
}

/* Subtle warm glow inside the App Detector visual area (was green). */
body.home .lk-bento-visual::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(200, 255, 58, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 35% 30%, rgba(180, 230, 50, 0.06) 0%, transparent 70%);
  filter: blur(8px);
}

@media (max-width: 720px) {
  /* The shared h2 clamp (26px–76px) now governs the Kit headline too —
     keeping just the accent-pill width bump so the icon stays readable. */
  body.home .lk-kit-accent { width: 1.05em; height: 0.7em; }
}

/* 4-col bento. The App Detector card anchors a 2×2 block, the other five
   fill around it: two wide cards on the right of row 1, two square cards
   in the middle, two wide cards across the bottom. */
body.home .lk-bento {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 14px;
}

body.home .lk-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Premium glass card: a soft inner green glow at the top, semi-opaque
     forest base, refined hairline border. Tightened padding/radius for
     a denser, more compact bento. */
  background:
    radial-gradient(ellipse 110% 80% at 50% -10%, rgba(120, 220, 180, 0.07) 0%, transparent 65%),
    linear-gradient(180deg, rgba(14, 48, 40, 0.55) 0%, rgba(8, 32, 28, 0.40) 100%);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 40px rgba(120, 220, 180, 0.03),
    0 18px 36px -22px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s,
              border-color 0.25s,
              box-shadow 0.3s;
}
body.home .lk-bento-card:hover {
  transform: translateY(-3px);
  background:
    radial-gradient(ellipse 110% 80% at 50% -10%, rgba(120, 220, 180, 0.12) 0%, transparent 65%),
    linear-gradient(180deg, rgba(18, 60, 50, 0.65) 0%, rgba(10, 40, 34, 0.50) 100%);
  border-color: rgba(120, 220, 180, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 60px rgba(120, 220, 180, 0.05),
    0 24px 50px -22px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(120, 220, 180, 0.10);
}

/* Spans */
body.home .lk-bento-big  { grid-column: span 2; grid-row: span 2; padding: 22px; }
body.home .lk-bento-wide { grid-column: span 2; }

/* Card head row: icon tile + meta pill */
body.home .lk-bento-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
body.home .lk-bento-card .lk-icon-tile {
  width: 36px; height: 36px;
  border-radius: 11px;
  margin-bottom: 0;
}
body.home .lk-bento-card .lk-icon-tile svg { width: 18px; height: 18px; }
body.home .lk-bento-meta {
  font-family: "Inter", sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Title + body block (always above the CTA at the bottom) */
body.home .lk-bento-text { margin-top: auto; }
body.home .lk-bento-card h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 5px;
  font-size: 15.5px;
  line-height: 1.22;
}
body.home .lk-bento-big h3 { font-size: 20px; }
body.home .lk-bento-card p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  max-width: 38ch;
}
body.home .lk-bento-big p { font-size: 13.5px; }

/* CTA pinned to the bottom */
body.home .lk-bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.005em;
}
body.home .lk-bento-cta span {
  display: inline-block;
  transition: transform 0.2s;
}
body.home .lk-bento-card:hover .lk-bento-cta { color: #fff; }
body.home .lk-bento-card:hover .lk-bento-cta span { transform: translateX(4px); }

/* Small cards (1×1): icon tile on top, no head row */
body.home .lk-bento-card:not(.lk-bento-big):not(.lk-bento-wide) {
  padding: 16px;
}
body.home .lk-bento-card:not(.lk-bento-big):not(.lk-bento-wide) > .lk-icon-tile {
  margin-bottom: 10px;
}

/* App Detector centerpiece: floating app chips */
body.home .lk-bento-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 22px -4px;
  position: relative;
}
body.home .lk-bento-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(120, 220, 180, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 35% 30%, rgba(80, 180, 150, 0.07) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}
body.home .lk-bento-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 460px;
  position: relative;
}
/* Premium chip: refined glass capsule with a soft inner highlight so the
   favicon and label both read cleanly on the dark green spotlight card. */
body.home .lk-bento-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
body.home .lk-bento-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
/* Favicon-based logo inside each chip (replaces the old colored dot).
   Slight white card underneath the favicon so light-on-light brand icons
   still read cleanly against the dark chip. */
body.home .lk-bento-logo {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 5px;
  object-fit: contain;
  flex: none;
  background: rgba(255, 255, 255, 0.92);
  padding: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
body.home .lk-bento-chip-more {
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  padding-left: 14px;
  box-shadow: none;
}
body.home .lk-bento-chip-more:hover { background: transparent; border-color: rgba(255, 255, 255, 0.22); }

@media (max-width: 920px) {
  body.home .lk-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  body.home .lk-bento-big { grid-column: span 2; grid-row: auto; min-height: 360px; }
  body.home .lk-bento-wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  body.home .lk-bento { grid-template-columns: 1fr; }
  body.home .lk-bento-big, body.home .lk-bento-wide { grid-column: auto; }
}

/* ===== TOOLS (legacy, kept for safety if other markup uses it) ===== */

body.home .lk-tools {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
body.home .lk-tool {
  display: flex; flex-direction: column;
  background: var(--lk-surface);
  border-radius: 24px;
  padding: 28px 28px 24px;
  box-shadow: var(--lk-shadow-soft);
  text-decoration: none;
  color: var(--lk-text);
  transition: box-shadow 0.2s, transform 0.2s;
}
body.home .lk-tool:hover {
  box-shadow: var(--lk-shadow-hover);
  transform: translateY(-4px);
}
body.home .lk-tool-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
body.home .lk-tool-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lk-text-mute);
  background: var(--lk-subtle);
  border: 1px solid var(--lk-border);
  padding: 4px 11px;
  border-radius: 999px;
}
body.home .lk-tool h3 {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 26px;
  color: var(--lk-text);
  margin: 0 0 10px;
}
body.home .lk-tool p {
  font-size: 14.5px;
  color: var(--lk-text-sec);
  line-height: 24px;
  margin: 0 0 22px;
  flex: 1;
}
body.home .lk-tool-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lk-text);
  letter-spacing: -0.005em;
}
body.home .lk-tool-cta span { transition: transform 0.2s; }
body.home .lk-tool:hover .lk-tool-cta span { transform: translateX(4px); }

/* ===== FAQ ===== */

body.home .lk-faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* FAQ accordion items: white cards on the white FAQ section. Need a
   slightly cream surface and a clear hairline border so they read as
   discrete cards on the white plate. */
body.home .lk-faq-item {
  background: #fafaf6;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.14);
  padding: 4px 28px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
  color: var(--lk-text);
}
body.home .lk-faq-item:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 28px 50px -22px rgba(0, 0, 0, 0.18);
}
body.home .lk-faq-item[open] {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 28px 50px -22px rgba(0, 0, 0, 0.18);
}
body.home .lk-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  text-align: left;
}
body.home .lk-faq-item summary::-webkit-details-marker { display: none; }
body.home .lk-faq-num { display: none; }
body.home .lk-faq-q {
  flex: 1;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--lk-text);
  line-height: 1.4;
  letter-spacing: -0.015em;
}
body.home .lk-faq-arrow {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  color: var(--lk-text-mute);
  background: transparent;
  transition: transform 0.25s, background 0.2s, color 0.2s;
}
body.home .lk-faq-arrow svg { width: 14px; height: 14px; stroke-width: 1.8; }
body.home .lk-faq-item:hover .lk-faq-arrow {
  background: var(--lk-subtle);
  color: var(--lk-text);
}
body.home .lk-faq-item[open] .lk-faq-arrow {
  transform: rotate(180deg);
  background: var(--lk-text);
  color: #fff;
}
body.home .lk-faq-body {
  padding: 0 0 28px;
  max-width: 60ch;
}
body.home .lk-faq-body p {
  font-size: 15.5px;
  color: var(--lk-text-sec);
  line-height: 1.65;
  margin: 0;
}
body.home .lk-faq-body code {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  background: var(--lk-subtle);
  border: 1px solid var(--lk-border);
  color: var(--lk-text);
  padding: 1px 6px;
  border-radius: 6px;
}

/* ============= SCAN RESULTS (dark spotlight, matches How-it-works / Kit) ============= */

body.home #status, body.home #results {
  scroll-margin-top: 100px;
  position: relative;
  z-index: 1;
}

/* Status messages: dark frosted pill banner */
body.home #status:not([hidden]) {
  max-width: 1120px;
  margin: 24px auto;
  padding: 16px 22px;
  background: rgba(16, 58, 52, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14.5px;
  backdrop-filter: blur(8px);
}
body.home #status.error {
  background: rgba(120, 30, 30, 0.45);
  border-color: rgba(248, 113, 113, 0.32);
  color: #fecaca;
}

/* Results section: solid dark canvas. No cream fades. */
body.home #results:not([hidden]) {
  padding: 88px 32px 96px;
  margin-top: 0;
  background:
    radial-gradient(ellipse 70% 60% at 75% 18%, rgba(16, 58, 52, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 10% 75%, rgba(16, 58, 52, 0.40) 0%, transparent 60%),
    #03130f;
  color: #fff;
  scroll-margin-top: 100px;
}

body.home #results .results-layout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

body.home #results .snap-col { position: sticky; top: 92px; }

/* Cards — dark spotlight gradient matching .lk-bento-card */
body.home #results .card,
body.home #results .snap-card,
body.home #results .empty-card,
body.home #results .embed-card {
  background:
    radial-gradient(ellipse 75% 65% at 50% 25%, #103a34 0%, #0a2924 55%, #061a16 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 60px -36px rgba(0, 0, 0, 0.7);
  margin-bottom: 16px;
  color: #fff;
}
body.home #results .card { padding: 28px; }
body.home #results .empty-card {
  padding: 24px 26px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.66);
}
body.home #results .snap-card { padding: 0; overflow: hidden; }

/* Store header */
body.home #results .store-head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
body.home #results .store-title {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 28px;
  color: #fff;
}
body.home #results .store-url { color: rgba(255, 255, 255, 0.55); font-size: 13.5px; }
body.home #results .store-url:hover { color: rgba(255, 255, 255, 0.9); }
body.home #results .store-foot {
  margin-top: 18px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Inter", sans-serif;
  font-weight: 500;
}

/* Logo tiles inside results — pastel tiles read well on the dark cards */
body.home #results .logo {
  width: 48px; height: 48px;
  border-radius: 16px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
}
body.home #results .logo img { width: 26px; height: 26px; }
body.home #results .logo.fallback::after { font-weight: 800; font-size: 18px; }
body.home #results .logo.tint-0.fallback { background: var(--lk-tile-green);    color: #2D6A4F; }
body.home #results .logo.tint-1.fallback { background: var(--lk-tile-lavender); color: #5B3FA0; }
body.home #results .logo.tint-2.fallback { background: var(--lk-tile-peach);    color: #A0522D; }
body.home #results .logo.tint-3.fallback { background: var(--lk-tile-pink);     color: #A02D4A; }
body.home #results .logo.tint-4.fallback { background: var(--lk-tile-green);    color: #4A6A2D; }
body.home #results .logo.tint-5.fallback { background: var(--lk-tile-lavender); color: #5B3FA0; }

/* Badges — pastel chips lifted slightly with white border for the dark bg */
body.home #results .badge {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 13px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}
body.home #results .badge.good  { background: var(--lk-tile-green);    color: #1F4D3A; }
body.home #results .badge.amber { background: var(--lk-tile-peach);    color: #8B4F1C; }
body.home #results .badge.warn  { background: rgba(248, 113, 113, 0.2); color: #fecaca; border: 1px solid rgba(248, 113, 113, 0.32); }

/* Stat strip — frosted dark tiles */
body.home #results .stat-strip {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}
body.home #results .stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px 18px;
}
body.home #results .stat-num {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}
body.home #results .stat-label {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Score row */
body.home #results .score-row {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
body.home #results .score-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 18px 20px;
  gap: 18px;
}
body.home #results .score-tile .score-num {
  font-family: "Inter", sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}
body.home #results .score-tile-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
body.home #results .score-tile a {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}
body.home #results .score-tile a:hover { color: #fff; }

/* Tabs inside the scan report: "Apps" and "Analytics & Marketing" */
body.home #results .lk-tabs-wrap { margin-top: 8px; }
body.home #results .lk-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  margin: 12px 0 24px;
}
body.home #results .lk-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
body.home #results .lk-tab:hover { color: rgba(255, 255, 255, 0.9); }
body.home #results .lk-tab-active {
  background: #fff;
  color: var(--lk-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
body.home #results .lk-tab-count {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}
body.home #results .lk-tab-active .lk-tab-count {
  background: var(--lk-text);
  border-color: transparent;
  color: #fff;
}
body.home #results .lk-tab-pane > h3.group-title:first-child { margin-top: 0; }

/* Group titles (per-category headers) */
body.home #results .group-title {
  margin: 36px 0 14px;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.home #results .group-title span {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 6px;
}

/* App cards — dark spotlight tiles */
body.home #results .app-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
body.home #results .app-card {
  background:
    radial-gradient(ellipse 75% 65% at 50% 30%, #103a34 0%, #0a2924 55%, #061a16 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 40px -28px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
body.home #results .app-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}
body.home #results .app-card summary { padding: 14px 16px; gap: 14px; }
body.home #results .app-card summary .logo { width: 40px; height: 40px; border-radius: 12px; }
body.home #results .app-card summary .logo img { width: 22px; height: 22px; }
body.home #results .app-card summary .logo.fallback::after { font-size: 15px; }
body.home #results .app-name {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.3;
}
body.home #results .app-domain {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}
body.home #results .app-desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body.home #results .app-count {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 11px;
  border-radius: 999px;
}

/* CTA on each detected plugin: small white pill that opens the app's site */
body.home #results .app-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 14px;
  margin-left: 4px;
  background: #fff;
  color: var(--lk-text);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  flex: none;
}
body.home #results .app-cta:hover {
  background: #f4f4ef;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
body.home #results .app-cta svg { transition: transform 0.18s; }
body.home #results .app-cta:hover svg { transform: translate(1px, -1px); }

/* CTA on the theme card: pastel green pill button. */
body.home #results .theme-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 20px;
  background: var(--lk-tile-green);
  color: #1F4D3A;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 0.18s, transform 0.18s;
}
body.home #results .theme-cta:hover {
  background: #BFE0C0;
  transform: translateY(-2px);
}
body.home #results .theme-cta svg { transition: transform 0.18s; }
body.home #results .theme-cta:hover svg { transform: translate(1px, -1px); }

/* Evidence (open app card) */
body.home #results .evidence {
  background: rgba(0, 0, 0, 0.32);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 18px;
}
body.home #results .evidence-label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  font-weight: 600;
}
body.home #results .evidence-label a {
  color: var(--lk-tile-green);
  font-weight: 700;
}
body.home #results .evidence-snippet {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.82);
}

/* Embed cards (single-row format reused) */
body.home #results .embed-card { padding: 14px 16px; gap: 14px; }
body.home #results .embed-card .logo { width: 40px; height: 40px; border-radius: 12px; }
body.home #results .embed-slug {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
}

/* Theme card key/value rows */
body.home #results .kv {
  grid-template-columns: 180px 1fr;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 14px;
}
body.home #results .kv-k {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.home #results .kv-v { color: rgba(255, 255, 255, 0.9); }
body.home #results .kv-v code {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.88);
}

/* Snapshot card */
body.home #results .snap-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 36px 60px -36px rgba(0, 0, 0, 0.75);
}
body.home #results .snap-head {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 12px;
}
body.home #results .snap-head .logo { width: 32px; height: 32px; border-radius: 10px; }
body.home #results .snap-head .logo img { width: 20px; height: 20px; }
body.home #results .snap-domain a {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}
body.home #results .snap-domain a:hover { color: var(--lk-tile-green); }
/* Snapshot image area gets a slight inner frame so the image breaks the dark card. */
body.home #results .snap-frame { background: rgba(0, 0, 0, 0.32); }
body.home #results .snap-failed {
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.55);
}
body.home #results .snap-foot {
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

/* Dive-link CTAs at the bottom of the report */
body.home #results .dive-links {
  margin-top: 32px;
  gap: 10px;
}
body.home #results .dive-links a {
  padding: 11px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.005em;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
}
body.home #results .dive-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

/* Loading skeletons — dark shimmer */
body.home #results .skeleton {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 60%);
  background-size: 200% 100%;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 880px) {
  body.home #results .results-layout { grid-template-columns: 1fr; }
  body.home #results .snap-col { position: static; }
  body.home #results .stat-strip { grid-template-columns: 1fr 1fr; }
  body.home #results .app-grid { grid-template-columns: 1fr; }
  body.home #results:not([hidden]) { padding: 56px 20px 64px; }
}

/* ===== FOOTER ===== */

body.home .lk-footer {
  position: relative;
  overflow: hidden;
  background: #03130f;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 80px;
}

body.home .lk-footer-top {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 60px;
  display: grid;
  grid-template-columns: 1.2fr 2.8fr;
  gap: 64px;
  align-items: start;
}

/* Tagline + copyright on the left */
body.home .lk-footer-tagline p {
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
  max-width: 36ch;
  letter-spacing: -0.005em;
}
body.home .lk-footer-tagline .lk-footer-copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
  margin: 0;
}

/* 4 link columns on the right */
body.home .lk-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
body.home .lk-footer-col h4 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  text-transform: none;
  margin: 0 0 20px;
}
body.home .lk-footer-col ul {
  list-style: none;
  margin: 0; padding: 0;
}
body.home .lk-footer-col li { margin-bottom: 14px; line-height: 1.3; }
body.home .lk-footer-col a {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.52);
  text-decoration: none;
  transition: color 0.18s;
  letter-spacing: -0.005em;
}
body.home .lk-footer-col a:hover { color: #fff; }

/* Oversized brand wordmark at the bottom, filled with a dotted texture +
   a subtle color gradient. Overflows the viewport horizontally and is
   cropped at the bottom so it reads as a stamped foundation mark. */
body.home .lk-footer-wordmark {
  position: relative;
  display: block;
  text-align: center;
  margin-top: 10px;
  margin-bottom: -3vw;
  pointer-events: none;
  user-select: none;
}
body.home .lk-footer-wordmark-text {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(72px, 17vw, 240px);
  letter-spacing: -0.06em;
  line-height: 0.86;
  white-space: nowrap;
  text-transform: lowercase;
  /* Two-layer texture: a tight dot grid over a left-to-right color gradient
     that fades from a bright mint into the dark teal of the page. Both
     layers paint inside the letterforms via background-clip: text. */
  background-image:
    radial-gradient(circle, rgba(170, 240, 210, 0.62) 1.3px, transparent 1.6px),
    linear-gradient(95deg, rgba(180, 250, 220, 0.32) 0%, rgba(100, 200, 170, 0.18) 45%, rgba(40, 120, 100, 0.08) 100%);
  background-size: 7px 7px, 100% 100%;
  background-repeat: repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: lowercase;
}

@media (max-width: 920px) {
  body.home .lk-footer-top {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-bottom: 40px;
  }
  body.home .lk-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 36px; }
  body.home .lk-footer-wordmark-text { font-size: clamp(56px, 22vw, 160px); }
  body.home .lk-footer-wordmark { margin-bottom: -3vw; }
}
@media (max-width: 520px) {
  body.home .lk-footer-cols { grid-template-columns: 1fr; }
}

/* ===== Mobile ===== */

body.home { scroll-behavior: smooth; }

/* Carved-plate rounded corners on Kit and FAQ need to scale down on
   mobile, otherwise a 96px radius eats a quarter of a 375px viewport. */
@media (max-width: 720px) {
  body.home .lk-sec-kit,
  body.home .lk-sec-pink {
    border-radius: 48px;
  }
  /* Tighten heavy desktop paddings on Kit, FAQ, Get-the-extension, the
     methodology block, and the dark Who → Limits → Methodology stack so
     the page doesn't waste a full screen of vertical space per section. */
  body.home .lk-sec-kit { padding: 80px 20px 90px; }
  body.home .lk-sec-pink { padding: 80px 20px 80px; }
  body.home .lk-sec-getit { padding: 70px 20px 80px; }
  body.home .lk-getit-card { padding: 44px 22px 40px; border-radius: 22px; }
  body.home .lk-sec-who { padding: 80px 20px 36px; }
  body.home .lk-sec-limits { padding: 36px 20px 80px; }
  body.home .lk-method-head { margin-top: 60px; }
  body.home .lk-sec-how { padding: 80px 20px 70px; }
  /* The dark spotlight cards in How-it-works and Kit's bento can shrink
     their interior padding too. */
  body.home .lk-how-card { padding: 24px 22px 26px; }
}
@media (max-width: 480px) {
  body.home .lk-sec-kit,
  body.home .lk-sec-pink {
    border-radius: 32px;
  }
  body.home .lk-sec-kit { padding: 64px 16px 76px; }
  body.home .lk-sec-pink { padding: 64px 16px 64px; }
  body.home .lk-sec-getit { padding: 56px 16px 64px; }
  body.home .lk-sec-how { padding: 64px 16px 56px; }
  body.home .lk-sec-who { padding: 64px 16px 32px; }
  body.home .lk-sec-limits { padding: 32px 16px 64px; }
}

@media (max-width: 920px) {
  /* Nav: brand on the left, compact CTA on the right — pill shrinks to fit
     just those two elements instead of holding an empty 3-column grid. */
  body.home .topnav.lk-nav { top: 10px; padding: 0 10px; }
  body.home .topnav-inner {
    grid-template-columns: auto auto !important;
    justify-content: space-between;
    height: 54px;
    padding: 0 6px 0 18px;
    gap: 12px;
  }
  body.home .lk-nav-links { display: none; }
  body.home .lk-nav-cta {
    display: inline-flex !important;
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
    margin-left: 0 !important;
  }
  body.home .lk-nav-cta svg { width: 12px; height: 12px; }

  /* Extra top padding so the FREE · NO API KEY badge sits well below the
     floating nav pill instead of hugging it. Higher specificity than the
     generic `.lk-hero` rule below so it isn't clobbered (the hero element
     carries both classes). */
  body.home .lk-hero.lk-hero-sky { padding: 124px 20px 80px; }
  body.home .lk-hero-badge { margin-bottom: 26px; }
  /* clamp() on the h1 handles mobile sizing automatically */
  body.home .lk-cert-row { gap: 18px; margin-top: 44px; }
  body.home .lk-laurel { width: 28px; height: 78px; }
  body.home .lk-cert-name { font-size: 18px; }

  body.home .lk-hero { padding: 64px 20px 72px; }
  body.home .lk-hero h1 { font-size: 40px; line-height: 46px; }
  body.home .lk-sec { padding: 64px 20px; }
  body.home .lk-steps { grid-template-columns: 1fr; gap: 16px; }
  body.home .lk-step-arrow { display: none; }
  body.home .lk-tools { grid-template-columns: 1fr; }

  body.home .lk-footer-grid { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 32px; }

  /* Scan bar: clean vertical stack on mobile — input and submit each get
     their own rounded pill, sitting inside the glass container. The lens
     icon hides because it crowds the field on narrow screens, and the
     input font is bumped to 16px so iOS Safari doesn't auto-zoom on tap. */
  body.home .lk-search {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    gap: 8px;
    border-radius: 20px;
  }
  body.home .lk-search-icon { display: none; }
  body.home #url-input {
    width: 100%;
    flex: 0 1 auto;
    height: 46px;
    padding: 0 14px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
  }
  body.home .lk-search.lk-search-glass #url-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
  }
  body.home #scan-btn {
    width: 100%;
    margin: 0;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media print {
  body.home .lk-hero, body.home .lk-sec, body.home .lk-footer { display: none !important; }
}

/* ===== WHO IS THIS FOR ===== */

body.home .lk-sec-who {
  /* Shares a single atmospheric backdrop with the limits section below.
     Each section paints one of the two radials so the pair reads as one
     continuous dark block. */
  background:
    radial-gradient(ellipse 55% 45% at 80% 22%, rgba(35, 100, 90, 0.42) 0%, transparent 70%),
    #03130f;
  padding: 100px 32px 50px;
}
body.home .lk-sec-who .lk-sec-head h2 { color: #fff; }
body.home .lk-sec-who .lk-sec-head .lk-lede { color: rgba(255, 255, 255, 0.64); }

body.home .lk-who-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

body.home .lk-who-card {
  background:
    radial-gradient(ellipse 75% 65% at 50% 25%, #103a34 0%, #0a2924 55%, #061a16 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 60px -36px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s;
}
body.home .lk-who-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.14);
}

body.home .lk-who-card .lk-icon-tile {
  width: 44px; height: 44px;
  border-radius: 14px;
  margin-bottom: 22px;
}
body.home .lk-who-card .lk-icon-tile svg { width: 21px; height: 21px; }

body.home .lk-who-card h3 {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.25;
}

body.home .lk-who-card p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  flex: 1;
}

body.home .lk-who-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.home .lk-who-tag {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 920px) {
  body.home .lk-who-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body.home .lk-who-grid { grid-template-columns: 1fr; }
}

/* ===== DOWNLOAD CTA ("Get the extension") ===== */

body.home .lk-sec-getit {
  background: #03130f;
  padding: 100px 32px 120px;
}

body.home .lk-getit-card {
  position: relative;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 48px 56px;
  text-align: center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 25%, #14463f 0%, #0a2924 55%, #061a16 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 40px 80px -32px rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* Soft accent glow blooming behind the headline */
body.home .lk-getit-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 360px;
  background: radial-gradient(circle, rgba(80, 220, 180, 0.32) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}

body.home .lk-getit-eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  background: rgba(80, 220, 180, 0.14);
  border: 1px solid rgba(80, 220, 180, 0.32);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b2f0d8;
}

body.home .lk-getit-card h2 {
  position: relative;
  font-family: "Inter", sans-serif;
  font-size: clamp(34px, 5vw, 76px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: #fff;
  margin: 0 0 18px;
  /* Allowed to wrap since this headline is longer than the others. */
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

body.home .lk-getit-card .lk-lede {
  position: relative;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 600px;
  margin: 0 auto 40px;
}

body.home .lk-getit-buttons {
  position: relative;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

body.home .lk-getit-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 14px 18px;
  background: #fff;
  border-radius: 999px;
  color: var(--lk-text);
  text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s;
}
body.home .lk-getit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -10px rgba(0, 0, 0, 0.65);
}

body.home .lk-getit-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
}
body.home .lk-getit-btn-icon svg,
body.home .lk-getit-btn-icon img { width: 34px; height: 34px; display: block; }

body.home .lk-getit-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  text-align: left;
}
body.home .lk-getit-btn-sm {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
body.home .lk-getit-btn-lg {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--lk-text);
}

body.home .lk-getit-btn-arrow {
  color: var(--lk-text);
  opacity: 0.55;
  margin-left: 4px;
  transition: transform 0.2s, opacity 0.2s;
}
body.home .lk-getit-btn:hover .lk-getit-btn-arrow {
  transform: translateX(3px);
  opacity: 1;
}

body.home .lk-getit-note {
  position: relative;
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 640px) {
  body.home .lk-getit-card { padding: 44px 22px 40px; border-radius: 22px; }
  body.home .lk-getit-buttons { flex-direction: column; align-items: stretch; }
  body.home .lk-getit-btn { justify-content: center; padding: 14px 22px; }
}

/* ===== PALETTE PREVIEW SWITCHER (temporary — remove after pick) ===== */

body.home .lk-palette-switcher {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(8, 36, 32, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.7);
}
body.home .lk-palette-title {
  padding: 0 8px 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
body.home .lk-palette-btn {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body.home .lk-palette-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
body.home .lk-palette-btn.is-active {
  background: #fff;
  color: #0a2924;
  border-color: #fff;
}

/* ============================================================
   PALETTE A — alternate dark and cream
   Kit becomes cream with dark frosted cards (already dark).
   FAQ becomes cream (white cards already work).
   Who-is-this-for stays dark, Get extension stays dark.
   ============================================================ */

/* Kit section becomes cream with two pastel radial spotlights for depth */
body.palette-alt .lk-sec-kit {
  background:
    radial-gradient(ellipse 60% 55% at 12% 28%, var(--lk-blob-lavender) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 78%, var(--lk-blob-pink) 0%, transparent 60%),
    var(--lk-bg);
}
body.palette-alt .lk-sec-kit .lk-sec-head h2 { color: var(--lk-text); }
body.palette-alt .lk-sec-kit .lk-sec-head .lk-lede { color: var(--lk-text-sec); }

/* Kit cards on cream: pastel-tinted spotlight cards. Each card surface
   carries a soft radial gradient in the same pastel as its icon tile,
   radiating from the icon corner. The cream-side mirror of the dark
   spotlight pattern — same depth language, inverted color. */
body.palette-alt .lk-bento-card {
  background:
    radial-gradient(ellipse 65% 60% at 20% 18%, rgba(220, 207, 230, 0.55) 0%, transparent 65%),
    #fbfaf3;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--lk-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 30px 50px -32px rgba(70, 50, 40, 0.22);
}
/* Per-icon-color spotlight tints. :has() lets each card automatically
   pick its halo from the icon tile inside it, no extra markup needed. */
body.palette-alt .lk-bento-card:has(.lk-tile-green) {
  background:
    radial-gradient(ellipse 65% 60% at 20% 18%, rgba(207, 231, 209, 0.60) 0%, transparent 65%),
    #fbfaf3;
}
body.palette-alt .lk-bento-card:has(.lk-tile-peach) {
  background:
    radial-gradient(ellipse 65% 60% at 20% 18%, rgba(239, 216, 204, 0.60) 0%, transparent 65%),
    #fbfaf3;
}
body.palette-alt .lk-bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 36px 60px -32px rgba(70, 50, 40, 0.28);
}

body.palette-alt .lk-bento-card h3 { color: var(--lk-text); }
body.palette-alt .lk-bento-card p { color: var(--lk-text-sec); }
body.palette-alt .lk-bento-meta {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--lk-text-mute);
  backdrop-filter: blur(4px);
}
body.palette-alt .lk-bento-cta { color: var(--lk-text); }
body.palette-alt .lk-bento-card:hover .lk-bento-cta { color: var(--lk-text); }

/* App Detector chips: floating soft-white pills that lift off the
   lavender-tinted surface with a tiny drop shadow. */
body.palette-alt .lk-bento-chip {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--lk-text);
  box-shadow: 0 4px 10px -6px rgba(70, 50, 40, 0.18);
  backdrop-filter: blur(4px);
}
body.palette-alt .lk-bento-chip-more {
  color: var(--lk-text-mute);
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  box-shadow: none;
}
/* Inner glow inside the App Detector visual area, in a soft warm tint */
body.palette-alt .lk-bento-visual::before {
  background: radial-gradient(circle, rgba(140, 110, 220, 0.08) 0%, transparent 70%);
}

body.palette-alt .lk-sec-pink {
  background:
    radial-gradient(ellipse 70% 60% at 75% 18%, rgba(220, 207, 230, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 15% 80%, rgba(207, 231, 209, 0.40) 0%, transparent 60%),
    var(--lk-bg);
}
body.palette-alt .lk-sec-pink .lk-sec-head h2 { color: var(--lk-text); }
body.palette-alt .lk-sec-pink .lk-sec-head .lk-lede { color: var(--lk-text-sec); }
body.palette-alt .lk-faq-item {
  box-shadow: 0 14px 32px -22px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   PALETTE B — single cream break (Who is this for)
   Only the audience section becomes cream with white cards.
   ============================================================ */

body.palette-onebreak .lk-sec-who {
  background:
    radial-gradient(ellipse 60% 45% at 18% 30%, rgba(207, 231, 209, 0.50) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 82% 75%, rgba(220, 207, 230, 0.45) 0%, transparent 70%),
    var(--lk-bg);
}
body.palette-onebreak .lk-sec-who .lk-sec-head h2 { color: var(--lk-text); }
body.palette-onebreak .lk-sec-who .lk-sec-head .lk-lede { color: var(--lk-text-sec); }
body.palette-onebreak .lk-who-card {
  background: var(--lk-surface);
  border: 1px solid var(--lk-border);
  color: var(--lk-text);
  box-shadow: 0 18px 38px -20px rgba(0, 0, 0, 0.16);
}
body.palette-onebreak .lk-who-card h3 { color: var(--lk-text); }
body.palette-onebreak .lk-who-card p { color: var(--lk-text-sec); }

/* ============================================================
   PALETTE C — vary the teal tones per section
   Each dark section gets a slightly different teal tint and a
   distinct radial-spotlight pattern so the eye registers each one.
   ============================================================ */

body.palette-vary .lk-sec-how {
  background:
    radial-gradient(ellipse 50% 45% at 25% 30%, rgba(70, 140, 120, 0.32) 0%, transparent 70%),
    #03130f;
}
body.palette-vary .lk-sec-kit {
  background:
    radial-gradient(ellipse 60% 50% at 75% 22%, rgba(60, 120, 160, 0.34) 0%, transparent 72%),
    radial-gradient(ellipse 50% 45% at 20% 80%, rgba(70, 140, 120, 0.25) 0%, transparent 70%),
    #04161f;
}
body.palette-vary .lk-sec-who {
  background:
    radial-gradient(ellipse 55% 45% at 18% 25%, rgba(110, 180, 130, 0.34) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 82% 80%, rgba(70, 140, 120, 0.28) 0%, transparent 70%),
    #04170f;
}
body.palette-vary .lk-sec-pink {
  background:
    radial-gradient(ellipse 60% 50% at 80% 22%, rgba(180, 130, 200, 0.28) 0%, transparent 72%),
    radial-gradient(ellipse 50% 50% at 18% 78%, rgba(110, 130, 180, 0.22) 0%, transparent 70%),
    #0a1018;
}
body.palette-vary .lk-sec-getit {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(80, 220, 180, 0.22) 0%, transparent 70%),
    #052a22;
}

/* ============================================================
   PALETTE D — different card surface per section
   Same dark canvas everywhere, but each section gets a distinct
   card style so sections feel different even though the bg matches.
   ============================================================ */

/* How-it-works → spotlight (default — unchanged) */
/* Kit → frosted glass (default — unchanged) */

/* Who-is-this-for → outline + corner glow */
body.palette-surfaces .lk-who-card {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  overflow: hidden;
  position: relative;
}
body.palette-surfaces .lk-who-card::before {
  content: "";
  position: absolute;
  top: -40px; left: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(80, 220, 180, 0.24) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity 0.25s;
}
body.palette-surfaces .lk-who-card:hover { border-color: rgba(80, 220, 180, 0.45); }

/* FAQ → frosted glass tiles (different from white default) */
body.palette-surfaces .lk-faq-item {
  background: rgba(8, 36, 32, 0.32);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
}
body.palette-surfaces .lk-faq-q { color: #fff; }
body.palette-surfaces .lk-faq-body p { color: rgba(255, 255, 255, 0.72); }
body.palette-surfaces .lk-faq-arrow {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
}
body.palette-surfaces .lk-faq-item[open] .lk-faq-arrow {
  background: #fff;
  border-color: #fff;
  color: var(--lk-text);
}

/* Get extension → edge-lit neon */
body.palette-surfaces .lk-getit-card {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(80, 220, 180, 0.18) 0%, transparent 60%),
    #061a16;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1.5px 0 rgba(80, 220, 180, 0.7),
    inset 0 0 60px rgba(80, 220, 180, 0.12),
    0 40px 80px -32px rgba(0, 0, 0, 0.7);
}

/* ===== KIT SUB-PALETTE BUTTONS (in switcher) ===== */

body.home .lk-palette-title-mid {
  padding: 0 6px 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  margin-left: 4px;
}
body.home .lk-kit-btn {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body.home .lk-kit-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
body.home .lk-kit-btn.is-active {
  background: #b2f0d8;
  color: #0a2924;
  border-color: #b2f0d8;
}

/* ============================================================
   KIT STYLE 1 — Dark teal cards on cream
   Inverts the contrast: cream section, dark spotlight cards. Cards
   pop hard. Reuses the dark gradient/colors from other dark sections.
   ============================================================ */

body.palette-alt.kit-dark .lk-bento-card {
  background:
    radial-gradient(ellipse 75% 65% at 50% 25%, #103a34 0%, #0a2924 55%, #061a16 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 60px -32px rgba(0, 0, 0, 0.45);
}
body.palette-alt.kit-dark .lk-bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
}
body.palette-alt.kit-dark .lk-bento-card h3 { color: #fff; }
body.palette-alt.kit-dark .lk-bento-card p { color: rgba(255, 255, 255, 0.62); }
body.palette-alt.kit-dark .lk-bento-meta {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  backdrop-filter: none;
}
body.palette-alt.kit-dark .lk-bento-cta { color: rgba(255, 255, 255, 0.78); }
body.palette-alt.kit-dark .lk-bento-card:hover .lk-bento-cta { color: #fff; }
body.palette-alt.kit-dark .lk-bento-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}
body.palette-alt.kit-dark .lk-bento-chip-more {
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.22);
}
body.palette-alt.kit-dark .lk-bento-visual::before {
  background: radial-gradient(circle, rgba(80, 220, 180, 0.12) 0%, transparent 70%);
}

/* ============================================================
   KIT STYLE 2 — Solid pastel color-block cards
   Each card is fully painted in its icon's pastel as the whole
   surface (lavender, mint, peach). Flat blocks like packaging.
   ============================================================ */

body.palette-alt.kit-block .lk-bento-card {
  background: var(--lk-tile-lavender);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--lk-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 18px 38px -22px rgba(70, 50, 40, 0.22);
}
body.palette-alt.kit-block .lk-bento-card:has(.lk-tile-green) {
  background: var(--lk-tile-green);
}
body.palette-alt.kit-block .lk-bento-card:has(.lk-tile-peach) {
  background: var(--lk-tile-peach);
}
body.palette-alt.kit-block .lk-bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 0, 0, 0.14);
}
/* The icon tile sits over a solid pastel surface — give it a white
   chip so it still reads as a separate element. */
body.palette-alt.kit-block .lk-bento-card .lk-icon-tile {
  background: rgba(255, 255, 255, 0.7);
}
body.palette-alt.kit-block .lk-bento-meta {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: rgba(20, 19, 15, 0.65);
  backdrop-filter: none;
}
body.palette-alt.kit-block .lk-bento-chip {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--lk-text);
  box-shadow: none;
}
body.palette-alt.kit-block .lk-bento-chip-more {
  color: rgba(20, 19, 15, 0.45);
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.16);
}
body.palette-alt.kit-block .lk-bento-visual::before { background: none; }

/* ============================================================
   KIT STYLE 3 — Sticker cards with offset color shadow
   White cards. Behind each card, an 8px offset hard shadow in the
   icon's pastel — like a sheet of paper stuck to a colored sticker.
   ============================================================ */

body.palette-alt.kit-sticker .lk-bento {
  /* extra gap so the offset shadows don't collide */
  gap: 22px;
}
body.palette-alt.kit-sticker .lk-bento-card {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--lk-text);
  box-shadow:
    8px 8px 0 0 var(--lk-tile-lavender),
    0 12px 22px -12px rgba(70, 50, 40, 0.14);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, border-color 0.18s;
}
body.palette-alt.kit-sticker .lk-bento-card:has(.lk-tile-green) {
  box-shadow:
    8px 8px 0 0 var(--lk-tile-green),
    0 12px 22px -12px rgba(70, 50, 40, 0.14);
}
body.palette-alt.kit-sticker .lk-bento-card:has(.lk-tile-peach) {
  box-shadow:
    8px 8px 0 0 var(--lk-tile-peach),
    0 12px 22px -12px rgba(70, 50, 40, 0.14);
}
body.palette-alt.kit-sticker .lk-bento-card:hover {
  transform: translate(-3px, -3px);
}
body.palette-alt.kit-sticker .lk-bento-card:hover {
  box-shadow:
    12px 12px 0 0 var(--lk-tile-lavender),
    0 16px 28px -12px rgba(70, 50, 40, 0.2);
}
body.palette-alt.kit-sticker .lk-bento-card:has(.lk-tile-green):hover {
  box-shadow:
    12px 12px 0 0 var(--lk-tile-green),
    0 16px 28px -12px rgba(70, 50, 40, 0.2);
}
body.palette-alt.kit-sticker .lk-bento-card:has(.lk-tile-peach):hover {
  box-shadow:
    12px 12px 0 0 var(--lk-tile-peach),
    0 16px 28px -12px rgba(70, 50, 40, 0.2);
}
body.palette-alt.kit-sticker .lk-bento-card h3 { color: var(--lk-text); }
body.palette-alt.kit-sticker .lk-bento-card p { color: var(--lk-text-sec); }
body.palette-alt.kit-sticker .lk-bento-meta {
  background: var(--lk-subtle);
  border: 1px solid var(--lk-border);
  color: var(--lk-text-mute);
  backdrop-filter: none;
}
body.palette-alt.kit-sticker .lk-bento-chip {
  background: var(--lk-bg);
  border: 1px solid var(--lk-border);
  color: var(--lk-text);
  box-shadow: none;
}
body.palette-alt.kit-sticker .lk-bento-chip-more {
  color: var(--lk-text-mute);
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.16);
}

/* ============================================================
   KIT STYLE 4 — Editorial print clipping cards
   Off-white cards with thick near-black borders, big numbered
   labels, hard offset black shadow. Looks like printed magazine
   cut-outs pasted onto the page.
   ============================================================ */

body.palette-alt.kit-clip .lk-bento { counter-reset: kit-clip; gap: 22px; }
body.palette-alt.kit-clip .lk-bento-card {
  position: relative;
  background: #f5efe2;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid #1a1a1a;
  border-radius: 6px;
  box-shadow: 5px 5px 0 0 #1a1a1a;
  color: #1a1a1a;
  overflow: visible;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s;
}
body.palette-alt.kit-clip .lk-bento-card::before {
  counter-increment: kit-clip;
  content: "0" counter(kit-clip);
  position: absolute;
  top: -16px;
  right: 16px;
  padding: 4px 12px;
  background: #1a1a1a;
  color: #f5efe2;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 999px;
}
body.palette-alt.kit-clip .lk-bento-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 0 #1a1a1a;
}
body.palette-alt.kit-clip .lk-bento-card h3 {
  color: #1a1a1a;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
body.palette-alt.kit-clip .lk-bento-card p { color: rgba(26, 26, 26, 0.7); }
body.palette-alt.kit-clip .lk-bento-meta {
  background: transparent;
  border: 1.5px solid #1a1a1a;
  color: #1a1a1a;
  font-weight: 700;
  backdrop-filter: none;
}
body.palette-alt.kit-clip .lk-bento-cta { color: #1a1a1a; }
body.palette-alt.kit-clip .lk-bento-card .lk-icon-tile {
  border: 1.5px solid #1a1a1a;
}
body.palette-alt.kit-clip .lk-bento-chip {
  background: #fff;
  border: 1.5px solid #1a1a1a;
  color: #1a1a1a;
  font-weight: 600;
  box-shadow: none;
}
body.palette-alt.kit-clip .lk-bento-chip-more {
  background: transparent;
  border: 1.5px dashed #1a1a1a;
  color: rgba(26, 26, 26, 0.55);
}

/* ===== COMPARISON: Why not BuiltWith? ===== */

body.home .lk-sec-vs {
  background:
    radial-gradient(ellipse 60% 50% at 20% 18%, rgba(52, 134, 110, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 80% 80%, rgba(40, 108, 92, 0.18) 0%, transparent 70%),
    #03130f;
  padding: 110px 32px 110px;
}
body.home .lk-sec-vs .lk-sec-head h2 { color: #fff; }
body.home .lk-sec-vs .lk-sec-head .lk-lede { color: rgba(255, 255, 255, 0.64); }

body.home .lk-vs-table {
  max-width: 1080px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(14, 48, 40, 0.55) 0%, rgba(8, 32, 28, 0.40) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 60px -32px rgba(0, 0, 0, 0.7);
}

body.home .lk-vs-row {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1.2fr 1.2fr;
  gap: 0;
}
body.home .lk-vs-row + .lk-vs-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }

body.home .lk-vs-cell {
  padding: 18px 22px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}
body.home .lk-vs-dimension {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  letter-spacing: -0.005em;
}
body.home .lk-vs-us {
  background: rgba(200, 255, 58, 0.06);
  border-left: 1px solid rgba(200, 255, 58, 0.18);
  border-right: 1px solid rgba(200, 255, 58, 0.18);
  position: relative;
}
body.home .lk-vs-row.lk-vs-head {
  background: rgba(255, 255, 255, 0.03);
}
body.home .lk-vs-row.lk-vs-head .lk-vs-cell {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding: 16px 22px;
}
body.home .lk-vs-row.lk-vs-head .lk-vs-us {
  color: #c8ff3a;
  font-weight: 700;
}
body.home .lk-vs-name { color: inherit; }

body.home .lk-vs-good {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: #fff;
}
body.home .lk-vs-good::before {
  content: "";
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #c8ff3a;
  box-shadow: 0 0 8px rgba(200, 255, 58, 0.55);
}
body.home .lk-vs-mid { color: rgba(255, 255, 255, 0.7); }
body.home .lk-vs-bad { color: rgba(255, 255, 255, 0.45); }

body.home .lk-vs-foot {
  max-width: 740px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 820px) {
  body.home .lk-vs-table { font-size: 13px; }
  body.home .lk-vs-row { grid-template-columns: 1fr 1fr; }
  body.home .lk-vs-cell { padding: 14px 16px; }
  body.home .lk-vs-dimension { grid-column: span 2; background: rgba(255, 255, 255, 0.03); }
  body.home .lk-vs-row.lk-vs-head .lk-vs-cell:first-child { display: none; }
  body.home .lk-vs-row:not(.lk-vs-head) .lk-vs-cell:nth-child(4),
  body.home .lk-vs-row.lk-vs-head .lk-vs-cell:nth-child(4) { display: none; }
}

/* ===== HONEST LIMITS — What this won't show ===== */

body.home .lk-sec-limits {
  /* Bottom of the shared dark block (Who → Limits + Methodology). Paints
     the second radial (bottom-left) so the block reads as one shared
     atmosphere. Top padding stripped so it flows from the section above. */
  background:
    radial-gradient(ellipse 55% 50% at 18% 78%, rgba(40, 110, 95, 0.32) 0%, transparent 70%),
    #03130f;
  padding: 50px 32px 110px;
}

/* Methodology header nested inside the limits section — keeps a clear
   visual break from the limits grid above without becoming its own slab. */
body.home .lk-method-head {
  margin-top: 96px;
  text-align: center;
}
body.home .lk-sec-limits .lk-sec-head h2 { color: #fff; }
body.home .lk-sec-limits .lk-sec-head .lk-lede { color: rgba(255, 255, 255, 0.64); }

body.home .lk-limits-grid {
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.home .lk-limits-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding: 26px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  align-items: flex-start;
}
body.home .lk-limits-item:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
/* Drop the bottom hairline on the last row so the limits grid flows
   seamlessly into the methodology section below. */
body.home .lk-limits-item:nth-last-child(-n+2) {
  border-bottom: none;
}
body.home .lk-limits-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  flex: none;
  margin-top: 2px;
}
body.home .lk-limits-icon svg { width: 14px; height: 14px; }
body.home .lk-limits-item h3 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0 0 6px;
}
body.home .lk-limits-item p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 46ch;
}

@media (max-width: 820px) {
  body.home .lk-limits-grid { grid-template-columns: 1fr; }
  body.home .lk-limits-item:nth-child(odd) { border-right: none; }
}

/* ===== STATS / TRUST COUNTER ===== */

body.home .lk-sec-stats {
  background: #03130f;
  padding: 60px 32px 60px;
  position: relative;
  z-index: 1;
}

/* Minimal: no cards, no dividers — just three stats sitting on the
   section surface in a clean centered row. */
body.home .lk-stats-grid {
  max-width: 880px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

body.home .lk-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

body.home .lk-stat-num {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 76px);
  letter-spacing: -0.05em;
  line-height: 1;
  color: #fff;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
body.home .lk-stat-num-zero { color: #c8ff3a; }

body.home .lk-stat-label {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

body.home .lk-stat-sub { display: none; }

@media (max-width: 760px) {
  body.home .lk-stats-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== RECOGNIZED STORES STRIP (marquee) ===== */

body.home .lk-sec-known {
  background: #03130f;
  padding: 0 0 80px;
  position: relative;
  z-index: 1;
}
body.home .lk-known-label {
  text-align: center;
  margin: 0 0 24px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
body.home .lk-known-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
body.home .lk-known-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: lkKnownScroll 60s linear infinite;
}
body.home .lk-known-marquee:hover .lk-known-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  body.home .lk-known-track { animation: none; }
}

@keyframes lkKnownScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

body.home .lk-known-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  background: rgba(14, 48, 40, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 10px -6px rgba(0, 0, 0, 0.5);
}
body.home .lk-known-fav {
  width: 18px; height: 18px;
  border-radius: 4px;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  flex: none;
}

/* ===== LIVE ACTIVITY POPUP (bottom-left) ===== */

body.home .lk-live {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 95;
  width: 320px;
  max-width: calc(100vw - 36px);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s,
    visibility 0.35s;
  pointer-events: none;
}
body.home .lk-live.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.home .lk-live-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 14px;
  background:
    linear-gradient(180deg, rgba(14, 48, 40, 0.78) 0%, rgba(8, 32, 28, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -16px rgba(0, 0, 0, 0.6),
    0 4px 12px -4px rgba(0, 0, 0, 0.3);
}

/* Live green pulse */
body.home .lk-live-pulse {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: lkLivePulse 1.8s ease-out infinite;
}
@keyframes lkLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

body.home .lk-live-fav-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  flex: none;
  margin-left: 16px;
  padding: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 10px -4px rgba(0, 0, 0, 0.4);
}
body.home .lk-live-fav {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}

body.home .lk-live-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}
body.home .lk-live-text {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.home .lk-live-text strong {
  font-weight: 700;
  color: #fff;
}
body.home .lk-live-meta {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

body.home .lk-live-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 32, 28, 0.9);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s, color 0.18s, transform 0.18s;
  z-index: 1;
}
body.home .lk-live-close svg { width: 11px; height: 11px; }
body.home .lk-live.is-visible:hover .lk-live-close,
body.home .lk-live.is-visible:focus-within .lk-live-close {
  opacity: 1;
}
body.home .lk-live-close:hover { color: #fff; transform: scale(1.06); }

/* Swap-in animation when the card content changes */
body.home .lk-live.is-swap .lk-live-card {
  animation: lkLiveSwap 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lkLiveSwap {
  0%   { transform: translateY(8px); opacity: 0.2; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Hide on very small viewports so it doesn't crowd the page */
@media (max-width: 480px) {
  body.home .lk-live { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .lk-live-pulse { animation: none; }
  body.home .lk-live.is-swap .lk-live-card { animation: none; }
}

/* ===== KIT BENTO: dark feature card + white stat cards ===== */

/* Big App Detector card stays dark, with diagonal green grain streaks and a
   soft green light bloom so it reads as the hero of the bento. */
body.home .lk-bento-big {
  background: #0a1612 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 30px 60px -32px rgba(0, 0, 0, 0.7) !important;
  transition: box-shadow 0.35s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  /* Promote to its own compositor layer so the blob animation paints on the
     GPU without forcing repaints of surrounding content while scrolling. */
  transform: translateZ(0);
  will-change: transform;
  contain: paint;
}
/* Layer 1: the green blob. A bright green radial gradient that morphs in
   position, scale, and opacity on a slow ambient loop — this is the "light
   source." It sits below the stripe mask which carves it into patches.
   The explicit width/height autos defeat the height:1.5px from the base
   .lk-bento-card::before accent-line rule that cascades into this one. */
body.home .lk-bento-big::before {
  content: "";
  position: absolute;
  top: -20% !important;
  right: -20% !important;
  bottom: -20% !important;
  left: -20% !important;
  width: auto !important;
  height: auto !important;
  background:
    radial-gradient(ellipse 30% 44% at 50% 55%,
      rgba(80, 240, 130, 0.55) 0%,
      rgba(60, 210, 110, 0.42) 22%,
      rgba(40, 170, 90, 0.24) 45%,
      rgba(20, 100, 60, 0.10) 65%,
      transparent 80%) !important;
  pointer-events: none;
  z-index: 0;
  animation: lkBigBlob 7s ease-in-out infinite;
  transform-origin: center;
}

/* Slow organic morph: drift, grow, shrink, drift again. Loops cleanly. */
@keyframes lkBigBlob {
  0%, 100% { transform: translate(0%,  0%) scale(1.00); opacity: 1.00; }
  22%      { transform: translate(8%, -4%) scale(1.18); opacity: 0.96; }
  50%      { transform: translate(-6%, 6%) scale(0.78); opacity: 0.68; }
  74%      { transform: translate(5%, -2%) scale(1.06); opacity: 0.94; }
}

/* Layer 2: chunky diagonal stripe mask + grain noise. The dark stripes
   carve the green blob underneath into diagonal patches; the grain breaks
   the edges so the patches look like printed halftone, not vector bars. */
body.home .lk-bento-big::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Heavy chunky diagonal stripes — varied widths for a hand-cut feel */
    repeating-linear-gradient(115deg,
      #0a1612 0px,  #0a1612 6px,
      transparent 6px,  transparent 15px,
      #0a1612 15px, #0a1612 19px,
      transparent 19px, transparent 23px,
      #0a1612 23px, #0a1612 31px,
      transparent 31px, transparent 36px),
    /* Two-scale grain noise overlay */
    radial-gradient(rgba(255, 255, 255, 0.06) 0.9px, transparent 1.2px),
    radial-gradient(rgba(0, 0, 0, 0.35) 0.7px, transparent 1px);
  background-size: auto, 3px 3px, 2px 2px;
  background-position: 0 0, 0 0, 1px 1px;
  pointer-events: none;
  z-index: 1;
}

/* Lift all card content above both pseudo layers */
body.home .lk-bento-big > * { position: relative; z-index: 2; }

body.home .lk-bento-big:hover {
  border-color: rgba(120, 230, 160, 0.40) !important;
  /* Tight rings of green, no big blurry halos. No translateY lift. */
  box-shadow:
    inset 0 0 0 1px rgba(120, 230, 160, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(120, 230, 160, 0.10),
    0 38px 70px -32px rgba(0, 0, 0, 0.75) !important;
}
/* Hover deliberately does NOT touch the blob animation. The morph runs at
   the same pace whether or not you're pointing at the card, so cursor
   crossings never cause speed shifts or brightness jumps. */

@media (prefers-reduced-motion: reduce) {
  body.home .lk-bento-big::before { animation: none; }
}

body.home .lk-bento-big h3 { color: #fff !important; }
body.home .lk-bento-big p { color: rgba(255, 255, 255, 0.72) !important; }
body.home .lk-bento-big .lk-bento-meta {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
body.home .lk-bento-big .lk-bento-cta { color: rgba(255, 255, 255, 0.85) !important; }
body.home .lk-bento-big:hover .lk-bento-cta { color: #fff !important; }

/* Chips inside the App Detector visual: dark-card variant */
body.home .lk-bento-big .lk-bento-chip {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
body.home .lk-bento-big .lk-bento-chip-more {
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
}
body.home .lk-bento-big .lk-bento-logo {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* The five smaller cards: white surface with hairline border and soft shadow */
body.home .lk-bento-card:not(.lk-bento-big) {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 1px 2px rgba(20, 18, 14, 0.04),
    0 2px 6px -2px rgba(20, 18, 14, 0.06),
    0 16px 28px -22px rgba(20, 18, 14, 0.12) !important;
}
body.home .lk-bento-card:not(.lk-bento-big):hover {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 22px 38px -22px rgba(20, 18, 14, 0.20) !important;
}
body.home .lk-bento-card:not(.lk-bento-big) h3 { color: #000 !important; }
body.home .lk-bento-card:not(.lk-bento-big) p { color: rgba(0, 0, 0, 0.58) !important; }
body.home .lk-bento-card:not(.lk-bento-big) .lk-bento-meta {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
body.home .lk-bento-card:not(.lk-bento-big) .lk-bento-cta {
  color: rgba(0, 0, 0, 0.78) !important;
}
body.home .lk-bento-card:not(.lk-bento-big):hover .lk-bento-cta { color: #000 !important; }

/* ===== METHODOLOGY — How we detect ===== */

body.home .lk-sec-method {
  /* Transparent — inherits the body's #03130f exactly, so the limits
     section's atmosphere extends visually through this section's top
     and only meets the methodology timeline at the bottom. No new radial
     competes with what's above. */
  background: transparent;
  padding: 50px 32px 110px;
}
body.home .lk-sec-method .lk-sec-head h2 { color: #fff; }
body.home .lk-sec-method .lk-sec-head .lk-lede { color: rgba(255, 255, 255, 0.64); }

/* Horizontal timeline: 3 evenly spaced dots connected by a neon-green line.
   Each dot is the step number; title and body sit centered underneath. */
body.home .lk-method-timeline {
  max-width: 1100px;
  margin: 0 auto 72px;
  list-style: none;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
/* Connecting line through the centers of the three dots */
body.home .lk-method-timeline::before {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(16.66% + 24px);
  right: calc(16.66% + 24px);
  height: 2px;
  background:
    linear-gradient(90deg,
      rgba(200, 255, 58, 0.40) 0%,
      rgba(200, 255, 58, 0.20) 50%,
      rgba(200, 255, 58, 0.40) 100%);
  z-index: 0;
  pointer-events: none;
}

body.home .lk-method-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Numbered dot — circular green-outlined node sitting on the line */
body.home .lk-method-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #07201c;
  border: 2px solid #c8ff3a;
  color: #c8ff3a;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
  /* Inner glow + soft halo so the node reads as lit, not flat */
  box-shadow:
    0 0 0 6px rgba(200, 255, 58, 0.06),
    inset 0 0 12px rgba(200, 255, 58, 0.18),
    0 0 24px rgba(200, 255, 58, 0.20);
}

body.home .lk-method-step h3 {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 10px;
}

body.home .lk-method-step p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 32ch;
}

/* Tenets row — key / value pairs separated by hairlines */
body.home .lk-method-tenets {
  max-width: 1200px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.home .lk-method-tenet {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.home .lk-method-tenet:first-child { border-left: none; }

body.home .lk-method-tenet-key {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c8ff3a;
}
body.home .lk-method-tenet-val {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 38ch;
}
body.home .lk-method-tenet-val code {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 1px 7px;
  color: #fff;
}

@media (max-width: 880px) {
  /* Vertical timeline. Each step is its own 2-column subgrid: dot on the
     left, title + body on the right. A neon-green rail runs through the
     center of the dot column, connecting all three nodes. */
  body.home .lk-method-timeline {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 4px;
    position: relative;
  }
  body.home .lk-method-timeline::before {
    top: 28px;
    bottom: 28px;
    left: 32px;
    right: auto;
    width: 2px;
    height: auto;
    background:
      linear-gradient(180deg,
        rgba(200, 255, 58, 0.40) 0%,
        rgba(200, 255, 58, 0.20) 50%,
        rgba(200, 255, 58, 0.40) 100%);
  }
  body.home .lk-method-step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 4px 18px;
    align-items: start;
    text-align: left;
  }
  body.home .lk-method-dot {
    margin: 0;
    width: 56px;
    height: 56px;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }
  body.home .lk-method-step h3 {
    grid-column: 2;
    margin: 8px 0 6px;
  }
  body.home .lk-method-step p {
    grid-column: 2;
    max-width: none;
    margin: 0;
  }

  body.home .lk-method-tenets { grid-template-columns: 1fr; border-top: none; }
  body.home .lk-method-tenet { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  body.home .lk-method-tenet:first-child { border-top: none; }
}

/* ===== FOUNDER NOTE (quiet personal section before the CTA) ===== */

body.home .lk-sec-note {
  background: #03130f;
  padding: 100px 32px 110px;
  position: relative;
  z-index: 1;
}

body.home .lk-note-wrap {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  align-items: start;
}

/* Avatar — soft pastel circle with the builder's initial */
body.home .lk-note-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c8ff3a 0%, #7fd44f 100%);
  color: #0a2520;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 16px 30px -16px rgba(200, 255, 58, 0.45);
  flex: none;
}

body.home .lk-note-body { min-width: 0; }

body.home .lk-note-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 255, 58, 0.85);
  margin: 0 0 16px;
}

body.home .lk-note-text {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
body.home .lk-note-text em {
  font-style: italic;
  color: #fff;
}

body.home .lk-note-sign {
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
body.home .lk-note-name {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
body.home .lk-note-role {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: -0.005em;
}

@media (max-width: 600px) {
  body.home .lk-note-wrap { grid-template-columns: 1fr; gap: 20px; }
  body.home .lk-note-avatar { width: 56px; height: 56px; font-size: 22px; }
  body.home .lk-note-text { font-size: 16px; }
}

/* ===== COOKIE NOTICE (bottom-right, dark glass) ===== */

body.home .lk-cookies {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 96;
  width: 360px;
  max-width: calc(100vw - 36px);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s,
    visibility 0.35s;
  pointer-events: none;
}
body.home .lk-cookies.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.home .lk-cookies-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 16px 18px 16px 16px;
  background:
    linear-gradient(180deg, rgba(14, 48, 40, 0.82) 0%, rgba(8, 32, 28, 0.76) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -16px rgba(0, 0, 0, 0.6),
    0 4px 12px -4px rgba(0, 0, 0, 0.3);
}

body.home .lk-cookies-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(200, 255, 58, 0.14);
  border: 1px solid rgba(200, 255, 58, 0.28);
  color: #c8ff3a;
  flex: none;
}
body.home .lk-cookies-icon svg { width: 18px; height: 18px; }

body.home .lk-cookies-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

body.home .lk-cookies-text {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.005em;
}
body.home .lk-cookies-text strong {
  color: #fff;
  font-weight: 600;
}

body.home .lk-cookies-actions {
  display: flex;
  gap: 8px;
}

body.home .lk-cookies-btn {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
body.home .lk-cookies-decline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
}
body.home .lk-cookies-decline:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
body.home .lk-cookies-accept {
  background: #c8ff3a;
  border: 1px solid #c8ff3a;
  color: #0a2520;
  flex: 1;
  box-shadow: 0 4px 14px -6px rgba(200, 255, 58, 0.55);
}
body.home .lk-cookies-accept:hover {
  background: #b8ef2a;
  border-color: #b8ef2a;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  body.home .lk-cookies {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }
}

/* ============================================================
   INNER TOOL PAGES  (body.home.tool)
   Mirror the dark front-page style for every tool page: floating
   pill nav, dark teal canvas, glass scan bar, dark scan results,
   dark footer. The hero here is a simpler "no video, just dark"
   treatment so the scan-bar lands above the fold immediately.
   ============================================================ */

body.tool { background: #03130f; }
body.tool .tool-shell { max-width: none; padding: 0; }

/* Hero: dark teal canvas with two soft teal radials (same atmospheric
   language as the dark sections on home) — no video. */
/* ---- Animated hero scene: dotted world map (cities light up) + faint square
   grid. Shared by the home hero and every tool-page hero. ---- */
.map-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #c8ff3a; box-shadow: 0 0 8px 1px rgba(200,255,58,.55); opacity: .85; }
.pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(200,255,58,.5); opacity: 0; }
.pin.ping::after { animation: ping 1.4s ease-out; }
@keyframes ping { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } }
.pin.dim { background: rgba(200,255,58,.5); box-shadow: 0 0 5px rgba(200,255,58,.3); opacity: .5; }
.pin.twk { animation: ptw var(--d,5s) ease-in-out infinite; animation-delay: var(--dl,0s); }
@keyframes ptw { 0%,100% { opacity: .35; } 50% { opacity: .85; } }
.grid-bg { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 44%, transparent 0%, transparent 26%, #000 78%);
          mask-image: radial-gradient(ellipse 58% 56% at 50% 44%, transparent 0%, transparent 26%, #000 78%); }
.gsq { position: absolute; border: 1px solid rgba(255,255,255,.02); border-radius: 2px; }
.gsq.bright { border-color: rgba(255,255,255,.038); }
.gsq.fill   { background: rgba(255,255,255,.005); }
.gsq.tw { animation: twk var(--d,6s) ease-in-out infinite; animation-delay: var(--dl,0s); }
@keyframes twk { 0%,100% { opacity: var(--o0,.6); } 50% { opacity: var(--o1,1); } }
@media (prefers-reduced-motion: reduce) { .gsq.tw, .pin.twk { animation: none; } }

body.tool .tool-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 180px 24px 96px;
  background:
    radial-gradient(ellipse 65% 70% at 50% -10%, rgba(35, 100, 90, 0.48) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 82% 92%, rgba(40, 108, 92, 0.26) 0%, transparent 70%),
    #03130f;
}
/* Veil over the map scene so the copy stays legible (matches the home hero). */
body.tool .tool-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 52% 46% at 50% 44%, rgba(3, 19, 15, 0.42) 0%, rgba(3, 19, 15, 0.14) 48%, transparent 76%),
    linear-gradient(180deg, rgba(3, 19, 15, 0.3) 0%, transparent 34%, rgba(3, 19, 15, 0.5) 85%, #03130f 100%);
  pointer-events: none;
}
body.tool .tool-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}

/* Eyebrow badge — same as the home page's FREE · NO API KEY pill */
body.tool .tool-hero .lk-hero-badge {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(180, 215, 245, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 255, 58, 0.92);
  margin-bottom: 28px;
}

/* Tool h1: big bold with optional italic em on a single accent word.
   Same scale / weight / tracking as the section h2s on home. */
body.tool .tool-h1 {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 6vw, 80px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  margin: 0 0 24px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}
body.tool .tool-h1 em {
  font-style: normal;
  font-weight: 500;
  color: #c8ff3a;
}

body.tool .tool-lede {
  margin: 0 auto 40px;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* Results / history / status need padded shell since hero is full-bleed */
body.tool #results, body.tool #status, body.tool #history {
  max-width: 1200px;
  margin: 0 auto;
}
body.tool #status:not([hidden]), body.tool #history:not(:empty) {
  padding: 0 24px;
}

/* Hide the home-only floating widgets on tool pages */
body.tool .lk-cookies, body.tool .lk-live { display: none !important; }

/* Mobile */
@media (max-width: 720px) {
  body.tool .tool-hero { padding: 150px 20px 72px; }
  body.tool .tool-hero .lk-hero-badge { font-size: 10.5px; padding: 6px 13px; margin-bottom: 22px; }
  body.tool .tool-lede { font-size: 16px; margin-bottom: 32px; }
}
@media (max-width: 480px) {
  body.tool .tool-hero { padding: 138px 16px 64px; }
}

/* Revenue Calculator (no scan results, just a form + projections panel).
   Wraps the calc-grid in the same dark canvas atmosphere. */
body.tool-calc .calc-grid {
  max-width: 1100px;
  margin: 0 auto 80px;
  padding: 0 24px;
}
@media (max-width: 720px) {
  body.tool-calc .calc-grid { padding: 0 16px; }
}

/* ===== Revenue Calculator on dark tool page ===== */

body.tool-calc .calc-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* Form + results cards — dark spotlight surface matching the page system */
body.tool-calc .calc-form,
body.tool-calc #calc-results .card {
  background:
    radial-gradient(ellipse 75% 65% at 50% 25%, #103a34 0%, #0a2924 55%, #061a16 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  padding: 24px 22px;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 50px -32px rgba(0, 0, 0, 0.55);
  margin-bottom: 16px;
}

body.tool-calc .field { margin-bottom: 14px; }
body.tool-calc .field:last-child { margin-bottom: 0; }

body.tool-calc .field label {
  display: block;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
}
body.tool-calc .field input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  font: inherit;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}
body.tool-calc .field input:focus {
  border-color: rgba(120, 230, 160, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
body.tool-calc .field .hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.45;
}

/* Calc-results: stat tiles + projection bars */
body.tool-calc #calc-results .stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 0;
}
body.tool-calc #calc-results .stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
}
body.tool-calc #calc-results .stat-num {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1;
}
body.tool-calc #calc-results .stat-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

body.tool-calc #calc-results .bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 130px;
  margin-top: 8px;
}
body.tool-calc #calc-results .bar {
  flex: 1;
  background: rgba(120, 230, 160, 0.22);
  border-radius: 5px 5px 0 0;
  min-height: 3px;
  transition: background 0.2s;
}
body.tool-calc #calc-results .bar.now { background: #c8ff3a; }
body.tool-calc #calc-results .bar-labels {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}
body.tool-calc #calc-results .bar-labels span {
  flex: 1;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

body.tool-calc #calc-results .footnote {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

@media (max-width: 880px) {
  body.tool-calc .calc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.tool-calc #calc-results .stat-strip { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   Tool-page SEO content sections
   Long-form blocks that live below the scan bar so the page has
   substantial indexable content for the tool's target keyword.
   Dark glass surfaces consistent with the rest of the page system.
   ============================================================= */

body.tool .tool-seo-sec {
  /* The hero is full-bleed and .tool-shell has no max-width, so each SEO
     section provides its own centered container + horizontal padding. */
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  scroll-margin-top: 100px;
}
body.tool .tool-seo-sec:first-of-type { border-top: none; }

/* Section intros are centered like the hero. */
body.tool .tool-seo-sec { text-align: center; }

body.tool .tool-seo-h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 auto 18px;
  max-width: 900px;
}

body.tool .tool-seo-lede {
  font-family: "Inter", sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 auto 40px;
  max-width: 760px;
}
body.tool .tool-seo-lede strong { color: #fff; font-weight: 600; }

/* Section intros (h2 + lede) and the short card grids inherit centering.
   The detail blocks below center as a block but keep their inner text
   left-aligned so dot markers, chevrons, evidence rows and icon+text
   cards stay readable. */
body.tool .tool-seo-bullets li,
body.tool .tool-seo-sample-card,
body.tool .tool-seo-faq-item summary,
body.tool .tool-seo-faq-item p,
body.tool .tool-seo-related-card { text-align: left; }

/* Frozen sample scan card.
   Mimics a real result so Google indexes actual tool output. */
body.tool .tool-seo-sample-card {
  background:
    linear-gradient(180deg, rgba(14, 48, 40, 0.55) 0%, rgba(8, 32, 28, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 32px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 60px rgba(0, 0, 0, 0.4);
}
body.tool .tool-seo-sample-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
body.tool .tool-seo-sample-url {
  display: flex; align-items: center; gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
body.tool .tool-seo-sample-url img { border-radius: 4px; }
body.tool .tool-seo-sample-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
}
body.tool .tool-seo-sample-meta strong { color: #fff; font-weight: 600; }

body.tool .tool-seo-sample-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
}
body.tool .tool-seo-sample-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: background 0.2s;
}
body.tool .tool-seo-sample-list li:hover { background: rgba(255, 255, 255, 0.05); }
body.tool .tool-seo-app-favicon img {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: block;
}
body.tool .tool-seo-app-text { min-width: 0; }
body.tool .tool-seo-app-name {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
body.tool .tool-seo-app-evidence {
  margin-top: 3px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.tool .tool-seo-app-evidence code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 12px;
  background: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
}
body.tool .tool-seo-app-cat {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c8ff3a;
  background: rgba(200, 255, 58, 0.08);
  border: 1px solid rgba(200, 255, 58, 0.18);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
body.tool .tool-seo-sample-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* Bullet list with custom marker (used in "What it checks" and "Limits"). */
body.tool .tool-seo-bullets {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 18px;
}
body.tool .tool-seo-bullets li {
  position: relative;
  padding: 18px 22px 18px 52px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15.5px;
  line-height: 1.55;
}
body.tool .tool-seo-bullets li::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 26px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c8ff3a;
  box-shadow: 0 0 0 4px rgba(200, 255, 58, 0.12);
}
body.tool .tool-seo-bullets li strong { color: #fff; font-weight: 600; }
body.tool .tool-seo-bullets li code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
}

/* 3-step method block. */
body.tool .tool-seo-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
body.tool .tool-seo-step {
  background:
    linear-gradient(180deg, rgba(14, 48, 40, 0.5) 0%, rgba(8, 32, 28, 0.42) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 28px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.tool .tool-seo-step-n {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #c8ff3a;
  margin-bottom: 18px;
}
body.tool .tool-seo-step h3 {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 10px;
}
body.tool .tool-seo-step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* Use-case grid. */
body.tool .tool-seo-uses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
body.tool .tool-seo-use {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 26px 28px;
}
body.tool .tool-seo-use h3 {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 10px;
}
body.tool .tool-seo-use p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* FAQ accordion. Uses native <details>/<summary>. */
body.tool .tool-seo-faq {
  display: grid;
  gap: 12px;
}
body.tool .tool-seo-faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s;
}
body.tool .tool-seo-faq-item[open] {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}
body.tool .tool-seo-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 24px;
  position: relative;
  font-family: "Inter", sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
body.tool .tool-seo-faq-item summary::-webkit-details-marker { display: none; }
body.tool .tool-seo-faq-item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 12px; height: 12px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.22s;
}
body.tool .tool-seo-faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
body.tool .tool-seo-faq-item p {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* Related tools: 5 cards. Flex-wrap + center so the orphan last row
   (2 cards) centers instead of clinging to the left of a 3-col grid. */
body.tool .tool-seo-related {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
body.tool .tool-seo-related-card {
  flex: 1 1 300px;
  max-width: 334px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
body.tool .tool-seo-related-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}
body.tool .tool-seo-related-name {
  font-family: "Inter", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
body.tool .tool-seo-related-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
}

/* Responsive. */
@media (max-width: 880px) {
  body.tool .tool-seo-sec { padding: 64px 24px; }
  /* Tablet: 3-up method steps collapse to a single column, but use-case
     cards stay 2-up and related tools keep wrapping naturally (2 per row).
     Only phones (<=600px) go fully single-column. */
  body.tool .tool-seo-steps { grid-template-columns: 1fr; }
  body.tool .tool-seo-sample-card { padding: 22px; }
  body.tool .tool-seo-sample-list li { grid-template-columns: 28px 1fr; }
  body.tool .tool-seo-app-cat { grid-column: 2; justify-self: start; margin-top: 4px; }
  body.tool .tool-seo-app-evidence { white-space: normal; }
}
@media (max-width: 600px) {
  body.tool .tool-seo-uses { grid-template-columns: 1fr; }
  body.tool .tool-seo-related-card { flex-basis: 100%; max-width: none; }
}
@media (max-width: 560px) {
  body.tool .tool-seo-sec { padding: 56px 18px; }
  body.tool .tool-seo-bullets li { padding: 16px 18px 16px 44px; }
  body.tool .tool-seo-bullets li::before { left: 18px; top: 23px; }
  body.tool .tool-seo-faq-item summary { padding: 18px 48px 18px 18px; font-size: 15px; }
  body.tool .tool-seo-faq-item p { padding: 0 18px 18px; }
}

/* ============= NAV: hamburger + mobile drawer ============= */

body.home .lk-nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  padding: 0;
  justify-self: end;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: background 0.18s, border-color 0.18s;
  z-index: 210;
}
body.home .lk-nav-burger:hover { background: rgba(255, 255, 255, 0.14); }
body.home .lk-nav-burger span {
  display: block;
  width: 16px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.18s;
}
body.home .topnav.is-mobile-open .lk-nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.home .topnav.is-mobile-open .lk-nav-burger span:nth-child(2) { opacity: 0; }
body.home .topnav.is-mobile-open .lk-nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  body.home .topnav-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 8px 0 18px !important;
    gap: 8px !important;
    height: 62px !important;
  }
  body.home .topnav-inner > .lk-nav-cta { display: none !important; }
  body.home .lk-nav-burger {
    display: inline-flex !important;
    order: 3;
    margin-left: auto;
  }
  body.home .topnav-inner > .brand { order: 1; }

  /* Full-drawer menu panel below the pill */
  body.home .topnav-inner > .lk-nav-links {
    position: fixed !important;
    top: 88px;
    left: 14px;
    right: 14px;
    width: auto !important;
    max-height: calc(100vh - 102px);
    max-height: calc(100dvh - 102px);
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    background: linear-gradient(180deg, rgba(14, 48, 40, 0.96) 0%, rgba(8, 32, 28, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
    z-index: 205;
    margin: 0 !important;
  }
  body.home .topnav.is-mobile-open .topnav-inner > .lk-nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  body.home .lk-nav-links a,
  body.home .lk-nav-dropdown-trigger {
    font-size: 13.5px !important;
    letter-spacing: 0.06em !important;
    padding: 14px 12px !important;
    width: 100%;
    text-align: left;
    justify-content: space-between;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: none !important;
  }
  body.home .lk-nav-links a:hover,
  body.home .lk-nav-dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  /* Dropdown flattens: menu items become part of the drawer flow */
  body.home .lk-nav-dropdown { width: 100%; }
  body.home .lk-nav-dropdown-trigger { display: flex; width: 100%; }
  body.home .lk-nav-dropdown-trigger::after { display: none; } /* kill hover bridge */
  body.home .lk-nav-menu {
    position: static;
    width: 100%;
    display: none;
    grid-template-columns: 1fr;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 4px 0 8px;
    margin-top: 0;
  }
  body.home .lk-nav-dropdown.is-open .lk-nav-menu {
    display: grid;
    transform: none;
  }
  body.home .lk-nav-menu-item {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  body.home .lk-nav-menu-item:hover { transform: none; }
  body.home .lk-nav-menu-name { font-size: 14.5px; }
  body.home .lk-nav-menu-desc { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
}


/* ============= Language switcher ============= */

body.home .lk-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
/* Minimal ghost trigger: reads as plain nav text (like HOME / ABOUT), no pill. */
body.home .lk-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 2px;
  background: none;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 0.18s;
}
body.home .lk-lang-trigger:hover { color: #fff; }
body.home .lk-lang.is-open .lk-lang-trigger { color: #fff; }
body.home .lk-lang-code { letter-spacing: 0.08em; }
body.home .lk-lang-caret {
  width: 9px; height: 9px;
  opacity: 0.6;
  transition: transform 0.22s, opacity 0.18s;
}
body.home .lk-lang-trigger:hover .lk-lang-caret { opacity: 0.9; }
body.home .lk-lang.is-open .lk-lang-caret { transform: rotate(180deg); }
body.home .lk-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 150px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(14, 48, 40, 0.96) 0%, rgba(8, 32, 28, 0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 220;
}
body.home .lk-lang.is-open .lk-lang-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
body.home .lk-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
body.home .lk-lang-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
body.home .lk-lang-item.is-active { color: #fff; font-weight: 600; }
body.home .lk-lang-check {
  width: 14px; height: 14px;
  color: #c8ff3a;
  opacity: 0;
  flex: none;
}
body.home .lk-lang-item.is-active .lk-lang-check { opacity: 1; }

/* Compact on mobile */
@media (max-width: 900px) {
  body.home .lk-lang { margin-right: 4px; }
  body.home .lk-lang-trigger { padding: 0 10px; height: 34px; }
  body.home .lk-lang-menu { right: 0; }
}

/* Language switcher inside mobile drawer: full-width, menu stacks inline */
@media (max-width: 900px) {
  body.home .lk-nav-links .lk-lang {
    width: 100%;
    margin: 4px 0 0;
    /* Block (not inline-flex) so the static menu stacks BELOW the trigger in
       the drawer instead of sitting beside it and overlapping nav items. */
    display: block;
  }
  body.home .lk-nav-links .lk-lang-trigger {
    width: 100%;
    justify-content: space-between;
    height: 44px;
    padding: 0 14px;
    font-size: 13px;
    letter-spacing: 0.06em;
  }
  body.home .lk-nav-links .lk-lang-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transform: none;
    display: none;
  }
  body.home .lk-nav-links .lk-lang.is-open .lk-lang-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ============================================================
   LEGAL PAGES  (privacy / terms / cookies)
   Dark theme matching the tool pages; the shared nav + footer
   are already styled under body.home.
   ============================================================ */
body.home.legal { background: #03130f; }

body.home.legal .legal-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 150px 24px 96px;
}

body.home.legal .legal-doc { color: rgba(255, 255, 255, 0.82); }

body.home.legal .legal-doc h1 {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 12px;
}

body.home.legal .legal-updated {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 40px;
}

body.home.legal .legal-lead {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 32px;
}

body.home.legal .legal-doc h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 36px 0 12px;
}

body.home.legal .legal-doc p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 16px;
}

body.home.legal .legal-doc a {
  color: #c8ff3a;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 58, 0.35);
  transition: border-color 0.15s;
}
body.home.legal .legal-doc a:hover { border-color: #c8ff3a; }

/* Cookie-inventory table on the Cookie Policy page */
body.home.legal .legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
}
body.home.legal .legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}
body.home.legal .legal-table th,
body.home.legal .legal-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  vertical-align: top;
}
body.home.legal .legal-table thead th {
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
body.home.legal .legal-table tbody tr:last-child td { border-bottom: none; }
body.home.legal .legal-table code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: #c8ff3a;
  background: rgba(200, 255, 58, 0.08);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
body.home.legal .legal-note {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.60) !important;
  border-left: 2px solid rgba(200, 255, 58, 0.40);
  padding-left: 14px;
}

body.home.legal .legal-contact {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
  body.home.legal .legal-shell { padding: 120px 20px 72px; }
}

/* ============================================================
   CONSENT MANAGER  (.usw-consent)  — injected by consent.js
   Real opt-in banner + preferences. Shows on every page type
   (home, legal, tool) since trackers can fire anywhere.
   Anchored bottom-right; the live-activity popup sits bottom-left.
   ============================================================ */
.usw-consent {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  width: 400px;
  max-width: calc(100vw - 36px);
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s,
    visibility 0.35s;
  pointer-events: none;
}
.usw-consent.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.usw-consent-card {
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(14, 48, 40, 0.90) 0%, rgba(8, 32, 28, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 50px -18px rgba(0, 0, 0, 0.7),
    0 6px 16px -6px rgba(0, 0, 0, 0.4);
  font-family: "Inter", sans-serif;
}
.usw-consent-main { display: grid; grid-template-columns: 36px 1fr; gap: 14px; }
.usw-consent-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(200, 255, 58, 0.14);
  border: 1px solid rgba(200, 255, 58, 0.28);
  color: #c8ff3a; flex: none;
}
.usw-consent-icon svg { width: 18px; height: 18px; }
.usw-consent-body { min-width: 0; }
.usw-consent-title {
  margin: 0 0 6px; font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.01em; color: #fff;
}
.usw-consent-text {
  margin: 0 0 14px; font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.74); letter-spacing: -0.003em;
}
.usw-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.usw-consent-btn {
  font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.005em; height: 36px; padding: 0 16px;
  border-radius: 999px; cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.usw-consent-primary {
  background: #c8ff3a; border: 1px solid #c8ff3a; color: #0a2520;
  flex: 1 1 auto; box-shadow: 0 4px 14px -6px rgba(200, 255, 58, 0.55);
}
.usw-consent-primary:hover { background: #b8ef2a; border-color: #b8ef2a; transform: translateY(-1px); }
.usw-consent-secondary {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.82);
}
.usw-consent-secondary:hover { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.usw-consent-ghost {
  background: transparent; border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.60); padding: 0 12px;
}
.usw-consent-ghost:hover { color: #fff; }

/* preferences view */
.usw-consent-prefs .usw-consent-title { margin-bottom: 12px; }
.usw-consent-cat {
  padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.usw-consent-cat:first-of-type { border-top: none; }
.usw-consent-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.usw-consent-cat-name { font-size: 13px; font-weight: 600; color: #fff; }
.usw-consent-cat-desc {
  margin: 5px 0 0; font-size: 11.5px; line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}
.usw-consent-always {
  font-size: 11px; font-weight: 600; color: #c8ff3a;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.usw-consent-prefs .usw-consent-actions { margin-top: 16px; }

/* toggle switch */
.usw-consent-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; }
.usw-consent-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.usw-consent-slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.20);
  transition: background 0.2s, border-color 0.2s;
}
.usw-consent-slider::before {
  content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 999px; background: #fff;
  transition: transform 0.2s;
}
.usw-consent-switch input:checked + .usw-consent-slider { background: #c8ff3a; border-color: #c8ff3a; }
.usw-consent-switch input:checked + .usw-consent-slider::before { transform: translateY(-50%) translateX(18px); }
.usw-consent-switch input:focus-visible + .usw-consent-slider { outline: 2px solid #c8ff3a; outline-offset: 2px; }

/* footer reopen link — inherits footer <a> styling; nothing extra needed */
.usw-consent-reopen { cursor: pointer; }

@media (max-width: 480px) {
  .usw-consent { right: 12px; bottom: 12px; left: 12px; width: auto; }
}