/* ============================================================
   Pathbreak homepage (redesign live Nov 2, 2026)
   Built from docs/design-review-ai-tells-2026-11-02.md:
   neutral surfaces, one accent, one "fix" color, IBM Plex,
   left-aligned headings, no kickers, no icon tiles, no glow,
   no gradient outside the logo, no scroll reveal.
   The nav, footer and language switcher use the same markup as
   every other page (styles.css draws them the same way).
   Logical properties (inline-start/end) keep Arabic (RTL) correct.
   ============================================================ */

@font-face { font-family: 'Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/plex-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/plex-mono-500.woff2') format('woff2'); }

:root {
  --bg: #0f1013;
  --bg-2: #131418;
  --surface: #17181d;
  --surface-2: #1d1e24;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);

  --text: #ececef;
  --muted: #a6a7b0;
  --muted-2: #7f808a;

  --accent: #a597ff;      /* links, focus */
  --accent-btn: #6c5ce7;  /* primary button fill */
  --fix: #5fd69a;         /* the cut, the fix: used for nothing else */
  --risk: #ff6474;        /* the attacker's target in diagrams only */

  --sans: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1160px;
  --r: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: 0.88em; }
code { color: #d6d3ff; background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 4px; padding: 0.05em 0.35em; white-space: nowrap; }

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 12px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 12px; border-radius: var(--r); }

.wrap, .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 0.95rem/1 var(--sans); padding: 0.8rem 1.15rem;
  border-radius: var(--r); border: 1px solid transparent; white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent-btn); color: #fff; }
.btn--primary:hover { background: #7a6bf0; }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--secondary:hover { border-color: rgba(255,255,255,0.32); }
.btn--sm, .nav__cta .btn { padding: 0.55rem 0.9rem; font-size: 0.9rem; }

/* ---------- Nav (same markup as the rest of the site) ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(15,16,19,0.94); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand__mark { width: 34px; height: auto; }
.brand__word { font-family: var(--sans); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.02em; color: #99a1af; white-space: nowrap; }
.brand__word strong { color: #ffffff; font-weight: 700; }
.nav__links { display: flex; gap: 22px; margin-inline-start: 8px; }
.nav__links a { color: var(--muted); font-size: 0.95rem; white-space: nowrap; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); text-decoration: none; }
.nav__cta { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.nav__login { color: var(--muted); font-size: 0.95rem; white-space: nowrap; }
.nav__login:hover { color: var(--text); text-decoration: none; }
.nav__toggle { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--line-2); border-radius: var(--r); width: 40px; height: 36px; padding: 0; cursor: pointer; }
.nav__toggle span { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px auto; }
.nav__mobile { display: none; }

/* ---------- Language switcher (CSS-only <details>) ---------- */
.langsw { position: relative; display: inline-block; }
.langsw > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); padding: 5px 7px; border: 1px solid var(--line-2); border-radius: var(--r); white-space: nowrap; }
.langsw > summary::-webkit-details-marker { display: none; }
.langsw > summary::marker { content: ""; }
.langsw__globe { display: block; }
.langsw > summary::after { content: ""; width: 5px; height: 5px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); }
.langsw[open] > summary::after { transform: rotate(225deg) translateY(1px); }
.langsw > summary:hover, .langsw[open] > summary { color: var(--text); border-color: rgba(255,255,255,0.32); }
.langsw__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70; min-width: 178px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 6px; box-shadow: 0 16px 40px -18px rgba(0,0,0,0.8); }
.langsw__flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,0.22); }
.langsw__menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 4px; color: var(--muted); font-size: 0.9rem; }
.langsw__menu a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.langsw__menu a[aria-current="true"] { color: var(--text); background: rgba(165,151,255,0.1); font-weight: 500; }

