/* ==========================================================================
   PulseLAN design system v2 — dark only (OLED), self-hosted Inter.
   Everything between "SHARED SYSTEM — BEGIN" and "SHARED SYSTEM — END" is
   identical on every page of the site and can be pasted verbatim. Page
   specific rules follow after the end marker.
   ========================================================================== */
/* ---------------------------------------------- SHARED SYSTEM — BEGIN --- */

/* Inter, self-hosted first party. Subset from the official InterVariable to
   the glyphs this site uses; both axes kept so optical sizing still works.
   No third-party font request is made from any page. */
@font-face {
  font-family:'InterVar';
  src:url('/fonts/inter-var-latin.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root {
  /* -- Surfaces: deep near-black with a faint blue cast ------------------ */
  --bg:#05070C;
  --surface:#0E1420;          /* card */
  --surface-2:#080D16;        /* inset / well, recessed inside a card */
  --surface-3:#141C2C;        /* hover / raised */
  --border:#1D2637;
  --border-strong:#2E3B52;
  --rule-ink:#6B7C96;         /* separator glyphs are TEXT: 4.75:1 on --bg */

  /* -- Ink (all verified >= 4.5:1 on --bg, --surface and --surface-2) ---- */
  --text:#E9EEF7;             /* 15.8:1 on card */
  --text-2:#B4C0D4;           /* 10.0:1 on card */
  --muted:#8D9BB2;            /*  6.6:1 on card */

  /* -- Accent + status --------------------------------------------------- */
  --accent:#22D3EE;           /* 10.2:1 on card */
  --accent-2:#38BDF8;         /* gradient partner, keeps dark ink legible   */
  --accent-soft:#67E8F9;      /* focus ring, 12.7:1                          */
  --accent-ink:#03121A;       /* text ON an accent fill, >= 8.8:1            */
  --violet:#8B5CF6;           /* DECORATION ONLY — 4.35:1, never body text  */
  --violet-text:#A78BFA;      /* the violet you are allowed to set text in  */
  --good:#34D399;
  --warn:#F5A524;
  --bad:#F87171;

  --accent-wash:rgba(34,211,238,.08);
  --accent-line:rgba(34,211,238,.30);
  --violet-wash:rgba(139,92,246,.08);
  --violet-line:rgba(139,92,246,.38);

  /* -- Type -------------------------------------------------------------- */
  --font-sans:'InterVar',Inter,system-ui,-apple-system,'Segoe UI',Roboto,
              'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,
              'Liberation Mono',monospace;
  --fs-050:.6875rem;  /* 11 — uppercase micro labels and units ONLY, never prose */
  --fs-100:.75rem;    /* 12 */
  --fs-200:.875rem;   /* 14 */
  --fs-300:1rem;      /* 16 — body floor, never smaller for prose */
  --fs-400:1.125rem;  /* 18 */
  --fs-500:1.5rem;    /* 24 */
  --fs-600:2rem;      /* 32 */
  --fs-700:2.5rem;    /* 40 */
  --fs-800:3rem;      /* 48 */
  --lh-tight:1.12;
  --lh-snug:1.3;
  --lh-body:1.6;
  --lh-loose:1.75;
  --tracking-caps:.09em;
  --measure:68ch;

  /* -- Space: strict 4 / 8 rhythm --------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px;

  /* -- Radii -------------------------------------------------------------- */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* -- Elevation ---------------------------------------------------------- */
  --shadow-1:0 1px 2px rgba(0,0,0,.55);
  --shadow-2:0 10px 30px -12px rgba(0,0,0,.75);
  --shadow-3:0 24px 60px -20px rgba(0,0,0,.85);
  --glow-accent:0 0 26px rgba(34,211,238,.16);

  /* -- Motion ------------------------------------------------------------- */
  --dur-1:150ms; --dur-2:200ms; --dur-3:300ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);

  /* -- Layout ------------------------------------------------------------- */
  --container:1080px;
  --container-narrow:720px;
  --gutter:var(--sp-5);
}

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; padding:0; }

