:root{
  --pl-color-primary: #09203B;
  --pl-color-primary-light: #E7ECF2;
  --pl-color-primary-dark: #061627;
  --pl-color-header-gradient-start: #E3F6FC;
  --pl-color-header-gradient-mid: #C4EEF8;
  --pl-color-header-gradient-end: #F1FBFE;
  --pl-color-header-text-dark: #09203B;
  --pl-color-header-text-mid: #0A6E85;
  --pl-color-accent: #F48C1B;
  --pl-color-accent-light: #FCEBD3;
  --pl-color-accent-dark: #C9760E;
  --pl-color-brand-navy: #09203B;
  --pl-color-brand-aqua: #04C2E9;
  --pl-color-brand-blue: #0690E3;
  --pl-color-brand-orange: #F48C1B;
  --pl-color-brand-pink: #EF4376;
  --pl-color-brand-pink-dark: #D63565;
  --pl-color-background: #F8FAFC;
  --pl-color-surface: #FFFFFF;
  --pl-color-surface-alt: #F1F5F9;
  --pl-color-text-primary: #0F172A;
  --pl-color-text-secondary: #64748B;
  --pl-color-text-light: #94A3B8;
  --pl-color-text-muted: #94A3B8;
  --pl-color-border: #E2E8F0;
  --pl-color-border-light: #F1F5F9;
  --pl-color-error: #EF4444;
  --pl-color-error-light: #FEE2E2;
  --pl-color-warning: #F48C1B;
  --pl-color-warning-light: #FCEBD3;
  --pl-color-info: #3B82F6;
  --pl-color-info-light: #DBEAFE;
  --pl-color-success: #10B981;
  --pl-color-success-light: #D1FAE5;
  --pl-color-shadow: rgba(0, 0, 0, 0.1);
  --pl-color-countdown: #09203B;
  --pl-color-countdown-bg: #E7ECF2;
  --pl-color-active: #10B981;
  --pl-color-active-bg: #D1FAE5;
  --pl-color-premium: #6366F1;
  --pl-space-xs: 4px;
  --pl-space-sm: 8px;
  --pl-space-md: 12px;
  --pl-space-lg: 16px;
  --pl-space-xl: 20px;
  --pl-space-xxl: 24px;
  --pl-space-xxxl: 32px;
  --pl-radius-sm: 6px;
  --pl-radius-md: 8px;
  --pl-radius-lg: 12px;
  --pl-radius-xl: 16px;
  --pl-radius-full: 9999px;
  --pl-shadow-small: 0px 1px 3px rgba(0, 0, 0, 0.04);
  --pl-shadow-medium: 0px 2px 12px rgba(0, 0, 0, 0.08);
  --pl-shadow-large: 0px 4px 14px rgba(9, 32, 59, 0.35);
  --pl-font-display-size: 52px;
  --pl-font-display-line: 57px;
  --pl-font-display-weight: 800;
  --pl-font-hero-size: 28px;
  --pl-font-hero-line: 34px;
  --pl-font-hero-weight: 800;
  --pl-font-title-size: 24px;
  --pl-font-title-line: 30px;
  --pl-font-title-weight: 700;
  --pl-font-subtitle-size: 20px;
  --pl-font-subtitle-line: 24px;
  --pl-font-subtitle-weight: 600;
  --pl-font-body-size: 16px;
  --pl-font-body-line: 20px;
  --pl-font-body-weight: 400;
  --pl-font-body-semibold-size: 16px;
  --pl-font-body-semibold-line: 20px;
  --pl-font-body-semibold-weight: 600;
  --pl-font-caption-size: 14px;
  --pl-font-caption-line: 18px;
  --pl-font-caption-weight: 500;
  --pl-font-small-size: 12px;
  --pl-font-small-line: 16px;
  --pl-font-small-weight: 500;
  --pl-font-tiny-size: 11px;
  --pl-font-tiny-line: 14px;
  --pl-font-tiny-weight: 600;
  --pl-font-prose-size: 17px;
  --pl-font-prose-line: 29px;
  --pl-font-prose-weight: 400;
  --pl-font-prose-heading-size: 23px;
  --pl-font-prose-heading-line: 30px;
  --pl-font-prose-heading-weight: 600;
  --pl-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pl-max-content-width: 800px;
  --pl-max-site-width: 1100px;
  --pl-header-height: 60px;
  --pl-brand-mark-height: 40px;
  --pl-brand-mark-height-large: 56px;
  --pl-card-spacing: 16px;
  --pl-card-lift: -4px;
  --pl-transition: .25s ease;
  --pl-topbar-bg: rgba(255, 255, 255, 0.92);
  --pl-footer-rule: rgba(255, 255, 255, 0.12);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pl-color-background);color:var(--pl-color-text-primary);
  font-family:var(--pl-font-family);font-weight:var(--pl-font-prose-weight);
  font-size:var(--pl-font-prose-size);line-height:var(--pl-font-prose-line)}
