/* loopnode.live hub — LoopNode design system v1 (websites/DESIGN.md). English, LTR, no JavaScript. */

/* ---------- Fonts (self-hosted, subset; DESIGN §3) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2010-2027, U+2190-2193, U+2212;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("fonts/plex-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+200C-200F;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("fonts/plex-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+200C-200F;
}

/* ---------- Tokens (DESIGN §2): hub accent = indigo ---------- */
:root {
  /* page container (header, nav, every section): owner 2026-09-30, was 1120px. Body text keeps its own 68ch limit. */
  --container: 1280px;
  --mark: #4f46e5;
  --accent: var(--brand);
  --on-accent: var(--on-brand);
  --brand: #4f46e5;
  --brand-strong: #4338ca;
  --brand-soft: #eef2ff;
  --on-brand: #ffffff;
  --gold: #b7892f;
  --gold-soft: #fbf3e2;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #475569;
  --warn-bg: #fffbeb;
  --warn-line: #fde68a;
  --link: #4338ca;
  --focus: #4f46e5;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 32px -16px rgb(15 23 42 / 0.12);
  --shadow-lg: 0 2px 4px rgb(15 23 42 / 0.04), 0 24px 48px -20px rgb(15 23 42 / 0.18);
  --r-input: 12px;
  --r-card: 16px;
  --r-panel: 24px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 160ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #818cf8;
    --brand-strong: #a5b4fc;
    --brand-soft: #1e1b4b;
    --on-brand: #0b1033;
    --gold: #d9ae5b;
    --gold-soft: #2e2512;
    --bg: #0b1220;
    --surface: #111a2b;
    --surface-2: #16223a;
    --border: #23304a;
    --border-strong: #33415c;
    --text: #e2e8f0;
    --muted: #a3b1c6;
    --warn-bg: #2a2110;
    --warn-line: #78520f;
    --link: #a5b4fc;
    --focus: #a5b4fc;
    --shadow: 0 0 0 1px rgb(255 255 255 / 0.02);
    --shadow-lg: 0 24px 48px -24px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3 {
  line-height: 1.4;
  margin: 0;
  font-weight: 700;
}
h3 {
  font-weight: 600;
}
p {
  margin: 0 0 12px;
}
a {
  color: var(--link);
  text-underline-offset: 3px;
  transition: color var(--fast) var(--ease);
}
a:hover {
  color: var(--brand);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
bdi {
  unicode-bidi: isolate;
}
.eq {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  z-index: 50;
}
.skip:focus {
  inset-inline-start: 8px;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: 8px;
}
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 640px) {
  .container {
    padding-inline: 24px;
  }
}

/* ---------- Header (sticky, translucent) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.brand:hover {
  color: var(--text);
}
.logo-mark {
  width: 32px;
  height: 32px;
  flex: none;
}
.wordmark {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand-tool {
  display: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--border-strong);
}
@media (min-width: 720px) {
  .brand-tool {
    display: inline;
  }
}
.site-header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}
.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition:
    background-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
}
.site-header nav a:hover {
  background: var(--surface-2);
  color: var(--text);
}
.site-header nav a[aria-current="page"] {
  color: var(--link);
  background: var(--brand-soft);
  font-weight: 600;
}
.site-header nav a {
  white-space: nowrap;
}
@media (max-width: 420px) {
  .site-header nav a {
    padding: 0 7px;
    font-size: 14px;
  }
  .wordmark {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: 32px 0 24px;
  background: radial-gradient(
    900px 420px at 85% -10%,
    color-mix(in srgb, var(--brand) 8%, transparent),
    transparent 70%
  );
}
@media (min-width: 960px) {
  .hero {
    padding: 56px 0 32px;
  }
}
.chips {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.chips .icon {
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.hero h1 {
  font-size: 30px;
  line-height: 1.35;
  max-width: 24ch;
  margin-bottom: 12px;
}
@media (min-width: 960px) {
  .hero h1 {
    font-size: 44px;
  }
}
.lead {
  font-size: 18px;
  color: var(--muted);
  max-width: 68ch;
  margin: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

/* ---------- Buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--r-input);
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease),
    transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  flex: 1 1 200px;
  background: var(--brand);
  color: var(--on-brand);
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.12),
    0 8px 20px -10px color-mix(in srgb, var(--brand) 70%, transparent);
}
.btn-primary:hover {
  background: var(--brand-strong);
}
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  border-color: var(--muted);
  background: var(--surface-2);
}
.btn-ghost {
  background: transparent;
  color: var(--link);
}
.btn-ghost:hover {
  background: var(--brand-soft);
}

/* ---------- Content sections ---------- */
.section {
  padding: 16px 0;
}
.section-title {
  font-size: 24px;
  margin: 8px 0 16px;
}
@media (min-width: 960px) {
  .section-title {
    font-size: 30px;
  }
}
.prose {
  padding: 22px 20px;
}
@media (min-width: 640px) {
  .prose {
    padding: 32px 36px;
  }
}
.prose h2 {
  font-size: 24px;
  margin-bottom: 12px;
}
.prose h3 {
  font-size: 18px;
  margin: 22px 0 8px;
}
.prose > p,
.prose > ul,
.prose > ol {
  max-width: 68ch;
}
.prose ul,
.prose ol {
  padding-inline-start: 22px;
  margin: 0 0 12px;
}
.prose li {
  margin: 6px 0;
}
.prose li::marker {
  color: var(--brand);
}
.prose .alert {
  margin: 12px 0;
}
.groups {
  list-style: none;
  padding: 0 !important;
  display: grid;
  gap: 10px;
}
.groups li {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-input);
  background: var(--surface-2);
  border-inline-start: 3px solid var(--brand);
}
.numbered {
  counter-reset: n;
  list-style: none;
  padding: 0 !important;
}
.numbered li {
  counter-increment: n;
  position: relative;
  padding-inline-start: 40px;
  margin: 12px 0;
}
.numbered li::before {
  content: counter(n);
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--link);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
}

/* ---------- Hub: tools, features, CTA ---------- */
.hero-copy {
  color: var(--text);
  max-width: 68ch;
  margin-top: 14px;
}
.tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
@media (min-width: 760px) {
  .tools {
    grid-template-columns: 1fr 1fr;
  }
}
.tool {
  position: relative;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--tool-accent);
  transition:
    transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}
.tool:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.tool-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tool-accent) 14%, var(--surface));
  color: var(--tool-accent);
  margin-bottom: 14px;
}
@media (prefers-color-scheme: dark) {
  .tool-icon {
    color: color-mix(in srgb, var(--tool-accent) 45%, #ffffff);
  }
}
.tool h3 {
  font-size: 22px;
  margin: 0 0 4px;
}
.tool-link {
  color: var(--text);
  text-decoration: none;
}
.tool-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}
/* Red team 2026-09-30 (#1): the card clips its children (overflow: hidden), so a ring on the stretched link was never seen.
   The ring goes on the card itself: an element's own outline is not clipped by its own overflow. Browsers without :has()
   keep the global :focus-visible ring on the title link. */
@supports selector(:has(*)) {
  .tool-link:focus-visible {
    outline: none;
  }
  .tool:has(.tool-link:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }
}
[lang="ar"] {
  font-family: "IBM Plex Sans Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
.market {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 10px;
}
.host {
  font-variant-numeric: tabular-nums;
}
.tool > p:not(.market) {
  flex: 1;
}
.tool-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-weight: 600;
  color: var(--link);
}
.tool-cta .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--fast) var(--ease);
}
.tool:hover .tool-cta .icon {
  transform: translateX(3px);
}
.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 760px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1040px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}
.feature {
  padding: 22px;
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  margin-bottom: 12px;
}
.feature h3 {
  font-size: 17px;
  margin-bottom: 4px;
}
.feature p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding: 28px;
  border-radius: var(--r-panel);
  background:
    radial-gradient(
      500px 240px at 100% 0%,
      color-mix(in srgb, var(--brand) 22%, transparent),
      transparent 70%
    ),
    var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.cta-band > div {
  flex: 1 1 420px;
}
.cta-band h2 {
  font-size: 24px;
  margin-bottom: 8px;
}
.cta-band p {
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
}
.cta-band .btn {
  flex: 0 0 auto;
}
.quiet {
  color: var(--text);
}