/* ---------- Sections ---------- */
.sec { padding: 88px 0; border-top: 1px solid var(--line); }
.sec--alt { background: var(--bg-2); }
.sec__head { max-width: 720px; margin-bottom: 40px; }
.sec__head h2 { font-size: clamp(1.65rem, 2.6vw, 2.25rem); }
.sec__head p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: end; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 3.9rem); letter-spacing: -0.025em; line-height: 1.04; max-width: 13ch; }
.hero__lede { margin-top: 22px; font-size: 1.18rem; color: var(--muted); max-width: 52ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__aside { border-inline-start: 1px solid var(--line-2); padding-block: 4px; padding-inline: 24px 0; color: var(--muted); font-size: 0.98rem; }
.hero__aside p + p { margin-top: 12px; }
.hero__aside strong { color: var(--text); font-weight: 500; }

/* Hero chain diagram (horizontal on desktop, vertical on phones) */
.hero__chain { margin: 60px 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 32px 32px 22px; }
.hero__chain svg text { font-family: var(--sans); }
.hero__chain svg .t-mono { font-family: var(--mono); }
.hero__chain .chain-v { display: none; max-width: 460px; margin: 0 auto; }
.hero__chain figcaption { margin-top: 18px; color: var(--muted-2); font-size: 0.9rem; max-width: 80ch; }

/* ---------- Figures / screenshots ---------- */
.shot { margin: 0; }
.shot img { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; background: #000; }
.shot figcaption { margin-top: 12px; color: var(--muted-2); font-size: 0.88rem; max-width: 80ch; }

/* ---------- How a path is proven ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; }
.split--rev { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.checks { list-style: none; margin: 0; padding: 0; counter-reset: c; border-top: 1px solid var(--line); }
.checks li { counter-increment: c; display: grid; grid-template-columns: 2.2rem 1fr; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.checks li::before { content: counter(c, decimal-leading-zero); font-family: var(--mono); font-size: 0.85rem; color: var(--muted-2); padding-top: 2px; }
.checks b { font-weight: 500; color: var(--text); }
.checks .ans { grid-column: 2; color: var(--muted); }
.checks .ans strong { color: var(--text); font-weight: 500; }

.result { position: sticky; top: 88px; border: 1px solid var(--line-2); border-radius: 8px; padding: 24px 26px; background: var(--bg); }
.result h3 { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.result p { margin-top: 8px; color: var(--muted); font-size: 0.97rem; }
.result p strong { color: var(--text); font-weight: 500; }
.result__fix { margin-top: 20px; padding-inline-start: 14px; border-inline-start: 2px solid var(--fix); }
.result__fix h3 { color: var(--fix); }
.result__more { margin-top: 18px; }

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 64px; border-top: 1px solid var(--line-2); }
.step { padding-block: 18px 0; padding-inline: 0 20px; }
.step + .step { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.step__n { font-family: var(--mono); font-size: 0.8rem; color: var(--muted-2); }
.step h3 { font-size: 1.02rem; margin-top: 6px; }
.step p { margin-top: 6px; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

/* ---------- Plain lists with hairlines ---------- */
.points { display: grid; gap: 0; border-top: 1px solid var(--line); }
.points > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.points h3 { font-size: 1.05rem; }
.points p { margin-top: 6px; color: var(--muted); font-size: 0.97rem; }

.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 1px solid var(--line); }
.kind { padding: 22px 0; border-bottom: 1px solid var(--line); }
.kind h3 { font-size: 1.1rem; }
.kind p { margin-top: 8px; color: var(--muted); font-size: 0.97rem; }
.kind .tags { margin-top: 12px; color: var(--muted-2); }
.kind .tags .mono { font-size: 0.8rem; }
.roadmap { margin-top: 22px; color: var(--muted); font-size: 0.95rem; }
.roadmap strong { color: var(--text); font-weight: 500; }

.also { margin-top: 64px; scroll-margin-top: 88px; }
.also h3 { font-size: 1.3rem; }
.also p { margin-top: 12px; color: var(--muted); }
.also p + p { margin-top: 12px; }

/* ---------- Pricing ---------- */
.price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-2); border-radius: 8px; }
.price > div { padding: 28px 30px; }
.price > div + div { border-inline-start: 1px solid var(--line-2); }
.price h3 { font-size: 1.1rem; }
.price__big { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 12px; }
.price__big small { font-family: var(--sans); font-size: 0.95rem; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.price p { margin-top: 10px; color: var(--muted); font-size: 0.97rem; }
.price .btn { margin-top: 20px; }

/* ---------- People ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.person { padding-block: 24px; padding-inline: 0 32px; }
.person + .person { padding-inline-start: 32px; border-inline-start: 1px solid var(--line); }
.person h3 { font-size: 1.2rem; }
.person__role { color: var(--muted-2); font-size: 0.92rem; margin-top: 2px; }
.creds { list-style: none; margin: 14px 0 0; padding: 0; }
.creds li { color: var(--muted); font-size: 0.97rem; line-height: 1.55; padding: 8px 0; border-top: 1px solid var(--line); }
.creds li:first-child { border-top: 0; padding-top: 0; }
.person--photo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; }
.person__photo { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); background: #000; }

/* ---------- Trust ---------- */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--line); }
.trust > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.trust h3 { font-size: 1rem; }
.trust p { margin-top: 6px; color: var(--muted); font-size: 0.94rem; }
.more { margin-top: 24px; font-size: 0.97rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding-block: 18px; padding-inline: 0 32px; position: relative; font-weight: 500; font-size: 1.04rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; inset-inline-end: 4px; top: 16px; font-family: var(--mono); color: var(--muted-2); font-size: 1.1rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 20px; color: var(--muted); max-width: 75ch; }

/* ---------- Closing ---------- */
.close { padding: 88px 0; border-top: 1px solid var(--line); }
.close h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); max-width: 18ch; }
.close p { margin-top: 14px; color: var(--muted); max-width: 56ch; font-size: 1.08rem; }
.close .hero__ctas { margin-top: 26px; }

