/* The home page (workflow_start.html). Scoped to .hp so Pico and the site styles elsewhere are untouched. Palette roles
   follow the site's Federal blue: navy for the hero and headings, blue for links and actions, cyan for thin accents. */
.hp {
  --hp-navy: #12284b; --hp-navy-2: #1b3763; --hp-blue: #1f5fbf; --hp-cyan: #19b5d8; --hp-sky: #e9f3fb; --hp-sky-2: #f5f9fd;
  --hp-ink: #12284b; --hp-ink-2: #4a5d7a; --hp-ink-3: #7889a3; --hp-line: #d6e3f0; --hp-card: #fff;
  --hp-amber: #9a6514; --hp-amber-bg: #fdf6e7; --hp-green: #237a57;
  --hp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hp-shadow: 0 1px 2px rgba(18, 40, 75, .06), 0 8px 28px rgba(18, 40, 75, .08);
  color: var(--hp-ink);
}
.hp a { color: var(--hp-blue); text-decoration: none; }
.hp a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp h1, .hp h2, .hp h3 { color: inherit; }
.hp .mono { font-family: var(--hp-mono); font-size: .92em; }

/* Hero: full width under the site header */
.hp-hero { margin: -1rem calc(50% - 50vw) 0; padding: 64px 0 96px; color: #fff; overflow: hidden;
  background: radial-gradient(1200px 500px at 85% -10%, rgba(25, 181, 216, .18), transparent 60%),
              linear-gradient(180deg, var(--hp-navy) 0%, var(--hp-navy-2) 100%); }