html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body {
  font-family:var(--font-sans);
  font-size:var(--fs-300);
  line-height:var(--lh-body);
  font-feature-settings:'liga' 1,'calt' 1;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
/* One calm field behind everything, so the focal object on each page has
   somewhere quiet to sit. Fixed + pointer-events:none, never interactive. */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(34,211,238,.075), transparent 68%),
    radial-gradient(760px 420px at 90% 4%,  rgba(139,92,246,.06),  transparent 70%);
}
body > * { position:relative; z-index:1; }

a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover { color:var(--accent-soft); }
img,svg { display:block; max-width:100%; }
strong,b { font-weight:600; }

/* Visible focus on everything focusable. Never removed, never suppressed. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--accent-soft);
  outline-offset:2px;
}

/* -- Skip link ------------------------------------------------------------ */
/* First tab stop on every page. The header is seven nav items plus a CTA, so
   without this a keyboard or switch user re-traverses all of it on every
   navigation before reaching the content. Off-screen until focused. */
.skip-link {
  /* Revealed by moving `left`, not by a transform. The transform version was
     not reliably observable in testing, and offset-based reveal is the older,
     more broadly compatible technique for this control. body has
     overflow-x:hidden, so parking it off to the left adds no scrollbar. */
  position:absolute; top:var(--sp-3); left:-9999px; z-index:1000;
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  box-shadow:var(--shadow-2);
  font-size:var(--fs-200); font-weight:600; text-decoration:none;
}
.skip-link:focus,
.skip-link:focus-visible { left:var(--sp-3); }

/* Text links that end in an arrow. The global `svg { display:block }` would
   drop the icon onto its own line inside a sentence, so these links become
   inline-flex. Buttons already are, and need nothing. */
.link-arrow { display:inline-flex; align-items:center; gap:.3em; }

/* Removes the ~300ms synthetic click delay on touch without disabling
   pinch-zoom (which `touch-action:none` would, and which must stay). */
a,button,summary,[role="button"],input,select,textarea { touch-action:manipulation; }