/* Inner pages */
.page {
  padding-block: 32px 16px;
}
.page .explain {
  padding: 24px 20px;
  max-width: 820px;
}
@media (min-width: 640px) {
  .page .explain {
    padding: 36px 40px;
  }
}
.page h1 {
  font-size: 32px;
  margin-bottom: 16px;
}
.page h2 {
  font-size: 20px;
  margin: 24px 0 8px;
}
.page ul {
  padding-inline-start: 22px;
}
.page li {
  margin: 6px 0;
}
.page .notice {
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--text);
  border-radius: var(--r-input);
  padding: 12px 16px;
  font-size: 15px;
}

/* Footer */
.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  padding: 32px 0 40px;
}
.footer-grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr;
  }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
}
.footer-brand .logo-mark {
  width: 28px;
  height: 28px;
}
.copy {
  margin: 0;
}

/* ---------- Motion (DESIGN §6) ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.enter {
  animation: rise 200ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* English display type (DESIGN §3: display 40–56px desktop / 30–34px mobile, tight tracking) */
.hero h1 {
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: none;
}
@media (min-width: 960px) {
  .hero h1 {
    font-size: 56px;
  }
}
.hero .lead {
  font-size: 20px;
  margin-top: 4px;
}
.section-title,
.prose h2,
.cta-band h2 {
  letter-spacing: -0.015em;
}

/* Tool accents (DESIGN §2) — classes, because the CSP blocks inline style attributes. */
.tool-car {
  --tool-accent: #0f766e;
}

