/* ============================================================
   PDR-Team brand tokens  —  www/brand.css
   ------------------------------------------------------------
   ONE definition for every pdr-team.com page. Link it, don't
   copy it. If a value needs to change, it changes here.

   Source of truth: the live homepage (pdr-team.us), read from
   computed styles on 2026-09-03. Confirmed against the Figma
   file "pdr-team.com" -> Components page.

   Every value below is measured, not invented. Where this file
   deviates from what the homepage ships, the reason is stated
   on the line.
   ============================================================ */

:root{

  /* ---- Blues ------------------------------------------------
     The homepage uses four blues. They each have a job. */

  /* Brand accent. Homepage ships #007CFF (Figma calls this
     "PDR accent"). Darkened 8% here so white button text
     reaches 4.56:1 and passes WCAG AA. At #007CFF the best
     possible text contrast is 3.94:1, which fails. The two
     colours are visually indistinguishable side by side. */
  --pdr-accent:        #0072EB;
  --pdr-accent-raw:    #007CFF;   /* untouched brand blue: graphics, large display type, never small text */

  --pdr-navy:          #002746;   /* darkest ground — footer, dark sections */
  --pdr-deep:          #005190;   /* mid blue — section grounds, secondary fills */
  --pdr-link:          #004F90;   /* link text on light. 8.33:1 on white */

  /* Figma calls this "PDR light". Tints, chips, quiet grounds.
     Never as text on --pdr-accent (only 3.02:1). */
  --pdr-light:         #D6E3ED;

  /* Chart ramp, taken from the pdr-team.us comparison graphics. The lightest
     two steps were pulled apart (#0091D0 / #7FD8FF) so they are still
     distinguishable — as published they sat at deltaE 14, below the point
     where full-colour vision separates them reliably. Every segment is also
     named in the legend, which is what carries identity. */
  --pdr-chart-panel:   #EDF4F8;
  --pdr-chart-1:       #002746;
  --pdr-chart-2:       #035DA5;
  --pdr-chart-3:       #0091D0;
  --pdr-chart-4:       #7FD8FF;

  /* ---- Neutrals --------------------------------------------- */
  --pdr-ink:           #222222;   /* body copy. 14.59:1 on --pdr-ground */
  --pdr-ink-soft:      #333333;   /* secondary copy, captions */
  --pdr-ground:        #F5F5F5;   /* page background */
  --pdr-surface:       #FFFFFF;   /* cards, bars, raised surfaces */
  --pdr-hairline:      #E4E9EE;   /* dividers. Derived from --pdr-light at low chroma */

  /* ---- Type -------------------------------------------------
     Ubuntu, confirmed loading on the live homepage. Served from
     Google Fonts on new pages:
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap"> */
  --pdr-font:          Ubuntu, Helvetica, Arial, sans-serif;

  --pdr-size-body:     16px;      /* homepage body */
  --pdr-size-small:    13px;      /* pill buttons, nav, meta */
  --pdr-size-h2:       23px;
  --pdr-size-h1:       37px;      /* homepage h1/h2 */
  --pdr-weight-display:300;       /* homepage headings are LIGHT, not bold */
  --pdr-weight-body:   400;
  --pdr-weight-strong: 500;
  --pdr-leading:       1.55;
  --pdr-tracking-label:.12em;     /* uppercase eyebrows only */

  /* ---- Shape ------------------------------------------------
     The homepage is a pill system. Nothing is square. */
  --pdr-radius-pill:   40px;      /* buttons */
  --pdr-radius-chip:   32px;      /* nav items, tags */
  --pdr-radius-sm:     4px;       /* inputs, small boxes */

  /* ---- Layout ----------------------------------------------- */
  --pdr-wrap:          1170px;    /* live theme is Bootstrap: 970px at 1095vw, 1170px max.
                                     NOTE: the Figma frames are drawn at 1408px with 160px
                                     side padding. Flagged — Josh to settle which wins. */
  --pdr-gutter:        15px;      /* live theme container padding */
  --pdr-section-y:     46px;

  /* ---- Elevation -------------------------------------------- */
  --pdr-shadow:        0 1px 2px rgba(0,39,70,.07), 0 10px 28px -14px rgba(0,39,70,.22);
}

