/* ---------- public landing page ----------
   Standalone on top of style.css tokens only. It does NOT reuse .app/.topbar/
   .btn from the panel: this page is seen by people who are not customers, and
   tying its look to the panel chrome would mean every panel tweak silently
   reshapes the front door. Everything is prefixed .ld-. */

.ld-body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow-x: hidden;
}

/* Fixed atmosphere - painting a large gradient on every scroll frame is the
   usual way a "premium" background ends up feeling cheap on a laptop. */
.ld-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(110, 168, 254, .16), transparent 62%),
    radial-gradient(900px 560px at 12% 8%, rgba(167, 139, 250, .13), transparent 60%),
    var(--bg);
}
.ld-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(120, 140, 190, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 140, 190, .045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(closest-side at 50% 22%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 22%, #000 55%, transparent 100%);
}
.ld-orb {
  position: fixed; z-index: 0; pointer-events: none;
  width: 460px; height: 460px; border-radius: 50%;
  filter: blur(110px); opacity: .3;
}
/* transform-only animation: never touches layout, so it cannot cause jank */
.ld-orb-a { background: var(--accent-1); top: -160px; right: -120px; animation: ldFloatA 26s ease-in-out infinite; }
.ld-orb-b { background: var(--accent-2); bottom: -200px; left: -140px; animation: ldFloatB 32s ease-in-out infinite; }
@keyframes ldFloatA { 50% { transform: translate(-60px, 50px) scale(1.1); } }
@keyframes ldFloatB { 50% { transform: translate(70px, -50px) scale(1.08); } }

/* ---------- shared bits ---------- */
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px;
  border-radius: 11px;
  font-family: var(--font);
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--hover-tint);
  transition: all .2s var(--ease);
  white-space: nowrap;
}
.ld-btn:hover { border-color: var(--accent-1); transform: translateY(-1px); }
.ld-btn.primary {
  background: var(--accent-grad);
  border: none; color: var(--ink);
  box-shadow: 0 10px 26px -10px rgba(110, 168, 254, .6);
}
.ld-btn.primary:hover { filter: brightness(1.08); box-shadow: 0 14px 32px -10px rgba(110, 168, 254, .7); }
.ld-btn.ghost { background: transparent; }
.ld-btn.lg { padding: 14px 26px; font-size: 15px; border-radius: 13px; }
.ld-btn.full { width: 100%; }

/* ---------- nav ---------- */
.ld-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 26px;
  padding: 14px 32px;
  background: var(--chrome-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(120, 140, 190, .1);
}
.ld-brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 800; letter-spacing: -.3px;
  color: var(--text); text-decoration: none;
}
.ld-logo {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--accent-grad);
}
.ld-logo.sm { width: 24px; height: 24px; border-radius: 7px; }
.ld-brand.sm { font-size: 15px; }
.ld-links { display: flex; gap: 22px; margin-inline-start: auto; }
.ld-links a {
  font-size: 13.5px; font-weight: 500; color: var(--text-dim);
  text-decoration: none; transition: color .18s var(--ease);
}
.ld-links a:hover { color: var(--text); }
.ld-nav-cta { display: flex; gap: 9px; }

/* ---------- hero ---------- */
.ld-hero {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
  padding: 84px 24px 60px;
  text-align: center;
}
.ld-pill {
  display: inline-block; padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent-1);
  background: rgba(110, 168, 254, .09);
  border: 1px solid rgba(110, 168, 254, .26);
}
.ld-hero h1 {
  margin: 22px 0 18px;
  font-size: 52px; font-weight: 800; line-height: 1.32; letter-spacing: -1.4px;
}
/* Only the highlighted word is gradient-filled. Clipping the whole headline
   costs contrast on the parts that are meant to be read, not admired. */
.ld-hero h1 span { display: inline-block; }
.ld-hero h1 .ld-hl {
  background: var(--accent-grad-3);
  -webkit-background-clip: text; background-clip: text;
  /* -webkit-text-fill-color as well as color: with -webkit-background-clip
     Chrome paints glyphs from text-fill-color, and `color: transparent`
     alone can leave it inheriting an opaque value. */
  color: transparent; -webkit-text-fill-color: transparent;
}
.ld-sub {
  margin: 0 auto 30px; max-width: 640px;
  font-size: 16px; line-height: 2.1; color: var(--text-dim);
}
.ld-sub b { color: var(--text); font-weight: 700; }
.ld-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ld-hero-fine { margin: 16px 0 0; font-size: 12.5px; color: var(--text-faint); }