h1,h2,h3,h4{font-family:var(--pl-font-family);color:var(--pl-color-text-primary);margin:0}
a{color:var(--pl-color-primary);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--pl-color-primary);outline-offset:2px}
img{max-width:100%;height:auto;display:block}

/* ---- Shell ----
   TWO widths, doing two different jobs. .pl-wrap is the marketing shell (nav, footer,
   card grid) at layout.maxSiteWidth, matching landing/css/style.css's .container exactly.
   The reading column further down is layout.maxContentWidth and is NARROWER — widening
   the chrome must never widen a paragraph. ---- */
.pl-wrap{max-width:var(--pl-max-site-width);margin:0 auto;padding:0 var(--pl-space-xxl)}
.pl-skip{position:absolute;left:-9999px}
.pl-skip:focus{left:var(--pl-space-lg);top:var(--pl-space-md);position:fixed;
  background:var(--pl-color-surface);padding:var(--pl-space-sm) var(--pl-space-lg);
  border-radius:var(--pl-radius-md);border:1px solid var(--pl-color-border);z-index:110}

/* ---- Top bar ----
   The landing site's nav, rebuilt: translucent white over the gradient below it, the real
   wordmark on the left, marketing links and one navy pill on the right. Sticky rather than
   fixed — landing/css/style.css uses position:fixed and then pays for it with 140px of
   hero padding, which a blog does not need. ---- */
.pl-topbar{position:sticky;top:0;z-index:100;background:var(--pl-topbar-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pl-color-border)}
.pl-topbar .pl-wrap{display:flex;align-items:center;gap:var(--pl-space-xxl);
  min-height:var(--pl-header-height)}
.pl-logo{display:flex;align-items:center;flex:0 0 auto}
.pl-logo img{height:var(--pl-brand-mark-height);width:auto}
.pl-logo:hover{text-decoration:none;opacity:.85}
.pl-topnav{display:flex;align-items:center;gap:var(--pl-space-xxl);margin-left:auto;
  font-size:var(--pl-font-caption-size);font-weight:var(--pl-font-caption-weight)}
.pl-topnav a{color:var(--pl-color-text-secondary);white-space:nowrap}
.pl-topnav a:hover{color:var(--pl-color-primary);text-decoration:none}
.pl-topnav a[aria-current="page"]{color:var(--pl-color-primary);
  font-weight:var(--pl-font-body-semibold-weight)}

/* ---- Gradient band ----
   The app's GradientHeader and the landing hero are the same treatment, and this is it:
   the same three header-gradient stops in the same 180deg order, with navy title text and
   deep-cyan supporting text. It replaces a 60px tinted strip so short and so pale that it
   read as plain white — the gradient tokens were referenced but never actually SEEN. ---- */
.pl-band{background:linear-gradient(180deg,var(--pl-color-header-gradient-start) 0%,
  var(--pl-color-header-gradient-mid) 40%,var(--pl-color-header-gradient-end) 100%);
  padding:calc(var(--pl-space-xxxl) * 2) 0;border-bottom:1px solid var(--pl-color-border)}
.pl-band-center{text-align:center}
.pl-band .pl-title{color:var(--pl-color-header-text-dark)}
.pl-band .pl-lede,.pl-band .pl-meta,.pl-band .pl-eyebrow{color:var(--pl-color-header-text-mid)}
.pl-band .pl-eyebrow a{color:var(--pl-color-header-text-mid)}
.pl-band .pl-lede,.pl-band .pl-meta{margin-bottom:0}
.pl-band-center .pl-chips{justify-content:center}
/* Chips sit ON the gradient on list pages, so their white fill reads as a pill rather
   than as invisible-on-white. */
.pl-empty{text-align:center;padding:calc(var(--pl-space-xxxl) * 2) 0 0}

/* ---- Buttons: landing/css/style.css .btn, expressed in tokens ---- */
.pl-btn{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--pl-space-sm);border-radius:var(--pl-radius-full);
  padding:var(--pl-space-md) var(--pl-space-xxxl);
  font-size:var(--pl-font-body-size);font-weight:var(--pl-font-body-semibold-weight);
  border:2px solid transparent;white-space:nowrap;
  transition:background var(--pl-transition),color var(--pl-transition),
  transform var(--pl-transition)}