/* ============================================================
   Base
   ============================================================ */
/* border-box is load-bearing too: without it, any width:100% control with
   padding and a border (every form field below) overflows its container
   and the page scrolls sideways on a phone. */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--pdr-ground);
  color:var(--pdr-ink);
  font-family:var(--pdr-font);
  font-size:var(--pdr-size-body);
  line-height:var(--pdr-leading);
  -webkit-font-smoothing:antialiased;
}

/* height:auto is load-bearing. Without it, an <img> carrying width/height
   attributes (which it should, to reserve layout space) renders at the
   ATTRIBUTE height while CSS sets only the width — the logo stretches. */
img{ display:block; max-width:100%; height:auto; }

.pdr-wrap{
  max-width:var(--pdr-wrap);
  margin-inline:auto;
  padding-inline:var(--pdr-gutter);
}

/* ============================================================
   Type scale
   ============================================================ */
.pdr-h1{
  font-size:var(--pdr-size-h1);
  font-weight:var(--pdr-weight-display);
  line-height:1.15;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0;
}
.pdr-h2{
  font-size:var(--pdr-size-h2);
  font-weight:var(--pdr-weight-display);
  line-height:1.25;
  margin:0;
}
.pdr-lede{
  font-size:var(--pdr-size-body);
  color:var(--pdr-ink-soft);
  max-width:58ch;
  margin:0;
}
.pdr-eyebrow{
  display:inline-block;
  font-size:12.5px;
  font-weight:var(--pdr-weight-strong);
  letter-spacing:var(--pdr-tracking-label);
  text-transform:uppercase;
  color:var(--pdr-link);
  background:var(--pdr-light);
  padding:5px 12px;
  border-radius:var(--pdr-radius-pill);
}
a{ color:var(--pdr-link); }

/* ============================================================
   Buttons — Figma: "Primary button", "Secondary button pos/neg"
   ============================================================ */
.pdr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font:inherit;
  font-size:var(--pdr-size-small);
  font-weight:var(--pdr-weight-strong);
  padding:10px 22px;
  border-radius:var(--pdr-radius-pill);
  border:1.5px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
.pdr-btn:focus-visible{ outline:2px solid var(--pdr-link); outline-offset:2px; }