.ld-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  margin-top: 56px;
}
.ld-stats > div {
  padding: 18px 12px;
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  border: 1px solid var(--border-soft);
}
.ld-stats b {
  display: block; font-size: 27px; font-weight: 800; letter-spacing: -.6px;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.ld-stats span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-faint); }

/* ---------- section frame ---------- */
.ld-sec {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto;
  padding: 74px 24px;
}
.ld-sec-head { max-width: 660px; margin: 0 auto 44px; text-align: center; }
.ld-kicker {
  display: inline-block; margin-bottom: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: var(--accent-2);
}
.ld-sec-head h2 {
  margin: 0 0 14px;
  font-size: 33px; font-weight: 800; line-height: 1.45; letter-spacing: -.7px;
}
.ld-sec-head p { margin: 0; font-size: 14.5px; line-height: 2.05; color: var(--text-dim); }
.ld-sec-head b { color: var(--text); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ld-orb { animation: none; }
}

/* ---------- how it works ---------- */
.ld-flow { display: flex; align-items: stretch; gap: 0; margin-bottom: 44px; }
.ld-fnode {
  position: relative; flex: 1 1 0; min-width: 0;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.ld-fnode.ok { border-color: rgba(52, 211, 153, .3); background: linear-gradient(180deg, var(--green-bg), var(--surface)); }
.ld-fbadge {
  position: absolute; top: -12px; inset-inline-start: 22px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--ink);
  background: var(--accent-grad);
}
.ld-fic {
  width: 42px; height: 42px; display: grid; place-items: center;
  margin-bottom: 14px; border-radius: 12px;
  color: var(--accent-1);
  background: rgba(110, 168, 254, .09);
  border: 1px solid rgba(110, 168, 254, .22);
}
.ld-fnode.ok .ld-fic { color: var(--green); background: var(--green-bg); border-color: rgba(52, 211, 153, .3); }
.ld-fnode b { display: block; margin-bottom: 8px; font-size: 15.5px; font-weight: 700; }
.ld-fnode p { margin: 0; font-size: 13.3px; line-height: 2; color: var(--text-dim); }
.ld-fline { flex: 0 0 34px; align-self: center; height: 1px; background: linear-gradient(90deg, var(--border), transparent, var(--border)); }