.pl-btn:hover{text-decoration:none;transform:translateY(var(--pl-card-lift))}
.pl-btn-primary{background:var(--pl-color-primary);color:var(--pl-color-surface);
  box-shadow:var(--pl-shadow-large)}
.pl-btn-primary:hover{background:var(--pl-color-primary-dark);color:var(--pl-color-surface)}
.pl-btn-outline{background:transparent;color:var(--pl-color-primary);
  border-color:var(--pl-color-primary)}
.pl-btn-outline:hover{background:var(--pl-color-primary-light);color:var(--pl-color-primary)}
/* The nav pill — landing's .nav-cta is the same 8px/20px at caption size. */
.pl-btn-sm{padding:var(--pl-space-sm) var(--pl-space-xl);
  font-size:var(--pl-font-caption-size);box-shadow:none}

/* ---- Conversion CTA: landing's .cta-banner ----
   One per page, in the flow, never a popup. Constrained to the reading measure so it sits
   directly under the article column rather than spanning the wider card shell. ---- */
.pl-cta{background:linear-gradient(135deg,var(--pl-color-primary) 0%,
  var(--pl-color-primary-dark) 100%);border-radius:var(--pl-radius-xl);
  padding:calc(var(--pl-space-xxxl) * 1.5) var(--pl-space-xxl);text-align:center;
  color:var(--pl-color-surface);max-width:var(--pl-max-content-width);
  margin:calc(var(--pl-space-xxxl) * 2) auto 0}
.pl-cta h2{color:var(--pl-color-surface);font-size:var(--pl-font-hero-size);
  line-height:var(--pl-font-hero-line);font-weight:var(--pl-font-hero-weight);
  margin:0 0 var(--pl-space-md)}
.pl-cta p{font-size:var(--pl-font-body-size);line-height:var(--pl-font-prose-line);
  opacity:.9;margin:0 0 var(--pl-space-xxl)}
.pl-cta-actions{display:flex;gap:var(--pl-space-lg);justify-content:center;flex-wrap:wrap}
/* On navy the primary button inverts to a white pill, exactly as it does on the landing. */
.pl-cta .pl-btn-primary{background:var(--pl-color-surface);color:var(--pl-color-primary);
  box-shadow:none}
.pl-cta .pl-btn-primary:hover{background:var(--pl-color-primary-light);
  color:var(--pl-color-primary)}
.pl-cta .pl-btn-outline{color:var(--pl-color-surface);border-color:var(--pl-color-surface)}
.pl-cta .pl-btn-outline:hover{background:var(--pl-footer-rule);color:var(--pl-color-surface)}

/* ---- The reading column: the highest-value rule in the system ----
   Everything in the article flow is constrained to the PROSE measure, which is narrower
   than the .pl-wrap container above. The container still sizes the card grid; only
   continuous reading is pulled in. ---- */
.rte>*{max-width:var(--pl-max-content-width);margin-left:auto;margin-right:auto}
.rte{line-height:var(--pl-font-prose-line)}
.rte p,.rte ul,.rte ol{font-size:var(--pl-font-prose-size);margin:0 auto var(--pl-space-xl)}
.rte h1,.rte h2{font-size:var(--pl-font-prose-heading-size);
  line-height:var(--pl-font-prose-heading-line);font-weight:var(--pl-font-prose-heading-weight);
  margin:var(--pl-space-xxxl) auto var(--pl-space-md)}
.rte h3{font-size:var(--pl-font-subtitle-size);line-height:var(--pl-font-subtitle-line);
  font-weight:var(--pl-font-subtitle-weight);margin:var(--pl-space-xxl) auto var(--pl-space-sm)}
.rte ul,.rte ol{padding-left:var(--pl-space-xl)}
.rte li{margin-bottom:var(--pl-space-sm)}
.rte blockquote{border-left:3px solid var(--pl-color-accent);margin:0 auto var(--pl-space-xl);
  padding:2px 0 2px var(--pl-space-lg);color:var(--pl-color-text-secondary)}
.rte img{border-radius:var(--pl-radius-md);margin:0 auto var(--pl-space-xl)}
.rte figure{margin:0 auto var(--pl-space-xl)}
.rte figcaption{font-size:var(--pl-font-caption-size);color:var(--pl-color-text-secondary);
  margin-top:var(--pl-space-sm)}