/* Motion is opt-out everywhere, including smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

.wrap { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.wrap-narrow { max-width:var(--container-narrow); }

/* -- Icons: one family (Lucide geometry), 24px grid, 1.75 stroke --------- */
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon {
  width:1.25em; height:1.25em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon-sm { width:1em; height:1em; }
.icon-lg { width:1.5em; height:1.5em; }

/* -- Numerals: measurements never re-flow while they count -------------- */
.num { font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* -- Header / nav -------------------------------------------------------- */
header.site {
  border-bottom:1px solid var(--border);
  background:rgba(5,7,12,.78);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.navbar {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-4);
  padding-top:var(--sp-3); padding-bottom:var(--sp-3);
}
.brand, a.brand {
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  text-decoration:none; color:inherit; margin-right:auto;
}
.pulse-dot {
  width:12px; height:12px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 4px rgba(34,211,238,.15), 0 0 0 9px rgba(34,211,238,.055),
             0 0 16px rgba(34,211,238,.55);
}
.brand h1 { font-size:1.125rem; font-weight:650; letter-spacing:-.012em; line-height:1.2; }
.brand h1 .lan { color:var(--accent); }

nav.nav { display:flex; align-items:center; gap:2px; }
nav.nav a {
  display:inline-flex; align-items:center;
  color:var(--muted); text-decoration:none;
  font-size:var(--fs-200); font-weight:550; letter-spacing:-.005em;
  /* min-height 44 (was a 36px box): WCAG/HIG minimum tap size. Horizontal
     padding is unchanged, so the nav's rhythm and width are untouched. */
  min-height:44px; padding:7px 11px; border-radius:var(--r-sm);
  transition:color var(--dur-1) var(--ease-out),
             background-color var(--dur-1) var(--ease-out);
}
nav.nav a:hover { color:var(--text); background:var(--surface-3); }
nav.nav a[aria-current="page"] {
  color:var(--accent); background:var(--accent-wash);
  box-shadow:inset 0 0 0 1px var(--accent-line);
}
.nav-cta { flex:none; white-space:nowrap; }

@media (max-width:900px) {
  /* Links become a single edge-to-edge strip that scrolls inside itself, so
     the page never scrolls sideways and the header stays two tight rows. */
  nav.nav {
    order:3; flex:1 0 100%; flex-wrap:nowrap;
    overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
    margin:0 calc(var(--gutter) * -1);
    padding:0 var(--gutter) 2px;
  }
  nav.nav::-webkit-scrollbar { display:none; }
  nav.nav a { white-space:nowrap; }
}

/* -- Buttons -------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:650; line-height:1.15; letter-spacing:-.005em;
  border:1px solid transparent; border-radius:var(--r-md);
  cursor:pointer; text-decoration:none; text-align:center;
  /* Long labels must be allowed to wrap: a nowrap button sets a min-content
     floor that pushes a 375px column wider than the viewport. */
  white-space:normal; text-wrap:balance;
  transition:transform var(--dur-1) var(--ease-out),
             filter var(--dur-1) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             background-color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out),
             color var(--dur-1) var(--ease-out);
}
.btn:active { transform:translateY(1px); }
.btn-primary {
  color:var(--accent-ink);
  /* cyan -> sky, deliberately not cyan -> violet: dark ink on #8B5CF6 is
     4.49:1 and would fail body-size contrast on the far end of the ramp. */
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 22px -12px rgba(34,211,238,.85);
}
.btn-primary:hover { filter:brightness(1.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 12px 30px -12px rgba(34,211,238,.9); }
.btn-secondary { color:var(--text); background:var(--surface-2); border-color:var(--border-strong); }
.btn-secondary:hover { background:var(--surface-3); border-color:var(--accent-line); color:var(--text); }
.btn-sm { min-height:44px; padding:9px 14px; font-size:var(--fs-200); }
.btn-md { padding:12px 18px; font-size:var(--fs-300); }
.btn-lg { padding:15px 26px; font-size:var(--fs-400); }
.btn-block { width:100%; }
.btn:disabled { opacity:.5; cursor:default; }

/* -- Surfaces ------------------------------------------------------------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-6);
  box-shadow:var(--shadow-2);
}
.card-accent { border-color:var(--accent-line); }
.well {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5);
}

/* -- Small text furniture -------------------------------------------------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-100); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--muted);
}
.pill {
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-100); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-pill); padding:5px 11px;
}
.pill-accent { color:var(--accent); border-color:var(--accent-line); background:var(--accent-wash); }
.pill-violet { color:var(--violet-text); border-color:var(--violet-line); background:var(--violet-wash); }

/* -- Section rhythm -------------------------------------------------------- */
.section { padding-block:var(--sp-16); }
.section + .section { padding-top:0; }
.section-head { max-width:660px; margin:0 auto var(--sp-10); text-align:center; }
.section-title {
  font-size:clamp(1.5rem, 1.16rem + 1.35vw, 2rem);
  line-height:var(--lh-snug); font-weight:700; letter-spacing:-.02em;
}
.section-sub { color:var(--muted); margin-top:var(--sp-3); }

/* -- Footer ---------------------------------------------------------------- */
footer.site {
  border-top:1px solid var(--border);
  padding:var(--sp-8) 0 var(--sp-10);
  text-align:center; color:var(--muted); font-size:var(--fs-200);
}
/* Both footer rows are flex so the 44px-tall link boxes line up with the
   middot separators instead of sitting on a text baseline. The separators
   keep their own horizontal margins, so no gap value is needed here. */
footer.site .links,
footer.site .foot-legal {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
}
footer.site .links { margin-bottom:var(--sp-1); }
/* min-height, not padding: the link keeps its visual size and gains the hit
   area around it. Footer links measured 23px tall and the mail link 17px,
   both well under the 44px minimum. */
footer.site a {
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 var(--sp-1); border-radius:var(--r-xs);
  text-decoration:none; color:var(--muted);
  transition:color var(--dur-1) var(--ease-out);
}
footer.site a:hover { color:var(--accent); text-decoration:underline; }
footer.site .sep { margin:0 var(--sp-2); color:var(--rule-ink); }

/* ------------------------------------------------ SHARED SYSTEM — END --- */


/* ===================== Home page ========================================= */

/* -- Hero: product + example readout, per the operations-landing pattern -- */
.hero { padding:var(--sp-16) 0 var(--sp-12); }
.hero-grid {
  display:grid; gap:var(--sp-12) var(--sp-10);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
.hero-grid > * { min-width:0; }
.hero-copy { max-width:34rem; }
.hero h2 {
  font-size:clamp(2rem, 1.35rem + 2.7vw, 3rem);
  line-height:var(--lh-tight); font-weight:700; letter-spacing:-.03em;
  margin:var(--sp-4) 0 var(--sp-4);
  background:linear-gradient(178deg, #FFFFFF 8%, #C9D8EA 58%, var(--accent) 122%);
  /* Every stop clears 11:1 on --bg; the fallback below covers any engine
     that cannot clip a background to text, where transparent would hide it. */
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero h2 { color:var(--text); background:none; }
}
.hero-lede { color:var(--text-2); font-size:var(--fs-400); line-height:var(--lh-body); }
.hero-cta { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-8); }
.hero-note {
  display:flex; align-items:flex-start; gap:var(--sp-2);
  color:var(--muted); font-size:var(--fs-200); margin-top:var(--sp-5);
}
.hero-note .icon { color:var(--accent); margin-top:2px; }

/* -- Hero product visual: an illustration of the app's result screen ----- */
.shot {
  background:linear-gradient(160deg, var(--surface) 0%, #0B1120 100%);
  border:1px solid var(--border-strong);
  border-radius:var(--r-xl);
  padding:var(--sp-5);
  box-shadow:var(--shadow-3), var(--glow-accent);
}
.shot-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-5);
}
.shot-title { font-size:var(--fs-200); font-weight:650; color:var(--text-2); }
.shot-link {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--sp-2); margin-bottom:var(--sp-5);
}
.node {
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-2);
}
.node .icon { color:var(--accent); }
.node .n-name { font-size:var(--fs-200); font-weight:600; line-height:1.25; }
.node .n-sub { font-size:var(--fs-100); color:var(--muted); }
.hop-mid { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted); }
.hop-mid .rail {
  width:100%; min-width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--violet));
  opacity:.55;
}
.hop-mid .icon { color:var(--muted); }
.hop-mid .hop-lbl { font-size:var(--fs-100); color:var(--muted); }