.ld-diagram {
  display: flex; align-items: center; gap: 0;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--code-bg);
  border: 1px solid var(--border);
}
.ld-dbox {
  flex: 1 1 0; min-width: 0; padding: 16px; text-align: center;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.ld-dbox.mid { border-color: rgba(110, 168, 254, .3); background: rgba(110, 168, 254, .07); }
.ld-dbox span { display: block; font-size: 11.5px; color: var(--text-faint); }
.ld-dbox b { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; }
.ld-dpipe { flex: 0 0 120px; position: relative; text-align: center; }
.ld-dpipe i {
  display: block; height: 2px; margin-bottom: 7px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  opacity: .55;
}
.ld-dpipe span { font-size: 10.5px; color: var(--text-faint); }

/* ---------- server check ---------- */
.ld-check-sec { scroll-margin-top: 70px; }
.ld-check {
  max-width: 720px; margin: 0 auto;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--card-glass);
  border: 1px solid rgba(120, 140, 190, .16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.ld-check-form {
  display: grid;
  grid-template-columns: 1fr 190px auto;
  gap: 12px;
  align-items: end;
}
.ld-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ld-field-label { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.ld-field-label i { font-style: normal; color: var(--text-faint); font-weight: 400; }
.ld-check-form input {
  width: 100%; min-width: 0;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  font-family: "SF Mono", ui-monospace, Consolas, monospace;
  font-size: 14.5px;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ld-check-form input::placeholder { color: var(--text-faint); }
.ld-check-form input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(110, 168, 254, .14); }
.ld-check-form button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  font-family: var(--font); font-size: 14px; font-weight: 700;
  color: var(--ink); background: var(--accent-grad);
  border: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(110, 168, 254, .8);
  transition: filter .18s var(--ease), transform .18s var(--ease);
}
.ld-check-form button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ld-check-form button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.ld-check-hint { margin: 12px 2px 0; font-size: 12px; line-height: 1.95; color: var(--text-faint); }
.ld-check-hint i { font-style: normal; color: var(--accent-1); }

.ld-check-out { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.ld-verdict {
  padding: 14px 16px; margin-bottom: 16px;
  border-radius: var(--radius-md);
  font-size: 13.8px; line-height: 2; font-weight: 500;
}
.ld-verdict.busy { color: var(--text-dim); background: var(--hover-tint); border: 1px solid var(--border-soft); }
.ld-verdict.good { color: var(--green); background: var(--green-bg); border: 1px solid rgba(52, 211, 153, .3); }
.ld-verdict.warn { color: var(--amber); background: var(--amber-bg); border: 1px solid rgba(251, 191, 36, .3); }
.ld-verdict.bad  { color: var(--red);   background: var(--red-bg);   border: 1px solid rgba(248, 113, 113, .3); }

.ld-check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ld-check-grid > div {
  padding: 13px; text-align: center;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.ld-check-grid span { display: block; font-size: 11px; color: var(--text-faint); }
.ld-check-grid b {
  display: block; margin-top: 5px;
  font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ld-check-grid b.good { color: var(--green); }
.ld-check-grid b.warn { color: var(--amber); }
.ld-check-grid b.bad  { color: var(--red); }

.ld-check-next {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px;
}
.ld-check-next:empty { display: none; }
.ld-check-next span { font-size: 13px; color: var(--text-dim); margin-inline-end: auto; }

/* ---------- engines ---------- */
.ld-engines { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ld-eng {
  position: relative; overflow: hidden;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.ld-eng::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .8;
}
.ld-eng:hover { transform: translateY(-3px); border-color: var(--accent); }
.ld-eng b { display: block; font-size: 17px; font-weight: 800; color: var(--accent); letter-spacing: -.2px; }
.ld-etag {
  display: inline-block; margin: 8px 0 10px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--text-dim); background: var(--hover-tint);
  border: 1px solid var(--border-soft);
}
.ld-eng p { margin: 0; font-size: 13.2px; line-height: 2; color: var(--text-dim); }

/* ---------- features ---------- */
.ld-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ld-feat {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
/* The auto-failover card is the actual differentiator, so it gets the width
   and the warm accent instead of sitting in the grid like a bullet point. */
.ld-feat.hero {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(251, 191, 36, .07), rgba(167, 139, 250, .05)), var(--surface);
  border-color: rgba(251, 191, 36, .26);
}
.ld-fi {
  width: 42px; height: 42px; display: grid; place-items: center;
  margin-bottom: 15px; border-radius: 12px;
  color: var(--accent-1); background: rgba(110, 168, 254, .09);
  border: 1px solid rgba(110, 168, 254, .22);
}
.ld-fi.amber { color: var(--amber); background: var(--amber-bg); border-color: rgba(251, 191, 36, .28); }
.ld-feat b { display: block; margin-bottom: 9px; font-size: 15.5px; font-weight: 700; }
.ld-feat p { margin: 0; font-size: 13.4px; line-height: 2.05; color: var(--text-dim); }
.ld-feat p b { display: inline; color: var(--text); }

/* ---------- pricing ---------- */
.ld-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; align-items: start; }
.ld-plan {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.ld-plan.featured {
  border-color: rgba(110, 168, 254, .4);
  background: linear-gradient(180deg, rgba(110, 168, 254, .07), var(--surface));
  box-shadow: 0 20px 50px -22px rgba(110, 168, 254, .4);
}
.ld-plan-badge {
  position: absolute; top: -11px; inset-inline-start: 50%; transform: translateX(50%);
  padding: 4px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--ink);
  background: var(--accent-grad);
  white-space: nowrap;
}
.ld-plan h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.ld-price { font-size: 27px; font-weight: 800; letter-spacing: -.6px; }
.ld-price i { font-style: normal; font-size: 17px; font-weight: 600; color: var(--text-faint); }
.ld-plan-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-faint); }
.ld-plan-list { margin: 18px 0; padding: 0; list-style: none; }
.ld-plan-list li {
  position: relative; padding: 0 22px 0 0; margin-bottom: 9px;
  font-size: 13.2px; color: var(--text-dim);
}
.ld-plan-list li::before {
  content: ""; position: absolute; top: 6px; right: 3px;
  width: 6px; height: 10px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.ld-plans-fine { margin: 22px 0 0; text-align: center; font-size: 12.8px; color: var(--text-faint); }

/* ---------- faq ---------- */
.ld-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 9px; }
.ld-faq details {
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.ld-faq summary {
  padding: 16px 20px;
  font-size: 14.2px; font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-inline-end: 44px;
  transition: color .18s var(--ease);
}
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary:hover { color: var(--accent-1); }
.ld-faq summary::after {
  content: ""; position: absolute; top: 21px; inset-inline-end: 20px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.ld-faq details[open] summary::after { transform: rotate(-135deg); }
.ld-faq p { margin: 0; padding: 0 20px 18px; font-size: 13.4px; line-height: 2.05; color: var(--text-dim); }

/* ---------- final cta + footer ---------- */
.ld-final {
  position: relative; z-index: 1;
  max-width: 700px; margin: 0 auto;
  padding: 70px 24px 84px;
  text-align: center;
}
.ld-final h2 { margin: 0 0 12px; font-size: 32px; font-weight: 800; letter-spacing: -.7px; }
.ld-final p { margin: 0 0 26px; font-size: 14.5px; line-height: 2; color: var(--text-dim); }

.ld-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto;
  padding: 26px 24px 40px;
  border-top: 1px solid var(--border-soft);
}
.ld-foot > div { display: flex; align-items: center; gap: 12px; }
.ld-foot > div span { font-size: 12px; color: var(--text-faint); }
.ld-foot nav { display: flex; gap: 20px; }
.ld-foot nav a { font-size: 12.5px; color: var(--text-dim); text-decoration: none; }
.ld-foot nav a:hover { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ld-hero h1 { font-size: 38px; letter-spacing: -.9px; }
  .ld-sec-head h2 { font-size: 26px; }
  /* Three side-by-side steps become unreadable slivers; stack and drop the
     connectors, which only mean anything horizontally. */
  .ld-flow { flex-direction: column; gap: 26px; }
  .ld-fline { display: none; }
  .ld-diagram { flex-direction: column; gap: 12px; }
  .ld-dpipe { flex: 0 0 auto; width: 100%; }
  .ld-dpipe i { width: 2px; height: 26px; margin: 0 auto 5px; background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); }
  .ld-dbox { width: 100%; }
  .ld-feat.hero { grid-column: span 1; }
  .ld-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .ld-nav { padding: 12px 16px; gap: 12px; }
  /* The in-page links do not fit next to the CTAs; the CTAs are what matter
     on a phone, and every section is still reachable by scrolling. */
  .ld-links { display: none; }
  .ld-nav-cta { margin-inline-start: auto; }
  .ld-hero { padding: 52px 18px 44px; }
  .ld-hero h1 { font-size: 30px; line-height: 1.4; }
  .ld-sub { font-size: 14.5px; }
  .ld-sec { padding: 52px 18px; }
  .ld-check { padding: 20px 16px; }
  .ld-check-form { grid-template-columns: 1fr; }
  .ld-check-grid { grid-template-columns: repeat(2, 1fr); }
  .ld-final h2 { font-size: 25px; }
  .ld-foot { justify-content: center; text-align: center; }
}


/* ---------- public status page ---------- */
.st-wrap { max-width: 780px; }
.st-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 28px; margin-bottom: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.st-hero.ok   { border-color: rgba(52,211,153,.32); background: linear-gradient(135deg, var(--green-bg), var(--surface)); }
.st-hero.warn { border-color: rgba(251,191,36,.32); background: linear-gradient(135deg, var(--amber-bg), var(--surface)); }
.st-hero.bad  { border-color: rgba(248,113,113,.32); background: linear-gradient(135deg, var(--red-bg), var(--surface)); }
.st-hero h1 { margin: 0 0 5px; font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.st-hero p { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.9; }

.st-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--text-faint); }
.st-dot.ok   { background: var(--green); box-shadow: 0 0 0 0 rgba(52,211,153,.55); animation: stPulse 2.2s infinite; }
.st-dot.warn { background: var(--amber); }
.st-dot.bad  { background: var(--red); }
@keyframes stPulse {
  70%  { box-shadow: 0 0 0 12px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@media (prefers-reduced-motion: reduce) { .st-dot.ok { animation: none; } }

.st-card { padding: 6px 20px; }
.st-row {
  display: grid; grid-template-columns: 1fr auto 90px;
  gap: 12px; align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
}
.st-row:last-child { border-bottom: 0; }
.st-head { font-size: 11.5px; color: var(--text-faint); padding: 12px 0 8px; }
.st-pill {
  padding: 3px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; justify-self: start;
}
.st-pill.ok  { color: var(--green); background: var(--green-bg); border: 1px solid rgba(52,211,153,.3); }
.st-pill.bad { color: var(--red); background: var(--red-bg); border: 1px solid rgba(248,113,113,.3); }
.st-ms { text-align: left; font-size: 11.5px; color: var(--text-faint); font-family: ui-monospace, "SF Mono", monospace; }
.st-note { margin-top: 18px; font-size: 12.3px; line-height: 2; color: var(--text-faint); text-align: center; }
.st-note b { color: var(--text-dim); }

/* ---------- money-back guarantee ---------- */
.ld-guarantee {
  display: flex; align-items: flex-start; gap: 16px;
  max-width: 620px; margin: 26px auto 0;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--green-bg), transparent), var(--surface);
  border: 1px solid rgba(52, 211, 153, .3);
}
.ld-guarantee-ic {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 13px;
  color: var(--green); background: var(--green-bg);
  border: 1px solid rgba(52, 211, 153, .3);
}
.ld-guarantee b { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 800; }
.ld-guarantee p { margin: 0; font-size: 13.2px; line-height: 2; color: var(--text-dim); }

/* ═══════════════ premium layer ═══════════════
   Every animation below is transform/opacity only. Anything that animates
   layout (width, top, margin) forces reflow on each frame and is what makes
   an "animated" page feel cheap on a mid-range phone. */

/* ---- scroll progress ---- */
.ld-progress {
  position: fixed; top: 0; inset-inline-start: 0; z-index: 60;
  height: 2px; width: 100%;
  background: var(--accent-grad-3);
  transform: scaleX(0); transform-origin: right center;
  will-change: transform;
}

/* ---- entrance, staggered by --d ---- */
.ld-in {
  opacity: 0;
  transform: translateY(16px);
  animation: ldIn .7s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes ldIn { to { opacity: 1; transform: none; } }

/* ---- hero refinements ---- */
.ld-hero h1 span { display: inline-block; }
/* NO background-position animation here. Animating the background of an
   element that is also -webkit-background-clip: text makes Chrome render the
   glyphs fully transparent - the word simply vanishes and leaves a gap in the
   headline. Found exactly that way. The headline gets its life from the
   staggered entrance instead. */

.ld-pill { display: inline-flex; align-items: center; gap: 8px; }
.ld-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(52,211,153,.6);
  animation: ldBeat 2.4s infinite;
}
@keyframes ldBeat { 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* A single sweep of light across the primary CTA, on a long loop. Constant
   motion on a button reads as a banner ad; once every few seconds reads as
   quality. */
.ld-shine { position: relative; overflow: hidden; }
.ld-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: ldShine 5.5s ease-in-out infinite;
  animation-delay: 1.6s;
}
@keyframes ldShine { 0% { transform: translateX(-160%) skewX(-18deg); } 22%, 100% { transform: translateX(320%) skewX(-18deg); } }

/* ---- live tunnel visual ---- */
.ld-viz {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(120px, 1.4fr) 1fr;
  gap: 14px; align-items: center;
  margin-top: 52px;
  padding: 26px 24px 34px;
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}
.ld-viz-node {
  padding: 16px 14px; text-align: center;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.ld-viz-flag {
  display: inline-block; margin-bottom: 8px; padding: 2px 11px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: var(--accent-1); background: rgba(110,168,254,.12);
  border: 1px solid rgba(110,168,254,.26);
}
.ld-viz-flag.out { color: var(--green); background: var(--green-bg); border-color: rgba(52,211,153,.3); }
.ld-viz-node b { display: block; font-size: 14px; font-weight: 700; }
.ld-viz-node small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-faint); }