.rte code{background:var(--pl-color-surface-alt);border-radius:var(--pl-radius-sm);
  padding:2px 5px;font-size:var(--pl-font-caption-size)}
.rte pre{background:var(--pl-color-surface-alt);border-radius:var(--pl-radius-md);
  padding:var(--pl-space-lg);overflow-x:auto}
.rte pre code{background:none;padding:0}
.rte hr{border:0;border-top:1px solid var(--pl-color-border);margin:var(--pl-space-xxxl) auto}
.rte table{border-collapse:collapse;width:100%;font-size:var(--pl-font-caption-size);
  margin:0 auto var(--pl-space-xl)}
.rte th,.rte td{border:1px solid var(--pl-color-border);padding:var(--pl-space-sm) var(--pl-space-md);
  text-align:left}
.rte th{color:var(--pl-color-text-primary);font-weight:var(--pl-font-body-semibold-weight)}

/* ---- Article ---- */
.pl-article{padding:var(--pl-space-xxxl) 0 0}
.pl-eyebrow{font-size:var(--pl-font-small-size);line-height:var(--pl-font-small-line);
  font-weight:var(--pl-font-small-weight);letter-spacing:.08em;text-transform:uppercase;
  color:var(--pl-color-text-secondary);max-width:var(--pl-max-content-width);
  margin:0 auto var(--pl-space-sm)}
.pl-eyebrow a{color:var(--pl-color-primary)}
/* Display size, stepped down the real type ladder at each breakpoint rather than scaled
   fluidly — every step is a token pair, so size and line-height can never drift apart. */
.pl-title{font-size:var(--pl-font-display-size);line-height:var(--pl-font-display-line);
  font-weight:var(--pl-font-display-weight);letter-spacing:-.02em;
  max-width:var(--pl-max-content-width);margin:0 auto var(--pl-space-md)}
.pl-meta{font-size:var(--pl-font-caption-size);color:var(--pl-color-text-light);
  max-width:var(--pl-max-content-width);margin:0 auto var(--pl-space-xxl)}
.pl-hero{max-width:var(--pl-max-content-width);margin:0 auto var(--pl-space-xxxl);
  border-radius:var(--pl-radius-lg);overflow:hidden;aspect-ratio:3/2;
  background:var(--pl-color-surface-alt)}
.pl-hero img{width:100%;height:100%;object-fit:cover}
.pl-lede{font-size:var(--pl-font-subtitle-size);line-height:var(--pl-font-prose-line);
  color:var(--pl-color-text-secondary);max-width:var(--pl-max-content-width);
  margin:0 auto var(--pl-space-xxl)}
/* Matches the app's "Acknowledged" status treatment (warningLight / accentDark). */
.pl-draft{background:var(--pl-color-warning-light);border:1px solid var(--pl-color-accent);
  border-radius:var(--pl-radius-md);padding:var(--pl-space-md) var(--pl-space-lg);
  margin:0 auto var(--pl-space-xxl);max-width:var(--pl-max-content-width);
  font-size:var(--pl-font-caption-size);color:var(--pl-color-accent-dark)}

/* ---- Cards: 3:2 hero, generous padding, small lift on hover ---- */
.pl-grid{display:grid;grid-template-columns:1fr;gap:var(--pl-space-xxl);
  padding:var(--pl-space-xxxl) 0 0;list-style:none;margin:0}
.pl-card{background:var(--pl-color-surface);border:1px solid var(--pl-color-border);
  border-radius:var(--pl-radius-lg);box-shadow:var(--pl-shadow-small);overflow:hidden;
  transition:transform var(--pl-transition),box-shadow var(--pl-transition)}
.pl-card:hover{transform:translateY(var(--pl-card-lift));box-shadow:var(--pl-shadow-medium)}
.pl-card-img{aspect-ratio:3/2;background:var(--pl-color-surface-alt)}
.pl-card-img img{width:100%;height:100%;object-fit:cover}
.pl-card-body{padding:var(--pl-space-lg) var(--pl-space-xl) var(--pl-space-xl)}
.pl-card h3{font-size:var(--pl-font-subtitle-size);line-height:var(--pl-font-subtitle-line);
  font-weight:var(--pl-font-subtitle-weight);margin:0 0 var(--pl-space-sm)}
.pl-card h3 a{color:var(--pl-color-text-primary)}
.pl-card h3 a:hover{color:var(--pl-color-primary);text-decoration:none}
.pl-card-meta{font-size:var(--pl-font-small-size);color:var(--pl-color-text-light);
  margin:0 0 var(--pl-space-sm)}