.pdr-btn--primary{ background:var(--pdr-accent); color:#fff; }
.pdr-btn--primary:hover{ background:var(--pdr-link); }

/* positive: on a light ground */
.pdr-btn--secondary{ background:transparent; color:var(--pdr-link); border-color:var(--pdr-link); }
.pdr-btn--secondary:hover{ background:var(--pdr-light); }

/* negative: on navy or a photo */
.pdr-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.pdr-btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

/* ============================================================
   Nav item — Figma: "Menu"
   ============================================================ */
.pdr-navlink{
  font-size:var(--pdr-size-small);
  color:var(--pdr-ink);
  text-decoration:none;
  padding:7px 13px;
  border-radius:var(--pdr-radius-chip);
}
.pdr-navlink:hover{ background:var(--pdr-light); }

/* ============================================================
   Surfaces
   ============================================================ */
.pdr-card{
  background:var(--pdr-surface);
  border-radius:var(--pdr-radius-chip);
  padding:22px;
  box-shadow:var(--pdr-shadow);
}
.pdr-section{ padding-block:var(--pdr-section-y); }
.pdr-section--tint{ background:var(--pdr-light); }
.pdr-section--dark{ background:var(--pdr-navy); color:#fff; }
.pdr-section--dark .pdr-lede{ color:rgba(255,255,255,.82); }

/* ============================================================
   Forms — no measured source on the homepage; built from the
   token set so inputs sit in the same system as everything else.
   ============================================================ */
.pdr-field{ display:grid; gap:6px; margin-bottom:16px; }
.pdr-field label{ font-size:13px; font-weight:var(--pdr-weight-strong); color:var(--pdr-ink); }
.pdr-field input,
.pdr-field select,
.pdr-field textarea{
  width:100%;
  font:inherit;
  font-size:var(--pdr-size-body);
  color:var(--pdr-ink);
  background:var(--pdr-surface);
  border:1.5px solid var(--pdr-hairline);
  border-radius:var(--pdr-radius-sm);
  padding:12px 14px;
}
.pdr-field input:focus,
.pdr-field select:focus,
.pdr-field textarea:focus{
  outline:none;
  border-color:var(--pdr-accent);
  box-shadow:0 0 0 3px rgba(0,114,235,.18);
}
.pdr-field .pdr-hint{ font-size:12.5px; color:var(--pdr-ink-soft); }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   Page furniture — shared by every pdr-team.com page.
   Markup lives in the page; every rule lives here. Never copy
   these into a page's own <style>.
   ============================================================ */

/* ---- site bar ---- */
.site-bar{background:var(--pdr-surface);border-bottom:1px solid var(--pdr-hairline)}
.site-bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.site-brand{display:flex;align-items:center;gap:13px;min-width:0}
.site-brand img{width:78px;flex:none}
.site-brand-rule{width:1px;align-self:stretch;background:var(--pdr-hairline);flex:none}
.site-tag{font-size:12.5px;line-height:1.32;color:var(--pdr-ink);max-width:106px;margin:0}
.site-nav{display:flex;align-items:center;gap:5px}
/* On a phone the nav becomes a scrollable strip under the logo rather than
   disappearing — with seven pages, hiding it leaves no way to get around. */
@media(max-width:700px){
  .site-tag,.site-brand-rule{display:none}
  .site-bar-in{flex-wrap:wrap;gap:10px}
  .site-nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
            scrollbar-width:none;padding-bottom:2px}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav>*{flex:none}
}

/* ---- hero ---- */
.site-hero{background:var(--pdr-surface);border-bottom:1px solid var(--pdr-hairline)}
.site-hero-in{padding-block:54px 48px;display:grid;gap:16px;justify-items:center;
  text-align:center}
.site-hero-in .pdr-h1{max-width:20ch;text-wrap:balance}
.site-hero-in .pdr-lede{max-width:62ch}
.site-hero-in .site-actions{justify-content:center}
.site-hero p{margin:0}
.site-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

/* ---- chip row (audiences, tags) ---- */
.chip-band{padding-block:28px;border-bottom:1px solid var(--pdr-hairline);background:var(--pdr-surface)}
.chip-band h2{font-size:12.5px;font-weight:var(--pdr-weight-body);letter-spacing:var(--pdr-tracking-label);
              text-transform:uppercase;color:var(--pdr-ink-soft);margin:0 0 14px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:13px;color:var(--pdr-link);background:var(--pdr-light);
          padding:7px 15px;border-radius:var(--pdr-radius-pill)}

/* ---- section head ---- */
.sec-head{display:grid;gap:8px;justify-items:start;margin-bottom:26px}

/* ---- numbered process ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-width:760px}
.step{display:flex;gap:16px;align-items:flex-start;padding:15px 18px;border-radius:var(--pdr-radius-chip)}
.step:nth-child(odd){background:var(--pdr-surface)}
.step-n{flex:none;width:34px;height:34px;border-radius:var(--pdr-radius-pill);
        background:var(--pdr-light);color:var(--pdr-link);font-size:12.5px;
        font-weight:var(--pdr-weight-strong);display:flex;align-items:center;justify-content:center;
        font-variant-numeric:tabular-nums}
.step h3{margin:0;font-size:15px;font-weight:var(--pdr-weight-strong);color:var(--pdr-ink)}
.step p{margin:3px 0 0;font-size:14px;color:var(--pdr-ink-soft);line-height:1.5}

/* ---- tick list ---- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:64ch}
/* ---- a long step list folds to the first four ----------------------------
   anim.js adds .js-fold and the button. With the script off, every step is
   already in the HTML and simply stays visible. */
.js-fold > li:nth-child(n+5){display:none}
.js-fold.is-open > li:nth-child(n+5){display:flex}
.steps-more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font:inherit;font-size:var(--pdr-size-small);font-weight:var(--pdr-weight-strong);
  color:var(--pdr-link);background:transparent;border:1px solid var(--pdr-link);
  border-radius:var(--pdr-radius-pill);padding:9px 18px;cursor:pointer}