.ld-viz-pipe { position: relative; height: 46px; }
.ld-viz-track {
  position: absolute; top: 50%; inset-inline: 0; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  opacity: .35;
}
/* Packets travel right-to-left: the page is RTL and Iran is the right-hand
   node, so traffic must flow the way the eye reads the diagram.
   Animating `left` rather than a transform on purpose: an absolutely
   positioned element transformed by a percentage moves by ITS OWN width (7px
   here), not the pipe. With four 7px dots the layout cost is irrelevant,
   and the alternative needs a full-width wrapper per packet. */
.ld-packet {
  position: absolute; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-1);
  box-shadow: 0 0 12px var(--accent-1);
  animation: ldFlow 2.8s linear infinite;
  animation-delay: calc(var(--i, 0) * .7s);
}
@keyframes ldFlow {
  0%   { left: 100%; transform: translate(0, -50%) scale(.6); opacity: 0; }
  12%  { opacity: 1; transform: translate(0, -50%) scale(1); }
  88%  { opacity: 1; transform: translate(0, -50%) scale(1); }
  100% { left: 0%;   transform: translate(0, -50%) scale(.6); opacity: 0; }
}
.ld-viz-pipe { overflow: hidden; }

.ld-viz-label {
  position: absolute; top: calc(50% + 14px); inset-inline: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10.5px; color: var(--text-faint);
}
.ld-viz-watch {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 4px;
  font-size: 11.5px; color: var(--text-faint);
}
.ld-viz-watch i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: ldBeat 2.4s infinite;
}

