/* pgrun.dev landing (/) — ported from the "pgrun Landing" design.
   Loaded ONLY by layouts/landing; deliberately isolated from marketing.css, which sets
   body{zoom:1.1} and a different type scale. Everything here is monospace by design:
   the terminal feel is the identity, not decoration. */

:root{
  --lp-bg:#000;
  --lp-panel:#0a0a0a;
  --lp-head:#111;

  --lp-text:#d6d6d0;          /* body copy */
  --lp-bright:#fff;           /* headings, table values, hard rules */
  --lp-dim:#a09f98;           /* secondary copy */
  --lp-dimmer:#8b8b83;        /* captions */
  --lp-faint:#6f6f68;         /* labels, footnotes */
  --lp-fainter:#57574f;

  --lp-accent:#ff7a1a;        /* orange: section numbers, CTAs, the pgrun series */
  --lp-link:#7aa5ff;
  --lp-link-bg:#1b2440;
  --lp-ok:#8fe08f;            /* the connection string */

  --lp-rule:#4a4a44;          /* dashed dividers */
  --lp-rule-soft:#33332f;     /* dotted table rules, section borders */
  --lp-rule-faint:#26261f;
  --lp-glow:rgba(255,122,26,.45);

  --lp-mono:'IBM Plex Mono','Courier New',monospace;
  --lp-max:975px;

  /* Default ink for the dot grid; a surface can override it (see the shared rule below).
     Note this is the colour only — wrapping the whole gradient in a custom property would
     NOT work, because a custom property's var()s are substituted where the property is
     declared, so the ink would freeze at this :root value. */
  --lp-dot-ink:rgba(255,255,255,.10);
}

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

body.lp{
  background:var(--lp-bg); color:var(--lp-text);
  font-family:var(--lp-mono); font-size:15px; line-height:1.6;
  -webkit-text-size-adjust:100%;
  /* Everything 10% larger, exactly like viewing at 110% browser zoom —
     the same trick the old marketing.css used. Scales type AND spacing
     uniformly, so component proportions stay identical. */
  zoom:1.1;
}
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Visited links deliberately keep the same colour as unvisited ones — the design's purple
   :visited state is dropped so the nav and footer stay one colour as people browse. */
