@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..800&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');
/* ============================================================
   collective.css — shared stylesheet for Pegasus Collective
   Single source of truth for the frame, palette, and masthead.
   Per-page prose measures (max-width:NNch) stay inline by design.
   ============================================================ */

:root{
  /* frame */
  --container:1120px;
  --gutter:clamp(20px,4vw,56px);
  --bg-header:color-mix(in srgb, var(--color-bg-canvas) 92%, transparent);
  /* type */
  --serif:'Cormorant Garamond',Georgia,serif;
  --syne:'Syne',sans-serif;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

/* Legacy colour names, now aliases of the shared tokens (assets/pegasus-tokens.css).
   Declared on every band so they re-resolve inside .bd-dark and .bd-cream. */
:root, .bd-dark, .bd-cream, [data-band]{
  --bg:var(--color-bg-canvas);
  --panel:var(--color-bg-raised);
  --hairline:var(--color-line-subtle);
  --hairline-2:var(--color-line-strong);
  --hairline-3:var(--color-line-strong);
  --text:var(--color-text-primary);
  --head-note:var(--color-text-primary);
  --body:var(--color-text-body);
  --body-note:var(--color-text-body);
  --text-2:var(--color-text-body);
  --dim:var(--color-text-muted);
  --dim-2:var(--color-text-muted);
  --amber:var(--color-hot-h);  --amber-2:var(--color-hot-h);
  --blue:var(--color-hot-o);   --blue-2:var(--color-hot-o);
  --teal:var(--color-hot-t);   --teal-2:var(--color-hot-t);
  --panel-2:var(--color-bg-raised);
  --hair:var(--color-line-subtle);
  --hair-2:var(--color-line-strong);
  --hair-3:var(--color-line-strong);
  --accent:var(--color-accent-default);
  --accent-hi:var(--color-accent-hover);
}

/* ---- reset / base (shared by both templates) ---- */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--color-link); }
img,svg{ max-width:100%; }
.mono{ font-family:var(--mono); }

/* ---- shared layout frame ----
   .pc-wrap replaces the repeated
   max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,56px) string. */
.pc-wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.pc-wrap--flush{ padding:0; }               /* when a parent already pads */

/* ---- masthead ---- */
.pc-header{
  position:sticky; top:0; z-index:70;
  background:var(--bg-header); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.pc-mast{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:62px; flex-wrap:wrap;
}
.pc-logo{
  font-family:var(--syne); font-size:16px; font-weight:800;
  letter-spacing:0.02em; color:var(--text); text-decoration:none; white-space:nowrap;
}
.pc-logo span{ color:var(--accent); }
.pc-nav{
  display:flex; align-items:center; gap:clamp(12px,2vw,24px);
  flex-wrap:wrap; justify-content:flex-end;
}
.pc-nav a{
  font-family:var(--mono); font-size:10px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--dim); text-decoration:none;
}
.pc-nav a:hover{ color:var(--text)!important; }
.pc-nav a.is-current{
  color:var(--text); border-bottom:1px solid var(--amber); padding-bottom:3px;
}
.pc-signin{
  font-family:var(--mono); font-size:10px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--text-2)!important; border:1px solid var(--color-line-strong); padding:8px 12px; border-radius:5px;
  white-space:nowrap; text-decoration:none;
}
.pc-signin:hover{ border-color:var(--accent); }
.pc-nav a.pc-cta, .pc-nav a.pc-cta:hover{ color:var(--color-accent-on)!important; font-weight:600; font-size:10.5px; }
.pc-nav a.pc-cta:hover{ background:var(--accent-hi); }
.pc-cta{
  font-family:var(--mono); font-size:10px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--color-accent-on); background:var(--accent);
  padding:9px 14px; border-radius:5px; font-weight:500;
  white-space:nowrap; text-decoration:none;
}

/* ---- HOT dropdown ---- */
.hotdd{ position:relative; display:inline-flex; }
.hotdd .hotdd-panel{
  position:absolute; top:100%; left:0; background:var(--panel);
  border:1px solid var(--hairline-3); border-radius:8px;
  padding:8px 8px; padding-top:18px; display:none; flex-direction:column;
  gap:2px; min-width:190px; z-index:50; margin-top:0;
  box-shadow:0 14px 28px rgba(0,0,0,.4);
}
.hotdd:hover .hotdd-panel{ display:flex; }
.hotdd .hotdd-panel a{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  color:var(--body); text-decoration:none; padding:4px 6px;
}
.hotdd .hotdd-panel a:hover{ color:var(--text)!important; }
.hotdd .hotdd-sep{ height:1px; background:var(--hairline-2); margin:4px 0; }