/* ---- what makes it different ---- */
.ld-diff { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ld-dcard {
  position: relative; overflow: hidden;
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Glow follows the cursor. --mx/--my are set in landing.js; with no JS the
   fallback centre keeps the card looking deliberate rather than broken. */
.ld-dcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              rgba(110,168,254,.14), transparent 60%);
  opacity: 0; transition: opacity .25s var(--ease);
}
.ld-dcard:hover { transform: translateY(-4px); border-color: rgba(110,168,254,.4); box-shadow: var(--shadow-card-hover); }
.ld-dcard:hover::before { opacity: 1; }
.ld-dcard.accent { border-color: rgba(251,191,36,.3); background: linear-gradient(160deg, var(--amber-bg), var(--surface)); }
.ld-dcard.accent:hover { border-color: rgba(251,191,36,.55); }
.ld-dnum {
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  color: var(--accent-2); opacity: .8; margin-bottom: 10px;
}
.ld-dcard b { display: block; margin-bottom: 9px; font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.ld-dcard p { margin: 0; font-size: 13.3px; line-height: 2.05; color: var(--text-dim); }
.ld-dcard p b { display: inline; font-size: inherit; color: var(--text); }

@media (max-width: 900px) {
  /* The three-column diagram collapses to a vertical flow; a horizontal pipe
     30px wide communicates nothing. */
  .ld-viz { grid-template-columns: 1fr; gap: 10px; padding: 20px 16px 26px; }
  .ld-viz-pipe { height: 54px; }
  .ld-viz-track {
    inset-inline: auto; left: 50%; top: 0; bottom: 0; width: 2px; height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  }
  .ld-packet { inset-inline-end: auto; left: 50%; top: 0; animation-name: ldFlowV; }
  @keyframes ldFlowV {
    0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
    12%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    88%  { opacity: 1; }
    100% { transform: translate(-50%, 46px) scale(.6); opacity: 0; }
  }
  .ld-viz-label { position: static; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-in { opacity: 1; transform: none; animation: none; }
  .ld-packet, .ld-pill-dot, .ld-viz-watch i, .ld-shine::after,
  .ld-hero h1 .ld-hl { animation: none; }
  .ld-progress { display: none; }
}

/* The cursor glow is shared by the engine and feature cards too. */
.ld-eng, .ld-feat { position: relative; overflow: hidden; }
.ld-eng::after, .ld-feat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(110,168,254,.12), transparent 62%);
  opacity: 0; transition: opacity .25s var(--ease);
}
.ld-eng:hover::after, .ld-feat:hover::after { opacity: 1; }
.ld-feat { transition: transform .25s var(--ease), border-color .25s var(--ease); }
.ld-feat:hover { transform: translateY(-3px); border-color: rgba(110,168,254,.35); }