/* ---------- Design review 1 (2026-09-30) ---------- */
/* #2 taqaud gets its gold highlight so the two tool cards differ visibly (ΔE ≫ 40); 24px icons in 48px tiles. */
.tool-taqaud {
  --tool-accent: #b7892f;
}
.tool-icon .icon {
  width: 24px;
  height: 24px;
}
/* #7 dark: tiles ~22% accent, icons ~60% white */
@media (prefers-color-scheme: dark) {
  .tool-icon {
    background: color-mix(in srgb, var(--tool-accent) 22%, var(--surface));
    color: color-mix(in srgb, var(--tool-accent) 40%, #ffffff);
  }
}
.lang-badge {
  display: inline-block;
  margin-inline-end: 8px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--text);
}
/* #4/#8 hero: H1 → lede → chips → one line; compact chips; the line hides on small phones so a tool card shows above the fold */
.hero .lead {
  color: var(--text);
}
.hero .chips {
  margin: 16px 0 0;
}
.hero .chips li {
  font-size: 13px;
  padding: 2px 10px;
}
.hero-copy {
  margin-top: 14px;
  color: var(--muted);
}
@media (max-width: 599px) {
  .hero-copy {
    display: none;
  }
  .hero {
    padding-bottom: 8px;
  }
}
/* #5 features: 8px title→body gap; on phones a compact icon list instead of tall cards */
.feature h3 {
  margin-bottom: 8px;
}
@media (max-width: 759px) {
  .features {
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 4px 16px;
  }
  .feature {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .feature + .feature {
    border-top: 1px solid var(--border);
  }
  .feature-icon {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    margin: 0;
  }
  .feature h3 {
    margin: 0 0 2px;
  }
}
/* #6 one padding token (32px); "why" and "found a mistake" side by side 2:1 */
.pair {
  display: grid;
  gap: 18px;
}
@media (min-width: 900px) {
  .pair {
    grid-template-columns: 3fr 2fr;
    align-items: stretch;
  }
}
.pair > .prose,
.pair > .cta-band {
  padding: 32px;
  margin: 0;
}
.pair .cta-band {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--surface);
}
.pair .cta-band > div {
  flex: 0 1 auto;
}
.cta-band .btn-primary:hover {
  background: var(--brand-strong);
  transform: translateY(-1px);
}
/* nice-to-have: 3-column footer */
.footer-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin: 4px 0;
}
.footer-h {
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.site-footer .copy {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.site-footer .copy a {
  color: var(--muted);
}
/* A link styled as a button must keep its button text colour on hover (the generic a:hover recoloured it to the
   button's own fill: 1.26:1 — caught by the §6b contrast test). */
a.btn-primary,
a.btn-primary:hover {
  color: var(--on-brand);
}

/* ---------- Design review 2 (2026-09-30) ---------- */
/* #2 short pages: the footer sits at the bottom of the viewport */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
/* #1 About / Privacy / Contact: a centred reading column (68ch) */
.page .explain {
  max-width: calc(68ch + 80px);
  margin-inline: auto;
}
/* #3 "How we build them": a borderless 3-column list, small monochrome icon inline with each title */
.features {
  gap: 28px 36px;
}
.feature,
.feature + .feature {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.feature h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  margin: 0 0 8px;
}
.feature h3 .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
@media (max-width: 759px) {
  .features {
    background: none;
    border: 0;
    padding: 0;
    gap: 20px;
  }
  .feature {
    display: block;
    padding: 0;
  }
  .feature + .feature {
    border-top: 0;
  }
}
/* #4 equal heights, one body colour */
.pair {
  align-items: stretch;
}
.pair > .prose,
.pair > .cta-band {
  height: 100%;
}
.pair p,
.pair .cta-band p {
  color: var(--text);
}
.pair .prose > p:last-child {
  margin-bottom: 0;
}
/* LOW */
.tool h3 [lang="ar"] {
  line-height: 1.25;
}
#mistake .btn-secondary {
  box-shadow: none;
}

/* =====================================================================================================================
   ⭐ v2 HERO (DESIGN.md v2, 2026-09-30) — light product showcase (Stripe-inspired, own palette). First screen only.
   Tool colours: car deep teal #0E2A24 + lime #B8F36B · taqaud mint #3DDBB0 / deep green #07352B / gold #E3B04B.
   ===================================================================================================================== */
.hero.v2 {
  position: relative;
  overflow: hidden;
  padding: 72px 0 88px;
  background: var(--bg);
}
.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  background:
    radial-gradient(560px 420px at 78% 30%, rgb(99 102 241 / 0.28), transparent 70%),
    radial-gradient(520px 380px at 96% 70%, rgb(61 219 176 / 0.26), transparent 70%),
    radial-gradient(420px 320px at 62% 88%, rgb(227 176 75 / 0.22), transparent 70%),
    radial-gradient(500px 360px at 8% 0%, rgb(167 139 250 / 0.16), transparent 70%);
  filter: saturate(1.1);
}
@media (prefers-color-scheme: dark) {
  .hero-glow {
    background:
      radial-gradient(560px 420px at 78% 30%, rgb(99 102 241 / 0.32), transparent 70%),
      radial-gradient(520px 380px at 96% 70%, rgb(61 219 176 / 0.18), transparent 70%),
      radial-gradient(420px 320px at 62% 88%, rgb(227 176 75 / 0.14), transparent 70%),
      radial-gradient(500px 360px at 8% 0%, rgb(167 139 250 / 0.12), transparent 70%);
  }
}
.hero.v2 .container {
  position: relative;
}
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
  }
}
.hero.v2 h1 {
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  background: linear-gradient(100deg, var(--text) 40%, #4f46e5 75%, #0f766e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-color-scheme: dark) {
  .hero.v2 h1 {
    background: linear-gradient(100deg, var(--text) 40%, #a5b4fc 75%, #5eead4 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
@media (min-width: 960px) {
  .hero.v2 h1 {
    font-size: 76px;
  }
}
.hero.v2 .lead {
  font-size: 21px;
  color: var(--muted);
  max-width: 30em;
  margin-top: 18px;
}
.hero.v2 .chips {
  margin-top: 20px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero-cta .btn-primary {
  box-shadow: 0 12px 28px -14px rgb(79 70 229 / 0.7);
}
/* product showcase */
.showcase {
  position: relative;
  min-height: 460px;
}
.sc-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(430px, 88%);
  padding: 16px 22px 22px;
  border-radius: 22px;
  text-decoration: none;
  box-shadow:
    0 2px 6px rgb(15 23 42 / 0.08),
    0 40px 70px -30px rgb(15 23 42 / 0.45);
  transition:
    transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}
.sc-card:hover {
  box-shadow:
    0 2px 6px rgb(15 23 42 / 0.1),
    0 50px 80px -30px rgb(15 23 42 / 0.55);
}
.sc-car {
  inset-inline-start: 0;
  top: 0;
  transform: rotate(-3deg);
  background: #0e2a24;
  color: #ecfdf5;
  z-index: 1;
}
.sc-car:hover {
  transform: rotate(-3deg) translateY(-4px);
  color: #ecfdf5;
}
.sc-taqaud {
  inset-inline-end: 0;
  bottom: 0;
  transform: rotate(2.5deg);
  background: linear-gradient(160deg, #3ddbb0, #2fcaa0);
  color: #07352b;
  z-index: 2;
  font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
}
.sc-taqaud:hover {
  transform: rotate(2.5deg) translateY(-4px);
  color: #07352b;
}
.sc-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
  font-size: 13px;
}
.sc-taqaud .sc-bar {
  border-bottom-color: rgb(7 53 43 / 0.18);
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.sc-dots {
  display: inline-flex;
  gap: 5px;
}
.sc-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}
.sc-host {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
}
.sc-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sc-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}
.sc-field {
  display: grid;
  gap: 6px;
}
.sc-input {
  font-family: "Inter", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(184 243 107 / 0.55);
  color: #ffffff;
  font-weight: 600;
}
.sc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.sc-ok {
  width: 22px;
  height: 22px;
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background: #b8f36b;
  stroke: #0e2a24;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-big {
  margin-top: 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #b8f36b;
}
.sc-small {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: #d1fae5;
}
.sc-big .sc-small:last-child {
  display: inline;
  margin-inline-start: 6px;
}
.sc-preview {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #07352b;
  color: #ecfff8;
  position: relative;
  overflow: hidden;
}
.sc-preview::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #e3b04b;
  inset-inline-end: -30px;
  top: -34px;
}
.sc-preview > * {
  position: relative;
  z-index: 1;
}
.sc-preview .sc-label {
  color: #bff3e3;
}
.sc-date {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: end;
}
.sc-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sc-tile {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.6);
  font-weight: 700;
  font-size: 16px;
}
@media (max-width: 959px) {
  .hero.v2 {
    padding: 36px 0 32px;
  }
  .showcase {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .sc-card,
  .sc-car,
  .sc-taqaud,
  .sc-car:hover,
  .sc-taqaud:hover {
    position: static;
    width: auto;
    transform: none;
    padding: 12px 12px 14px;
    gap: 8px;
    border-radius: 16px;
  }
  .sc-title {
    font-size: 15px;
  }
  .sc-field,
  .sc-row,
  .sc-tiles,
  .sc-bar {
    display: none;
  }
  .sc-big {
    font-size: 24px;
  }
  .sc-date {
    font-size: 22px;
  }
  .sc-preview {
    padding: 10px;
  }
}
/* v2 hero refinements: both product cards readable; the glow fades out instead of ending in a line */
.hero-glow {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
@media (min-width: 960px) {
  .showcase {
    min-height: 600px;
  }
  .sc-car {
    width: min(410px, 80%);
  }
  .sc-taqaud {
    width: min(390px, 74%);
  }
}
@media (max-width: 959px) {
  .sc-preview::after {
    display: none;
  }
}
/* v2 hero: solid, measurable colours (gradient text can't be contrast-checked) */
.hero.v2 h1,
.hero.v2 h1 .h1-accent {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.hero.v2 h1 {
  color: var(--text);
}
.hero.v2 h1 .h1-accent {
  color: #4f46e5;
}
@media (prefers-color-scheme: dark) {
  .hero.v2 h1 .h1-accent {
    color: #a5b4fc;
  }
}
.sc-taqaud {
  background-color: #3ddbb0;
}
/* mobile: keep the first real tool card near the fold */
@media (max-width: 599px) {
  .hero.v2 {
    padding: 24px 0 24px;
  }
  .hero.v2 h1 {
    font-size: 38px;
  }
  .hero.v2 .lead {
    font-size: 17px;
    margin-top: 10px;
  }
  .hero.v2 .chips {
    margin-top: 12px;
  }
  .hero-cta {
    margin-top: 16px;
    flex-wrap: nowrap;
  }
  .hero-cta .btn {
    flex: 1 1 0;
    padding: 0 12px;
    font-size: 15px;
  }
  .hero-grid {
    gap: 20px;
  }
}

/* =====================================================================================================================
   ⭐ v2 FULL PAGE (owner approved the hero 2026-09-30): the rest of the hub + About / Privacy / Contact in the same
   light, Stripe-like style — bold product cards, a metric strip, one dark band, light page heroes with the glow.
   ===================================================================================================================== */
.section {
  padding: 48px 0;
}
@media (min-width: 960px) {
  .section {
    padding: 80px 0;
  }
}
.section-head {
  max-width: 720px;
  margin-bottom: 28px;
}
.section-head .section-title {
  margin: 0;
}
.section-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 960px) {
  .section-title {
    font-size: 46px;
  }
}
.eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--link);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.8;
}

/* ---------- the tools: bold product cards in each tool's own colours ---------- */
#tools {
  padding-top: 24px;
}
.tools {
  gap: 22px;
}
.tool.card {
  overflow: hidden;
  min-height: 380px;
  padding: 30px 30px 28px;
  border: 0;
  border-top: 4px solid var(--tool-accent);
  border-radius: 28px;
  box-shadow:
    0 2px 6px rgb(15 23 42 / 0.08),
    0 34px 64px -34px rgb(15 23 42 / 0.5);
}
.tool.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 6px rgb(15 23 42 / 0.1),
    0 44px 80px -34px rgb(15 23 42 / 0.6);
}
.tool.card::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  inset-inline-end: -110px;
  top: -130px;
  pointer-events: none;
}
/* the decorative circle sits under the content without positioning the children: a positioned <h3> would re-anchor
   the stretched link (.tool-link::after) to the heading instead of the whole card */
