/* ==========================================================================
   Pearl IMS — design tokens & base reset
   Brand system extracted from the Claude Design prototype (Home.dc.html):
   deep royal blue on white, navy darks, Plus Jakarta Sans + JetBrains Mono.
   ========================================================================== */

:root{
  /* brand */
  --pim-blue:#1B3FE0;
  --pim-blue-dark:#1532B8;
  --pim-blue-light:#EEF1FE;
  --pim-blue-soft:#7FA0FF;
  --pim-blue-soft-2:#9FB4FF;
  --pim-navy:#0C1331;
  --pim-navy-2:#0A1133;
  --pim-navy-3:#070C26;

  /* text */
  --pim-text:#0C1331;
  --pim-text-muted:#525a73;
  --pim-text-muted-2:#5C647D;
  --pim-text-faint:#7C86A8;
  --pim-text-faint-2:#9298AE;
  --pim-text-faint-3:#8A92A8;

  /* dark-band text */
  --pim-on-dark:#ffffff;
  --pim-on-dark-muted:#A8B2D4;
  --pim-on-dark-faint:#9098B8;
  --pim-on-dark-faint-2:#6B7396;

  /* borders / surfaces */
  --pim-border:#E7EAF3;
  --pim-border-2:#DEE2EF;
  --pim-border-3:#ECEEF5;
  --pim-border-4:#EDF0F7;
  --pim-border-strong:#CFD6EC;
  --pim-surface:#ffffff;
  --pim-surface-tint:#FBFCFF;
  --pim-surface-tint-2:#F6F7FB;
  --pim-surface-grid:#EDF0FB;

  /* status accents */
  --pim-green:#1B8A5A;
  --pim-green-bg:#EAF7F0;
  --pim-orange:#C9712A;
  --pim-orange-bg:#FBEFE6;

  /* type */
  --pim-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pim-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* layout */
  --pim-container: 1200px;
  --pim-container-narrow: 1100px;
  --pim-gutter: 32px;
  --pim-section-pad: clamp(56px, 8vw, 96px);
  --pim-radius-sm: 10px;
  --pim-radius-md: 14px;
  --pim-radius-lg: 18px;
  --pim-radius-xl: 20px;
  --pim-shadow-sm: 0 1px 2px rgba(12,19,49,.04);
  --pim-shadow-md: 0 18px 36px -20px rgba(12,19,49,.26);
  --pim-shadow-lg: 0 30px 60px -24px rgba(12,19,49,.28);
  --pim-header-h: 70px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--pim-font);
  color:var(--pim-text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6,p{ margin:0; }
svg{ display:block; }
::selection{ background:var(--pim-blue); color:#fff; }

/* 32px is ~18% of a 360px screen once both sides are counted, so phones get a
   smaller gutter — inset enough to breathe, without squeezing the text column.
   Everything that respects --pim-gutter follows automatically. */
@media (max-width: 600px){
  :root{ --pim-gutter: 20px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.pim-container{ max-width:var(--pim-container); margin:0 auto; padding-left:var(--pim-gutter); padding-right:var(--pim-gutter); }
.pim-container--narrow{ max-width:var(--pim-container-narrow); }
.pim-section{ padding-top:var(--pim-section-pad); padding-bottom:var(--pim-section-pad); }
.pim-eyebrow{ display:inline-block; font:600 13px/1 var(--pim-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--pim-blue); }
.pim-eyebrow--on-dark{ color:var(--pim-blue-soft); }
.pim-h2{ margin:16px 0 0; font-weight:800; font-size:clamp(30px,4vw,46px); line-height:1.08; letter-spacing:-.03em; color:var(--pim-text); }
.pim-h2--on-dark{ color:#fff; }
.pim-lede{ margin:18px 0 0; font-size:18px; line-height:1.6; color:var(--pim-text-muted); }
.pim-lede--on-dark{ color:var(--pim-on-dark-muted); }
.pim-kicker-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; }
.pim-kicker-row .pim-kicker-copy{ max-width:600px; }
.pim-screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.pim-skip-link{ position:absolute; left:-999px; top:auto; z-index:1000; background:var(--pim-blue); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; font-weight:600; }
.pim-skip-link:focus{ left:0; top:0; }