/* ---------- Footer (same markup as the rest of the site) ---------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 28px; font-size: 0.92rem; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer__tag { color: var(--muted); margin-top: 14px; max-width: 30ch; }
.footer h3 { font-size: 0.85rem; font-weight: 500; color: var(--text); margin-bottom: 12px; letter-spacing: 0; }
.footer__col a { display: block; color: var(--muted); padding: 3px 0; }
.footer__col a:hover { color: var(--text); text-decoration: none; }
.footer address { font-style: normal; color: var(--muted); line-height: 1.7; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a { color: var(--muted); display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--r); }
.footer__social a:hover { color: var(--text); border-color: rgba(255,255,255,0.32); }
.footer__social svg { width: 16px; height: 16px; fill: currentColor; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 0.85rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__legal a { color: var(--muted-2); }
.footer__legal a:hover { color: var(--text); text-decoration: none; }
.footer__bottom .mono { margin-inline-start: auto; color: var(--muted-2); }

/* ---------- Arabic (RTL) ---------- */
html[dir="rtl"] body { font-family: "Noto Sans Arabic", var(--sans); }
html[dir="rtl"] .brand__word, html[dir="rtl"] code, html[dir="rtl"] .mono { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .hero__chain svg, html[dir="rtl"] .shot img { direction: ltr; }
html[dir="rtl"] .hero__chain figcaption, html[dir="rtl"] .shot figcaption { direction: rtl; text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { gap: 16px; }
  .nav__inner { gap: 20px; }
}
@media (max-width: 1024px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav__mobile.is-open { display: grid; gap: 4px; padding: 8px 28px 20px; border-top: 1px solid var(--line); background: var(--bg); }
  .nav__mobile > a { color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--line); }
  .nav__mobile > a:hover { text-decoration: none; }
  .nav__mobile .btn { margin-top: 12px; border-bottom: 0; color: #fff; }
  .nav__mobile .langsw { display: block; margin: 6px 0; }
  .nav__mobile .langsw__menu { position: static; box-shadow: none; border: 0; background: transparent; padding: 4px 0 2px; min-width: 0; }
}
@media (max-width: 980px) {
  .hero__grid, .split, .split--rev { grid-template-columns: 1fr; gap: 40px; }
  .result { position: static; }
  .hero__aside { border-inline-start: 0; border-top: 1px solid var(--line-2); padding: 20px 0 0; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 16px 0; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero__chain { padding: 20px 16px 16px; }
  .hero__chain .chain-h { display: none; }
  .hero__chain .chain-v { display: block; }
  .wrap, .container { padding: 0 20px; }
  .sec, .close { padding: 64px 0; }
  .hero { padding-top: 44px; }
  .kinds, .people, .trust, .price { grid-template-columns: 1fr; }
  .person, .person + .person { padding: 20px 0; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .price > div + div { border-inline-start: 0; border-top: 1px solid var(--line-2); }
  code { white-space: normal; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom .mono { margin-inline-start: 0; }
}
html[dir="rtl"] .hero__chain figcaption, html[dir="rtl"] .shot figcaption { margin-left: auto; }

/* pathbreak-audit terminal block in #paths (Nov 3, 2026): real CLI output, the CLI's own colours */
.audit .term { margin-top: 24px; }
.term__out { margin: 0; padding: 20px 22px; background: #0b0c0e; border: 1px solid var(--line-2); border-radius: 8px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #c9cad1; white-space: pre; overflow-x: auto;
  direction: ltr; text-align: left; unicode-bidi: isolate; tab-size: 4; }
.term__out .t-m { color: #9aa1af; }
.term__out .t-i { color: #ecebf7; }
.term__out .t-v { color: #8b5cf6; }
.term__out .t-c { color: #22d3ee; }
.term__out .t-g { color: #34d399; }
.term__out .t-b { font-weight: 600; }
.audit p code { white-space: nowrap; }
@media (max-width: 640px) { .term__out { font-size: 11.5px; padding: 16px; } }

/* Launch banner (restored Nov 4, 2026, styled for the redesign) */
.announce { background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: .9rem; }
.announce.is-hidden { display: none; }
.announce__in { display: flex; align-items: center; gap: 12px; padding: 9px 44px 9px 0; position: relative; }
.announce__badge { flex: none; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line-2); border-radius: 100px; padding: 2px 9px; }
.announce__link { color: var(--text); font-weight: 600; text-decoration: none; }
.announce__link:hover { color: var(--accent); }
.announce__go { color: var(--accent); }
.announce__x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted-2); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 10px; border-radius: 6px; }
.announce__x:hover { color: var(--text); background: rgba(255,255,255,.06); }
html[dir="rtl"] .announce__in { padding: 9px 0 9px 44px; }
html[dir="rtl"] .announce__x { right: auto; left: 0; }
@media (max-width: 560px) { .announce { font-size: .82rem; } .announce__badge { display: none; } }