/* Plan cards lift too, so pricing does not feel like the one dead section. */
.ld-plan { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.ld-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* ---------- pooled route intelligence ---------- */
.ld-intel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ld-intel-col {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.ld-intel-col h3 {
  margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--text-dim);
}
.ld-ibar { margin-bottom: 15px; }
.ld-ibar:last-child { margin-bottom: 0; }
.ld-ibar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ld-ibar-top b { font-size: 13.5px; font-weight: 700; }
.ld-ibar-top span { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ld-ibar-top .good { color: var(--green); }
.ld-ibar-top .warn { color: var(--amber); }
.ld-ibar-top .bad  { color: var(--red); }
.ld-ibar-track {
  height: 6px; margin: 7px 0 4px;
  border-radius: 999px; overflow: hidden;
  background: var(--hover-tint);
  border: 1px solid var(--border-soft);
}
.ld-ibar-track i {
  display: block; height: 100%; border-radius: 999px;
  /* Grows from the right: the page is RTL, so a bar that fills leftwards
     reads backwards. */
  margin-inline-start: auto;
  transform-origin: right center;
  animation: ldGrow .9s var(--ease) both;
}
.ld-ibar-track i.good { background: var(--green); }
.ld-ibar-track i.warn { background: var(--amber); }
.ld-ibar-track i.bad  { background: var(--red); }
@keyframes ldGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ld-ibar small { font-size: 10.5px; color: var(--text-faint); }
.ld-iempty { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.ld-intel-note { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--text-faint); }

@media (max-width: 780px) {
  .ld-intel { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ld-ibar-track i { animation: none; } }

/* ---------- the customer's own status page (/s/<token>) ----------
   Deliberately one card and nothing else. Its readers are end users on a
   phone who want one answer: is it me, or is it them? */
.cs-wrap {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
}
.cs-theme { position: fixed; top: 18px; inset-inline-end: 18px; z-index: 30; }
.cs-card {
  width: 100%; max-width: 440px;
  padding: 40px 32px 32px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--card-glass);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  animation: lgRise .5s cubic-bezier(.22,.61,.36,1) both;
}
.cs-icon {
  width: 74px; height: 74px; margin: 0 auto 20px;
  display: grid; place-items: center; border-radius: 24px;
}
.cs-card.ok       { border-color: rgba(52,211,153,.34); }
.cs-card.ok .cs-icon       { color: var(--green); background: var(--green-bg); }
.cs-card.degraded { border-color: rgba(251,191,36,.34); }
.cs-card.degraded .cs-icon { color: var(--amber); background: var(--amber-bg); }
.cs-card.down     { border-color: rgba(248,113,113,.34); }
.cs-card.down .cs-icon     { color: var(--red); background: var(--red-bg); }
.cs-card.unknown .cs-icon  { color: var(--text-faint); background: var(--hover-tint); }

.cs-card h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.cs-brand { margin: 0 0 22px; font-size: 13px; color: var(--text-faint); }

.cs-meter { margin-bottom: 20px; }
.cs-meter-track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--hover-tint); border: 1px solid var(--border-soft);
}
.cs-meter-track i {
  display: block; height: 100%; border-radius: 999px;
  margin-inline-start: auto;
  background: var(--green);
  transform-origin: right center;
  animation: ldGrow .8s var(--ease) both;
}
.cs-card.degraded .cs-meter-track i { background: var(--amber); }
.cs-card.down .cs-meter-track i { background: var(--red); }
.cs-meter span { display: block; margin-top: 9px; font-size: 12.5px; color: var(--text-dim); }