.shot-bars { display:grid; gap:var(--sp-4); }
.mbar-top {
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  margin-bottom:6px;
}
.mbar-lbl {
  font-size:var(--fs-100); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--muted);
}
.mbar-val { font-size:var(--fs-500); font-weight:700; letter-spacing:-.02em; line-height:1; }
.mbar-val .u { font-size:var(--fs-200); font-weight:600; color:var(--muted); margin-left:4px; }
.mbar { height:8px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; border:1px solid var(--border); }
.mbar > i {
  display:block; height:100%; border-radius:var(--r-pill);
  transform-origin:left center;
  animation:bar-in 900ms var(--ease-out) both;
}
.mbar.dl > i { background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.mbar.ul > i { background:linear-gradient(90deg, var(--violet), #C084FC); animation-delay:120ms; }
@keyframes bar-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.shot-strip {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
  margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border);
}
.shot-strip div { display:flex; align-items:baseline; gap:6px; font-size:var(--fs-200); color:var(--muted); }
.shot-strip b { color:var(--text); font-weight:650; font-size:var(--fs-300); }
.shot-verdict {
  margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4);
  background:var(--accent-wash); border:1px solid var(--accent-line);
  border-radius:var(--r-md); font-size:var(--fs-200); color:var(--text-2);
}
.shot-verdict b { color:var(--accent); font-weight:650; }
.shot-caption {
  margin-top:var(--sp-3); font-size:var(--fs-100); color:var(--muted); text-align:center;
}

/* -- Indicator band ------------------------------------------------------- */
.stats { padding-block:var(--sp-8); }
.stat-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
}
.stat { background:var(--surface); padding:var(--sp-5) var(--sp-4); text-align:center; }
.stat .v {
  font-size:var(--fs-600); font-weight:700; letter-spacing:-.03em; line-height:1.05;
  color:var(--accent);
  text-shadow:0 0 10px rgba(34,211,238,.28); /* minimal glow, accent numerals only */
}
.stat .k { margin-top:6px; font-size:var(--fs-200); color:var(--muted); line-height:1.4; }

