/* Shared styles for /articles pages. Same look as about.html. */
html, body { margin: 0; }
body { background: #060d1b; }

.pl {
  --pl-accent:#2f7df4; --pl-accent-l:#5b9dff;
  --pl-bg:#060d1b; --pl-bg-2:#0a1628; --pl-surface:#0f1d34;
  --pl-line:rgba(255,255,255,.09); --pl-text:#eef2f9; --pl-muted:#93a3bd; --pl-body-text:#c8d2e2;
  --pl-display:"Sora",system-ui,sans-serif; --pl-body:"Hanken Grotesk",system-ui,sans-serif;
  position:relative; min-height:100vh; background:var(--pl-bg); color:var(--pl-text);
  font-family:var(--pl-body); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.pl *, .pl *::before, .pl *::after { box-sizing:border-box; }
.pl::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 480px at 82% -12%, rgba(47,125,244,.16), transparent 60%),
    linear-gradient(180deg, var(--pl-bg) 0%, var(--pl-bg-2) 100%);
}
.pl-wrap { position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 24px; }

.pl-nav { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:24px 0 8px; }
.pl-logo { height:38px; width:auto; display:block; }
.pl-back { font-size:13px; letter-spacing:.04em; color:var(--pl-muted); text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.pl-back:hover { color:var(--pl-text); }

.pl-kicker { display:inline-block; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--pl-accent-l); font-weight:600; text-decoration:none; }

/* ---------- Article ---------- */
.pl-article { padding:34px 0 40px; }
.pl-article h1 { font-family:var(--pl-display); font-weight:800; font-size:clamp(32px,5.6vw,48px); line-height:1.08; letter-spacing:-.02em; margin:12px 0 14px; }
.pl-deck { font-family:var(--pl-display); font-weight:600; font-size:clamp(19px,3vw,23px); line-height:1.35; color:var(--pl-accent-l); margin:0 0 14px; }
.pl-meta { color:var(--pl-muted); font-size:14px; margin:0 0 22px; }
.pl-meta time { color:var(--pl-text); }