.steps-more:hover{background:var(--pdr-light)}
.steps-more:focus-visible{outline:2px solid var(--pdr-link);outline-offset:2px}
.steps-more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.steps-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(225deg)}

.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--pdr-ink-soft)}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:var(--pdr-light) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004F90' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---- two-up cards ---- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;max-width:900px}

/* ---- form ---- */
.form-band{background:var(--pdr-surface);border-top:1px solid var(--pdr-hairline)}
.form-band-in{padding-block:46px}
.form-band form,.form-band .pdr-lede{max-width:560px}
.hp{position:absolute;left:-9999px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--pdr-ink-soft);
         margin:4px 0 20px;max-width:560px}
.consent input{margin-top:3px;flex:none}

/* ---- footer ---- */
.site-foot{background:var(--pdr-navy);color:#fff}
.site-foot-in{padding-block:34px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;
              justify-content:space-between}
.site-foot img{width:74px}
.site-foot p{margin:0;font-size:13px;color:rgba(255,255,255,.76)}
.site-foot a{color:#fff}

/* ---- radio / checkbox pills ---- */
.pdr-radios{display:flex;flex-wrap:wrap;gap:8px}
.pdr-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:14px;color:var(--pdr-ink);background:var(--pdr-surface);
  border:1.5px solid var(--pdr-hairline);border-radius:var(--pdr-radius-pill);
  padding:9px 16px;transition:border-color .14s ease,background-color .14s ease}
.pdr-radio:hover{border-color:var(--pdr-link)}
.pdr-radio input{accent-color:var(--pdr-accent);margin:0}
.pdr-radio:has(input:checked){border-color:var(--pdr-link);background:var(--pdr-light)}
.pdr-radio:has(input:focus-visible){outline:2px solid var(--pdr-link);outline-offset:2px}
.pdr-fieldset{border:0;padding:0;margin:0 0 18px}
.pdr-fieldset legend{font-size:13px;font-weight:var(--pdr-weight-strong);padding:0 0 8px;
  color:var(--pdr-ink)}

/* ---- stat tiles. Only where the figures ARE the argument. ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--pdr-hairline);border:1px solid var(--pdr-hairline);
  border-radius:var(--pdr-radius-chip);overflow:hidden;max-width:900px}
.stat{background:var(--pdr-surface);padding:22px 20px}
.stat b{display:block;font-size:34px;font-weight:var(--pdr-weight-display);line-height:1.05;
  color:var(--pdr-link);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:13.5px;color:var(--pdr-ink-soft);margin-top:6px}
.stat small{display:block;font-size:12.5px;color:var(--pdr-ink-soft);opacity:.75;margin-top:8px}

/* Card grids: pick the track width by item count so nothing is stranded
   alone on the last row. .duo--2 forces two columns for 2 or 4 items. */
.duo--2{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));max-width:760px}

/* ---- timeline. Years are a real sequence, so they get a rail. ---- */
.tl{list-style:none;margin:0;padding:0;max-width:720px;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:var(--pdr-light);border-radius:2px}
.tl li{position:relative;padding:0 0 22px 34px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--pdr-surface);border:3px solid var(--pdr-accent)}
.tl b{display:block;font-size:15px;font-weight:var(--pdr-weight-strong);color:var(--pdr-link);
  font-variant-numeric:tabular-nums}
.tl p{margin:2px 0 0;font-size:14.5px;color:var(--pdr-ink-soft);line-height:1.5}

/* ---- embedded third-party widget ---- */
.embed{border:1px solid var(--pdr-hairline);border-radius:var(--pdr-radius-chip);overflow:hidden;
  background:var(--pdr-surface);max-width:900px}