/* -- Compare -------------------------------------------------------------- */
/* min-width:0 everywhere a grid/flex child could inherit a min-content floor:
   the nowrap <div class="path"> otherwise widens the whole column past the
   viewport instead of scrolling inside its own box. */
.compare-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
.compare-grid > *, .steps > *, .stat-grid > * { min-width:0; }
.compare-card { display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.compare-card h3 { font-size:var(--fs-400); font-weight:650; letter-spacing:-.015em; }
.compare-card p { color:var(--muted); font-size:var(--fs-200); line-height:var(--lh-loose); }
.compare-card .pill { align-self:flex-start; }
.path {
  font-family:var(--font-mono); font-size:var(--fs-200);
  color:var(--text-2); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:10px var(--sp-3); overflow-x:auto; white-space:nowrap;
  max-width:100%; overscroll-behavior-x:contain;
}
.path .hop { color:var(--accent); }
.compare-close {
  color:var(--muted); font-size:var(--fs-300); line-height:var(--lh-loose);
  max-width:var(--measure); margin:var(--sp-8) auto 0; text-align:center;
}
.compare-close strong { color:var(--text); font-weight:600; }

/* -- Steps ---------------------------------------------------------------- */
.steps { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
.step { display:flex; flex-direction:column; gap:var(--sp-3); }
.step .num-badge {
  width:34px; height:34px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-wash); border:1px solid var(--accent-line);
  color:var(--accent); font-weight:700; font-size:var(--fs-300);
  font-variant-numeric:tabular-nums;
}
.step h3 { font-size:var(--fs-400); font-weight:650; letter-spacing:-.015em; }
.step p { color:var(--muted); font-size:var(--fs-200); line-height:var(--lh-loose); }

/* -- Get ------------------------------------------------------------------ */
.get { text-align:center; padding-bottom:var(--sp-16); }
.platform-row {
  display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap;
  margin-bottom:var(--sp-6);
}
.platform-chip {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-5);
  font-size:var(--fs-200); font-weight:600;
}
.platform-chip .icon { color:var(--accent); }
.get .also {
  color:var(--muted); font-size:var(--fs-200); line-height:var(--lh-loose);
  max-width:var(--measure); margin:var(--sp-8) auto 0;
}
.get .trust {
  display:inline-flex; align-items:flex-start; gap:var(--sp-3); text-align:left;
  color:var(--muted); font-size:var(--fs-200); line-height:var(--lh-body);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-4) var(--sp-5);
  max-width:640px; margin:var(--sp-6) auto 0;
}
.get .trust .icon { color:var(--accent); margin-top:3px; }

/* -- Breakpoints ---------------------------------------------------------- */
@media (min-width:700px) {
  .compare-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .steps { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .stat-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .shot { padding:var(--sp-6); }
}
@media (min-width:940px) {
  .hero { padding:var(--sp-20) 0 var(--sp-16); }
  .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:var(--sp-16); }
}
@media (max-width:480px) {
  .hero { padding:var(--sp-10) 0 var(--sp-8); }
  .section { padding-block:var(--sp-12); }
  .shot-strip { grid-template-columns:1fr; gap:var(--sp-2); }
  .get .trust { flex-direction:column; gap:var(--sp-2); }
}

/* ── Guides / articles / trust pages — appended to the site CSS ─────────
   Reuses the PulseLAN design tokens (:root --bg/--surface/--text/--muted/--accent…). */

.guide-wrap { width:100%; max-width:820px; margin:0 auto; padding:40px var(--gutter) 72px; }