.tool.card {
  isolation: isolate;
}
.tool.card::before {
  z-index: -1;
}
.tool.tool-car {
  background: #0e2a24;
  color: #ecfdf5;
}
.tool.tool-car::before {
  background: rgb(184 243 107 / 0.12);
}
.tool.tool-taqaud {
  background: #3ddbb0;
  color: #07352b;
}
.tool.tool-taqaud::before {
  background: #e3b04b;
}
.tool.card .tool-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  margin-bottom: 18px;
}
.tool.tool-car .tool-icon {
  background: rgb(184 243 107 / 0.16);
  color: #b8f36b;
}
.tool.tool-taqaud .tool-icon {
  background: #07352b;
  color: #3ddbb0;
}
.tool.card h3 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.tool.tool-car .tool-link {
  color: #b8f36b;
}
.tool.tool-taqaud .tool-link {
  color: #07352b;
}
.tool.card .market {
  font-size: 14px;
  margin: 0 0 12px;
}
.tool.tool-car .market {
  color: #a7c4bb;
}
.tool.tool-taqaud .market {
  color: #0b4a3c;
}
.tool.card .lang-badge {
  color: inherit;
  border-color: currentColor;
}
.tool.card > p:not(.market) {
  flex: 0 0 auto;
  margin: 0;
  font-size: 17px;
}
.tool.tool-car > p:not(.market) {
  color: #d3e6df;
}
/* mini product UI: the tool's flow as a three-step stepper (equal columns, so it never wraps mid-flow).
   Red team 2026-09-30 (#6): it is decoration (aria-hidden), and its positioned steps sat above the stretched link and ate
   the clicks — pointer-events: none lets a click anywhere on the strip open the tool. */
.tool-ui {
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding: 12px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
}
.tool-car .tool-ui {
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(184 243 107 / 0.25);
}
.tool-taqaud .tool-ui {
  background: rgb(255 255 255 / 0.35);
  font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
}
.ui-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px 12px;
  border-radius: 12px;
  line-height: 1.35;
}
.tool-taqaud .ui-step {
  background: #ffffff;
  color: #07352b;
}
.tool-car .ui-step {
  background: #173d34;
  color: #ecfdf5;
}
/* the connector: a small chevron on the edge between two steps (mirrored in the Arabic card) */
.ui-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: -9px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  z-index: 1;
}
.tool-ui[dir="rtl"] .ui-step:not(:last-child)::after {
  transform: rotate(-135deg);
}
.tool-car .ui-step:not(:last-child)::after {
  color: #b8f36b;
}
.tool-taqaud .ui-step:not(:last-child)::after {
  color: #07352b;
}
.ui-step b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
}
.tool-car .ui-step b {
  background: #b8f36b;
  color: #0e2a24;
}
.tool-taqaud .ui-step b {
  background: #07352b;
  color: #3ddbb0;
}
.tool.card .tool-cta {
  margin-top: auto;
  padding-top: 24px;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
}
.tool.tool-car .tool-cta {
  color: #ffffff;
}
.tool.tool-taqaud .tool-cta {
  color: #07352b;
}
.tool-go {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.tool-car .tool-go {
  background: #b8f36b;
  color: #0e2a24;
}
.tool-taqaud .tool-go {
  background: #07352b;
  color: #3ddbb0;
}
.tool.card .tool-cta .icon {
  width: 18px;
  height: 18px;
}
.tool.card:hover .tool-cta .icon {
  transform: translateX(2px);
}

/* ---------- metric strip ---------- */
.metrics-band {
  padding: 0 0 16px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--border);
}
@media (min-width: 900px) {
  .metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.metrics > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding: 24px 22px;
  background: var(--surface);
}
.metrics dd {
  margin: 0;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #4338ca;
}
.metrics > div:nth-child(2) dd {
  color: #0f766e;
}
.metrics > div:nth-child(3) dd {
  color: #8a6516;
}
.metrics > div:nth-child(4) dd {
  color: #6d28d9;
}
@media (min-width: 960px) {
  .metrics dd {
    font-size: 56px;
  }
}
.metrics dt {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  .metrics dd {
    color: #a5b4fc;
  }
  .metrics > div:nth-child(2) dd {
    color: #5eead4;
  }
  .metrics > div:nth-child(3) dd {
    color: #e3b04b;
  }
  .metrics > div:nth-child(4) dd {
    color: #c4b5fd;
  }
}

/* ---------- "How we build them" on the one dark band ---------- */
.band-dark {
  position: relative;
  overflow: hidden;
  margin-top: 56px;
  background-color: #0f0c29;
  background-image:
    radial-gradient(640px 320px at 92% 0%, rgb(99 102 241 / 0.38), transparent 70%),
    radial-gradient(520px 300px at 0% 100%, rgb(61 219 176 / 0.16), transparent 70%);
  color: #e0e7ff;
}
@media (prefers-color-scheme: dark) {
  .band-dark {
    background-color: #070818;
  }
}
.band-dark .section-title {
  color: #ffffff;
}
.band-dark .eyebrow {
  background: rgb(255 255 255 / 0.1);
  color: #c7d2fe;
}
.band-dark .features {
  gap: 36px 44px;
}
.band-dark .feature h3 {
  color: #ffffff;
  font-size: 18px;
}
.band-dark .feature p {
  color: #c7d2fe;
  font-size: 16px;
}
.band-dark .feature h3 .icon {
  width: 22px;
  height: 22px;
  color: #a5b4fc;
}
.band-dark .feature:nth-child(3n + 2) h3 .icon {
  color: #3ddbb0;
}
.band-dark .feature:nth-child(3n) h3 .icon {
  color: #e3b04b;
}