.lp a,
.lp a:visited{ color:var(--lp-link); text-decoration:underline; text-underline-offset:2px; }
.lp a:hover{ color:var(--lp-bright); background:var(--lp-link-bg); }
.lp ::selection{ background:var(--lp-accent); color:#000; }

.lp-shell{ min-height:100vh; padding:0 20px 60px; display:flex; flex-direction:column; align-items:center; }
.lp-body{ width:100%; max-width:var(--lp-max); display:flex; flex-direction:column; padding-top:8px; }

/* ---------- header ---------- */
.lp-head{
  position:sticky; top:0; z-index:20; width:100%; max-width:var(--lp-max);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
  padding:12px 0; background:var(--lp-bg); border-bottom:1px solid var(--lp-bright);
}
/* Scoped with .lp so these beat the `.lp a` link colour, which is more specific than a bare
   class selector would be. The wordmark is plain white text, never a blue link. */
.lp .lp-brand,
.lp .lp-brand:visited{ font-size:19px; font-weight:600; line-height:1; color:var(--lp-bright); text-decoration:none; }
.lp .lp-brand:hover{ background:none; color:var(--lp-bright); text-decoration:none; }
.lp-nav{ display:flex; flex-wrap:wrap; gap:4px; font-size:15px; white-space:nowrap; align-items:center; }
.lp-nav a{ padding:1px 6px; }
.lp-sep{ color:var(--lp-rule); }
.lp-head-cta{ margin-left:auto; display:flex; gap:14px; align-items:center; white-space:nowrap; }

/* The offset white shadow is the one piece of "chrome" in the design — a printed,
   physical button rather than a gradient. */
.lp .lp-btn,
.lp .lp-btn:visited{
  text-decoration:none; color:#000; background:var(--lp-accent); border:1px solid var(--lp-accent);
  box-shadow:3px 3px 0 var(--lp-bright); padding:4px 14px; font-weight:700;
}
.lp .lp-btn:hover{ color:#000; background:#ff8f3d; border-color:#ff8f3d; text-decoration:none; }

/* Scoped with .lp so these beat the base .lp-btn above — as bare single-class selectors they
   lost to it, and the hero/closing CTAs were rendering at nav size with a 3px offset box. */
.lp .lp-btn-lg{ box-shadow:5px 5px 0 var(--lp-bright); padding:9px 22px; font-size:16px; }
.lp .lp-btn-xl{ box-shadow:5px 5px 0 var(--lp-bright); padding:11px 26px; font-size:17px; }

/* ---------- panels: the title block and every numbered section ----------
   Each is a bordered box that picks up an orange edge and a soft glow on hover. */
.lp-hero,
.lp-sec{
  border:1px solid var(--lp-rule-soft);
  transition:border-color .25s ease, box-shadow .25s ease;
}
/* Only [01] reacts to the pointer — it picks up the accent border and a soft glow on hover.
   Every other panel, and the title block, keeps its dim border throughout. */
.lp-sec#start:hover{ border-color:var(--lp-accent); box-shadow:0 0 44px -14px var(--lp-glow); }
@media (prefers-reduced-motion: reduce){
  .lp-hero, .lp-sec{ transition:none; }
}

/* Dot grid, shared by the landing hero and the auth panel (.au-side, auth.css). The ink is
   read straight from --lp-dot-ink here, so each surface's own override applies; the geometry
   lives only in this one place. */
.lp-hero::before,
.au-side::before{ background:radial-gradient(var(--lp-dot-ink) 1px, transparent 1.4px) 0 0/11px 11px; }

/* ---------- hero ---------- */
/* isolation + a z-index:-1 ::before puts the dot grid behind the copy but still inside the
   panel, so it cannot bleed over the sections above or below. */
.lp-hero{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px;
  padding:141px 28px 144px;
}
.lp-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* Brighter than the auth panel's grid — this is the first thing on the page and the
     texture should be visible, not just implied. The geometry comes from the shared rule
     above; used directly in `background` there, the token resolves per surface. */
  --lp-dot-ink:rgba(255,255,255,.17);
  /* The hero box is wide and short, so the vignette has to be wider than tall to reach the
     edges — the auth panel's tighter ellipse works there because that box is narrow. Held
     opaque well past the headline so the grid still reads behind the subhead and the CTAs,
     then faded only at the very edge. */
  -webkit-mask-image:radial-gradient(135% 125% at 50% 34%, #000 55%, transparent 100%);
          mask-image:radial-gradient(135% 125% at 50% 34%, #000 55%, transparent 100%);
}
.lp-kicker{ font-size:13px; color:var(--lp-faint); letter-spacing:.16em; }
.lp-hero h1{
  font-family:var(--lp-mono); font-weight:500; font-size:min(3.7vw,42px); line-height:1.1;
  letter-spacing:-.03em; color:var(--lp-bright); white-space:nowrap; max-width:100%;
}
.lp-caret{ color:var(--lp-accent); animation:lp-blink 1.1s steps(1) infinite; }
@keyframes lp-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .lp-caret{ animation:none; } }
.lp-hero p{ font-size:17px; color:#c2c2ba; max-width:74ch; text-wrap:pretty; }
.lp-hero-acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; align-items:center; padding-top:4px; }

@media(max-width:720px){
  .lp-hero{ padding:64px 18px 56px; }
  .lp-hero h1{ font-size:26px; white-space:normal; }
  .lp-sec{ padding:22px 18px 26px; }
}

/* ---------- section scaffold ---------- */
/* Sections are their own boxes now, so the dashed dividers that used to separate them are
   just margin. */
.lp-rule{ height:28px; }
.lp-sec{ scroll-margin-top:80px; display:flex; flex-direction:column; gap:20px; padding:28px 30px 32px; }
.lp-sec-head{ display:flex; align-items:center; gap:12px; }
.lp-sec-no{ color:var(--lp-accent); font-weight:700; }
.lp-sec-head h2{ font-size:19px; font-weight:700; color:var(--lp-bright); text-transform:uppercase; letter-spacing:.06em; }
.lp-sec-head .lp-tail{ flex:1; border-top:1px dotted var(--lp-rule); }
.lp-sec p{ max-width:74ch; text-wrap:pretty; }
.lp-muted{ color:var(--lp-dim); }
.lp-note{ font-size:14px; color:var(--lp-faint); }

/* ---------- [01] steps + code ---------- */
.lp-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); border:1px solid var(--lp-bright); }
.lp-steps > div{ padding:16px 18px; border-right:1px dashed var(--lp-rule); }
.lp-steps > div:last-child{ border-right:0; color:var(--lp-ok); }
.lp-steps b{ color:var(--lp-accent); font-weight:400; }

.lp-pre{
  background:var(--lp-panel); border:1px solid var(--lp-bright); padding:16px 18px;
  overflow-x:auto; font-family:var(--lp-mono); font-size:14px; line-height:1.7; color:var(--lp-text);
}
.lp-pre .p{ color:var(--lp-accent); }
.lp-pre .c{ color:var(--lp-faint); }