/* Breadcrumbs */
.guide-crumbs { font-size:.85rem; color:var(--muted); margin:0 0 20px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.guide-crumbs a { color:var(--muted); text-decoration:none; }
.guide-crumbs a:hover { color:var(--accent); }
.guide-crumbs .sep { color:var(--rule-ink); }

/* Article header */
.guide-head { margin:0 0 30px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.guide-eyebrow { display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent); background:var(--accent-wash); border:1px solid var(--accent-line); padding:5px 12px; border-radius:var(--r-pill); margin-bottom:16px; }
.guide-head h1 { font-size:clamp(1.8rem,4.2vw,2.7rem); line-height:var(--lh-tight); letter-spacing:-.02em; color:var(--text); margin:0 0 12px; }
.guide-meta { font-size:.9rem; color:var(--muted); margin:0; }

/* Article body */
.guide-body { font-size:1.05rem; line-height:var(--lh-body); color:var(--text); }
.guide-body > .guide-lede { font-size:1.24rem; line-height:1.5; color:var(--text); font-weight:520; margin:0 0 26px; }
.guide-body p { margin:0 0 18px; color:var(--muted); }
.guide-body h2 { font-size:1.55rem; line-height:var(--lh-snug); letter-spacing:-.015em; color:var(--text); margin:40px 0 14px; }
.guide-body h3 { font-size:1.18rem; color:var(--text); margin:28px 0 10px; }
.guide-body ul, .guide-body ol { margin:0 0 18px; padding-left:1.3em; color:var(--muted); }
.guide-body li { margin:0 0 8px; }
.guide-body li::marker { color:var(--accent); }
.guide-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.guide-body a:hover { color:var(--accent-soft); }
.guide-body strong { color:var(--text); font-weight:680; }
.guide-body code { font-family:var(--font-mono); font-size:.9em; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xs); padding:.08em .4em; color:var(--accent-soft); }

.guide-body table { width:100%; border-collapse:collapse; margin:10px 0 26px; font-size:.95rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.guide-body thead th { background:var(--surface-3, #131b29); text-align:left; font-weight:680; color:var(--text); padding:11px 14px; border-bottom:1px solid var(--border-strong); font-size:.88rem; }
.guide-body tbody td { padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--muted); }
.guide-body tbody tr:last-child td { border-bottom:0; }

.guide-body .guide-callout { background:var(--accent-wash); border:1px solid var(--accent-line); border-left:3px solid var(--accent); border-radius:var(--r-md); padding:14px 18px; margin:0 0 22px; }
.guide-body .guide-callout p { margin:0; color:var(--text); }
.guide-body .guide-callout p + p { margin-top:8px; }
.guide-body h2:first-child, .guide-body h3:first-child { margin-top:0; }

/* CTA card */
.guide-cta { margin:44px 0 0; background:linear-gradient(180deg,var(--surface),#0a1018); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:28px 30px; text-align:center; }
.guide-cta h2 { font-size:1.4rem; color:var(--text); margin:0 0 10px; }
.guide-cta p { color:var(--muted); font-size:1.02rem; line-height:var(--lh-body); margin:0 auto 18px; max-width:560px; }

/* Guides hub */
.guides-hub { width:100%; max-width:var(--container); margin:0 auto; padding:44px var(--gutter) 72px; }
.guides-hero { max-width:720px; margin:0 auto 40px; text-align:center; }
.guides-hero h1 { font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:var(--lh-tight); letter-spacing:-.02em; color:var(--text); margin:0 0 14px; }
.guides-hero p { color:var(--muted); font-size:1.08rem; line-height:var(--lh-body); margin:0 auto; max-width:620px; }
.guides-cat { margin:0 0 40px; }
.guides-cat > h2 { font-size:1.3rem; color:var(--text); margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.guides-grid, .guide-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.guide-card { display:flex; flex-direction:column; gap:7px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:18px 20px; text-decoration:none; transition:transform .2s var(--ease-out), border-color .2s var(--ease-out); }
.guide-card:hover { transform:translateY(-3px); border-color:var(--accent-line); }
.guide-card-cat { font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.guide-card-title { font-size:1.06rem; line-height:1.3; color:var(--text); font-weight:640; }
.guide-card-desc { font-size:.92rem; line-height:1.5; color:var(--muted); flex:1; }
.guide-card-more { font-size:.82rem; font-weight:700; color:var(--accent); margin-top:2px; }

.guide-related { margin:48px 0 0; }
.guide-related > h2 { font-size:1.3rem; color:var(--text); margin:0 0 16px; }
.guide-alllink { margin:18px 0 0; }
.guide-alllink a { color:var(--accent); font-weight:700; text-decoration:none; }
.guide-alllink a:hover { text-decoration:underline; }

@media (max-width:600px) {
  .guide-body { font-size:1.02rem; }
  .guide-body > .guide-lede { font-size:1.12rem; }
  .guides-grid, .guide-related-grid { grid-template-columns:1fr; }
}