.cs-uptime { margin: -10px 0 18px; font-size: 12px; color: var(--text-faint); }
.cs-uptime b { color: var(--text-dim); }

.cs-note { margin: 0 0 18px; font-size: 13.5px; line-height: 2.05; color: var(--text-dim); }

.cs-stat { margin: -4px 0 16px; }
.cs-stat b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.cs-stat span { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

.cs-leg {
  margin: 0 0 16px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  font-size: 12.8px; line-height: 1.95; color: var(--text-dim); text-align: start;
}
.cs-leg b { color: var(--text); }
.cs-leg small { color: var(--text-faint); font-size: 11px; }

.cs-quickfix {
  display: flex; gap: 12px; align-items: flex-start; text-align: start;
  margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(110,168,254,.08); border: 1px solid rgba(110,168,254,.25);
}
.cs-quickfix-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(110,168,254,.16); color: var(--accent-1);
  display: grid; place-items: center;
}
.cs-quickfix b { display: block; font-size: 12.8px; margin-bottom: 4px; }
.cs-quickfix p { margin: 0; font-size: 12.2px; line-height: 1.85; color: var(--text-dim); }

.cs-guide-btn { margin-bottom: 18px; }

.cs-time { margin: 0; font-size: 11.5px; color: var(--text-faint); }
.cs-foot { margin: 18px 0 0; font-size: 11.5px; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) { .cs-card, .cs-meter-track i { animation: none; } }

/* ---------- connect / setup guide page (/s/<token>/connect) ---------- */
.cg-wrap { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 70px 20px 60px; }
.cg-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--text-faint); text-decoration: none; margin-bottom: 16px;
}
.cg-back:hover { color: var(--accent-1); }
.cg-back svg { width: 14px; height: 14px; }
.cg-head { text-align: center; margin-bottom: 26px; }
.cg-head h1 { margin: 0 0 6px; font-size: 25px; font-weight: 800; letter-spacing: -.5px; }

.cg-section {
  position: relative; z-index: 1;
  background: var(--card-glass); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 22px; margin-bottom: 14px; box-shadow: var(--shadow-card);
  animation: lgRise .5s cubic-bezier(.22,.61,.36,1) both;
}
.cg-section h2 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }
.cg-sub { margin: 0 0 16px; font-size: 12.6px; color: var(--text-faint); line-height: 1.9; }

.cg-flight { display: flex; gap: 14px; align-items: flex-start; border-color: rgba(110,168,254,.3); }
.cg-flight-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
  background: rgba(110,168,254,.14); color: var(--accent-1);
  display: grid; place-items: center;
}
.cg-flight b { display: block; margin-bottom: 5px; font-size: 14px; }
.cg-flight p { margin: 0; font-size: 13px; line-height: 1.95; color: var(--text-dim); }

.cg-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; }
.cg-app {
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 16px 13px; text-align: center; display: flex; flex-direction: column; align-items: center;
}
.cg-app-ic {
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: 10px;
  display: grid; place-items: center; background: var(--accent-grad); color: var(--ink); font-size: 18px;
  font-weight: 800; letter-spacing: .2px;
}
.cg-app b { font-size: 13px; }
.cg-app > span { font-size: 10.6px; color: var(--text-faint); margin: 3px 0 8px; }