.pl-card-excerpt{font-size:var(--pl-font-caption-size);line-height:var(--pl-font-prose-line);
  font-weight:var(--pl-font-prose-weight);color:var(--pl-color-text-secondary);margin:0}

/* ---- Category chips ---- */
.pl-chips{display:flex;flex-wrap:wrap;gap:var(--pl-space-sm);padding:var(--pl-space-xxl) 0 0;
  list-style:none;margin:0}
.pl-chip{display:inline-block;border:1px solid var(--pl-color-border);
  border-radius:var(--pl-radius-full);padding:var(--pl-space-xs) var(--pl-space-md);
  font-size:var(--pl-font-caption-size);font-weight:var(--pl-font-caption-weight);
  color:var(--pl-color-text-secondary);background:var(--pl-color-surface)}
.pl-chip:hover{border-color:var(--pl-color-primary);color:var(--pl-color-primary);text-decoration:none}
.pl-chip[aria-current="page"]{background:var(--pl-color-primary);
  border-color:var(--pl-color-primary);color:var(--pl-color-surface)}

/* ---- Pagination ---- */
.pl-pager{display:flex;justify-content:space-between;align-items:center;
  gap:var(--pl-space-md);padding:var(--pl-space-xxxl) 0 0;
  font-size:var(--pl-font-caption-size);color:var(--pl-color-text-secondary)}

/* ---- Footer: landing/css/style.css .footer, same columns and same links ----
   The navy slab is the single strongest "same product" signal on the page, because it is
   the last thing a reader sees on the landing site too. Uses the WHITE wordmark, which is
   what logo-dark.png is for. ---- */
.pl-footer{background:var(--pl-color-brand-navy);color:var(--pl-color-text-light);
  margin-top:calc(var(--pl-space-xxxl) * 2);
  padding:calc(var(--pl-space-xxxl) * 2) 0 var(--pl-space-xxxl);
  font-size:var(--pl-font-caption-size)}
.pl-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--pl-space-xxxl);margin-bottom:var(--pl-space-xxxl)}
.pl-footer-logo{display:inline-flex;margin-bottom:var(--pl-space-md)}
.pl-footer-logo img{height:var(--pl-brand-mark-height-large);width:auto}
.pl-footer h4{font-size:var(--pl-font-caption-size);line-height:var(--pl-font-caption-line);
  font-weight:var(--pl-font-title-weight);color:var(--pl-color-surface);
  text-transform:uppercase;letter-spacing:.05em;margin:0 0 var(--pl-space-lg)}
.pl-footer p{margin:0;line-height:var(--pl-font-prose-line)}
.pl-footer ul{list-style:none;margin:0;padding:0}
.pl-footer li{margin-bottom:var(--pl-space-sm)}
.pl-footer a{color:var(--pl-color-text-light)}
.pl-footer a:hover{color:var(--pl-color-surface)}
.pl-footer-bottom{border-top:1px solid var(--pl-footer-rule);
  padding-top:var(--pl-space-xxl);display:flex;justify-content:space-between;
  align-items:center;gap:var(--pl-space-md);flex-wrap:wrap;
  font-size:var(--pl-font-small-size)}

/* ---- Breakpoints ---- */
@media (max-width:989px){
  .pl-title{font-size:var(--pl-font-hero-size);line-height:var(--pl-font-hero-line)}
  .pl-footer-grid{grid-template-columns:1fr 1fr;gap:var(--pl-space-xxl)}
}
@media (max-width:749px){
  .pl-wrap{padding:0 var(--pl-space-lg)}
  .pl-title{font-size:var(--pl-font-title-size);line-height:var(--pl-font-title-line)}
  .pl-article{padding:var(--pl-space-xxl) 0 0}
  .pl-band{padding:var(--pl-space-xxl) 0}
  /* No hamburger: the page carries zero JavaScript by design, and a CSS-only drawer is
     more moving parts than a blog nav is worth. The marketing links collapse into the
     footer, which lists every one of them, and the bar keeps the two things that matter
     on a phone — who this is, and how to start using it. */
  .pl-topnav{display:none}
  .pl-topbar .pl-btn{margin-left:auto}
  .pl-cta{padding:var(--pl-space-xxl) var(--pl-space-lg)}
  .pl-cta-actions .pl-btn{width:100%}
  .pl-footer-bottom{justify-content:center;text-align:center}
}
@media (min-width:750px){.pl-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:990px){.pl-grid{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){
  .pl-card,.pl-btn{transition:none}
  .pl-card:hover,.pl-btn:hover{transform:none}
}