/* ---- footer ---- */
.pc-footer{
  margin-top:clamp(48px,8vh,80px);
  border-top:1px solid var(--hairline); padding:32px 0 60px;
}

/* ---- reveal-page template (the 19 non-index pages) ---- */
html{ scroll-behavior:smooth; }
[data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);
}
[data-reveal].in{ opacity:1; transform:none; }
.note-body{ color:var(--body-note); }
.note-body p{ margin:0 0 22px; }
.note-body strong{ color:var(--head-note); font-weight:400; }
.drop::first-letter{
  font-family:var(--serif); font-size:3.4em; line-height:0.82;
  float:left; padding:6px 10px 0 0; color:var(--accent); font-weight:500;
}
.fig{
  margin:32px 0; background:var(--color-bg-raised); border:1px solid var(--color-line-subtle);
  border-radius:8px; padding:22px 24px 16px;
}
.fig svg{ width:100%; height:auto; display:block; }
.fig-cap{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--dim); text-align:center; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--color-line-subtle); line-height:1.6;
}
mark.hl{ background:color-mix(in srgb, var(--color-hot-o) 22%, transparent); color:var(--head-note);
  padding:0.03em .12em; border-radius:2px; }

/* ---- index-page (.r2) template ---- */
.r2{ max-width:var(--container); margin:0 auto; }
@keyframes cLight{ from{opacity:0} to{opacity:1} }
summary{ list-style:none; cursor:pointer; }
summary::-webkit-details-marker{ display:none; }
details[open] .dv-more{ display:none; }
details[open] .dv-less{ display:inline; }
.dv-less{ display:none; }

@media(max-width:760px){
  .r2 nav{ flex-wrap:wrap; gap:14px!important; padding:16px 20px!important; }
  .r2 nav>div{ margin-left:0!important; gap:14px!important; flex-wrap:wrap; font-size:13px!important; }
  .r2 section{ padding-left:20px!important; padding-right:20px!important; }
  .r2 footer{ padding-left:20px!important; padding-right:20px!important; gap:28px!important; }
  .r2 [style*="grid-template-columns"]:not([style*="auto 1fr"]):not([style*="64px 1fr"]):not([style*="112px 1fr"]){ grid-template-columns:1fr!important; }
  .r2 h1{ font-size:38px!important; line-height:1.06!important; }
  .r2 h2{ font-size:28px!important; }
  .r2 .r2-serif{ font-size:26px!important; }
  .r2 .r2-stat{ font-size:20px!important; }
  .r2 .r2-lock{ font-size:36px!important; }
  .r2 .r2-spine{ display:none!important; }
  .r2 .r2-cell-l{ padding:20px 0 6px!important; }
  .r2 .r2-cell-l div{ text-align:left!important; align-items:flex-start!important; }
  .r2 .r2-cell-r{ padding:6px 0 22px 16px!important; }
  .r2 .r2-col{ padding:18px 0!important; border-right:none!important; border-bottom:1px solid var(--color-line-strong)!important; }
}