.cg-platform {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 12px; font-size: 12.5px; font-weight: 700; color: var(--text-dim);
}
.cg-platform:not(:first-child) { margin-top: 22px; }
.cg-platform svg { color: var(--text-faint); flex-shrink: 0; }
.cg-platform::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); margin-inline-start: 6px; }

.cg-app-tag {
  display: inline-block; margin: 1px 0 8px; padding: 2px 9px;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  color: var(--text-dim); background: var(--hover-tint); border: 1px solid var(--border-soft);
}
.cg-app-tag-rec { color: var(--green); background: var(--green-bg); border-color: rgba(52,211,153,.35); }
.cg-app p { margin: 0 0 12px; font-size: 11.6px; color: var(--text-dim); line-height: 1.8; min-height: 32px; }
.cg-app-links { display: grid; gap: 7px; width: 100%; }
.cg-app-links .btn { font-size: 11.8px; padding: 8px 10px; }
.cg-app-soon { opacity: .68; }
.cg-app-soon .cg-app-ic { background: var(--hover-tint); color: var(--text-faint); }

.cg-steps { margin: 0; padding: 0; list-style: none; counter-reset: cg-step; display: grid; gap: 13px; }
.cg-steps li {
  font-size: 13.2px; line-height: 1.95; color: var(--text-dim);
  padding-inline-start: 30px; position: relative;
}
.cg-steps li::before {
  content: counter(cg-step); counter-increment: cg-step;
  position: absolute; inset-inline-start: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-1); color: #fff;
  font-size: 11.3px; font-weight: 700; line-height: 20px; text-align: center;
}

.cg-apn b { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cg-apn-copy {
  font-size: 10.3px; color: var(--accent-1); cursor: pointer; background: none;
  border: none; padding: 0; font-family: inherit; font-weight: 600;
}
.cg-apn-copy:hover { text-decoration: underline; }

.cg-foot { text-align: center; margin-top: 8px; }

/* ---------- connectivity self-help, below the status card ---------- */
.cs-help { width: 100%; max-width: 440px; margin: 14px auto 0; }
.cs-help-body { padding: 0 20px 18px; }
.cs-help-body ol { margin: 0; padding: 0; list-style: none; counter-reset: cs-step; display: grid; gap: 14px; }
.cs-help-body li {
  font-size: 13.4px; line-height: 2.05; color: var(--text-dim);
  padding-inline-start: 26px; position: relative;
}
.cs-help-body li::before {
  content: counter(cs-step); counter-increment: cs-step;
  position: absolute; inset-inline-start: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-1); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.cs-help-line { margin: 8px 0 0; font-size: 13px; line-height: 1.95; }
.cs-apn { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.cs-apn > div { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.cs-apn b { display: block; margin-bottom: 6px; font-size: 12.8px; }
.cs-apn span { display: block; font-size: 11.8px; color: var(--text-dim); line-height: 1.9; }
.cs-apn code { font-family: ui-monospace, "SF Mono", Consolas, monospace; direction: ltr; unicode-bidi: embed; }
.cs-help-foot { margin: 16px 0 0; font-size: 12.6px; color: var(--text-faint); }

/* ---------- engine cards, detailed ---------- */
.ld-eng-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.ld-eng-head b { font-size: 17px; font-weight: 800; color: var(--accent); letter-spacing: -.2px; }
.ld-etag {
  padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  color: var(--text-dim); background: var(--hover-tint);
  border: 1px solid var(--border-soft);
}
.ld-etag.hot { color: var(--green); background: var(--green-bg); border-color: rgba(52,211,153,.35); }
.ld-eng p { margin: 0 0 12px; font-size: 13.2px; line-height: 2; color: var(--text-dim); }
.ld-eng-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-soft); padding-top: 11px; }
.ld-eng-list li {
  position: relative; padding: 0 15px 0 0; margin-bottom: 7px;
  font-size: 12.4px; line-height: 1.95; color: var(--text-faint);
}
.ld-eng-list li:last-child { margin-bottom: 0; }
.ld-eng-list li::before {
  content: ""; position: absolute; top: 9px; right: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .6;
}
/* "added" / "changed" are the whole point of this list, so they are the only
   coloured thing in it. */
.ld-eng-list i { font-style: normal; font-weight: 700; color: var(--accent-2); }
.ld-eng-list b { color: var(--text-dim); font-weight: 700; }
.ld-eng.xui {
  border-color: rgba(52,211,153,.34);
  background: linear-gradient(160deg, var(--green-bg), var(--surface));
}