.embed iframe{display:block;width:100%;border:0}

/* ============================================================
   Imagery
   ============================================================ */

/* A wide picture that belongs to the section above it. */
.fig{margin:0;max-width:960px}
.fig img{width:100%;border-radius:var(--pdr-radius-chip);border:1px solid var(--pdr-hairline)}
.fig figcaption{margin-top:10px;font-size:13px;color:var(--pdr-ink-soft)}
.fig--plain img{border:0}

/* Hero picture: sits under the hero copy, full width of the wrap. */
.hero-media{background:var(--pdr-surface);padding-bottom:var(--pdr-section-y)}
.hero-media img{width:100%;border-radius:var(--pdr-radius-chip);
  aspect-ratio:16/9;object-fit:cover}

/* Two figures side by side. */
.fig-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px;
  max-width:960px}

/* Steps carrying an illustration instead of a plain number. */
.step--icon{align-items:center}
.step--icon .step-n{width:64px;height:64px;background:transparent;padding:0;
  border-radius:var(--pdr-radius-sm);overflow:hidden}
.step--icon .step-n img{width:64px;height:64px;object-fit:contain;border-radius:var(--pdr-radius-sm);
  mix-blend-mode:multiply}
.step-idx{display:block;font-size:12px;font-weight:var(--pdr-weight-strong);
  letter-spacing:.1em;text-transform:uppercase;color:var(--pdr-link);margin-bottom:2px;
  font-variant-numeric:tabular-nums}

/* A person: portrait plus their part. */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;
  max-width:800px}
.person{background:var(--pdr-surface);border-radius:var(--pdr-radius-chip);padding:22px;
  box-shadow:var(--pdr-shadow)}
.person img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin-bottom:14px}
.person h3{margin:0;font-size:16px;font-weight:var(--pdr-weight-strong)}
.person p{margin:6px 0 0;font-size:14px;color:var(--pdr-ink-soft);line-height:1.5}

/* ---- tap targets ----
   Measured on a 390px viewport: footer links were 15px tall and the nav strip
   34px. Both are under the 44px a thumb needs. */
@media(max-width:700px){
  .pdr-navlink{padding-block:12px}
  .site-foot p a{display:inline-block;padding-block:10px}
}

/* ---- comparison bars ---------------------------------------------------
   The look of the original pdr-team.us charts — tinted panel, white card per
   row, pill segments, dot legend — rebuilt as HTML so it stays sharp and
   readable at any width instead of being a screenshot scaled down.
   The white card's length is the comparison: it is the row's total against
   the same scale. Segments divide that total. Every segment is named in the
   legend, so identity never rests on colour alone. */
.cmp{margin:0;max-width:900px;background:var(--pdr-chart-panel);
  border-radius:28px;padding:26px 26px 22px}
.cmp + .cmp{margin-top:24px}
.cmp-title{margin:0 0 22px;font-size:19px;font-weight:var(--pdr-weight-strong);
  color:var(--pdr-navy);text-align:center}
.cmp-note{margin:-16px 0 22px;font-size:13px;color:var(--pdr-ink-soft);text-align:center}
.cmp-row + .cmp-row{margin-top:16px}
.cmp-card{background:var(--pdr-surface);border-radius:20px;padding:14px 16px 16px;
  width:var(--share,100%);min-width:250px;box-sizing:border-box}