/* ---------- [02] pricing ---------- */
.lp-tablewrap{ overflow-x:auto; border:1px solid var(--lp-bright); }
.lp-table{ width:100%; border-collapse:collapse; font-size:15px; min-width:600px; }
.lp-table th{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--lp-bright); }
.lp-table thead tr{ background:var(--lp-head); }
.lp-table th.lp-th-label{ font-weight:400; color:var(--lp-faint); }
.lp-table th.lp-th-size{ font-weight:700; color:var(--lp-bright); border-left:1px dashed var(--lp-rule); }
.lp-table th.lp-th-rds{ font-weight:400; color:var(--lp-faint); border-left:1px dashed var(--lp-rule); }
.lp-table td{ padding:11px 14px; border-bottom:1px dotted var(--lp-rule-soft); white-space:nowrap; }
.lp-table td.lp-td-label{ color:var(--lp-dim); }
.lp-table td.lp-td-val{ border-left:1px dashed var(--lp-rule); }
.lp-table td.lp-td-rds{ color:var(--lp-faint); border-left:1px dashed var(--lp-rule); }
.lp-table tr.lp-tr-price td{ color:var(--lp-bright); font-weight:700; }
.lp-table tr.lp-tr-price td.lp-td-label,
.lp-table tr.lp-tr-price td.lp-td-rds{ color:var(--lp-faint); font-weight:400; }

/* ---------- [03]/[04] feature + pillar grids ---------- */
.lp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px 30px; }
.lp-item{ display:flex; gap:10px; align-items:flex-start; }
.lp-item > span{ color:var(--lp-accent); }
.lp-item-b{ display:flex; flex-direction:column; gap:2px; }
.lp-item-t{ font-weight:700; color:var(--lp-bright); }
.lp-item-d{ color:var(--lp-dim); text-wrap:pretty; }

/* ---------- [04] latency chart ---------- */
.lp-chart{ border:1px solid var(--lp-bright); background:var(--lp-panel); padding:18px; display:flex; flex-direction:column; gap:12px; position:relative; }
.lp-chart-t{ font-size:14px; color:var(--lp-faint); }
.lp-chart-sub{ font-size:13px; color:var(--lp-fainter); }
.lp-legend{ display:flex; gap:22px; font-size:14px; align-items:center; }
.lp-legend span{ display:flex; align-items:center; gap:8px; }
.lp-key-rds{ width:18px; border-top:2px dashed var(--lp-dimmer); }
.lp-key-pg{ width:18px; border-top:2px solid var(--lp-accent); }
.lp-chart svg{ width:100%; height:auto; display:block; overflow:visible; font-family:var(--lp-mono); }

/* The UA's [hidden]{display:none} rule does not reach elements in the SVG namespace, so
   without this the crosshair and its two markers draw at 0,0 before the first hover. */
.lp-cursor[hidden]{ display:none; }
.lp-thin{ border-top:1px dotted var(--lp-rule); margin:4px 0; }

/* Hover readout, positioned by landing.js. */
.lp-tip{
  position:absolute; top:104px; pointer-events:none; background:#000; border:1px solid var(--lp-bright);
  padding:7px 10px; font-size:13px; line-height:1.5; white-space:nowrap; display:none;
}
.lp-tip.on{ display:block; }
.lp-tip .t{ color:var(--lp-faint); }
.lp-tip .r{ color:var(--lp-bright); }
.lp-tip .p{ color:var(--lp-accent); }

/* ---------- [05] questions ---------- */
.lp-faq{ display:flex; flex-direction:column; border-top:1px dotted var(--lp-rule); }
.lp-faq details{ border-bottom:1px dotted var(--lp-rule); padding:13px 0; }
.lp-faq summary{ cursor:pointer; list-style:none; display:flex; gap:10px; color:var(--lp-bright); }
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary span:first-child{ color:var(--lp-accent); }
.lp-faq summary:hover span:last-child{ text-decoration:underline; text-underline-offset:2px; }
.lp-faq-a{ padding:8px 0 2px 22px; color:var(--lp-dim); max-width:74ch; text-wrap:pretty; }

/* ---------- closing CTA + footer ---------- */
.lp-close{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.lp-foot{
  display:flex; flex-wrap:wrap; gap:6px 10px; font-size:14px; color:var(--lp-faint);
  border-top:1px solid var(--lp-bright); margin-top:52px; padding-top:16px; align-items:center;
}
.lp .lp-status,
.lp .lp-status:visited{ margin-left:auto; display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--lp-accent); }
.lp .lp-status:hover{ background:none; color:var(--lp-accent); text-decoration:none; }
.lp-status i{ width:7px; height:7px; background:var(--lp-accent); display:inline-block; }
.lp-copy{ width:100%; color:var(--lp-rule); padding-top:6px; }