/* The "short answer" box: the first thing readers, search and AI tools see. */
.pl-summary { background:linear-gradient(180deg,var(--pl-surface),#0b1626); border:1px solid var(--pl-line); border-left:4px solid var(--pl-accent); border-radius:14px; padding:20px 22px; margin:0 0 30px; }
.pl-summary h2 { font-family:var(--pl-display); font-size:14px !important; letter-spacing:.12em; text-transform:uppercase; color:var(--pl-accent-l); margin:0 0 8px !important; }
.pl-summary p, .pl-summary li { color:var(--pl-text) !important; }
.pl-summary > :last-child { margin-bottom:0; }

.pl-body h2 { font-family:var(--pl-display); font-weight:700; font-size:clamp(21px,3.4vw,26px); line-height:1.25; letter-spacing:-.01em; margin:40px 0 12px; scroll-margin-top:16px; }
.pl-body h3 { font-family:var(--pl-display); font-weight:700; font-size:18px; margin:28px 0 8px; }
.pl-body p, .pl-body li { color:var(--pl-body-text); }
.pl-body p { margin:14px 0; }
.pl-body ul, .pl-body ol { margin:14px 0; padding-left:22px; }
.pl-body li { margin:6px 0; }
.pl-body strong { color:var(--pl-text); }
.pl-body a { color:var(--pl-accent-l); text-underline-offset:3px; }
.pl-body a:hover { color:#fff; }
.pl-body blockquote { margin:22px 0; padding:4px 0 4px 18px; border-left:3px solid var(--pl-line); color:var(--pl-muted); }
.pl-body img { max-width:100%; height:auto; border-radius:12px; }
.pl-body figure { margin:24px 0; }
.pl-body figcaption { color:var(--pl-muted); font-size:14px; margin-top:8px; }

.pl-table-wrap { overflow-x:auto; margin:20px 0; border:1px solid var(--pl-line); border-radius:12px; }
.pl-body table { width:100%; border-collapse:collapse; font-size:15.5px; }
.pl-body th, .pl-body td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--pl-line); vertical-align:top; }
.pl-body th { font-family:var(--pl-display); font-weight:600; color:var(--pl-text); background:rgba(255,255,255,.03); }
.pl-body td { color:var(--pl-body-text); }
.pl-body tr:last-child td { border-bottom:0; }

/* A standout line inside the body text */
.pl-body .pl-callout { font-family:var(--pl-display); font-weight:700; font-size:clamp(19px,3vw,22px); line-height:1.4; color:var(--pl-text); border-left:4px solid var(--pl-accent); padding:4px 0 4px 18px; margin:26px 0; }
.pl-signoff { font-family:var(--pl-display); font-weight:700; font-style:italic; color:var(--pl-muted); margin:22px 0 0; }

.pl-faq details { border:1px solid var(--pl-line); border-radius:12px; padding:14px 18px; margin:10px 0; background:rgba(255,255,255,.02); }
.pl-faq summary { cursor:pointer; font-family:var(--pl-display); font-weight:600; color:var(--pl-text); }
.pl-faq details[open] summary { margin-bottom:6px; }

.pl-sources { border-top:1px solid var(--pl-line); margin-top:40px; padding-top:8px; }
.pl-sources h2 { margin-top:20px; }
.pl-disclaimer { font-size:14.5px; color:var(--pl-muted) !important; }
.pl-sources li { font-size:15px; }

/* Signup prompt */
.pl-cta { margin:40px 0 0; background:linear-gradient(180deg,var(--pl-surface),#0b1626); border:1px solid var(--pl-line); border-radius:18px; padding:28px; box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.pl-cta::before { content:""; display:block; height:4px; border-radius:4px; margin:-28px -28px 22px; background:repeating-linear-gradient(90deg,var(--pl-accent) 0 18px,#122544 18px 36px); }
.pl-cta h2 { font-family:var(--pl-display); font-weight:800; font-size:24px; margin:0 0 8px; }
.pl-cta p { color:var(--pl-body-text); margin:0 0 14px; }
.pl-cta p:last-of-type { margin-bottom:20px; }
.pl-cta strong { color:var(--pl-text); }
.pl-btn { display:inline-block; background:var(--pl-accent); color:#fff; font-weight:700; text-decoration:none; padding:13px 22px; border-radius:12px; }
.pl-btn:hover { background:var(--pl-accent-l); }

/* ---------- Articles index ---------- */
.pl-list-head { padding:34px 0 10px; }
.pl-list-head h1 { font-family:var(--pl-display); font-weight:800; font-size:clamp(34px,6vw,52px); line-height:1.04; letter-spacing:-.02em; margin:12px 0 10px; }
.pl-list-head p { color:var(--pl-body-text); font-size:18px; margin:0; }
.pl-list { list-style:none; padding:0; margin:26px 0 50px; display:grid; gap:14px; }
.pl-item a { display:block; text-decoration:none; color:inherit; background:linear-gradient(180deg,var(--pl-surface),#0b1626); border:1px solid var(--pl-line); border-radius:16px; padding:22px 24px; transition:border-color .15s; }
.pl-item a:hover { border-color:rgba(91,157,255,.5); }
.pl-item h2 { font-family:var(--pl-display); font-weight:700; font-size:21px; line-height:1.3; margin:0 0 6px; color:var(--pl-text); }
.pl-item p { color:var(--pl-body-text); margin:0 0 10px; }
.pl-item time { color:var(--pl-muted); font-size:14px; }
.pl-empty { color:var(--pl-muted); }

.pl-foot { border-top:1px solid var(--pl-line); padding:24px 0 40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--pl-muted); font-size:13px; }
.pl-foot a { color:var(--pl-muted); text-decoration:none; }
.pl-foot a:hover { color:var(--pl-text); }

@media (max-width:480px){
  .pl-wrap{ padding:0 16px; }
  .pl-cta{ padding:22px 18px; }
  .pl-cta::before{ margin:-22px -18px 18px; }
}