.hp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hp-hero .hp-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.hp-kicker { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--hp-cyan); margin: 0 0 18px; }
.hp-hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 20px; font-weight: 800; color: #fff; }
.hp-hero h1 em { font-style: normal; background: linear-gradient(90deg, #8fd9ee, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-lede { font-size: 18px; line-height: 1.55; color: #c9dcf2; max-width: 560px; margin: 0 0 30px; }
.hp-search { background: #fff; border-radius: 14px; padding: 6px; display: flex; gap: 6px; max-width: 600px; margin: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.hp-search input[type="search"] { flex: 1; min-width: 0; margin: 0; height: auto; border: 0; outline: 0; box-shadow: none;
  background: transparent; font-size: 16px; font-weight: 500; color: var(--hp-navy); padding: 0 14px; }
.hp-search input[type="search"]::placeholder { color: #7f93b1; }
.hp-search button { flex: 0 0 auto; width: auto; margin: 0; border: 0; background: var(--hp-blue); color: #fff; font-size: 15px; font-weight: 600;
  padding: 13px 22px; border-radius: var(--control-radius); cursor: pointer; }
.hp-search button:hover { background: #174c9b; }
.hp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.hp-chips span { font-size: 13px; color: #9fbce0; }
.hp .hp-chip { font-size: 13px; color: #dbe9f8; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 4px 11px; }
.hp .hp-chip:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }

/* The trail: one facility followed through relationships its sources state */
.hp-trail { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: 22px; }
.hp-trail h2 { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9fbce0; }
.hp-trail .sub { margin: 0 0 18px; font-size: 13px; color: #8aa6c9; }
.hp-step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.hp-dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #8fd9ee;
  background: rgba(25, 181, 216, .16); border: 1px solid rgba(25, 181, 216, .45); }
.hp-dot .icon { margin: 0; width: 20px; height: 20px; }
.hp .hp-node { display: block; background: #fff; color: var(--hp-navy); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(6px); animation: hp-rise .5s ease forwards; }
.hp a.hp-node:hover { text-decoration: none; outline: 2px solid var(--hp-cyan); }
.hp-node strong { display: block; font-size: 15px; }
.hp-node small { display: block; color: var(--hp-ink-2); font-size: 12.5px; }
.hp-node .id { font-family: var(--hp-mono); font-size: 12px; color: var(--hp-blue); }
.hp-edge { margin: 2px 0 2px 19px; border-left: 2px dashed rgba(143, 217, 238, .45); padding: 6px 0 6px 22px; font-size: 12.5px;
  color: #9fd8ea; opacity: 0; animation: hp-fade .4s ease forwards; }
.hp-trail .foot { margin: 16px 0 0; font-size: 12px; color: #8aa6c9; }
@keyframes hp-rise { to { opacity: 1; transform: none; } }
@keyframes hp-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hp .hp-node, .hp-edge { animation: none; opacity: 1; transform: none; } }

/* Counts strip, overlapping the hero */
.hp-counts { margin-top: -48px; position: relative; z-index: 2; }
.hp-counts .grid { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--hp-card); border: 1px solid var(--hp-line);
  border-radius: 18px; box-shadow: var(--hp-shadow); overflow: hidden; }
.hp-count { padding: 20px; border-right: 1px solid var(--hp-line); }
.hp-count:last-child { border-right: 0; }
.hp-count b { display: block; font-size: 27px; letter-spacing: -.02em; font-weight: 800; font-variant-numeric: tabular-nums; }
.hp-count span { font-size: 13px; color: var(--hp-ink-2); }
.hp-built { margin: 10px 2px 0; font-size: 12.5px; color: var(--hp-ink-3); }

/* Sections */
.hp-block { padding: 80px 0 0; }
.hp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--hp-blue); margin: 0 0 10px; }
.hp h2.hp-title { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 14px; font-weight: 800; }
.hp-intro { color: var(--hp-ink-2); font-size: 17px; max-width: 680px; margin: 0 0 34px; }
.hp-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp .hp-q { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 18px; padding: 24px; display: flex;
  flex-direction: column; gap: 10px; color: var(--hp-ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
.hp .hp-q:hover { border-color: var(--hp-blue); transform: translateY(-2px); box-shadow: var(--hp-shadow); text-decoration: none; }
.hp-q .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--hp-sky); display: grid; place-items: center; color: var(--hp-blue); }
.hp-q .ic .icon { margin: 0; width: 22px; height: 22px; }
.hp-q h3 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.01em; }
.hp-q p { margin: 0; color: var(--hp-ink-2); font-size: 14.5px; }
.hp-q ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.hp-q li { margin: 0; font-size: 12.5px; color: var(--hp-ink-2); background: var(--hp-sky-2); border: 1px solid var(--hp-line);
  border-radius: 999px; padding: 2px 9px; list-style: none; }
.hp-q .go { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--hp-blue); }

.hp-spine { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.hp-ids { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 18px; padding: 8px; box-shadow: var(--hp-shadow); }
.hp-idrow { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hp-line); }
.hp-idrow:last-child { border-bottom: 0; }
.hp-idrow .tag { font-family: var(--hp-mono); font-size: 13px; color: var(--hp-blue); background: var(--hp-sky); border-radius: 8px; padding: 4px 8px; text-align: center; }
.hp-idrow .what { font-size: 14.5px; }
.hp-idrow .what small { display: block; color: var(--hp-ink-3); font-size: 12.5px; }
.hp-idrow .ex { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.hp-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.hp-p { border-top: 3px solid var(--hp-cyan); padding-top: 16px; }
.hp-p h3 { margin: 0 0 6px; font-size: 17px; }
.hp-p p { margin: 0; color: var(--hp-ink-2); font-size: 14.5px; }

.hp-preview { background: var(--hp-sky-2); border: 1px solid var(--hp-line); border-radius: 24px; padding: 28px; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.hp-mock { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 16px; box-shadow: var(--hp-shadow); overflow: hidden; }
.hp-mock .top { background: var(--hp-sky); padding: 16px 18px; border-bottom: 1px solid var(--hp-line); }
.hp-mock .top small { font-size: 11px; letter-spacing: .16em; font-weight: 700; color: var(--hp-blue); text-transform: uppercase; }
.hp-mock .top strong { display: block; font-size: 20px; margin-top: 2px; }
.hp-mock .top span { font-size: 13px; color: var(--hp-ink-2); }
.hp-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--hp-line); overflow: hidden; }
.hp-tabs span { font-size: 13px; padding: 10px; color: var(--hp-ink-2); white-space: nowrap; }
.hp-tabs span.on { color: var(--hp-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--hp-blue); }
.hp-mock dl { margin: 0; padding: 14px 18px; display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; font-size: 13.5px; }
.hp-mock dt { font-weight: 600; margin: 0; color: var(--hp-ink); }
.hp-mock dd { margin: 0; color: var(--hp-ink-2); }
.hp-lead { margin: 0 18px 14px; background: var(--hp-amber-bg); border: 1px solid #ecd6a6; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; }
.hp-lead b { color: var(--hp-amber); }
.hp-mock .src { padding: 10px 18px 14px; font-size: 12px; color: var(--hp-ink-3); border-top: 1px dashed var(--hp-line); }
.hp-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.hp-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--hp-ink-2); font-size: 15px; list-style: none; margin: 0; }
.hp-checks .icon { color: var(--hp-green); margin-top: 3px; }

.hp-sources { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-src { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.hp-src b { font-weight: 700; margin-right: 6px; }
.hp-src span { color: var(--hp-ink-3); font-size: 12.5px; }

.hp-cta { margin: 80px 0 0; background: var(--hp-navy); color: #fff; border-radius: 28px; padding: 44px 48px; display: flex;
  justify-content: space-between; align-items: center; gap: 24px; position: relative; overflow: hidden; }
.hp-cta::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(25, 181, 216, .35), transparent 70%); }
.hp-cta h2 { color: #fff; margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
.hp-cta p { margin: 0; color: #c9dcf2; }
.hp-cta .btns { display: flex; gap: 10px; position: relative; z-index: 1; flex-wrap: wrap; }
.hp .hp-btn { display: inline-block; padding: 12px 20px; border-radius: 11px; font-weight: 600; font-size: 15px; }
.hp .hp-btn.primary { background: #fff; color: var(--hp-navy); }
.hp .hp-btn.ghost { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.hp .hp-btn:hover { text-decoration: none; filter: brightness(.96); }

/* Every page, by section */
.hp-pages { margin-top: 80px; }
.hp-pages h3 { margin: 26px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--hp-blue); }
.hp-pages .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hp .hp-page { display: block; border: 1px solid var(--hp-line); border-radius: 12px; padding: 14px 16px; background: var(--hp-card); color: var(--hp-ink); }
.hp .hp-page:hover { border-color: var(--hp-blue); background: var(--hp-sky-2); text-decoration: none; }
.hp-page strong { display: block; font-size: 15px; }
.hp-page span { display: block; font-size: 13px; color: var(--hp-ink-2); margin-top: 2px; }

@media (max-width: 1000px) {
  .hp-hero .hp-wrap, .hp-spine, .hp-preview { grid-template-columns: 1fr; }
  .hp-counts .grid { grid-template-columns: repeat(3, 1fr); }
  .hp-count:nth-child(3n) { border-right: 0; }
  .hp-count:nth-child(-n+3) { border-bottom: 1px solid var(--hp-line); }
  .hp-questions, .hp-principles, .hp-pages .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hp-wrap { padding: 0 16px; }
  .hp-hero { padding: 44px 0 80px; }
  .hp-search { flex-direction: column; }
  .hp-search button { width: 100%; }
  .hp-search input[type="search"] { padding: 12px 10px; }
  .hp-counts .grid { grid-template-columns: repeat(2, 1fr); }
  .hp-count, .hp-count:nth-child(3n) { border-right: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); }
  .hp-count:nth-child(2n) { border-right: 0; }
  .hp-count:nth-last-child(-n+2) { border-bottom: 0; }
  .hp-questions, .hp-principles, .hp-pages .grid { grid-template-columns: 1fr; }
  .hp-idrow { grid-template-columns: 80px 1fr; }
  .hp-idrow .ex { display: none; }
  .hp-mock dl { grid-template-columns: 1fr; }
  .hp-cta { padding: 30px 22px; flex-direction: column; align-items: flex-start; }
}