/* ---- phone masthead: one compact row, actions first, links scroll ---- */
@media(max-width:760px){
  .pc-header .pc-mast{ flex-wrap:nowrap!important; gap:14px; min-height:56px; }
  .pc-header .pc-nav{ flex-wrap:nowrap!important; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch;
           scrollbar-width:none; gap:16px!important; padding:10px 0!important; min-width:0; flex:1 1 auto;
           -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
  .pc-nav::-webkit-scrollbar{ display:none; }
  .pc-nav a, .pc-nav .hotdd{ flex:0 0 auto; }
  .pc-nav .pc-cta{ order:-2; } .pc-nav .pc-signin{ order:-1; }
  .hotdd .hotdd-panel{ display:none!important; }
}

/* ---- phone footer: the four-column link grid stacks to two (inner pages) ---- */
@media(max-width:760px){
  footer nav[style*="repeat(4"]{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:22px 20px!important; }
}

/* ---- Lean header (Why · How · What · Open free workspace · Map · Sign in · Contact), Oct 2026 ---- */
.pc-lean{ gap:clamp(14px,2.2vw,26px)!important; }
@media(max-width:760px){
  .pc-header .pc-lean{ -webkit-mask-image:none; mask-image:none; }
  .pc-lean .pc-cta{ order:-2!important; } .pc-lean .pc-signin{ order:-1!important; }
}
/* Small phones: logo + workspace button only */
@media(max-width:380px){
  .pc-lean a:not(.pc-cta){ display:none; }
  .pc-lean{ justify-content:flex-end!important; overflow:visible!important; }
  .pc-header .pc-mast{ gap:10px!important; }
  .pc-header .pc-logo{ font-size:14px; }
  .pc-lean .pc-cta{ padding:8px 9px!important; letter-spacing:.04em!important; white-space:nowrap; }
}

/* ---- Cream page, dark panels (Nov 2026) ----------------------------------
   Collective reads on cream. Dark is reserved for a deliberate object: a
   rounded panel inside the page margins (border + accent rule on top), the
   same grammar as the readiness check. Never a full-width stripe. */

/* Solid type on cream: normal smoothing, no grain or glow over the page,
   nothing lighter than regular weight. Beats each page's inline body rules. */
html[data-theme="collective"] body{ -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; font-weight:400; overflow-wrap:break-word; }
html[data-theme="collective"] body::before, html[data-theme="collective"] body::after{ display:none; }
html[data-theme="collective"] ::selection{ background:color-mix(in srgb, var(--color-hot-o) 22%, transparent); }
html[data-theme="collective"] .pc-header{ border-bottom-color:var(--color-line-strong); }

/* Header nav on cream: readable sans at text size, dark ink, no letter-spaced
   mono caps (that style was made for dark and disappears on cream). */
html[data-theme="collective"] .pc-mast{ min-height:68px; max-width:1300px; gap:20px; }
@media(min-width:1000px){
  html[data-theme="collective"] .pc-mast{ flex-wrap:nowrap; }
  html[data-theme="collective"] .pc-nav{ flex-wrap:nowrap !important; }
}
html[data-theme="collective"] .pc-logo{ font-size:16px; }
html[data-theme="collective"] .pc-nav{ gap:clamp(12px,1.25vw,18px) !important; }
html[data-theme="collective"] .pc-nav a{
  font-family:var(--sans); font-size:14.5px; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--color-text-body); white-space:nowrap;
}
html[data-theme="collective"] .pc-nav a:hover{ color:var(--color-text-primary) !important; }
html[data-theme="collective"] .pc-nav a.is-current{ color:var(--color-text-primary); border-bottom:2px solid var(--color-accent-default); }
html[data-theme="collective"] .pc-nav a.pc-cta,
html[data-theme="collective"] .pc-nav a.pc-cta:hover{
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--color-accent-on) !important; padding:10px 14px; border-radius:4px;
  background:var(--color-accent-default) !important;
}
html[data-theme="collective"] .pc-nav a.pc-cta:hover{ background:var(--color-accent-hover) !important; }
html[data-theme="collective"] .pc-logo span{ color:var(--color-accent-default) !important; }
html[data-theme="collective"] .pc-nav a.pc-signin{
  font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:0; text-transform:none;
  color:var(--color-text-primary) !important; border:1px solid var(--color-line-strong); padding:9px 12px; border-radius:4px;
}
html[data-theme="collective"] .hotdd .hotdd-panel a{ font-family:var(--sans); font-size:14.5px; letter-spacing:0; }
/* the daily H.O.T. Take strip above the header */
html[data-theme="collective"] .ht-bar .k{ font-size:12.5px; font-weight:500; letter-spacing:.1em; }

/* Home nests the header inside the .r2 column; let it span like every page */
html[data-theme="collective"]{ overflow-x:clip; }
html[data-theme="collective"] .r2 .pc-header{ margin-inline:calc(50% - 50vw); }
html[data-theme="collective"] .r2{ overflow:visible !important; }