/* ---------- why + found a mistake ---------- */
.pair > .prose,
.pair > .cta-band {
  padding: 36px;
  border-radius: 28px;
}
#why {
  background-color: var(--surface);
  background-image: radial-gradient(420px 220px at 100% 0%, rgb(99 102 241 / 0.1), transparent 70%);
}
#mistake {
  background-color: #eef2ff;
  background-image: radial-gradient(360px 220px at 100% 100%, rgb(61 219 176 / 0.28), transparent 70%);
  border-color: #c7d2fe;
}
@media (prefers-color-scheme: dark) {
  #mistake {
    background-color: #1e1b4b;
    border-color: #312e81;
  }
}
#mistake .btn {
  border-radius: 999px;
}
.pair .prose h2,
.pair .cta-band h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- footer: light, with the three-colour hairline ---------- */
.site-footer {
  position: relative;
  margin-top: 0;
  padding: 56px 0 36px;
  border-top: 0;
  background: var(--surface);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: linear-gradient(90deg, #4f46e5, #3ddbb0 50%, #e3b04b);
}
.site-footer .footer-brand {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.site-footer .footer-brand .logo-mark {
  width: 36px;
  height: 36px;
}
.footer-h {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- inner pages: a light page hero (the glow) above a centred reading column ---------- */
.page {
  padding: 0;
}
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 104px;
  background: var(--bg);
}
@media (min-width: 960px) {
  .page-hero {
    padding: 80px 0 128px;
  }
}
.page-hero .container {
  position: relative;
}
/* the hero text lines up with the centred reading column below (.page .explain: 68ch + 80px) */
.page-hero-inner {
  max-width: calc(68ch + 80px);
  margin-inline: auto;
}
.page .page-hero h1 {
  margin: 0 0 16px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
@media (min-width: 960px) {
  .page .page-hero h1 {
    font-size: 64px;
  }
}
.page-lead {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: 19px;
}
.page-hero .page-lead a {
  font-weight: 700;
}
.page-chips {
  margin-top: 20px;
}
.page-body {
  position: relative;
  z-index: 1;
  margin-top: -64px;
  padding-bottom: 72px;
}
.page .explain {
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) {
  .page .explain {
    padding: 44px 48px;
  }
}
.page .explain h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.page .explain h2::before {
  content: "";
  width: 6px;
  height: 22px;
  flex: none;
  border-radius: 3px;
  background-image: linear-gradient(#4f46e5, #3ddbb0);
}
.page .explain > h2:first-child {
  margin-top: 0;
}
.page ul.checklist {
  list-style: none;
  padding: 0;
}
.page .checklist li {
  position: relative;
  margin: 0 0 12px;
  padding-inline-start: 36px;
}
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    #4f46e5
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}
/* Keep the approved hero's two-line title ("LoopNode" / "Tools") now that the 1280px container fits it on one line. */
@media (min-width: 960px) {
  .hero.v2 h1 .h1-accent {
    display: block;
  }
}

/* ---------- Verification 1 (2026-09-30) ---------- */
/* #5 the stack fills its column: physical sides, because the Arabic card carries dir="rtl" and its logical
   inset-inline-end resolved to the LEFT, so both cards sat on the left (visible once the container was 1280px). */
@media (min-width: 960px) {
  .sc-car,
  .sc-car:hover {
    left: 0;
    right: auto;
  }
  .sc-taqaud,
  .sc-taqaud:hover {
    right: 0;
    left: auto;
  }
}
/* #6 Privacy chips: a chip row, not a content list (no indent, no item margins) — they line up with the h1 */
.page .page-chips {
  padding: 0;
}
.page .page-chips li {
  margin: 0;
}
/* #7 inline Arabic inside English text: Plex Arabic's taller metrics raised its line by ~3px */
main p [lang="ar"] {
  line-height: 1;
}
/* #5 follow-up: with the cards apart, the Arabic card's corner met "$10,000 a y|ear" — "a year" goes under the number */
@media (min-width: 960px) {
  .sc-big .sc-small:last-child {
    display: block;
    margin-inline-start: 0;
  }
}

/* ---------- Icons v3 (owner approved 2026-09-30) ---------- */
/* the LoopNode mark is the 3D clay image (its own light tile), and each tool card shows the tool's own app icon */
.logo-mark {
  display: block;
  border-radius: 8px;
}
.tool.card .tool-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: none;
  box-shadow: 0 10px 22px -12px rgb(0 0 0 / 0.55);
}

/* ---------- Red team fixes (2026-09-30) ---------- */
/* #2 «عربي» badge: `main p [lang="ar"] { line-height: 1 }` (meant for inline Arabic in English text) squeezed the pill to
   14px, so Plex Arabic's 15px glyph box crossed the border. The badge keeps the pill's own line height, like the EN one. */
.lang-badge[lang="ar"] {
  line-height: 1.7;
}
/* #5 280–340px phones: the four nav links overflowed the header by up to 22px */
@media (max-width: 340px) {
  .container {
    padding-inline: 12px;
  }
  .header-inner {
    gap: 8px;
  }
  .site-header nav ul {
    gap: 0;
  }
  .site-header nav a {
    padding: 0 5px;
    font-size: 13px;
  }
}

/* =====================================================================================================================
   Guides (owner decision 2026-09-30): five long-form pages under /guides/ in the v2 light style — a reading column,
   figure cards, worked examples, tables, dated sources. No ad slots on guides yet.
   ===================================================================================================================== */
.site-header nav a[aria-current="true"] {
  color: var(--link);
  background: var(--brand-soft);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
}
.crumbs a {
  font-weight: 600;
}
.crumbs .eyebrow {
  margin: 0;
}
.byline {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
.page .guide {
  font-size: 17px;
}
.guide .g-section + .g-section,
.guide .sources {
  margin-top: 40px;
}
.guide h2 {
  font-size: 26px;
  scroll-margin-top: 88px;
}
.guide h3 {
  margin: 20px 0 8px;
  font-size: 18px;
}
.guide p,
.guide li {
  line-height: 1.7;
}
.cite {
  margin-inline-start: 2px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  vertical-align: 2px;
}
/* table of contents */
.toc {
  margin: 0 0 8px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}
.toc-h {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.page .toc ol {
  margin: 0;
  padding-inline-start: 20px;
  columns: 2 220px;
  column-gap: 28px;
}
.page .toc li {
  margin: 3px 0;
  font-size: 15px;
}
.g-section[id],
.sources h2 {
  scroll-margin-top: 88px;
}
/* figure cards */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.kpi-n {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #4338ca;
}
.kpi:nth-child(2) .kpi-n {
  color: #0f766e;
}
.kpi:nth-child(3) .kpi-n {
  color: #8a6516;
}
.kpi:nth-child(4) .kpi-n {
  color: #6d28d9;
}
.kpi-l {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
@media (prefers-color-scheme: dark) {
  .kpi-n {
    color: #a5b4fc;
  }
  .kpi:nth-child(2) .kpi-n {
    color: #5eead4;
  }
  .kpi:nth-child(3) .kpi-n {
    color: #e3b04b;
  }
  .kpi:nth-child(4) .kpi-n {
    color: #c4b5fd;
  }
}
/* lists */
.page ul.checks,
.page ol.mistakes,
.page ol.steps-list,
.page ol.principles,
.page ul.log {
  padding-inline-start: 0;
  list-style: none;
}
.page .checks li {
  position: relative;
  margin: 10px 0;
  padding-inline-start: 30px;
}
.checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    #4f46e5
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}
.page ol.mistakes,
.page ol.steps-list,
.page ol.principles {
  counter-reset: n;
}
.page .mistakes li,
.page .steps-list li,
.page .principles li {
  position: relative;
  counter-increment: n;
  margin: 12px 0;
  padding-inline-start: 38px;
}
.mistakes li::before,
.steps-list li::before,
.principles li::before {
  content: counter(n);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--link);
  font-size: 13px;
  font-weight: 800;
}
.mistakes li::before {
  background: #fde8e8;
  color: #9b1c1c;
}
@media (prefers-color-scheme: dark) {
  .mistakes li::before {
    background: #3b1515;
    color: #fca5a5;
  }
}
/* callouts and columns */
.note {
  margin: 18px 0;
  padding: 14px 18px;
  border-inline-start: 4px solid #e3b04b;
  border-radius: 12px;
  background: var(--warn-bg);
}
.note p {
  margin: 0;
}
.two-col,
.three-col {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}
@media (min-width: 700px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
  .three-col {
    grid-template-columns: repeat(3, 1fr);
  }
}
.col-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}
.col-card p {
  margin: 0;
  font-size: 15.5px;
}
.col-card .col-h {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 16px;
}
.col-card.ok {
  border-top: 4px solid #0f766e;
}
.col-card.no {
  border-top: 4px solid #b91c1c;
}
/* worked examples */
.example {
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid #c7d2fe;
  border-radius: 18px;
  background: #f5f7ff;
}
@media (prefers-color-scheme: dark) {
  .example {
    border-color: #312e81;
    background: #161436;
  }
}
.example p {
  margin: 0;
}
.example .example-h {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--link);
}
.page .example .calc {
  margin: 0 0 8px;
  padding-inline-start: 22px;
}
.page .example .calc li {
  margin: 4px 0;
}
.example .example-a {
  font-weight: 700;
}
/* tables */
.guide .table-wrap {
  margin: 16px 0 6px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.guide table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.guide caption {
  padding: 12px 14px 8px;
  text-align: start;
  font-weight: 700;
}
.guide th,
.guide td {
  padding: 9px 14px;
  text-align: start;
  vertical-align: top;
  border-top: 1px solid var(--border);
}
.guide thead th {
  background: var(--brand-soft);
  color: var(--text);
  font-size: 14px;
}
.guide tbody tr:nth-child(even) td {
  background: var(--surface-2);
}
.table-src {
  font-size: 14px;
  color: var(--muted);
}
.mono,
.vin-part b {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}
/* the VIN, split into its sections */
.vin-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0;
}
.vin-part {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border-top: 4px solid var(--vin, #4f46e5);
}
.vin-part b {
  font-size: 20px;
}
.vin-part i,
.vin-part em {
  font-size: 12.5px;
  font-style: normal;
  color: var(--muted);
}
.vin-part em {
  font-weight: 700;
  color: var(--text);
}
.vin-part.wmi {
  --vin: #4f46e5;
}
.vin-part.vds {
  --vin: #64748b;
}
.vin-part.chk {
  --vin: #e3b04b;
}
.vin-part.yr {
  --vin: #0f766e;
}
.vin-part.plant {
  --vin: #b91c1c;
}
.vin-part.ser {
  --vin: #94a3b8;
}
/* tool call-to-action */
.cta-tool {
  margin: 24px 0 16px;
  padding: 18px 20px;
  border-radius: 18px;
}
.cta-tool p {
  margin: 0;
}
.cta-tool.car {
  background: #0e2a24;
  color: #ecfdf5;
}
.cta-tool.car a {
  color: #b8f36b;
  font-weight: 800;
}
.cta-tool.taqaud {
  background: #07352b;
  color: #ecfff8;
}
.cta-tool.taqaud a {
  color: #6ff0cc;
  font-weight: 800;
}
.not-advice {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
}
/* sources */
.guide .sources {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.guide .sources h2 {
  font-size: 20px;
}
.page .sources ol {
  padding-inline-start: 22px;
}
.page .sources li {
  margin: 8px 0;
  font-size: 14.5px;
  color: var(--muted);
}
.sources li:target {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: 6px;
}
/* corrections log */
.page .log li {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: 15.5px;
}
.log-date {
  display: inline-block;
  margin-inline-end: 8px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.log-tool {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--link);
  font-size: 13px;
  font-weight: 700;
}
/* guides index */
.page ul.guide-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.page .guide-list li {
  margin: 0;
}
.guide-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}
.guide-link:hover {
  border-color: #4f46e5;
  transform: translateY(-2px);
  color: var(--text);
}
.guide-tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--link);
}
.guide-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.guide-sum {
  font-size: 15.5px;
  color: var(--muted);
}
.guide-meta {
  font-size: 13.5px;
  color: var(--muted);
}
/* tool cards → their guides (a real link above the card's stretched link) */
.tool.card .tool-guides {
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
}
.tool.tool-car .tool-guides,
.tool.tool-car .tool-guides a {
  color: #d3e6df;
}
.tool.tool-taqaud .tool-guides,
.tool.tool-taqaud .tool-guides a {
  color: #07352b;
}
.tool.card .tool-guides a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tool.card .tool-guides a:hover {
  text-decoration-thickness: 2px;
}
/* footer: four columns once the guides join */
@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1.3fr 0.9fr;
  }
}
/* Five nav links (Guides joined 2026-09-30): under 420px the nav takes its own row under the logo; under 340px it wraps. */
@media (max-width: 420px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 0;
    padding-block: 4px;
  }
  .site-header nav {
    width: 100%;
  }
  .site-header nav ul {
    justify-content: space-between;
  }
}
@media (max-width: 340px) {
  .site-header nav ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 2px;
  }
}
/* long unbroken link text (e.g. "vpic.nhtsa.dot.gov/decoder") may break on narrow phones */
.guide a {
  overflow-wrap: anywhere;
}