.cmp-who{display:block;font-size:16px;color:var(--pdr-ink);margin-bottom:11px}
.cmp-who b{font-weight:var(--pdr-weight-strong);color:var(--pdr-navy)}
.cmp-row--us .cmp-who{font-weight:var(--pdr-weight-strong)}
.cmp-track{display:flex;gap:4px;height:32px}
.cmp-seg{min-width:6px;border-radius:var(--pdr-radius-pill);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.cmp-seg--1{background:var(--pdr-chart-1)}
.cmp-seg--2{background:var(--pdr-chart-2)}
.cmp-seg--3{background:var(--pdr-chart-3)}
.cmp-seg--4{background:var(--pdr-chart-4);color:var(--pdr-navy)}
.cmp-detail{list-style:none;display:none;flex-wrap:wrap;gap:5px 14px;margin:11px 0 0;padding:0}
.cmp-detail li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--pdr-ink-soft)}
.cmp-detail i{width:10px;height:10px;border-radius:50%;flex:none}
.cmp-detail i.cmp-seg--1{background:var(--pdr-chart-1)}
.cmp-detail i.cmp-seg--2{background:var(--pdr-chart-2)}
.cmp-detail i.cmp-seg--3{background:var(--pdr-chart-3)}
.cmp-detail i.cmp-seg--4{background:var(--pdr-chart-4)}
.cmp-detail b{color:var(--pdr-ink);font-weight:var(--pdr-weight-strong);font-variant-numeric:tabular-nums}
.cmp-key{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:20px 0 0;padding:0;
  justify-content:center}
.cmp-key li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--pdr-ink-soft)}
.cmp-key i{width:18px;height:18px;border-radius:50%;flex:none}
.cmp-key i.cmp-seg--1{background:var(--pdr-chart-1)}
.cmp-key i.cmp-seg--2{background:var(--pdr-chart-2)}
.cmp-key i.cmp-seg--3{background:var(--pdr-chart-3)}
.cmp-key i.cmp-seg--4{background:var(--pdr-chart-4)}
.cmp-key b{color:var(--pdr-ink);font-weight:var(--pdr-weight-strong);font-variant-numeric:tabular-nums}
.cmp-src{margin:16px 0 0;font-size:12.5px;color:var(--pdr-ink-soft);text-align:center}
@media(max-width:700px){
  .cmp{padding:20px 16px 18px;border-radius:22px}
  /* A card at 29% of a 390px screen cannot hold its own label, so on a phone
     the card goes full width and the BAR carries the proportion instead. */
  .cmp-card{width:100%;min-width:0}
  .cmp-track{width:var(--share,100%)}
  .cmp-seg{font-size:0}
  .cmp-detail{display:flex}
  .cmp-key{display:none}
  .cmp-track{height:26px;gap:3px}
}

/* ---- motion, part two -------------------------------------------------
   Everything here is enhancement. anim.js adds the js- classes; with the
   script off, or under prefers-reduced-motion, none of it applies and every
   page renders exactly as it does without motion. */