/* The dark panel */
.pc-panel{
  width:min(calc(var(--container) + 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  margin:clamp(36px,7vh,72px) auto;
  background:var(--color-bg-canvas); color:var(--color-text-body);
  border:1px solid var(--color-line-strong); border-top:3px solid var(--color-accent-default);
  border-radius:12px; overflow:hidden;
  box-shadow:0 24px 56px -28px rgba(23,21,18,.45);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.pc-panel > section{ background:transparent !important; border-top:0 !important; margin:0 !important;
  padding:clamp(36px,6vh,56px) clamp(20px,4vw,48px) !important; }
.pc-panel > section + section{ border-top:1px solid var(--color-line-subtle) !important; }
/* Legible dark: body copy at least 16px and bright, labels never faint */
.pc-panel p, .pc-panel li{ font-size:max(1em, 16px); }
.pc-panel .mono, .pc-panel [class*="label"]{ font-weight:500; }
@media(max-width:760px){ .pc-panel{ width:calc(100% - 24px); border-radius:10px; } }

/* Embedded video: the same dark object, framed */
.pc-media{ border-radius:12px; overflow:hidden; border:1px solid var(--color-line-strong);
  border-top:3px solid var(--color-accent-default); background:var(--color-bg-canvas);
  box-shadow:0 24px 56px -28px rgba(23,21,18,.45); }

/* Reading on cream: a sturdier serif for article body copy */
.note-body{ font-family:'Source Serif 4',Georgia,serif !important; font-weight:400 !important;
  font-size:18.5px !important; line-height:1.72 !important; color:var(--color-text-body) !important; }
.note-body strong{ font-weight:600 !important; color:var(--color-text-primary) !important; }
.note-body .pq, .pq{ font-family:'Source Serif 4',Georgia,serif !important; font-weight:400 !important; color:var(--color-text-primary) !important; }
main p:not(.mono){ font-weight:400; }

/* Descenders: one-line boxes that clip (ellipsis strips, URL captions) need
   room below the baseline, or g, j, p, q and y lose their tails in Safari. */
html[data-theme="collective"] .ht-bar .h,
html[data-theme="collective"] .shot-bar em,
html[data-theme="collective"] [style*="text-overflow:ellipsis"]{ line-height:1.5; padding-block:.1em; }

/* ---- Page hero: one opening for every page ------------------------------
   Figma: Pegasus Design System › Components › Page hero. Classes are added by
   tools/hero-normalize.py; !important because page markup is inline-styled.
   Headline Archivo 640 at 112% width (Syne only in the wordmark) · accent phrase Cormorant Medium Italic in the accent blue
   · eyebrow Plex Mono 12.5 in link blue · lede Plex Sans 19 · buttons Plex Sans 600. */
html[data-theme="collective"] .pc-h1{ font-family:'Archivo','Helvetica Neue',Arial,sans-serif!important; font-stretch:112%!important; font-weight:640!important; font-style:normal!important;
  font-size:clamp(38px,4.2vw,58px)!important; line-height:1.05!important; letter-spacing:-.03em!important; color:var(--color-text-primary)!important; text-wrap:balance; }
html[data-theme="collective"] .pc-h1{ overflow-wrap:normal!important; word-break:normal!important; hyphens:manual!important; }
/* One opening on every page: eyebrow, headline, lede, stacked in one column. Pages that
   once set the headline beside their intro copy now stack it, so the headline is one size. */
html[data-theme="collective"] section > div[style*="minmax(300px,1fr)"]:has(> div > .pc-h1){ grid-template-columns:minmax(0,1fr)!important; align-items:start!important; gap:20px!important; }
html[data-theme="collective"] section > div[style*="minmax(300px,1fr)"]:has(> div > .pc-h1) > :not(:has(.pc-h1)){ max-width:66ch; }
html[data-theme="collective"] .pc-h1:not(.pc-h1--article){ max-width:22ch; }
html[data-theme="collective"] .pc-h1 ~ .pc-lede{ max-width:60ch!important; }
html[data-theme="collective"] .pc-h1.pc-h1--article{ font-size:clamp(30px,3vw,42px)!important; font-weight:600!important; line-height:1.1!important; letter-spacing:-.03em!important; }
html[data-theme="collective"] .pc-h1 :is(em,i,span[style*="italic"],span[style*="Cormorant"]){ font-family:'Cormorant Garamond',Georgia,serif!important;
  font-style:italic!important; font-weight:500!important; letter-spacing:-.005em!important; color:var(--color-accent-default)!important; font-size:1.06em!important; }
html[data-theme="collective"] :has(+ .pc-h1)[style*="Mono"],
html[data-theme="collective"] :has(+ .pc-h1) [style*="Mono"]{ color:var(--color-link)!important; font-size:12.5px!important; letter-spacing:.08em!important; font-weight:500!important; }
html[data-theme="collective"] .pc-lede{ font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif!important; font-style:normal!important; font-weight:400!important;
  font-size:19px!important; line-height:1.6!important; letter-spacing:0!important; color:var(--color-text-body)!important; }
html[data-theme="collective"] .pc-lede *{ font-family:inherit!important; font-style:normal!important; }
html[data-theme="collective"] :is(.pc-btn,.pc-btn2){ display:inline-flex!important; align-items:center; gap:8px; font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif!important;
  font-size:15.5px!important; font-weight:600!important; letter-spacing:0!important; text-transform:none!important; border-radius:8px!important; padding:15px 22px!important; text-decoration:none!important; }
html[data-theme="collective"] .pc-btn{ background:var(--color-accent-default)!important; color:var(--color-accent-on)!important; border:0!important;
  box-shadow:0 14px 40px color-mix(in srgb, var(--color-accent-default) 22%, transparent); }
html[data-theme="collective"] .pc-btn:hover{ background:var(--color-accent-hover)!important; }
html[data-theme="collective"] .pc-btn2{ background:transparent!important; color:var(--color-text-primary)!important; border:1px solid var(--color-line-strong)!important; }
html[data-theme="collective"] .pc-btn2:hover{ border-color:var(--color-text-primary)!important; }
@media(max-width:760px){
  html[data-theme="collective"] .pc-h1{ font-size:34px!important; }
  html[data-theme="collective"] .pc-h1.pc-h1--article{ font-size:29px!important; }
  html[data-theme="collective"] .pc-lede{ font-size:17.5px!important; }
}

/* ---- Section headings: the same grammar as the page title ----------------
   Archivo for the statement, Cormorant Medium Italic in accent blue for the turn.
   Reading pages (notes, takes) keep their serif sub-heads; dark panels keep theirs;
   so do the story titles in The H.O.T. Take feed (.ht-item), which is a list, not sections. */
html[data-theme="collective"]:not(:has(.pc-h1--article)) h2:not(.bd-dark *):not(.pc-panel *):not(.ht-item *){
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif!important; font-stretch:112%!important; font-weight:600!important; font-style:normal!important;
  font-size:clamp(28px,2.8vw,40px)!important; line-height:1.12!important; letter-spacing:-.03em!important; color:var(--color-text-primary)!important; }
html[data-theme="collective"]:not(:has(.pc-h1--article)) h2:not(.bd-dark *):not(.pc-panel *):not(.ht-item *) :is(em,i,span[style*="italic"],span[style*="Cormorant"]){
  font-family:'Cormorant Garamond',Georgia,serif!important; font-style:italic!important; font-weight:500!important; letter-spacing:-.005em!important;
  color:var(--color-accent-default)!important; font-size:1.1em!important; }

/* home hero matches the page title weight */
html[data-theme="collective"] .hx-h{ font-weight:640!important; letter-spacing:-.03em!important; }

/* ---- Compact header below 1040px (Nov 2026) -----------------------------------
   Only under html.pc-menu-on (set by assets/pc-menu.js), so the old header stands
   if the script never runs. Closed: logo, the primary button, Menu. Open: every link
   stacked in a panel under the bar. Overrides the older phone rules above. */
.pc-menu{ display:none; }
@media(max-width:1039px){
  html.pc-menu-on .pc-header{ position:sticky; }
  html.pc-menu-on .pc-header .pc-mast{ flex-wrap:nowrap!important; min-height:60px; gap:12px!important; position:relative; }
  html.pc-menu-on .pc-header .pc-logo{ margin-right:auto; }
  html.pc-menu-on .pc-menu{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; font:500 15px var(--sans,'IBM Plex Sans',sans-serif);
    color:var(--color-text-primary); background:transparent; border:1px solid var(--color-line-strong); border-radius:4px; padding:9px 12px; cursor:pointer; }
  html.pc-menu-on .pc-menu:hover{ border-color:var(--color-text-primary); }
  html.pc-menu-on .pc-menu:focus-visible{ outline:2px solid var(--color-accent-default); outline-offset:2px; }
  html.pc-menu-on .pc-menu-i{ display:inline-flex; flex-direction:column; gap:3px; width:16px; }
  html.pc-menu-on .pc-menu-i i{ display:block; height:2px; border-radius:1px; background:currentColor; transition:transform .18s, opacity .18s; }
  html.pc-menu-on .pc-header.is-open .pc-menu-i i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
  html.pc-menu-on .pc-header.is-open .pc-menu-i i:nth-child(2){ opacity:0; }
  html.pc-menu-on .pc-header.is-open .pc-menu-i i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
  /* closed: the nav shows only its primary button */
  html.pc-menu-on .pc-header .pc-nav{ flex:0 0 auto!important; overflow:visible!important; -webkit-mask-image:none!important; mask-image:none!important; padding:0!important; justify-content:flex-end!important; }
  html.pc-menu-on .pc-header:not(.is-open) .pc-nav > :not(.pc-cta){ display:none!important; }
  /* open: a full-width panel under the bar, every link stacked */
  html.pc-menu-on .pc-header.is-open .pc-nav{ position:absolute; top:100%; left:0; right:0; z-index:5; display:flex!important;
    flex-direction:column!important; align-items:stretch!important; gap:0!important; padding:8px var(--gutter,24px) 18px!important;
    background:var(--color-bg-canvas); border-bottom:1px solid var(--color-line-strong); box-shadow:0 18px 40px -22px rgba(23,21,18,.35); }
  html.pc-menu-on .pc-header.is-open .pc-nav > a,
  html.pc-menu-on .pc-header.is-open .pc-nav > .hotdd > a{ display:block; order:0!important; padding:13px 2px!important; font-size:16.5px!important; border-bottom:1px solid var(--color-line-subtle); }
  html.pc-menu-on .pc-header.is-open .pc-nav > .hotdd{ display:block; order:0!important; }
  html.pc-menu-on .pc-header.is-open .hotdd .hotdd-panel{ display:block!important; position:static!important; box-shadow:none!important; border:0!important; background:transparent!important; padding:0 0 0 16px!important; opacity:1!important; visibility:visible!important; transform:none!important; }
  html.pc-menu-on .pc-header.is-open .hotdd .hotdd-panel a{ display:block; padding:10px 2px; font-size:15px!important; border-bottom:1px solid var(--color-line-subtle); }
  html.pc-menu-on .pc-header.is-open .pc-nav > a.pc-cta{ order:9!important; margin-top:14px; text-align:center; border-bottom:0; padding:13px 14px!important; }
  html.pc-menu-on .pc-header.is-open .pc-nav > a.pc-signin{ order:10!important; margin-top:10px; text-align:center; padding:12px 14px!important; }
  html.pc-menu-on .pc-header.is-open .pc-nav > a.is-current{ border-bottom:1px solid var(--color-line-subtle); color:var(--color-accent-default)!important; }
}
@media(max-width:420px){
  html.pc-menu-on .pc-header .pc-mast{ gap:8px!important; }
  html.pc-menu-on .pc-header .pc-logo{ font-size:14px; }
  html.pc-menu-on .pc-header:not(.is-open) .pc-nav > a.pc-cta{ padding:9px 10px!important; font-size:14px!important; }
  html.pc-menu-on .pc-menu-l{ display:none; }
}
/* nav button: "Take the readiness score", or "Readiness score" where space is short.
   Kept here so it holds whatever order a page loads its own header styles in. */
.pc-cta .pc-cta-s{ display:none; }
@media(max-width:560px),(min-width:761px) and (max-width:1180px){
  .pc-cta .pc-cta-l{ display:none; }
  .pc-cta .pc-cta-s{ display:inline; }
}
@media(max-width:420px){
  html .pc-header .pc-cta .pc-cta-l{ display:none!important; }
  html .pc-header .pc-cta .pc-cta-s{ display:inline!important; }
}
/* Phones under 430px: the wordmark and Menu only; the readiness button leads the open menu
   (the hero's own button sits right below the bar) */
@media(max-width:429px){
  html.pc-menu-on .pc-header:not(.is-open) .pc-nav > a.pc-cta{ display:none!important; }
  html.pc-menu-on .pc-header .pc-mast{ padding-left:16px!important; padding-right:16px!important; }
  html.pc-menu-on .pc-header.is-open .pc-nav > a.pc-cta{ order:-1!important; margin:6px 0 8px; }
}

/* ---- Accessibility (Nov 2026) ----------------------------------------------------
   Skip link: hidden until a keyboard user tabs to it, then it sits over the header. */
.pc-skip{ position:absolute; left:12px; top:-60px; z-index:200; padding:10px 16px; border-radius:6px;
  background:var(--color-accent-default); color:var(--color-accent-on,#fff)!important; font:600 15px var(--sans,'IBM Plex Sans',sans-serif);
  text-decoration:none; transition:top .15s; }
.pc-skip:focus{ top:12px; outline:2px solid var(--color-text-primary); outline-offset:2px; }
main:focus{ outline:none; }