/* ---------- /apps/ — portfolio (DECISIONS hub-portfolio, style 2: bento of colour tiles with real screens) ---------- */
.apps-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 24px;
  background: var(--bg);
}
@media (min-width: 960px) {
  .apps-hero {
    padding: 48px 0 32px;
  }
}
.apps-hero-grid {
  position: relative;
  display: grid;
  gap: 20px;
}
@media (min-width: 960px) {
  .apps-hero-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: end;
    gap: 48px;
  }
}
.page .apps-hero h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
@media (min-width: 960px) {
  .page .apps-hero h1 {
    font-size: 64px;
  }
}
.apps-hero .h1-accent {
  color: #4f46e5;
}
.apps-lead {
  max-width: 56ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 18px;
}
@media (min-width: 960px) {
  .apps-lead {
    font-size: 19px;
  }
}
.apps-glance {
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.glance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.glance-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.glance-list b {
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
}
.glance-dev {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}
.status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.dot-live,
.status-live .status-dot {
  background: #16a34a;
}
.dot-testing,
.status-testing .status-dot {
  background: #d97706;
}
.dot-review,
.status-review .status-dot {
  background: #6366f1;
}
.dot-web {
  background: #0ea5e9;
}
.apps-body {
  padding: 8px 0 96px;
}

/* the page's lists are layouts, not prose lists: no `.page ul` indent or `.page li` margins */
.page .bento,
.page .glance-list,
.page .app-facts {
  padding: 0;
}
.page .bento > li,
.page .glance-list li,
.page .app-facts li {
  margin: 0;
}
/* the bento: one column → two (the wide tile spans both) → 12 columns (wide 6 + tall 3 + tall 3) */
.bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .app-wide {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1200px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .app-wide {
    grid-column: span 6;
  }
  .app-tall {
    grid-column: span 3;
  }
}

/* each tile wears its product's own colour (from its icon / store art); dark mode = deeper tints, same hue. Chosen so every
   pair of tiles is ≥ 24 ΔE apart in both themes (apps.spec checks > 20) and all text on them is ≥ 4.9:1. */
.app-sound-meter {
  --t-bg: #a9e7df;
  --t-bg2: #86d9cd;
  --t-ink: #032b26;
  --t-muted: #15453e;
}
.app-amber-tasbih {
  --t-bg: #fbe4b0;
  --t-bg2: #f3c46f;
  --t-ink: #352002;
  --t-muted: #553708;
}
/* Candela: its ring's own range, moonlight blue → sunlight amber */
.app-candela {
  --t-bg: #e4ddf7;
  --t-bg2: #ffdcb0;
  --t-bg0: #d4d9ff;
  --t-ink: #1c1838;
  --t-muted: #37305e;
}
/* the two web tools keep the colours of their own sites (DESIGN v2): car deep teal + lime, taqaud mint + deep green */
.app-car {
  --t-bg: #0e2a24;
  --t-bg2: #133a31;
  --t-ink: #ecfdf5;
  --t-muted: #b6d9c8;
  --t-link: #b8f36b;
  --t-chip: rgb(0 0 0 / 0.3);
}
.app-taqaud {
  --t-bg: #3ddbb0;
  --t-bg2: #2fc9a0;
  --t-ink: #07352b;
  --t-muted: #0b4a3a;
}
.app-headerhermit {
  --t-bg: #ffa066;
  --t-bg2: #ff8a4a;
  --t-ink: #2b1204;
  --t-muted: #4a2208;
}
@media (prefers-color-scheme: dark) {
  .app-sound-meter {
    --t-bg: #12605a;
    --t-bg2: #0d4843;
    --t-ink: #dcf8f3;
    --t-muted: #a8dcd4;
  }
  .app-amber-tasbih {
    --t-bg: #3b2d0c;
    --t-bg2: #271d07;
    --t-ink: #fbe6b8;
    --t-muted: #dcc08a;
  }
  .app-candela {
    --t-bg: #2b2450;
    --t-bg0: #1f1f48;
    --t-bg2: #3a2812;
    --t-ink: #ebe8ff;
    --t-muted: #c7c1ea;
  }
  .app-headerhermit {
    --t-bg: #6b2a14;
    --t-bg2: #4d1d0c;
    --t-ink: #ffe3d1;
    --t-muted: #f5bd9c;
  }
  .app-sound-meter,
  .app-amber-tasbih,
  .app-candela,
  .app-headerhermit {
    --t-chip: rgb(0 0 0 / 0.3);
  }
  .apps-hero .h1-accent {
    color: #a5b4fc;
  }
}
.app-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  border-radius: 28px;
  background-color: var(--t-bg);
  background-image: var(--t-grad, linear-gradient(165deg, var(--t-bg) 0%, var(--t-bg2) 100%));
  color: var(--t-ink);
}
/* Candela's three-stop gradient is a token, so only tiles, the product hero and screen panels paint it */
.app-candela {
  --t-grad: linear-gradient(165deg, var(--t-bg0) 0%, var(--t-bg) 45%, var(--t-bg2) 100%);
}
/* clip, not hidden: a hidden box is still a scroll container, so scrollIntoView / focus / find-in-page could scroll the
   screen inside its tile (seen in e2e 2026-09-30). Browsers without `clip` keep `hidden`. */