@media (prefers-reduced-motion: no-preference){

  /* 0 — anything clickable answers the cursor. One curve, one duration,
         so the whole site reacts with the same hand. */
  .pdr-btn{transition:background-color .18s ease,border-color .18s ease,
                      transform .18s cubic-bezier(.34,1.3,.64,1)}
  .pdr-btn:hover{transform:translateY(-2px)}
  .pdr-btn:active{transform:translateY(0)}
  .pdr-navlink{transition:background-color .18s ease}
  .pdr-card{transition:transform .22s cubic-bezier(.22,.61,.36,1),
                       box-shadow .22s ease}
  .pdr-card:hover{transform:translateY(-3px);
    box-shadow:0 10px 26px rgba(16,38,66,.11)}
  .step{transition:background-color .18s ease}
  .step:hover{background:var(--pdr-light)}

  /* A — a section lifts into place as you reach it. Once, on the way down. */
  .js-reveal{opacity:0;transform:translateY(10px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
  .js-reveal.is-in{opacity:1;transform:none}

  /* B — the hero arrives in reading order: label, headline, text, buttons. */
  .js-hero > *{opacity:0;transform:translateY(9px);
    animation:pdr-rise .55s cubic-bezier(.22,.61,.36,1) forwards}
  .js-hero > *:nth-child(1){animation-delay:.05s}
  .js-hero > *:nth-child(2){animation-delay:.14s}
  .js-hero > *:nth-child(3){animation-delay:.23s}
  .js-hero > *:nth-child(4){animation-delay:.31s}
  .js-hero > *:nth-child(5){animation-delay:.39s}
  @keyframes pdr-rise{to{opacity:1;transform:none}}

  /* C — the hero photograph settles out of a 4% overscale. */
  .js-settle img{transform:scale(1.04);transition:transform 1.6s cubic-bezier(.16,.7,.3,1)}
  .js-settle.is-in img{transform:none}

  /* D — steps arrive in sequence, because that is what they are. */
  .js-steps > li{opacity:0;transform:translateY(9px);
    transition:opacity .42s ease,transform .42s cubic-bezier(.22,.61,.36,1)}
  .js-steps.is-in > li{opacity:1;transform:none}
  .js-steps.is-in > li:nth-child(1){transition-delay:.02s}
  .js-steps.is-in > li:nth-child(2){transition-delay:.09s}
  .js-steps.is-in > li:nth-child(3){transition-delay:.16s}
  .js-steps.is-in > li:nth-child(4){transition-delay:.23s}
  .js-steps.is-in > li:nth-child(5){transition-delay:.30s}
  .js-steps.is-in > li:nth-child(6){transition-delay:.37s}
  .js-steps.is-in > li:nth-child(7){transition-delay:.44s}
  .js-steps.is-in > li:nth-child(8){transition-delay:.51s}
  .js-steps.is-in > li:nth-child(9){transition-delay:.58s}
  .js-steps.is-in > li:nth-child(10){transition-delay:.65s}
  .js-steps.is-in > li:nth-child(11){transition-delay:.72s}

  /* G — the history rail draws itself downward and each year lands on it. */
  .js-tl::before{transform:scaleY(0);transform-origin:top;
    transition:transform .9s cubic-bezier(.4,0,.2,1)}
  .js-tl.is-in::before{transform:scaleY(1)}
  .js-tl > li::before{transform:scale(0);
    transition:transform .34s cubic-bezier(.3,1.5,.5,1)}
  .js-tl.is-in > li::before{transform:scale(1)}
  .js-tl.is-in > li:nth-child(1)::before{transition-delay:.12s}
  .js-tl.is-in > li:nth-child(2)::before{transition-delay:.26s}
  .js-tl.is-in > li:nth-child(3)::before{transition-delay:.40s}
  .js-tl.is-in > li:nth-child(4)::before{transition-delay:.54s}
  .js-tl.is-in > li:nth-child(5)::before{transition-delay:.68s}
  .js-tl.is-in > li:nth-child(6)::before{transition-delay:.82s}
  .js-tl.is-in > li:nth-child(7)::before{transition-delay:.96s}

  /* J — the HCP screen straightens as it reaches the middle of the window. */
  .js-tilt img{transform:perspective(1400px) rotateX(var(--tilt,0deg));
    transform-origin:center 80%;will-change:transform}
}

/* I — the platform list reads as two columns, each point on its own line. */
.ticks--two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:10px 34px;max-width:820px}

/* ---- responsive video embed ---- */
.embed{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;
  border-radius:var(--pdr-radius-chip);overflow:hidden;background:var(--pdr-navy)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- motion -------------------------------------------------------------
   Progressive enhancement only. With JavaScript off, or when the reader has
   asked for reduced motion, every bar and number is already at its final
   value — the script only ever takes something away and gives it back. */
@media (prefers-reduced-motion: no-preference){
  /* The whole bar wipes in as one piece — scaling each segment separately
     detaches them mid-flight and reads as broken. */
  .js-anim .cmp-track{clip-path:inset(0 100% 0 0);
    transition:clip-path .9s cubic-bezier(.22,.61,.36,1)}
  .js-anim.is-in .cmp-track{clip-path:inset(0 0 0 0)}
  .js-anim.is-in .cmp-row--us .cmp-track{transition-delay:.2s}
  .js-anim .cmp-key li,.js-anim .cmp-detail li{opacity:0;transition:opacity .5s ease .45s}
  .js-anim .cmp-who b{opacity:0;transition:opacity .25s ease}
  .js-anim.is-in .cmp-key li,.js-anim.is-in .cmp-detail li,.js-anim.is-in .cmp-who b{opacity:1}
  .js-anim .stat b{opacity:0;transition:opacity .3s ease}
  .js-anim.is-in .stat b{opacity:1}
}