@supports (overflow: clip) {
  .app-tile,
  .phone {
    overflow: clip;
  }
}
@media (prefers-color-scheme: dark) {
  .app-tile {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  }
}
.app-copy {
  padding: 24px 24px 0;
}
@media (min-width: 960px) {
  .app-copy {
    padding: 28px 28px 0;
  }
}
.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.app-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.35);
}
.app-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--t-chip, rgb(255 255 255 / 0.72));
  color: var(--t-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.page .app-name {
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.app-where {
  margin: 0 0 12px;
  color: var(--t-muted);
  font-size: 13px;
  font-weight: 600;
}
.app-blurb {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
}
.app-facts {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.app-facts li {
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--t-ink) 24%, transparent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
}
/* the Google Play badge keeps ≥ ¼ of its height (10px) clear on every side: the row gap is 16px */
.app-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.play-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 7px;
}
.play-badge img {
  display: block;
  width: auto;
  height: 40px;
}
.app-langs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -6px 0 18px;
  color: var(--t-muted);
  font-size: 13px;
  font-weight: 600;
}
.app-langs .icon {
  flex: none;
  width: 15px;
  height: 15px;
}
.app-test {
  margin: 0;
  font-size: 14px;
}
.app-test a {
  color: var(--t-ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.app-test a:hover {
  color: var(--t-ink);
  text-decoration-thickness: 2px;
}
/* the real screen, in a drawn phone frame that runs off the bottom of the tile */
.app-screen {
  position: relative;
  flex: 1 0 260px;
  margin-top: 8px;
}
.phone {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 224px;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 30px 30px 0 0;
  background: #000;
  /* the bezel is a shadow, not a border, so the screen keeps its exact 920:1910 ratio */
  box-shadow:
    0 0 0 8px #0b0d10,
    0 28px 56px -12px rgb(0 0 0 / 0.45);
}
.app-screen-img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 760px) {
  .app-wide {
    flex-direction: row;
  }
  .app-wide .app-copy {
    flex: 1 1 54%;
    padding: 32px 12px 32px 32px;
  }
  .page .app-wide .app-name {
    font-size: 40px;
  }
  .app-wide .app-screen {
    flex: 0 0 46%;
    margin: 0;
  }
  /* sized from the tile's height (so it always runs off the bottom, however tall the row is) and anchored left,
     so a tall row lets it run off the right edge too */
  .app-wide .phone {
    top: 48px;
    bottom: -48px;
    left: 28px;
    width: auto;
    aspect-ratio: 920 / 1910;
    transform: none;
  }
  .app-wide .app-screen-img {
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
}
/* tall tiles: the screen leads; facts read as one quiet line instead of chips */
.page .app-tall .app-name {
  font-size: 28px;
}
.app-tall .app-blurb {
  font-size: 15px;
}
.app-tall .app-facts {
  flex-direction: column;
  gap: 2px;
  color: var(--t-muted);
}
.app-tall .app-facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: 0;
}
.app-tall .app-facts li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-2px);
}
/* phones: a compact status grid so the first tile starts above the fold */
@media (max-width: 599px) {
  .apps-hero .eyebrow {
    display: none;
  }
  .page .apps-hero h1 {
    font-size: 38px;
  }
  .apps-lead {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.55;
  }
  .apps-hero-grid {
    gap: 14px;
  }
  .app-blurb {
    font-size: 15px;
  }
  .apps-glance {
    padding: 12px 14px;
    border-radius: 16px;
  }
  .glance-list li {
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
  }
  .glance-dev {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 13px;
    line-height: 1.45;
  }
}

/* ---------- /apps/ — full page: links, web-tool tiles, the extension's browser window ---------- */
.page .app-name a {
  color: inherit;
  text-decoration: none;
}
.page .app-name a:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.app-car .app-name a {
  color: var(--t-link);
}
.app-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--t-ink) 35%, transparent);
  border-radius: 999px;
  color: var(--t-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.app-more:hover {
  color: var(--t-ink);
  background: color-mix(in srgb, var(--t-ink) 10%, transparent);
}
.app-more .icon {
  width: 16px;
  height: 16px;
}
.app-open {
  border-color: var(--t-link, var(--t-ink));
  color: var(--t-link, var(--t-ink));
}
.app-open:hover {
  color: var(--t-link, var(--t-ink));
}
.app-test + .app-actions {
  margin-top: 12px;
}
.app-guides {
  margin: 12px 0 0;
  color: var(--t-muted);
  font-size: 13px;
  font-weight: 600;
}
.app-guides a {
  color: var(--t-ink);
}
.app-guides a:hover {
  color: var(--t-ink);
}
/* the extension: a browser window instead of a phone, under the copy, running off the bottom and right edges */
.browser {
  position: absolute;
  top: 16px;
  left: 20px;
  width: 520px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.12),
    0 28px 56px -16px rgb(0 0 0 / 0.4);
}
.browser-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  background: #e8eaed;
}
.browser-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c4c7cc;
}
.frame-browser .app-screen {
  /* a fixed-height area pinned to the tile's bottom: the window (≥ 312px tall) always runs off it, however tall the
     copy above gets (the copy grew when the store badge replaced the in-review note, 2026-09-30) */
  flex: 0 0 280px;
  margin-top: auto;
}
@media (min-width: 760px) {
  .app-wide.frame-browser {
    flex-direction: column;
  }
  .app-wide.frame-browser .app-copy {
    flex: none;
    padding: 28px 28px 0;
  }
  /* 360px: the 378px window (640 wide) still overhangs by 34px, and less tile is left empty above it */
  .app-wide.frame-browser .app-screen {
    flex: 0 0 360px;
  }
  .frame-browser .browser {
    left: 28px;
    width: 640px;
  }
}
@supports (overflow: clip) {
  .browser {
    overflow: clip;
  }
}

/* ---------- product pages (/apps/<slug>.html) ---------- */
.product-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 0;
  background-color: var(--t-bg);
  background-image: var(--t-grad, linear-gradient(165deg, var(--t-bg) 0%, var(--t-bg2) 100%));
  color: var(--t-ink);
}
@supports (overflow: clip) {
  .product-hero {
    overflow: clip;
  }
}
.product-hero-grid {
  display: grid;
  gap: 8px;
}
@media (min-width: 960px) {
  .product-hero {
    padding-top: 48px;
  }
  .product-hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
    min-height: 520px;
  }
}
.product-hero-copy {
  padding-bottom: 40px;
}
.product-hero .crumbs,
.product-hero .crumbs a {
  color: var(--t-ink);
}
.page .product-hero h1 {
  margin: 0 0 6px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
@media (min-width: 960px) {
  .page .product-hero h1 {
    font-size: 56px;
  }
}
.product-lead {
  max-width: 56ch;
  margin: 0 0 20px;
  font-size: 18px;
}
.product-screen {
  min-height: 320px;
}
.product-screen .phone {
  width: 240px;
}
@media (min-width: 960px) {
  .product-screen .phone {
    top: 0;
    width: 300px;
  }
  /* wide enough (≥ the band's 520px min height) to run off the band's bottom and the page's right edge */
  .product-screen .browser {
    top: 0;
    left: 0;
    width: 960px;
  }
}
.product-note {
  padding: 12px 16px;
  border: 1px solid var(--warn-line);
  border-radius: var(--r-input);
  background: var(--warn-bg);
}
.product-shots {
  margin-top: 48px;
}
.page .product-shots h2 {
  margin: 0 0 20px;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.page .shots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.page .shots-browser {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
}
.page .shots > li {
  margin: 0;
}
.shot {
  margin: 0;
}
.shot .phone,
.shot .browser {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}
.shot .phone {
  width: 224px;
  margin: 28px auto 0;
}
.shot .browser {
  width: 100%;
  border-radius: 12px;
}
.shot-frame {
  border-radius: 20px;
  background-color: var(--t-bg);
  background-image: var(--t-grad, linear-gradient(165deg, var(--t-bg) 0%, var(--t-bg2) 100%));
}
/* phones sit on the product's colour and run off the panel's bottom edge, like the tiles */
.shots-phone .shot-frame {
  height: 420px;
  overflow: hidden;
}
.shots-browser .shot-frame {
  padding: 16px;
}
@supports (overflow: clip) {
  .shots-phone .shot-frame {
    overflow: clip;
  }
}
.shot figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.product-more {
  margin: 48px 0 0;
}
.page .product-more ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page .product-more li {
  margin: 0;
}
.product-more a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  text-decoration: none;
}

/* footer: brand · Tools · Apps · Guides · LoopNode */
@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr 0.8fr;
  }
}

/* product hero: the status chip sits beside the icon, not at the far edge */
.product-hero .app-top {
  justify-content: flex-start;
}

/* the Chrome Web Store badge: Google's bordered PNG, only resized (170×48 = the 340×96 file at 2x) */
.cws-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
}
.cws-badge img {
  display: block;
  width: auto;
  height: 48px;
}

/* ---------- Responsive audit (2026-10-01): every page × 23 viewports (280 → 2560, phone landscape) ---------- */
/* Header: six nav links (Apps joined) no longer fit beside the logo below ~600px. Below 640px the nav takes its own
   row under the logo + wordmark; below 380px the links tighten; below 340px they form a 3 × 2 grid (no orphan). */
@media (max-width: 639px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 0;
    padding-block: 4px;
  }
  .site-header nav {
    width: 100%;
  }
  .site-header nav ul {
    justify-content: space-between;
  }
  .site-header nav a {
    padding: 0 6px;
    font-size: 14px;
  }
  .wordmark {
    display: inline;
  }
}
@media (max-width: 379px) {
  .site-header nav a {
    padding: 0 3px;
    font-size: 13px;
  }
}
@media (max-width: 339px) {
  .site-header nav ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 4px;
  }
  .site-header nav a {
    justify-content: center;
    width: 100%;
  }
}
/* Breadcrumb links are tap targets too: at least 24px tall (WCAG 2.5.8). */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
/* A long address or URL in a lead never runs off a narrow screen. */
.page-lead a,
.apps-lead a,
.product-lead a {
  overflow-wrap: anywhere;
}
/* Home hero, 960–1279px: the Arabic card covered the car card's "$10,000". It drops its two small tiles there and
   sits below the car card's number. */
@media (min-width: 960px) and (max-width: 1279px) {
  .sc-taqaud .sc-tiles {
    display: none;
  }
  .showcase {
    min-height: 640px;
  }
}
/* Phones under 400px: the two hero buttons stay side by side (the first tool card must start above a 390×844 fold,
   review 1 #8) with slightly smaller text, so "How we build them" fits on one line; under 360px they stack. */
@media (max-width: 399px) {
  .hero-cta .btn {
    padding: 0 8px;
    font-size: 14px;
    white-space: nowrap;
  }
}
@media (max-width: 359px) {
  .hero-cta {
    flex-wrap: wrap;
  }
  .hero-cta .btn {
    flex: 1 1 100%;
  }
}
/* "a year" never splits after "a" in the car preview card. */
.sc-big .sc-small {
  white-space: nowrap;
}
/* Very narrow phones (< 360px): the two preview cards stack; the metric numbers shrink. */
@media (max-width: 359px) {
  .showcase {
    grid-template-columns: minmax(0, 1fr);
  }
  .metrics > div {
    padding: 18px 14px;
  }
  .metrics dd {
    font-size: 34px;
  }
}
/* Guide tables on phones: tighter cells so four money columns fit; the wide VIN comparison becomes labelled cards. */
@media (max-width: 600px) {
  .guide table {
    font-size: 14px;
  }
  .guide th,
  .guide td {
    padding: 8px 9px;
  }
  .guide caption {
    padding: 10px 10px 6px;
  }
}
@media (max-width: 640px) {
  .guide table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .guide table.stack,
  .guide table.stack tbody,
  .guide table.stack tr {
    display: block;
    width: 100%;
  }
  .guide table.stack tr + tr {
    border-top: 1px solid var(--border);
  }
  .guide table.stack td {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
    gap: 10px;
    border-top: 0;
    padding: 6px 12px;
    background: none;
    overflow-wrap: anywhere;
  }
  .guide table.stack tr:first-child td:first-child {
    padding-top: 10px;
  }
  .guide table.stack td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
  }
}
/* the four-column money table fits down to 430px; below that it stacks the same way */
@media (max-width: 429px) {
  .guide table.stack-narrow thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .guide table.stack-narrow,
  .guide table.stack-narrow tbody,
  .guide table.stack-narrow tr {
    display: block;
    width: 100%;
  }
  .guide table.stack-narrow tr + tr {
    border-top: 1px solid var(--border);
  }
  .guide table.stack-narrow td {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
    gap: 10px;
    border-top: 0;
    padding: 6px 12px;
    background: none;
    overflow-wrap: anywhere;
  }
  .guide table.stack-narrow tr:first-child td:first-child {
    padding-top: 10px;
  }
  .guide table.stack-narrow td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
  }
}
/* Small phones: long guide and page titles at 34px instead of 42px (6–7 lines at 320px). */
@media (max-width: 379px) {
  .page .page-hero h1 {
    font-size: 34px;
  }
}
/* Under 340px the nav is two rows, so the header (≈ 116px) no longer follows the page: it would take a fifth of a
   568px-tall screen. It stays sticky everywhere else. */
@media (max-width: 339px) {
  .site-header {
    position: static;
  }
}
/* Tablets (760–1023px): five footer columns were ~120px wide and wrapped links onto three lines; the brand block now
   takes its own row above the four link columns. */
@media (min-width: 760px) and (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}
/* Stacked tables: the caption spans the card (it was squeezed into a narrow column); in the VIN comparison each label
   sits above its value, so a 17-character VIN never wraps. */
@media (max-width: 640px) {
  .guide table.stack caption {
    display: block;
  }
  .guide table.stack td {
    display: block;
  }
  .guide table.stack td::before {
    display: block;
    margin-bottom: 2px;
  }
}
@media (max-width: 429px) {
  .guide table.stack-narrow caption {
    display: block;
  }
}

/* ---------- SEO pass 1 (2026-10-02): body links the homepage was missing ---------- */
.band-link {
  margin: 32px 0 0;
  font-weight: 600;
}
.band-dark .band-link a {
  color: #ffffff;
  text-decoration-color: rgb(255 255 255 / 0.5);
}
.band-dark .band-link a:hover {
  color: #c7d2fe;
}
.tools-more {
  max-width: 68ch;
  margin: 20px 0 0;
  color: var(--muted);
}
.tools-more a {
  font-weight: 600;
}
/* /guides/: the cards sit under topic headings (AUDIT I-1) */
.page .guides-list .guide-group {
  margin: 28px 0 12px;
  font-size: 20px;
}
.page .guides-list .guide-group:first-child {
  margin-top: 0;
}
.page .guides-list .guide-list + .guide-group {
  margin-top: 32px;
}