/* ==========================================================================
   TTPRadar "poster" design system.

   Loaded only for pages that set seo['chrome'] = 'poster' (base.php), so
   theme.css and anything still on the old design are untouched. Everything is
   prefixed .p* / body.poster.

   Black paper, white ground, one highlight yellow. Archivo Black for display,
   Archivo for everything else, both self-hosted. Flat: no radii, no shadows,
   no gradients, no animation.

   Every size and space below is the imported design's own value. The only
   deliberate departures are marked DEPARTURE and each fixes a defect that
   would clip content off-screen.
   ========================================================================== */

/* ---- Self-hosted Archivo (latin + latin-ext). No third-party font host. ---- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-black-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-black-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
body.poster {
  --p-ink: #0B0B0B;
  --p-paper: #FFFFFF;
  --p-hi: #F5E63D;
  --p-rule: rgba(11, 11, 11, 0.2);
  --p-rule-strong: rgba(11, 11, 11, 0.35);
  --p-rule-invert: rgba(255, 255, 255, 0.25);
  --p-max: 1320px;
  --p-gut: clamp(20px, 4vw, 40px);
  --p-black: 'Archivo Black', 'Archivo', var(--font-system);
  --p-body: 'Archivo', var(--font-system);
  /* The checked mark for both center pickers. Square caps and miter joins keep
     it as hard-edged as the rest of the design. A data URI cannot reference
     --p-ink, so the stroke carries that token's value literally. */
  --p-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5L9.5 17.5L19.5 6.5' fill='none' stroke='%230B0B0B' stroke-width='5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

/* In-page anchors (#how, #board, the wait-times CTAs) must clear the sticky
   header instead of landing behind it. poster.css only loads for poster pages,
   so this stays scoped to them. */
html { scroll-padding-top: 96px; }

/* ---- Base overrides (theme.css assumes a fixed 64px nav and a slate palette) -- */
body.poster {
  padding-top: 0;                 /* the poster header is in normal flow */
  background: var(--p-paper);
  color: var(--p-ink);
  font-family: var(--p-body);
  line-height: normal;   /* the design sets none; this only undoes theme.css's 1.6 */
  /* theme.css sets antialiased, which thins every stroke in Chrome. The design
     does not, and its headings read heavier because of it. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  /* DEPARTURE: pin text scaling. iOS Safari inflates text on its own (classically
     after an orientation change) unless this is set, and the hero h1 is the
     biggest type on the page, so it is the first thing pushed past the viewport
     and then silently clipped by theme.css's `overflow-x: hidden`. 100% is not a
     size of its own — it holds every size at exactly what the design authored. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* DEPARTURE: clip, not hidden. theme.css sets overflow-x: hidden on <body>,
     which turns <body> into a scroll container and silently kills position:
     sticky on the header. `clip` clips exactly the same way without creating
     one. */
  overflow-x: clip;
}
/* The design defines no :hover, :visited or :active state anywhere, so links
   must simply keep their colour. theme.css does define a:hover, so it has to be
   neutralised — :where() keeps this at (0,1,2) so it beats theme.css's a:hover
   but still loses to every component colour below (e.g. the white-on-black hero
   button, which a plain a:hover would have turned black-on-black). */
body.poster a,
body.poster a:where(:hover, :active, :visited) { color: var(--p-ink); }
/* No font-weight: the design leaves headings at the UA default (bold), which
   synthesises extra weight over single-weight Archivo Black. That synthesis is
   part of how the design looks, so it must not be reset to 400. */
:where(body.poster) h1,
:where(body.poster) h2,
:where(body.poster) h3,
:where(body.poster) h4 {
  font-family: var(--p-black);
  letter-spacing: normal;      /* theme.css sets -0.02em on all headings */
  line-height: normal;         /* theme.css sets 1.12 */
  margin: 0;
}
:where(body.poster) p { margin: 0; }
body.poster :focus-visible { outline: 3px solid var(--p-ink); outline-offset: 3px; }

/* ==========================================================================
   Shared primitives
   ========================================================================== */
.pwrap { max-width: var(--p-max); margin: 0 auto; padding-left: var(--p-gut); padding-right: var(--p-gut); }

/* Section heading: the one display size used across every poster page. */
body.poster .p-h2 {
  font-family: var(--p-black);
  font-size: clamp(30px, 5vw, 54px); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.02em;
}

/* Inline links carry a thick rule instead of an underline. */
.p-mark { border-bottom: 4px solid var(--p-hi); }
.p-mark-ink { border-bottom: 4px solid var(--p-ink); }

/* ==========================================================================
   Header
   ========================================================================== */
/* DEPARTURE: sticky. The design draws the header in flow; production keeps it
   on screen so the wordmark, the nav and the CTA stay reachable on long pages
   and through the checkout flow. Nothing about its look or height changes. */
.pnav { position: sticky; top: 0; z-index: 100; background: var(--p-ink); color: var(--p-paper); }
.pnav-inner {
  max-width: var(--p-max); margin: 0 auto;
  padding: clamp(16px, 2.4vw, 22px) var(--p-gut);
  display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 2.6vw, 40px);
}
.pnav-brand {
  font-family: var(--p-black); font-size: clamp(24px, 4.4vw, 30px);
  letter-spacing: -0.02em; margin-right: auto;
}
body.poster .pnav-brand,
body.poster .pnav-links a { color: var(--p-paper); }
.pnav-links { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 40px); }
.pnav-links a { font-size: clamp(17px, 2vw, 20px); font-weight: 600; white-space: nowrap; }
.pnav-links a.active { color: var(--p-hi); }
body.poster .pnav-links a.pnav-cta {
  font-weight: 700; background: var(--p-hi); color: var(--p-ink); padding: 14px 26px;
}
body.poster .pnav :focus-visible { outline-color: var(--p-hi); }

/* Hamburger. app.js already toggles `.open` on #mobileMenu and keeps
   aria-expanded in step — no new script. Specificity beats theme.css. */
body.poster .pnav .menu-btn {
  display: none; flex-direction: column; justify-content: center; align-items: stretch; gap: 6px;
  width: 52px; height: 52px; padding: 0 12px;
  background: transparent; border: 2px solid var(--p-paper); border-radius: 0;
  cursor: pointer; color: var(--p-paper); font-size: 0;
}
/* DEPARTURE: explicit width. A <button> flex container does not reliably
   stretch its children in every engine, and a 0-width bar is an invisible
   menu button. */
.pnav .menu-btn span { display: block; width: 100%; height: 3px; background: var(--p-paper); }

/* Mobile panel: part of the header, not a drawer. Overrides theme.css's
   fixed right-hand drawer wholesale. */
body.poster .pnav .mobile-menu {
  position: static; inset: auto; width: auto; max-width: none; height: auto;
  transform: none; transition: none; box-shadow: none; background: transparent;
  display: none; flex-direction: column; border-top: 2px solid var(--p-paper);
}
body.poster .pnav .mobile-menu.open { display: flex; }
body.poster .pnav .mobile-menu a {
  display: block; font-family: var(--p-body); font-size: 24px; font-weight: 700;
  color: var(--p-paper); background: transparent;
  padding: 20px var(--p-gut); border-bottom: 1px solid var(--p-rule-invert);
}
body.poster .pnav .mobile-menu a.pnav-panel-cta {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 26px; font-weight: 800; background: var(--p-hi); color: var(--p-ink);
  padding: 24px var(--p-gut); border-bottom: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.phero { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(44px, 6vw, 72px); }
/* DEPARTURE: no max-width, 105px rather than the design's 124px at the top end,
   and a 33px floor rather than 42px. The design caps the h1 at 1120px, which is
   narrower than the 1240px column it sits in; 124px in that column also broke
   "doesn't have to be" in two. 105px holds the headline to its three intended
   lines all the way down to a 1280px viewport, so the common laptop width gets
   them too. The 42px floor was what forced "YOUR" and "INTERVIEW" apart on a
   phone — the fluid 9.2vw never got to apply. At 33px the floor only binds below
   ~355px, so every current phone keeps "Your interview" on one line, and
   "months away" stops splitting across the highlight as well. */
body.poster .phero h1 {
  font-size: clamp(33px, 9.2vw, 105px); line-height: 0.9; letter-spacing: -0.035em;
  margin: 0; text-transform: uppercase;
}
.phero h1 .p-hi {
  background: var(--p-hi); padding: 0 clamp(6px, 1vw, 12px);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.phero-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(28px, 4vw, 64px); margin-top: clamp(32px, 4.5vw, 56px); flex-wrap: wrap;
}
.phero-lead { font-size: clamp(19px, 2.4vw, 27px); line-height: 1.3; font-weight: 500; max-width: 620px; }
body.poster .phero-cta {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 28px);
  background: var(--p-ink); color: var(--p-paper);
  font-size: clamp(21px, 2.6vw, 28px); font-weight: 700;
  padding: clamp(22px, 2.6vw, 30px) clamp(26px, 3.4vw, 42px); flex: 1 1 300px;
  text-transform: uppercase;
}
.phero-cta-price { background: var(--p-hi); color: var(--p-ink); padding: 6px 14px; white-space: nowrap; }

/* ==========================================================================
   Wait-times board
   ========================================================================== */
.pboard { border-top: 4px solid var(--p-ink); }
.pboard-inner { padding-top: clamp(44px, 5.5vw, 64px); padding-bottom: clamp(44px, 5.5vw, 64px); }
.pboard .p-h2 { margin-bottom: clamp(26px, 3.4vw, 40px); }
.pboard-table {
  width: 100%; border-collapse: collapse;
  font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; text-align: left;
}
.pboard-table th {
  font-family: var(--p-body); font-size: clamp(12px, 1.3vw, 15px); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0 0 14px; border-bottom: 4px solid var(--p-ink); text-align: left;
}
.pboard-table th.pb-r, .pboard-table td.pb-r { text-align: right; padding-left: 16px; }
.pboard-table td {
  padding: clamp(14px, 1.8vw, 20px) 0; border-bottom: 1px solid var(--p-rule);
  vertical-align: baseline;
}
.pboard-table td.pb-name { font-family: var(--p-black); }
.pboard-table td.pb-where { white-space: nowrap; }
.pboard-table td.pb-wait {
  font-family: var(--p-black); white-space: nowrap; background: var(--p-hi);
}
.pboard-note {
  font-size: clamp(15px, 1.7vw, 18px); font-weight: 500; line-height: 1.5;
  margin: 28px 0 0; max-width: 760px;
  /* Two separate lines, and align-items keeps the link's rule the width of the
     link instead of the whole paragraph. */
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}

/* ==========================================================================
   How it works
   ========================================================================== */
.psteps { background: var(--p-hi); }
.psteps-inner {
  padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.pstep-num { font-family: var(--p-black); font-size: clamp(62px, 7vw, 88px); line-height: 0.85; }
.pstep h3 {
  font-size: clamp(25px, 3vw, 32px); line-height: 1.05;
  margin: 16px 0 10px; text-transform: uppercase;
}
.pstep p { font-size: clamp(18px, 2vw, 21px); font-weight: 500; line-height: 1.35; }

/* ==========================================================================
   Quotes
   ========================================================================== */
.pquotes { border-top: 4px solid var(--p-ink); }
.pquotes-inner {
  padding-top: clamp(44px, 5.5vw, 72px); padding-bottom: clamp(44px, 5.5vw, 72px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px;
}
.pquote { margin: 0; padding: 0 clamp(24px, 3vw, 40px); border-right: 2px solid var(--p-ink); }
.pquote:first-child { padding-left: 0; }
.pquote:last-child { padding-right: 0; border-right: 0; }
.pquote blockquote { margin: 0; font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; line-height: 1.25; }
.pquote figcaption {
  margin-top: 20px; font-size: clamp(15px, 1.6vw, 17px); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ==========================================================================
   Price
   ========================================================================== */
.pprice { background: var(--p-ink); color: var(--p-paper); }
.pprice-inner {
  padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: end;
}
.pprice-amount {
  font-family: var(--p-black); font-size: clamp(78px, 11vw, 158px);
  line-height: 0.82; color: var(--p-hi); letter-spacing: -0.04em;
}
.pprice-sub { font-size: clamp(19px, 2.3vw, 25px); font-weight: 500; margin-top: 24px; max-width: 440px; }
body.poster .pprice-cta {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--p-hi); color: var(--p-ink);
  font-family: var(--p-black); font-size: clamp(22px, 2.8vw, 30px);
  padding: clamp(26px, 3.2vw, 36px) clamp(26px, 3.4vw, 40px); text-transform: uppercase;
}
body.poster .pprice :focus-visible { outline-color: var(--p-hi); }
body.poster .pprice-cta:focus-visible { outline-color: var(--p-paper); }

/* ==========================================================================
   Questions
   ========================================================================== */
.pfaq { padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px); }
.pfaq .p-h2 { margin-bottom: clamp(30px, 3.6vw, 44px); }
.pfaq-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(30px, 3.4vw, 44px) clamp(32px, 4vw, 64px);
}
.pfaq-item { border-top: 2px solid var(--p-ink); padding-top: 20px; }
.pfaq-item h3 {
  font-size: clamp(21px, 2.4vw, 26px); line-height: 1.1;
  margin: 0 0 12px; text-transform: uppercase;
}
.pfaq-item p { font-size: clamp(18px, 2vw, 21px); font-weight: 500; line-height: 1.4; }
.pfaq-more { margin-top: clamp(28px, 3.4vw, 40px); font-size: clamp(18px, 2vw, 20px); font-weight: 600; }

/* ==========================================================================
   Worth knowing (articles)
   ========================================================================== */
.pposts { border-top: 4px solid var(--p-ink); background: var(--p-hi); }
.pposts-inner { padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px); }
.pposts .p-h2 { margin-bottom: clamp(28px, 3.4vw, 44px); }
.pposts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0; }
body.poster .ppost {
  display: flex; flex-direction: column; gap: 14px; color: var(--p-ink);
  padding: clamp(24px, 2.6vw, 32px) clamp(24px, 2.6vw, 32px);
  border-top: 4px solid var(--p-ink); border-right: 2px solid var(--p-rule-strong);
}
body.poster .ppost:first-child { padding-left: 0; }
body.poster .ppost:last-child { border-right: 0; }
.ppost-meta { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ppost-title {
  font-family: var(--p-black); font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.05; text-transform: uppercase;
}
.ppost-read {
  margin-top: auto; font-size: 16px; font-weight: 700;
  border-bottom: 4px solid var(--p-ink); align-self: flex-start;
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* DEPARTURE: width:100%. <body> is a column flexbox (theme.css) and the auto
   side margins opt this out of `stretch`, so without it the footer shrinks to
   fit its own content instead of spanning the page. */
.pfoot {
  width: 100%; max-width: var(--p-max); margin: 0 auto;
  padding: clamp(32px, 4vw, 48px) var(--p-gut) 40px;
  border-top: 4px solid var(--p-ink);
}
.pfoot-top { display: flex; align-items: baseline; gap: clamp(20px, 3vw, 40px); }
.pfoot-brand { font-family: var(--p-black); font-size: clamp(20px, 2.4vw, 24px); margin-right: auto; }
.pfoot-links { display: flex; align-items: baseline; gap: clamp(20px, 3vw, 40px); }
.pfoot-links a { font-size: clamp(16px, 1.8vw, 18px); font-weight: 600; white-space: nowrap; }
.pfoot-bottom {
  margin-top: 36px; padding-top: 16px; border-top: 2px solid var(--p-ink);
  font-size: 14px; line-height: 1.6;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px clamp(20px, 3vw, 40px); flex-wrap: wrap;
}
.pfoot-bottom p { max-width: 900px; }
/* Privacy and Terms live here, at colophon size, so the primary row above
   stays short. */
.pfoot-legal { display: flex; gap: clamp(16px, 2.4vw, 28px); }
.pfoot-legal a { font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   Responsive — the design's own breakpoints and rules
   ========================================================================== */
@media (max-width: 1000px) {
  .pposts-grid { grid-template-columns: 1fr; }
  body.poster .ppost { border-right: 0; padding-left: 0; padding-right: 0; }
}

@media (max-width: 860px) {
  .pnav-links { display: none; }
  body.poster .pnav .menu-btn { display: flex; }

  .pboard-table th:nth-child(2), .pboard-table td:nth-child(2) { display: none; }
  .pboard-table td.pb-name { font-size: 19px; }

  .pquote { padding: 0 0 28px; border-right: 0; border-bottom: 2px solid var(--p-ink); }
  .pquote:last-child { padding-bottom: 0; border-bottom: 0; }

  body.poster .pprice-cta { justify-content: center; gap: 20px; }

  body.poster .ppost { border-right: 0; padding-left: 0; padding-right: 0; }

  .pfoot-top { display: block; }
  .pfoot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 24px; }
  .pfoot-links a { font-size: 19px; padding: 16px 0; border-top: 1px solid var(--p-rule); }
  .pfoot-links a:nth-child(odd) { padding-right: 16px; }
  .pfoot-links a:nth-last-child(-n+2) { border-bottom: 1px solid var(--p-rule); }
}

@media (max-width: 560px) {
  body.poster .phero-cta, body.poster .pprice-cta { white-space: normal; }
  body.poster .phero-cta {
    flex-direction: row; justify-content: space-between; align-items: center;
    font-size: 18px; gap: 10px; padding: 20px 18px;
  }
  .phero-cta-price { font-size: 18px; padding: 5px 10px; }
  body.poster .pprice-cta { font-size: 22px; line-height: 1.05; }
  .pboard-table td.pb-name { font-size: 17px; }
}

/* ---- Account + checkout header variants ---- */
.pnav--bare .pnav-inner { justify-content: center; }
/* The checkout header carries the wordmark and nothing else, so its box would be
   thinner than the marketing header — whose height comes from the CTA button on
   desktop and the menu button on mobile, not from the wordmark. Pinning the
   brand to those two heights makes both headers the same bar. */
.pnav--bare .pnav-brand { margin-right: 0; display: flex; align-items: center; min-height: 50px; }
.pnav-signout { margin: 0 0 0 auto; }
body.poster .pnav-signout button {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: transparent; border: 2px solid var(--p-paper); border-radius: 0;
  font-family: var(--p-body); font-size: clamp(15px, 1.8vw, 18px); font-weight: 700;
  color: var(--p-paper); padding: 12px 22px;
}
.pnav-panel-signout { margin: 0; }
body.poster .pnav-panel-signout button {
  -webkit-appearance: none; appearance: none; cursor: pointer; display: block;
  width: 100%; text-align: left; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--p-rule-invert);
  font-family: var(--p-body); font-size: 24px; font-weight: 700;
  color: var(--p-paper); padding: 20px var(--p-gut);
}
@media (max-width: 860px) {
  .pnav-signout { display: none; }
  .pnav--bare .pnav-brand { min-height: 52px; }
}

/* ==========================================================================
   Page modules. Each block below was authored against its own page design and
   is namespaced .p<page>- so nothing collides. Concatenated from
   public/assets/css/parts/*.css.
   ========================================================================== */

/* ---------- faq ---------- */
/* ==========================================================================
   Questions — /faq page head + closing band, and the shared FAQ block that
   partials/faq.php renders on /pricing, /global-entry-wait-times, the location
   pages and the SEO landings.

   Flat grid of question + answer (no accordion), so every answer is in the
   HTML and matches the FAQPage schema. Values are the imported design's own.
   Named .pfaqs-* so nothing collides with the homepage's .pfaq-* block.
   ========================================================================== */

/* ---- Page head ---- */
.pfaqs-head { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(32px, 4vw, 48px); }
.pfaqs-head h1 {
  font-size: clamp(40px, 7.6vw, 96px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0; max-width: 900px; text-transform: uppercase;
}
.pfaqs-lead {
  font-size: clamp(19px, 2.4vw, 26px); line-height: 1.3; font-weight: 500;
  max-width: 680px; margin: clamp(24px, 3vw, 36px) 0 0;
}

/* ---- Question grid (shared partial) ---- */
.pfaqs { border-top: 4px solid var(--p-ink); }
.pfaqs-inner { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: clamp(36px, 4.5vw, 56px); }
.pfaqs-title { margin-bottom: clamp(30px, 3.6vw, 44px); }
.pfaqs-grid {
  display: grid;
  /* the design's minmax(320px,1fr), floored so it cannot overflow a narrow phone */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 3.6vw, 48px) clamp(32px, 4vw, 64px);
}
.pfaqs-item { border-top: 2px solid var(--p-ink); padding-top: 18px; }
.pfaqs-item h3 {
  font-size: clamp(21px, 2.4vw, 26px); line-height: 1.1; margin: 0 0 12px; text-transform: uppercase;
}
.pfaqs-a { margin: 0; font-size: clamp(17px, 1.9vw, 20px); font-weight: 500; line-height: 1.45; }
/* Answers may carry a link (content/faqs.php). Same inline mark as .p-mark. */
.pfaqs-a a { border-bottom: 4px solid var(--p-hi); }

/* ---- Closing band ---- */
.pfaqs-cta { background: var(--p-hi); border-top: 4px solid var(--p-ink); }
.pfaqs-cta-inner {
  padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: end;
}
.pfaqs-cta h2 {
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1; margin: 0;
  text-transform: uppercase; letter-spacing: -0.02em;
}
body.poster .pfaqs-cta-btn {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--p-ink); color: var(--p-paper);
  font-family: var(--p-black); font-size: clamp(21px, 2.6vw, 28px);
  padding: clamp(22px, 2.8vw, 30px) clamp(24px, 3.4vw, 40px); text-transform: uppercase;
}

/* ---------- pricing ---------- */
/* ==========================================================================
   Pricing (/pricing) + the two partials it shares with the SEO landing and
   location pages: the price band (partials/pricing.php) and the three-step
   "how it works" block (partials/how_it_works.php).

   Every size, space and colour below is the imported design's own value
   (Pricing.dc.html). The only departures are marked DEPARTURE.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.ppricing-hero { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(36px, 4.5vw, 56px); }
.ppricing-hero h1 {
  font-size: clamp(40px, 7.6vw, 96px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0; max-width: 900px; text-transform: uppercase;
}
/* The design's pricing hero is the headline alone; production also has a lead
   sentence here, so it takes the design system's own hero-lead scale. */
.ppricing-hero-lead {
  font-size: clamp(19px, 2.4vw, 26px); line-height: 1.3; font-weight: 500;
  max-width: 680px; margin: clamp(24px, 3vw, 36px) 0 0;
}

/* ---- Price band ---------------------------------------------------------- */
.ppricing { border-top: 4px solid var(--p-ink); background: var(--p-ink); color: var(--p-paper); }
.ppricing-inner {
  padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px);
  /* DEPARTURE: min() on the track floor. The design's flat minmax(300px,1fr)
     pushes the grid wider than the viewport below ~340px. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.ppricing-amount {
  font-family: var(--p-black); font-size: clamp(78px, 11vw, 158px);
  line-height: 0.82; color: var(--p-hi); letter-spacing: -0.04em;
}
.ppricing-sub { font-size: clamp(19px, 2.3vw, 25px); font-weight: 500; margin: 24px 0 32px; max-width: 420px; }
body.poster .ppricing-cta {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--p-hi); color: var(--p-ink);
  font-family: var(--p-black); font-size: clamp(21px, 2.6vw, 28px);
  padding: clamp(22px, 2.8vw, 32px) clamp(24px, 3.4vw, 40px);
  text-transform: uppercase; max-width: 460px;
}
.ppricing-list { margin: 0; font-size: clamp(17px, 2vw, 20px); font-weight: 600; }
.ppricing-row {
  display: flex; justify-content: space-between; gap: 20px; padding: 16px 0;
  border-top: 1px solid var(--p-rule-invert);
}
.ppricing-row:first-child { border-top: 2px solid var(--p-hi); }
.ppricing-row:last-child { border-bottom: 2px solid var(--p-hi); }
.ppricing-list dd { margin: 0; white-space: nowrap; color: var(--p-hi); }
/* The page-wide focus ring is black, which is invisible on this band. */
body.poster .ppricing :focus-visible { outline-color: var(--p-hi); }
body.poster .ppricing-cta:focus-visible { outline-color: var(--p-paper); }

/* ---- How it works -------------------------------------------------------- */
.ppricing-how-inner {
  padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px);
  /* DEPARTURE: min() on the track floor, as above. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.ppricing-step-num { font-family: var(--p-black); font-size: clamp(62px, 7vw, 88px); line-height: 0.85; }
.ppricing-step h3 {
  font-size: clamp(25px, 3vw, 32px); line-height: 1.05;
  margin: 16px 0 10px; text-transform: uppercase;
}
.ppricing-step p { font-size: clamp(18px, 2vw, 21px); font-weight: 500; line-height: 1.35; }

/* ---- What it does not do ------------------------------------------------- */
.ppricing-note { border-top: 4px solid var(--p-ink); }
.ppricing-note-inner { padding-top: clamp(44px, 5.5vw, 72px); padding-bottom: clamp(44px, 5.5vw, 72px); }
.ppricing-note h2 {
  font-size: clamp(28px, 4vw, 44px); line-height: 1;
  margin: 0 0 24px; text-transform: uppercase; letter-spacing: -0.02em;
}
.ppricing-note p { font-size: clamp(18px, 2.1vw, 22px); font-weight: 500; line-height: 1.4; max-width: 760px; margin: 0; }

/* ---------- wt ---------- */
/* ==========================================================================
   Global Entry wait times (/global-entry-wait-times) — "poster" design.

   The design (Wait Times.dc.html) is a static four-column table. Production's
   page is the same board made searchable, filterable and sortable, with every
   one of the ~114 centers server-rendered and an expandable per-center CTA, so
   the table becomes a rule-ruled grid list: identical type, identical rules,
   identical column rhythm, but valid markup for a <details> inside every row.

   Every size, space and colour is the imported design's own value — the page
   design for the head, board, note and closing band; the article design
   (Blog and Article.dc.html) for the prose scale, which is the same system.
   Departures are marked DEPARTURE.
   ========================================================================== */

/* ---- Page head ----------------------------------------------------------- */
.pwt-head { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(32px, 4vw, 48px); }
.pwt-head h1 {
  font-size: clamp(40px, 7.6vw, 96px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0; max-width: 1000px; text-transform: uppercase;
}
.pwt-lead {
  font-size: clamp(19px, 2.4vw, 26px); line-height: 1.3; font-weight: 500;
  max-width: 680px; margin: clamp(24px, 3vw, 36px) 0 0;
}

/* ---- Board section ------------------------------------------------------- */
.pwt-board { border-top: 4px solid var(--p-ink); }
.pwt-board-inner { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: clamp(36px, 4.5vw, 56px); }

/* ---- Toolbar: search + a Filters disclosure ------------------------------
   The design has no controls, so these are built from its own parts: 2px ink
   rules, no radius, the table's own type scale, and the micro label used for
   the column heads. */
.pwt-tools {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.pwt-search { flex: 1 1 240px; min-width: 0; }
.pwt-input {
  width: 100%; border: 2px solid var(--p-ink); border-radius: 0;
  background: var(--p-paper); color: var(--p-ink);
  font-family: var(--p-body); font-size: clamp(17px, 2vw, 22px); font-weight: 600;
  padding: clamp(13px, 1.6vw, 18px) 16px;
}
/* Only the text field: appearance:none on a <select> would take its arrow with it. */
input.pwt-input { -webkit-appearance: none; appearance: none; }
.pwt-input::placeholder { color: rgba(11, 11, 11, 0.6); opacity: 1; }

.pwt-filters { flex: 0 0 auto; }
.pwt-filters-btn {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; height: 100%;
  border: 2px solid var(--p-ink); background: var(--p-paper); color: var(--p-ink);
  font-size: clamp(14px, 1.6vw, 16px); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  padding: clamp(13px, 1.6vw, 18px) clamp(18px, 2vw, 24px);
}
.pwt-filters-btn::-webkit-details-marker { display: none; }
.pwt-filters[open] .pwt-filters-btn { background: var(--p-ink); color: var(--p-paper); }
/* DEPARTURE: absolutely positioned. The panel has to clear the toolbar without
   pushing the board down, and the design has no shadow to lift it with, so it
   sits on a solid paper ground inside a 2px rule instead. */
.pwt-filters-panel {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 16px);
  background: var(--p-paper); border: 2px solid var(--p-ink);
  padding: clamp(20px, 2.4vw, 28px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}
.pwt-field { display: grid; gap: 8px; min-width: 0; }
.pwt-label {
  font-size: clamp(12px, 1.3vw, 15px); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---- Result count + snapshot age -----------------------------------------
   One line under the toolbar: how many centers are showing on the left, how
   fresh the data is on the right. Same small tracked caps for both, so it reads
   as one strip rather than two notes. */
.pwt-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px clamp(16px, 2.4vw, 32px); flex-wrap: wrap;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.pwt-count,
.pwt-updated {
  font-size: clamp(12px, 1.3vw, 15px); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0;
}

/* ---- The board ----------------------------------------------------------
   One shared column template for the head row and every result row, so the
   columns line up without a <table>. The wait column is a fixed track: it is
   right-aligned like the design's, and a fixed width is what keeps the
   location column from shifting row to row. */
.pwt-table { --pwt-grid: minmax(0, 1fr) clamp(150px, 18vw, 230px) clamp(104px, 12vw, 168px) 18px; }
.pwt-thead,
.pwt-rowhead { display: grid; grid-template-columns: var(--pwt-grid); column-gap: 16px; }
.pwt-thead {
  font-size: clamp(12px, 1.3vw, 15px); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 14px; border-bottom: 4px solid var(--p-ink);
}
.pwt-th-wait { text-align: right; }

.pwt-list { list-style: none; margin: 0; padding: 0; }
.pwt-row { border-bottom: 1px solid var(--p-rule); }

.pwt-rowhead {
  cursor: pointer; list-style: none;
  font-size: clamp(17px, 2vw, 22px); font-weight: 600;
  /* The row header is a control: tapping it must not start a text selection. */
  -webkit-user-select: none; user-select: none;
}
.pwt-rowhead::-webkit-details-marker { display: none; }
.pwt-rowhead > * { padding-top: clamp(13px, 1.6vw, 18px); padding-bottom: clamp(13px, 1.6vw, 18px); }
.pwt-name { font-family: var(--p-black); font-size: clamp(17px, 2vw, 22px); }
.pwt-loc { color: rgba(11, 11, 11, 0.6); }
.pwt-wait { font-family: var(--p-black); text-align: right; }
/* The design highlights only the extreme waits (100 days or more). */
.pwt-wait--hi { background: var(--p-hi); }
/* "Limited availability", "No availability", "Availability changes frequently":
   a status, not a wait estimate, so it is not set in the display face. */
.pwt-wait--plain { font-family: var(--p-body); }
/* Listed by CBP but not bookable at all — the design's muted ink. */
.pwt-wait--muted { color: rgba(11, 11, 11, 0.6); }
.pwt-chev { display: flex; align-items: center; justify-content: flex-end; }
.pwt-det[open] .pwt-chev { transform: rotate(180deg); }

/* Per-center panel behind each row. */
.pwt-panel { padding: 8px 0 clamp(20px, 2.4vw, 28px); max-width: 640px; }
.pwt-panel-h {
  font-family: var(--p-black); font-size: clamp(17px, 2vw, 22px);
  line-height: 1.05; text-transform: uppercase; margin: 0 0 10px;
}
.pwt-panel-p { font-size: clamp(14px, 1.6vw, 16px); font-weight: 500; line-height: 1.55; margin: 0 0 20px; }
/* The design's compact button metrics (its header CTA), inverted for paper. */
body.poster .pwt-btn {
  display: inline-block; background: var(--p-ink); color: var(--p-paper);
  font-size: clamp(17px, 2vw, 20px); font-weight: 700; padding: 14px 26px; white-space: nowrap;
}

/* Divider before the centers with no wait estimate — the column head, repeated. */
.pwt-group {
  font-size: clamp(12px, 1.3vw, 15px); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: clamp(28px, 3.4vw, 44px) 0 14px; border-bottom: 4px solid var(--p-ink);
}

/* One inline CTA partway down the list: the closing band's ground and button. */
.pwt-promo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px clamp(20px, 2.6vw, 32px); background: var(--p-hi);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--p-rule);
}
.pwt-promo[hidden] { display: none; }
.pwt-promo-text { min-width: 0; }
.pwt-promo-text strong {
  display: block; font-family: var(--p-black);
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.1; text-transform: uppercase;
}
.pwt-promo-text span { display: block; font-size: clamp(14px, 1.6vw, 16px); font-weight: 500; line-height: 1.55; margin-top: 8px; }

.pwt-empty { font-size: clamp(17px, 2vw, 22px); font-weight: 600; margin: 0; padding: clamp(28px, 3.4vw, 44px) 0; }
.pwt-more {
  display: block; width: 100%; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 0;
  background: var(--p-ink); color: var(--p-paper);
  font-family: var(--p-black); font-size: clamp(17px, 2vw, 22px);
  text-transform: uppercase; padding: clamp(18px, 2.2vw, 26px) 20px;
}
.pwt-more[hidden] { display: none; }

.pwt-note {
  font-size: clamp(14px, 1.6vw, 16px); font-weight: 500; line-height: 1.55;
  margin: 28px 0 0; max-width: 820px;
}

/* ---- Explainer prose ----------------------------------------------------
   The article scale from the same design system: 820px measure, Archivo Black
   headings, 19px/1.6 body, and rule rows in place of bullets. */
.pwt-prose { border-top: 4px solid var(--p-ink); }
.pwt-prose-inner { max-width: 820px; margin: 0 auto; padding: clamp(44px, 6vw, 76px) var(--p-gut); }
.pwt-prose h2 {
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.05;
  margin: 44px 0 16px; text-transform: uppercase;
}
.pwt-prose h2:first-child { margin-top: 0; }
.pwt-prose p { font-size: 19px; line-height: 1.6; margin: 0 0 24px; }
.pwt-prose a { border-bottom: 4px solid var(--p-hi); }
.pwt-prose ul { list-style: none; margin: 0 0 24px; padding: 0; }
.pwt-prose li { font-size: 19px; line-height: 1.6; padding: 16px 0; border-top: 1px solid var(--p-rule); }
.pwt-prose li:first-child { border-top: 2px solid var(--p-ink); }
.pwt-prose li:last-child { border-bottom: 2px solid var(--p-ink); }

/* ---- Closing band -------------------------------------------------------- */
.pwt-cta { background: var(--p-hi); border-top: 4px solid var(--p-ink); }
.pwt-cta-inner {
  padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px);
  /* DEPARTURE: min() on the track floor. The design's flat minmax(300px,1fr)
     pushes the grid wider than the viewport below ~340px. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: end;
}
.pwt-cta h2 {
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1;
  margin: 0; text-transform: uppercase; letter-spacing: -0.02em;
}
.pwt-cta-sub { font-size: clamp(19px, 2.2vw, 23px); font-weight: 500; line-height: 1.35; margin: 0 0 28px; }
body.poster .pwt-cta-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--p-ink); color: var(--p-paper);
  font-family: var(--p-black); font-size: clamp(21px, 2.6vw, 28px);
  padding: clamp(22px, 2.8vw, 30px) clamp(24px, 3.4vw, 40px); text-transform: uppercase;
}

/* ==========================================================================
   Responsive — the design's own breakpoint and rules
   ========================================================================== */
@media (max-width: 860px) {
  /* The design drops the state column and sets the center name to 17px. */
  .pwt-table { --pwt-grid: minmax(0, 1fr) clamp(104px, 12vw, 168px) 18px; }
  .pwt-th-loc, .pwt-loc { display: none; }
  .pwt-name { font-size: 17px; }
}

@media (max-width: 560px) {
  .pwt-filters { flex: 1 1 100%; }
  .pwt-filters-btn { width: 100%; justify-content: center; }
  body.poster .pwt-cta-btn { font-size: 22px; line-height: 1.05; }
}

/* ---------- centers ---------- */
/* ==========================================================================
   Enrollment centers — /locations, the eight /locations/{city}-… pages, and the
   featured-centers strip (partials/locations_strip.php) that the SEO landings
   also render.

   Values are the imported design's own (Enrollment Centers.dc.html): the ruled
   centre list, the bordered sidebar, and the black closing band. Departures are
   marked DEPARTURE and each one either keeps production copy the design has no
   slot for, or stops content clipping on a narrow phone.
   ========================================================================== */

/* ---- Page head (both routes) --------------------------------------------- */
.pcenters-head { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(28px, 3.4vw, 44px); }
.pcenters-head h1 {
  font-size: clamp(40px, 7.6vw, 96px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0; max-width: 1000px; text-transform: uppercase;
}
.pcenters-lead {
  font-size: clamp(19px, 2.4vw, 26px); line-height: 1.3; font-weight: 500;
  max-width: 700px; margin: clamp(20px, 2.6vw, 32px) 0 0;
}
/* DEPARTURE: the design has no breadcrumb. Production does, and it is a real
   internal link, so it keeps the design's smallest body values instead. */
.pcenters-crumbs { font-size: 15px; font-weight: 600; line-height: 1.55; margin: 0 0 clamp(14px, 2vw, 20px); }
.pcenters-crumbs span { padding: 0 8px; }

/* ---- Section head above the two-column grid ------------------------------ */
/* The design's grid section carries no heading; production's is SEO copy, so it
   takes the system's section heading. */
.pcenters-title { margin: 0 0 16px; }
.pcenters-sub {
  font-size: clamp(17px, 1.9vw, 20px); font-weight: 500; line-height: 1.55;
  max-width: 700px; margin: 0 0 clamp(28px, 3.4vw, 40px);
}

/* ---- Centers by state + sidebar ------------------------------------------ */
.pcenters { border-top: 4px solid var(--p-ink); }
.pcenters-inner { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.pcenters-grid { display: grid; grid-template-columns: 1.5fr 0.5fr; gap: clamp(32px, 4vw, 56px); }
/* Grid items are min-width:auto by default, so a long centre name would push
   the 1.5fr track wider than its share and overflow the page. */
.pcenters-states { min-width: 0; }

.pcenters-state { margin-bottom: 40px; }
.pcenters-state h3 {
  font-family: var(--p-black); font-size: clamp(24px, 3vw, 32px); line-height: 1;
  margin: 0 0 14px; text-transform: uppercase;
}
/* Production shows how many centers a state holds; the design's heading is the
   name alone, so the count takes the row-value size. */
.pcenters-state-count { font-size: clamp(16px, 1.8vw, 19px); }
.pcenters-row {
  display: flex; align-items: baseline; gap: 20px; padding: 15px 0;
  border-top: 1px solid var(--p-rule);
}
.pcenters-row:first-child { border-top: 2px solid var(--p-ink); }
.pcenters-row:last-child { border-bottom: 2px solid var(--p-ink); }
.pcenters-name { flex: 1; font-size: clamp(17px, 1.9vw, 20px); font-weight: 600; }
.pcenters-where { font-family: var(--p-black); font-size: clamp(16px, 1.8vw, 19px); white-space: nowrap; }

.pcenters-side { border-left: 4px solid var(--p-ink); padding-left: clamp(24px, 3vw, 40px); }
.pcenters-side h3 {
  font-family: var(--p-black); font-size: clamp(20px, 2.3vw, 25px); line-height: 1.05;
  margin: 0 0 16px; text-transform: uppercase;
}
.pcenters-facts { margin: 0; }
.pcenters-fact {
  display: flex; justify-content: space-between; gap: 12px; padding: 13px 0;
  border-top: 1px solid var(--p-rule); font-size: 16px; font-weight: 600;
}
.pcenters-fact:first-child { border-top: 2px solid var(--p-ink); }
.pcenters-fact:last-child { border-bottom: 2px solid var(--p-ink); }
.pcenters-fact dt, .pcenters-fact dd { margin: 0; }
.pcenters-fact dd { white-space: nowrap; }
.pcenters-side-link { display: inline-block; margin-top: 18px; font-size: 17px; font-weight: 700; }

/* ---- Featured strip (partials/locations_strip.php) ------------------------ */
.pcenters-strip { border-top: 4px solid var(--p-ink); }
/* The SEO landings pass alt=true for an inverted band, as they do for every
   other alternating block on those pages. */
.pcenters-strip--alt { background: var(--p-hi); }
.pcenters-strip-inner { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.pcenters-strip-row {
  display: flex; align-items: baseline; gap: 20px; padding: 15px 0;
  border-top: 1px solid var(--p-rule);
}
.pcenters-strip-row:first-child { border-top: 2px solid var(--p-ink); }
.pcenters-strip-row:last-child { border-bottom: 2px solid var(--p-ink); }
.pcenters-code {
  font-family: var(--p-black); font-size: clamp(16px, 1.8vw, 19px);
  white-space: nowrap; min-width: 4ch;   /* keeps the eight names on one edge */
}
.pcenters-strip-where { font-size: clamp(16px, 1.8vw, 19px); font-weight: 600; white-space: nowrap; }
.pcenters-strip-all { margin-top: clamp(20px, 2.6vw, 28px); font-size: 17px; font-weight: 700; }

/* ---- Location page: centre, actions, prose ------------------------------- */
/* DEPARTURE: the design has no address block. It is production content, so it
   takes the same ruled row the centre list uses. */
.pcenters-center {
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px); padding: 15px 0;
  border-top: 2px solid var(--p-ink); border-bottom: 2px solid var(--p-ink);
}
.pcenters-center-name { font-family: var(--p-black); font-size: clamp(17px, 1.9vw, 20px); }
.pcenters-center-addr { font-size: clamp(16px, 1.8vw, 19px); font-weight: 600; }

.pcenters-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(20px, 3vw, 32px); margin-top: clamp(24px, 3vw, 36px);
}
/* DEPARTURE: the design's only button sits on the black band, so on white the
   ink/paper pairing of the system's other white-ground buttons is used with the
   design's own type and padding. */
body.poster .pcenters-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--p-ink); color: var(--p-paper);
  font-family: var(--p-black); font-size: clamp(21px, 2.6vw, 28px);
  padding: clamp(22px, 2.8vw, 30px) clamp(24px, 3.4vw, 40px); text-transform: uppercase;
}
.pcenters-alt { font-size: 17px; font-weight: 700; }

.pcenters-prose { border-top: 4px solid var(--p-ink); }
.pcenters-prose-inner { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.pcenters-prose-inner > * { max-width: 760px; }
.pcenters-prose h2 {
  font-size: clamp(24px, 3vw, 32px); line-height: 1;
  margin: clamp(28px, 3.4vw, 40px) 0 14px; text-transform: uppercase;
}
.pcenters-prose h2:first-child { margin-top: 0; }
.pcenters-prose p, .pcenters-prose li {
  font-size: clamp(17px, 1.9vw, 20px); font-weight: 500; line-height: 1.55;
}
.pcenters-prose p { margin: 0 0 20px; }
.pcenters-prose ul { margin: 0 0 20px; padding-left: 20px; }
.pcenters-prose li { margin-bottom: 8px; }

/* The nearby list closes with a rule so the next block (how it works) starts on
   one, exactly as every other seam on the page does. */
.pcenters-nearby { border-top: 4px solid var(--p-ink); border-bottom: 4px solid var(--p-ink); }
.pcenters-nearby-inner { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }

/* ---- Closing band -------------------------------------------------------- */
.pcenters-cta { background: var(--p-ink); color: var(--p-paper); border-top: 4px solid var(--p-ink); }
.pcenters-cta-inner {
  padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px);
  /* DEPARTURE: min() on the track floor. The design's flat minmax(300px,1fr)
     pushes the grid wider than the viewport below ~340px. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: end;
}
body.poster .pcenters-cta h2 {
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1; margin: 0;
  text-transform: uppercase; letter-spacing: -0.02em; color: var(--p-paper);
}
/* DEPARTURE: the location page's band carries a second line of production copy
   the design has no slot for; it takes the band's own sub scale. */
.pcenters-cta-sub { font-size: clamp(17px, 1.9vw, 20px); font-weight: 500; line-height: 1.55; margin: 20px 0 0; max-width: 620px; }
body.poster .pcenters-cta-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--p-hi); color: var(--p-ink);
  font-family: var(--p-black); font-size: clamp(21px, 2.6vw, 28px);
  padding: clamp(22px, 2.8vw, 30px) clamp(24px, 3.4vw, 40px); text-transform: uppercase;
}
/* The page-wide focus ring is black, which is invisible on this band. */
body.poster .pcenters-cta :focus-visible { outline-color: var(--p-hi); }
body.poster .pcenters-cta-btn:focus-visible { outline-color: var(--p-paper); }

/* ==========================================================================
   Responsive — the design's own breakpoint and rules
   ========================================================================== */
@media (max-width: 860px) {
  .pcenters-grid { grid-template-columns: 1fr; }
  .pcenters-side {
    border-left: none; border-top: 4px solid var(--p-ink);
    padding-left: 0; padding-top: 28px;
  }
}

/* DEPARTURE: at phone width the design's single-line row squeezes a centre name
   into a three-line column, so the row stacks and the name keeps the full line.
   Nothing is dropped — the same idiom the board uses at its own breakpoint. */
@media (max-width: 560px) {
  .pcenters-row, .pcenters-strip-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- blog ---------- */
/* ==========================================================================
   Blog + guides — /blog, /guides and every /blog/{slug} article.

   Values are the imported design's own (Blog and Article.dc.html): the ruled
   post list on the index, and the 820px article column with its meta line,
   display headline, ruled lead and closing bordered CTA.

   The article bodies are 114 pre-rendered HTML fragments in content/blog/ that
   nobody edits, so everything below the "Article body" heading maps that legacy
   markup onto the design's own type scale and rules. Departures are marked
   DEPARTURE and each one either keeps production markup the design has no slot
   for, or stops content clipping on a narrow phone.
   ========================================================================== */

/* ---- Index head ---------------------------------------------------------- */
.pblog-head { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(28px, 3.4vw, 44px); }
/* DEPARTURE: the design's index has no eyebrow. Production's is real copy, so
   it takes the design's own small-label values (its article meta line). */
.pblog-eyebrow {
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 20px;
}
.pblog-head h1 {
  font-size: clamp(40px, 7.6vw, 96px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0; max-width: 900px; text-transform: uppercase;
}
.pblog-lead {
  font-size: clamp(19px, 2.4vw, 26px); line-height: 1.3; font-weight: 500;
  max-width: 680px; margin: clamp(20px, 2.6vw, 32px) 0 0;
}

/* ---- Post list (index, and the related list under an article) ------------ */
.pblog-list { border-top: 4px solid var(--p-ink); }
.pblog-list-inner { padding-top: clamp(28px, 3.4vw, 48px); padding-bottom: clamp(28px, 3.4vw, 48px); }
.pblog-row {
  display: grid; grid-template-columns: 160px 1fr 220px; gap: 24px; align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) 0; border-top: 1px solid var(--p-rule);
}
/* A list whose posts carry no date or read time (the migrated /guides library)
   takes the design's own single-column row instead of two empty columns. */
.pblog-row--plain { grid-template-columns: 1fr; }
.pblog-row:first-child { border-top: 2px solid var(--p-ink); }
.pblog-row:last-child { border-bottom: 2px solid var(--p-ink); }
.pblog-row-date, .pblog-row-read {
  font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.pblog-row-read { text-align: right; }
/* min-width: grid items are min-width:auto, so a long headline would push the
   1fr track past its share and widen the page. */
.pblog-row-title {
  font-family: var(--p-black); font-size: clamp(21px, 2.8vw, 32px); line-height: 1.1;
  min-width: 0;
}

/* ==========================================================================
   Article
   ========================================================================== */
.pblog-article { max-width: 820px; margin: 0 auto; padding: clamp(44px, 6vw, 76px) clamp(20px, 4vw, 40px); }
/* DEPARTURE: the design has no back link. Production does, and it is a real
   internal link, so it takes the design's meta-line values. */
.pblog-back {
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 clamp(24px, 3vw, 36px);
}
/* Header block. Only rendered for the article bodies that carry no headline of
   their own; the rest keep theirs (styled under "Article body" below). The 4px
   rule is the design's, moved from the lead to the block so it lands under the
   header whether or not the post has a standfirst. */
.pblog-hd { margin: 0 0 36px; padding-bottom: 32px; border-bottom: 4px solid var(--p-ink); }
.pblog-meta {
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 20px;
}
.pblog-title {
  font-size: clamp(34px, 5.6vw, 64px); line-height: 0.95; letter-spacing: -0.03em;
  margin: 0; text-transform: uppercase;
}

/* ---- Closing CTA (the design's bordered block) --------------------------- */
.pblog-cta { border: 4px solid var(--p-ink); padding: clamp(24px, 3vw, 36px); margin: 44px 0 0; }
.pblog-cta h2 {
  font-size: clamp(24px, 3vw, 32px); line-height: 1.05; margin: 0 0 14px; text-transform: uppercase;
}
.pblog-cta p { font-size: 19px; font-weight: 500; line-height: 1.45; margin: 0 0 24px; }
body.poster .pblog-cta-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--p-ink); color: var(--p-paper);
  font-family: var(--p-black); font-size: clamp(20px, 2.4vw, 26px);
  padding: 22px 28px; text-transform: uppercase;
}

/* ---- Related articles ---------------------------------------------------- */
/* DEPARTURE: the design has no related block. Production's is a real set of
   internal links, so it reuses the design's own index row list. */
.pblog-related { border-top: 4px solid var(--p-ink); }
.pblog-related-inner { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: clamp(36px, 4.5vw, 56px); }
.pblog-related-title { margin: 0 0 clamp(20px, 2.6vw, 28px); }

/* ==========================================================================
   Article body — the migrated fragments in content/blog/*.html.

   Those files are published content and are never edited, so every rule here
   maps their existing markup onto the design's scale. Element rules first, then
   the named blocks the fragments use.
   ========================================================================== */

/* Legacy layout wrappers: the column is .pblog-article's, not theirs. */
.pblog-body .container,
.pblog-body .content-wrapper,
.pblog-body .ge-content,
.pblog-body .section { max-width: none; margin: 0; padding: 0; background: none; }
.pblog-body > *:first-child { margin-top: 0; }

/* ---- Type --------------------------------------------------------------- */
.pblog-body p { font-size: 19px; line-height: 1.6; margin: 0 0 24px; }
.pblog-body h1 {
  font-size: clamp(34px, 5.6vw, 64px); line-height: 0.95; letter-spacing: -0.03em;
  margin: 0 0 28px; text-transform: uppercase;
}
.pblog-body h2 {
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.05; margin: 44px 0 16px; text-transform: uppercase;
}
/* The design has no h3/h4. Both take the sizes the system already uses one step
   under its h2 (the FAQ item) and for its small labels (the meta line). */
.pblog-body h3 {
  font-size: clamp(21px, 2.4vw, 26px); line-height: 1.1; margin: 32px 0 12px; text-transform: uppercase;
}
.pblog-body h4 {
  font-family: var(--p-body); font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  line-height: 1.3; margin: 28px 0 12px; text-transform: uppercase;
}
.pblog-body ul, .pblog-body ol { font-size: 19px; line-height: 1.6; margin: 0 0 24px; padding-left: 22px; }
.pblog-body li { margin: 0 0 10px; }
.pblog-body strong { font-weight: 700; }
.pblog-body blockquote {
  margin: 32px 0; padding: 0 0 0 20px; border-left: 4px solid var(--p-ink);
  font-size: 19px; font-weight: 600; line-height: 1.5;
}
.pblog-body img { display: block; width: 100%; height: auto; }
.pblog-body .article-image { margin: 0 0 32px; }
/* Body links carry the system's inline rule. */
.pblog-body a { border-bottom: 4px solid var(--p-hi); font-weight: 600; }

/* ---- The header some fragments carry themselves -------------------------- */
.pblog-body .alt-hero, .pblog-body .article-hero { margin: 0 0 36px; padding: 0 0 32px; border-bottom: 4px solid var(--p-ink); }
.pblog-body .article-meta, .pblog-body .alt-hero .meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 20px;
}
.pblog-body .article-excerpt, .pblog-body .lede {
  font-size: clamp(20px, 2.4vw, 25px); font-weight: 600; line-height: 1.4; margin: 0 0 36px;
}
.pblog-body .article-excerpt { padding-bottom: 32px; border-bottom: 4px solid var(--p-ink); }
.pblog-body .alt-hero .lede { margin-bottom: 0; }
.pblog-body .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* ---- Tables (the design's own values) ------------------------------------ */
.pblog-body table {
  width: 100%; border-collapse: collapse; font-size: 19px; font-weight: 600;
  margin: 36px 0; text-align: left;
}
.pblog-body th {
  font-family: var(--p-body); font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; text-align: left; padding: 0 0 14px; border-bottom: 4px solid var(--p-ink);
}
.pblog-body td { padding: 16px 0; border-top: 1px solid var(--p-rule); vertical-align: baseline; }
/* DEPARTURE: a column gutter. The design's table is two columns with the second
   right-aligned; production's run to four, and with the design's `padding:16px 0`
   alone their columns would touch. */
.pblog-body th + th, .pblog-body td + td { padding-left: 16px; }
.pblog-body tbody tr:first-child td { border-top: 2px solid var(--p-ink); }
.pblog-body thead + tbody tr:first-child td { border-top: 0; }
.pblog-body tbody tr:last-child td { border-bottom: 2px solid var(--p-ink); }
.pblog-body td.feature { font-family: var(--p-black); }
/* The design fills the standout cell of a comparison row with the highlight. */
.pblog-body td.check { background: var(--p-hi); font-family: var(--p-black); }
.pblog-body td.cross, .pblog-body .badge-yes, .pblog-body .badge-no, .pblog-body .badge-partial { font-weight: 700; }
.pblog-body .table-wrapper { overflow-x: auto; margin: 36px 0; }
.pblog-body .table-wrapper table { margin: 0; }

/* ---- Contents list ------------------------------------------------------- */
.pblog-body .table-of-contents { border: 4px solid var(--p-ink); padding: clamp(20px, 2.6vw, 28px); margin: 0 0 36px; }
.pblog-body .table-of-contents h4 { margin: 0 0 12px; }
.pblog-body .table-of-contents ul { margin: 0; font-size: 17px; }
.pblog-body .table-of-contents li:last-child { margin-bottom: 0; }

/* ---- Emphasis blocks ----------------------------------------------------- */
/* Every callout the fragments use, flattened to the design's one bordered box. */
.pblog-body :is(.highlight-box, .qa-box, .callout, .verdict-box, .verdict-card, .verdict,
  .tip-box, .tip, .warning-box, .warning, .caution-box, .takeaway, .timeline-box,
  .stats-highlight, .compare-card) {
  border: 4px solid var(--p-ink); padding: clamp(20px, 2.6vw, 28px); margin: 0 0 32px;
}
.pblog-body :is(.highlight-box, .qa-box, .callout, .verdict-box, .verdict-card, .verdict,
  .tip-box, .tip, .warning-box, .warning, .caution-box, .takeaway, .timeline-box,
  .stats-highlight, .compare-card) > *:first-child { margin-top: 0; }
.pblog-body :is(.highlight-box, .qa-box, .callout, .verdict-box, .verdict-card, .verdict,
  .tip-box, .tip, .warning-box, .warning, .caution-box, .takeaway, .timeline-box,
  .stats-highlight, .compare-card) > *:last-child { margin-bottom: 0; }
/* theme.css paints .eyebrow sky-blue in its display face, so both are restated. */
.pblog-body .callout-label, .pblog-body .eyebrow {
  display: block; font-family: var(--p-body); color: var(--p-ink);
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 10px;
}
.pblog-body .qa-box h2, .pblog-body .highlight-box h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px; }

/* ---- In-body conversion blocks (the design's CTA block) ------------------- */
.pblog-body :is(.cta-section, .cta-box, .cta-banner, .intro-cta) {
  border: 4px solid var(--p-ink); padding: clamp(24px, 3vw, 36px); margin: 44px 0; text-align: left;
}
.pblog-body :is(.cta-section, .cta-box, .cta-banner, .intro-cta) :is(h2, h3, h4) {
  font-family: var(--p-black); font-size: clamp(24px, 3vw, 32px);
  line-height: 1.05; margin: 0 0 14px; text-transform: uppercase;
}
.pblog-body :is(.cta-section, .cta-box, .cta-banner, .intro-cta) p { font-size: 19px; font-weight: 500; line-height: 1.45; margin: 0 0 24px; }
.pblog-body :is(.cta-section, .cta-box, .cta-banner, .intro-cta) > *:last-child { margin-bottom: 0; }
body.poster .pblog-body :is(.cta-btn, .cta-button, .btn-primary) {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--p-ink); color: var(--p-paper); border: 0; border-radius: 0;
  font-family: var(--p-black); font-size: clamp(20px, 2.4vw, 26px);
  padding: 22px 28px; text-transform: uppercase; box-shadow: none;
}
body.poster .pblog-body .btn-secondary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent; color: var(--p-ink); border: 4px solid var(--p-ink); border-radius: 0;
  font-family: var(--p-black); font-size: clamp(20px, 2.4vw, 26px);
  padding: 18px 24px; text-transform: uppercase; box-shadow: none;
}

/* ---- Fact list, stats, steps, timeline, checklists ----------------------- */
.pblog-body .at-a-glance { margin: 0 0 32px; }
.pblog-body .glance-row {
  display: flex; justify-content: space-between; gap: 20px; padding: 14px 0;
  border-top: 1px solid var(--p-rule);
}
.pblog-body .glance-row:first-child { border-top: 2px solid var(--p-ink); }
.pblog-body .glance-row:last-child { border-bottom: 2px solid var(--p-ink); }
.pblog-body .glance-k { font-family: var(--p-black); font-size: 17px; }
.pblog-body .glance-v { font-size: 17px; font-weight: 500; text-align: right; }

.pblog-body .stat-cards, .pblog-body .stats-grid, .pblog-body .compare-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(20px, 3vw, 32px); margin: 36px 0;
}
.pblog-body .stat, .pblog-body .stat-card { border-top: 4px solid var(--p-ink); padding-top: 16px; }
.pblog-body .stat-n, .pblog-body .stat-number {
  display: block; font-family: var(--p-black); font-size: clamp(30px, 4vw, 44px); line-height: 0.9;
}
.pblog-body .stat-l, .pblog-body .stat-label {
  display: block; margin-top: 10px; font-size: 15px; font-weight: 700;
  letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase;
}

.pblog-body div.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px); margin: 36px 0;
}
/* theme.css gives .step a rounded white card; the design has rules, not cards. */
.pblog-body .step {
  background: none; border: 0; border-top: 4px solid var(--p-ink); border-radius: 0; padding: 16px 0 0;
}
.pblog-body .step > *:last-child { margin-bottom: 0; }
.pblog-body .step .num, .pblog-body .tip-number {
  display: block; font-family: var(--p-black); font-size: clamp(40px, 5vw, 56px); line-height: 0.85;
  margin-bottom: 12px;
}
.pblog-body ol.steps { list-style: none; counter-reset: step; padding-left: 0; }
.pblog-body ol.steps > li { position: relative; counter-increment: step; padding-left: 52px; margin: 0 0 20px; }
.pblog-body ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  font-family: var(--p-black); font-size: 26px; line-height: 1.15;
}

.pblog-body ul.timeline { list-style: none; padding-left: 0; margin: 0 0 32px; border-left: 2px solid var(--p-ink); }
.pblog-body ul.timeline > li { padding: 0 0 18px 20px; }
.pblog-body ul.timeline > li:last-child { padding-bottom: 0; }
.pblog-body .t-when { display: block; font-family: var(--p-black); font-size: 16px; text-transform: uppercase; }

.pblog-body ul.checklist, .pblog-body ul.crosslist { list-style: none; padding-left: 0; }
.pblog-body ul.checklist > li, .pblog-body ul.crosslist > li { position: relative; padding-left: 32px; }
.pblog-body ul.checklist > li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; }
.pblog-body ul.crosslist > li::before { content: "\2715"; position: absolute; left: 0; top: 0; font-weight: 700; }

/* ---- FAQ blocks ---------------------------------------------------------- */
.pblog-body .faq, .pblog-body .faq-list { margin: 36px 0; }
.pblog-body details, .pblog-body .faq-item {
  border: 0; border-top: 2px solid var(--p-ink); border-radius: 0; margin: 0;
}
.pblog-body details:last-child, .pblog-body .faq-item:last-child { border-bottom: 2px solid var(--p-ink); }
.pblog-body .faq-item { padding: 18px 0; }
.pblog-body .faq-item > *:last-child { margin-bottom: 0; }
.pblog-body summary {
  list-style: none; cursor: pointer; position: relative;
  font-family: var(--p-black); font-size: clamp(19px, 2.2vw, 22px); line-height: 1.15;
  padding: 18px 40px 18px 0;
}
.pblog-body summary::-webkit-details-marker { display: none; }
.pblog-body summary::after {
  content: "+"; position: absolute; right: 0; top: 18px;
  font-family: var(--p-body); font-weight: 700;
}
.pblog-body details[open] > summary::after { content: "\2013"; }
.pblog-body .faq-a { padding: 0 0 18px; }
.pblog-body .faq-a > *:last-child { margin-bottom: 0; }

/* ---- Inline decoration left in the migrated fragments -------------------- */
/* About 100 of the fragments carry inline styles from the pre-poster theme:
   pastel rounded callout boxes, 1px grey table grids, coloured captions. An
   inline style beats any selector, and the fragments are published content that
   is never edited, so these rules are the one place in the poster system that
   has to use `!important`. They reset colour, rules and radii onto the poster
   palette and touch nothing else. */
.pblog-body [style*="radius"] { border-radius: 0 !important; }
.pblog-body [style*="color"] { color: var(--p-ink) !important; }
.pblog-body div[style*="background"],
.pblog-body div[style*="border"] {
  background: var(--p-paper) !important;
  border: 4px solid var(--p-ink) !important;
  padding: clamp(20px, 2.6vw, 28px) !important;
  margin: 0 0 32px !important;
}
.pblog-body tr[style] { background: none !important; }
.pblog-body th[style] {
  background: none !important; border: 0 !important;
  border-bottom: 4px solid var(--p-ink) !important; padding: 0 0 14px !important;
}
.pblog-body td[style] {
  background: none !important; border: 0 !important;
  border-top: 1px solid var(--p-rule) !important; padding: 16px 0 !important;
}
.pblog-body tbody tr:first-child td[style] { border-top: 2px solid var(--p-ink) !important; }
.pblog-body thead + tbody tr:first-child td[style] { border-top: 0 !important; }
.pblog-body tbody tr:last-child td[style] { border-bottom: 2px solid var(--p-ink) !important; }
.pblog-body th[style] + th[style],
.pblog-body td[style] + td[style] { padding-left: 16px !important; }

/* ---- Related links inside a fragment ------------------------------------- */
.pblog-body .related-section, .pblog-body .related-articles { margin: 44px 0 0; }
body.poster .pblog-body .related-card {
  display: block; padding: 16px 0; border: 0; border-top: 1px solid var(--p-rule);
  font-family: var(--p-black); font-size: 19px;
}
body.poster .pblog-body .related-card:last-child { border-bottom: 1px solid var(--p-rule); }

/* ==========================================================================
   Responsive — the design's own breakpoint and rules
   ========================================================================== */
@media (max-width: 860px) {
  .pblog-row { grid-template-columns: 1fr; gap: 6px; }
  .pblog-row-read { text-align: left; }
}

/* A migrated four-column comparison table cannot fit a phone at the design's
   19px, and most fragments do not wrap their tables. Below the wrapped
   breakpoint the table itself becomes the scroller, so the page never widens. */
@media (max-width: 700px) {
  .pblog-body table { display: block; width: 100%; overflow-x: auto; }
  /* Two fragments hard-code a two-column inline grid, which cannot shrink past
     its content on a phone and would be clipped by the page's overflow guard. */
  .pblog-body div[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---------- support ---------- */
/* ==========================================================================
   Support — /support. Page head, the Turnstile-gated contact form, and the
   "before you write" rail beside it. Every size, weight and rule below is the
   imported design's own value.

   The form keeps its production ids, names and hooks (contact.js binds
   #contactForm, #contactTurnstile, #contactSubmit, #contactError,
   #contactSuccess, #formStartedAt and .contact-card); only the classes it
   paints with are new, so nothing here can be more specific than it needs to
   be. Named .psup-* so it collides with nothing else.
   ========================================================================== */

/* ---- Page head ---- */
.psup-head { padding-top: clamp(40px, 5.5vw, 72px); padding-bottom: clamp(28px, 3.4vw, 44px); }
.psup-head h1 {
  font-size: clamp(38px, 6.6vw, 84px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0; max-width: 820px; text-transform: uppercase;
}
.psup-lead {
  font-size: clamp(18px, 2.2vw, 24px); line-height: 1.35; font-weight: 500;
  max-width: 640px; margin: clamp(20px, 2.6vw, 30px) 0 0;
}

/* ---- Form beside the rail ---- */
.psup-main { border-top: 4px solid var(--p-ink); }
.psup-grid {
  padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px);
  display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(32px, 4vw, 56px);
}

.psup-field { display: block; margin-bottom: 26px; }
.psup-label {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 10px;
}
/* Form controls do not inherit the page font, so the design sets it here. The
   appearance/radius reset only undoes the UA's rounded iOS control — the design
   has no radius anywhere. */
.psup-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--p-body); font-size: 20px; font-weight: 600;
  padding: 18px 16px; border: 3px solid var(--p-ink);
  background: var(--p-paper); color: var(--p-ink);
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
textarea.psup-input { resize: vertical; line-height: 1.4; }
.psup-hint { font-size: 14px; line-height: 1.55; margin: 10px 0 0; }

/* Honeypot: off-screen for people, in the DOM for bots. */
.psup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Turnstile renders into this box; it reserves the widget's height so the
   button does not jump when the challenge loads, and collapses when there is
   no widget at all. */
.psup-turnstile { min-height: 65px; margin: 0 0 26px; }
.psup-turnstile:empty { min-height: 0; margin: 0; }

body.poster .psup-send {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--p-black); font-size: clamp(20px, 2.4vw, 26px); text-transform: uppercase;
  background: var(--p-ink); color: var(--p-paper);
  border: none; border-radius: 0; padding: 24px 28px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.psup-note { font-size: 14px; line-height: 1.55; margin: 16px 0 0; }

/* Flash + inline validation messages. The design has no message state, so this
   is built from its own parts: the 3px input rule and the highlight, which is
   how the rest of the design says "read this" — and which keeps a message from
   reading as a second black button under the real one. */
.psup-alert {
  border: 3px solid var(--p-ink); background: var(--p-hi); padding: 16px;
  font-size: 16px; font-weight: 500; line-height: 1.4; margin: 0 0 26px;
}

/* Sent confirmation (contact.js unhides it and hides the form). No display
   property anywhere on it, so the `hidden` attribute keeps working. */
.psup-sent { align-self: start; border: 4px solid var(--p-ink); padding: clamp(24px, 3vw, 36px); }
.psup-sent h2 {
  font-size: clamp(20px, 2.3vw, 25px); line-height: 1.05; margin: 0 0 16px; text-transform: uppercase;
}
.psup-sent p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.psup-sent-back { display: inline-block; margin-top: 24px; font-size: 16px; font-weight: 700; }

/* ---- Before you write ---- */
.psup-side { border-left: 4px solid var(--p-ink); padding-left: clamp(24px, 3vw, 40px); }
.psup-side-title {
  font-size: clamp(20px, 2.3vw, 25px); line-height: 1.05; margin: 0 0 16px; text-transform: uppercase;
}
.psup-qa { padding: 16px 0; border-bottom: 1px solid var(--p-rule); }
.psup-qa:first-of-type { border-top: 2px solid var(--p-ink); }
.psup-qa:last-of-type { border-bottom: 2px solid var(--p-ink); }
.psup-qa h3 { font-size: 18px; margin: 0 0 6px; text-transform: uppercase; }
.psup-qa p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.psup-qa a { border-bottom: 3px solid var(--p-hi); }

/* ==========================================================================
   Responsive — the design's own breakpoint and rules
   ========================================================================== */
@media (max-width: 860px) {
  .psup-grid { grid-template-columns: 1fr; }
  .psup-side {
    border-left: 0; border-top: 4px solid var(--p-ink);
    padding-left: 0; padding-top: 28px;
  }
}

/* ---------- legal ---------- */
/* ==========================================================================
   Legal (/privacy, /terms, /refund) — poster design.

   Page head, then one band split into a sidebar listing the three documents
   (the one you are reading sits on yellow) and the document itself. The
   document is whatever content/legal.php holds, so all three routes share this
   block. Every size and space is the imported design's own value.
   ========================================================================== */

/* ---- Head ---- */
.plegal-head { padding-top: clamp(40px, 5.5vw, 72px); padding-bottom: clamp(24px, 3vw, 36px); }
.plegal-updated {
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 18px;
}
.plegal-head h1 {
  font-size: clamp(38px, 6.6vw, 84px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0; max-width: 820px; text-transform: uppercase;
}

/* ---- Document band ---- */
.plegal { border-top: 4px solid var(--p-ink); }
.plegal-inner {
  padding-top: clamp(32px, 4vw, 52px); padding-bottom: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: 0.35fr 0.65fr; gap: clamp(28px, 3.6vw, 56px);
}

/* ---- Sidebar ---- */
.plegal-nav { border-right: 4px solid var(--p-ink); padding-right: clamp(20px, 3vw, 36px); }
/* Child combinator throughout: the sidebar also holds a body-copy link, which
   must stay body-copy. */
.plegal-nav > a {
  display: block; font-family: var(--p-black);
  font-size: clamp(19px, 2.1vw, 23px); text-transform: uppercase;
  padding: 14px 0; border-top: 1px solid var(--p-rule);
}
.plegal-nav > a:first-child { border-top: 2px solid var(--p-ink); }
.plegal-nav > a:last-of-type { border-bottom: 2px solid var(--p-ink); }
.plegal-nav > a[aria-current="page"] { background: var(--p-hi); }
.plegal-aside { font-size: 15px; line-height: 1.55; margin: 20px 0 0; }
.plegal-aside a { border-bottom: 3px solid var(--p-hi); }

/* ---- Document ---- */
.plegal-body { max-width: 680px; }
.plegal-lead {
  font-size: 20px; font-weight: 600; line-height: 1.45;
  margin: 0 0 32px; padding-bottom: 28px; border-bottom: 4px solid var(--p-ink);
}
.plegal-block { margin-bottom: 32px; }
.plegal-block h2 {
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.05; margin: 0 0 12px;
  text-transform: uppercase;
}
.plegal-block p { margin: 0; font-size: 18px; line-height: 1.6; }
/* The design's blocks are a single paragraph; several of the real ones run to
   three, so consecutive paragraphs need a gap the design never had to state. */
.plegal-block p + p { margin-top: 16px; }

/* ==========================================================================
   Responsive — the design's own breakpoint and rules
   ========================================================================== */
@media (max-width: 860px) {
  .plegal-inner { grid-template-columns: 1fr; }
  .plegal-nav {
    border-right: 0; border-bottom: 4px solid var(--p-ink);
    padding-right: 0; padding-bottom: 24px;
  }
}

/* ---------- about ---------- */
/* ==========================================================================
   About — /about. The support page's head over the legal page's document
   block, minus the sidebar; only the band wrapper is new.
   ========================================================================== */
.pabout { border-top: 4px solid var(--p-ink); }
.pabout-inner { padding-top: clamp(32px, 4vw, 52px); padding-bottom: clamp(32px, 4vw, 52px); }

/* ---------- start ---------- */
/* ==========================================================================
   Start alerts — /start and /checkout. The 2-step signup (centers, then phone &
   pay) beside the order rail. Every size, weight and rule below is the imported
   design's own value.

   Nothing here is behavioural: the form keeps its production action, names,
   ids and data-* hooks, and the step wizard's own CSS contract (.su-form.js,
   .su-step, .is-collapsed) is reproduced verbatim at the bottom of this file —
   it used to live in an inline <style> on the page. The no-JS <noscript> block
   has to stay inline on the page (a stylesheet cannot be gated on noscript);
   it mirrors these selectors at the same specificity so source order still
   decides, exactly as it did before.

   Named .pstart-* so it collides with nothing else. The centers picker is a
   PARTIAL SHARED WITH THE DASHBOARD, so every rule that paints it is scoped to
   .pstart-picker — a wrapper on this page only — and the partial itself is
   untouched.
   ========================================================================== */

/* ---- Page shell ---------------------------------------------------------- */
/* .pwrap sets the side gutter with longhands, so these must stay longhands. */
.pstart { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }

/* ---- Progress -----------------------------------------------------------
   The design draws bordered segments with 6px gaps. The wizard script drives ONE
   fill element by width (50/100%), so the same picture is built the other way
   round: one bordered bar, one black fill, and a 3px|6px|3px divider painted
   over it at the segment boundary. The fill's edge lands underneath the divider,
   so what you see is the design's two boxes. */
.pstart-prog { margin: 0 0 clamp(28px, 3.4vw, 44px); }
.pstart-prog-label {
  font-size: clamp(15px, 1.8vw, 18px); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px;
}
.pstart-prog-track {
  position: relative; height: 14px; box-sizing: content-box;
  border: 3px solid var(--p-ink);
}
.pstart-prog-fill { height: 100%; width: 50%; background: var(--p-ink); }
.pstart-prog-track::before {
  content: ''; position: absolute; top: -3px; bottom: -3px; z-index: 1;
  box-sizing: content-box; width: 6px; background: var(--p-paper);
  border-left: 3px solid var(--p-ink); border-right: 3px solid var(--p-ink);
  left: calc((100% - 12px) / 2);
}

/* ---- Flow ----------------------------------------------------------------
   One column: neither step carries an order rail any more. The price is shown
   once on the way in and again on Stripe's own page, which is where the buyer
   confirms it. */
.pstart-main { min-width: 0; }

.pstart-h {
  font-size: clamp(34px, 5.4vw, 62px); line-height: 0.95; letter-spacing: -0.03em;
  margin: 0 0 clamp(20px, 2.6vw, 32px); text-transform: uppercase;
}
.pstart-blurb {
  font-size: clamp(18px, 2.1vw, 23px); font-weight: 500; line-height: 1.35;
  margin: 0 0 clamp(28px, 3.4vw, 40px); max-width: 600px;
}

/* ---- Fields --------------------------------------------------------------
   Form controls do not inherit the page font, so the design sets it here. The
   appearance/radius reset only undoes the UA's rounded iOS control — the
   design has no radius anywhere. */
.pstart-field { display: block; margin-bottom: 24px; }
.pstart-field:last-child { margin-bottom: 0; }
.pstart-label {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 10px;
}
.pstart-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--p-body); font-size: 22px; font-weight: 600;
  padding: 18px 16px; border: 3px solid var(--p-ink);
  background: var(--p-paper); color: var(--p-ink);
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.pstart-hint { display: block; font-size: 14px; line-height: 1.55; margin: 8px 0 0; }

/* Optional date preferences. The disclosure is production's (the wizard opens
   it on a date error); its summary is the design's field label. */
.pstart-refine { margin-top: 32px; border-top: 2px solid var(--p-ink); padding-top: 20px; }
.pstart-refine summary {
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.pstart-refine summary::-webkit-details-marker { display: none; }
/* \00a0, not a plain space: CSS eats the whitespace that terminates a hex escape. */
.pstart-refine summary::before { content: '+\00a0'; }
.pstart-refine[open] summary::before { content: '\2212\00a0'; }
.pstart-refine-body { margin-top: 24px; }
.pstart-dates {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
}

/* ---- Primary action ------------------------------------------------------
   Continue and Pay now are the same button; the wizard shows one at a time.
   The arrow is a pseudo-element because the script rewrites the button's
   textContent per step ("Continue" -> "Continue to payment"), which would
   delete a real child element. */
body.poster .pstart-cta {
  flex: 1 1 240px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--p-black); font-size: clamp(19px, 2.3vw, 24px); text-transform: uppercase;
  background: var(--p-ink); color: var(--p-paper);
  border: none; border-radius: 0; padding: 22px 28px; cursor: pointer;
  -webkit-appearance: none; appearance: none; text-align: left;
}
.pstart-cta::after { content: '\2192'; }
.pstart-nav { display: flex; gap: 12px; margin-top: clamp(28px, 3.4vw, 40px); flex-wrap: wrap; }
/* Step 1's list of centers is taller than most screens, so Continue's natural
   place is below the fold at every width. On that step it sticks to the bottom
   of the column instead. It stays in flow, so at the end of the step it settles
   into its own place — it never permanently sits on top of a center row, the
   selected count or the date preferences. */
.su-form.js[data-step="1"] .pstart-nav {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--p-paper); padding: 14px 0 clamp(14px, 2vw, 22px);
}

/* ---- Messages ------------------------------------------------------------
   The design has no message state, so this is built from its own parts: the
   3px input rule and the highlight, which is how the rest of the design says
   "read this". No display property — the inline ones are toggled with the
   `hidden` attribute. */
.pstart-alert {
  border: 3px solid var(--p-ink); background: var(--p-hi); padding: 16px;
  font-size: 16px; font-weight: 500; line-height: 1.4; margin: 0 0 26px;
}
.pstart-alert-field { margin: 16px 0 0; }

/* ---- Fine print ---------------------------------------------------------- */
.pstart-fine { font-size: 15px; line-height: 1.55; margin: 16px 0 0; }
/* Sits under the pay button and centered on it: close enough to belong to the
   button, with room to breathe. Just the mark and the words — no box, no badge,
   no claim beyond who takes the payment. */
.pstart-fine[data-secure] {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 20px;
}
.pstart-lock { flex: none; display: block; }
.pstart-consent { font-size: 14px; line-height: 1.55; margin: 22px 0 0; }
.pstart-consent a { font-weight: 700; white-space: nowrap; border-bottom: 3px solid var(--p-hi); }

/* ==========================================================================
   Centers picker (shared partial — scoped to this page only)
   ========================================================================== */
.pstart-picker .cpick-search {
  width: 100%; box-sizing: border-box; display: block;
  font-family: var(--p-body); font-size: 20px; font-weight: 600;
  padding: 18px 16px; border: 3px solid var(--p-ink);
  background: var(--p-paper); color: var(--p-ink);
  -webkit-appearance: none; appearance: none; border-radius: 0;
  margin-bottom: 24px;
}
/* theme.css kills the focus ring on .input and paints a blue glow; the poster
   focus outline has to come back and the glow has to go. */
.pstart-picker .cpick-search:focus { box-shadow: none; border-color: var(--p-ink); }

/* Continue with nothing selected does not raise an error — it points at the
   search box. Two soft pulses of the highlight, then a steady yellow band that
   sits there until the buyer types or picks a center. Same flat yellow the rest
   of the page uses; no red, no message, no movement. Placed after :focus so the
   band survives the field being focused. */
@keyframes pstart-hint { from { box-shadow: 0 0 0 0 var(--p-hi); } to { box-shadow: 0 0 0 7px var(--p-hi); } }
.pstart-picker .cpick-search.is-hint {
  box-shadow: 0 0 0 7px var(--p-hi);
  animation: pstart-hint 620ms ease-in-out 3 alternate;
}
@media (prefers-reduced-motion: reduce) {
  .pstart-picker .cpick-search.is-hint { animation: none; }
}

/* Selected-center chips are production's (a one-click remove). The design has
   no chip, so they are drawn from its own parts: a hard rule and the highlight. */
.pstart-picker .cpick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pstart-picker .cpick-chips[hidden] { display: none; }
/* Two-stage layout, straight out of flexbox. Line breaking uses each chip's own
   content width, so a row holds as many chips as genuinely fit and the next one
   wraps only when it will not. flex-grow then runs per line, after the lines are
   formed, so the chips on a row share out whatever width is left and the row is
   filled edge to edge — a row holding one chip gets a full-width chip. Grow
   never changes which chips landed on which row.
   max-width caps the rare name wider than the whole column. */
.pstart-picker .cpick-chip {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 4px;
  flex: 1 1 auto; max-width: 100%; min-width: 0;
  background: var(--p-hi); color: var(--p-ink); border: 2px solid var(--p-ink); border-radius: 0;
  /* 10px, not 12px, on the label side. A chip's non-label chrome is 50px against
     a ~72px label, and at 390px two chips came to 351.1px in a 350px row — they
     were wrapping on a hairline. Two pixels off the widest bit of slack is the
     whole difference, and the 8px gap between chips is untouched. */
  font-family: var(--p-body); font-size: 15px; font-weight: 700; padding: 8px 6px 8px 10px;
}
.pstart-picker .cpick-chip > span { min-width: 0; overflow-wrap: anywhere; }
.pstart-picker .cpick-chip button {
  min-width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--p-ink); opacity: 1; cursor: pointer;
  font-family: var(--p-body); font-size: 20px; font-weight: 700; line-height: 1;
}

.pstart-picker .cpick-list {
  border: 0; border-top: 2px solid var(--p-ink); border-radius: 0;
  background: var(--p-paper); padding: 0;
  /* Production has 119 centers, not the design's ten: the list has to cap and
     scroll or it would be seven screens tall. */
  max-height: 420px; overflow-y: auto;
  /* and a closing rule, so a capped list reads as a box and not as a row cut in half */
  border-bottom: 2px solid var(--p-ink);
}
.pstart-picker .cpick-row {
  display: flex; align-items: center; gap: 18px; padding: 16px 12px;
  border-radius: 0; border-bottom: 1px solid var(--p-rule);
  background: var(--p-paper); cursor: pointer; transition: none;
  font-family: var(--p-black); font-size: 20px; color: var(--p-ink);
}
.pstart-picker .cpick-row input[type=checkbox] {
  width: 26px; height: 26px; box-sizing: content-box; flex: none; margin: 0;
  -webkit-appearance: none; appearance: none; border-radius: 0;
  border: 3px solid var(--p-ink); background: var(--p-paper); cursor: pointer;
}
/* Checked keeps the outlined square and puts a heavy tick in it, rather than
   filling solid — an × would read as "remove", which is what the chip buttons
   above already mean. A background image, not a pseudo-element: an input is a
   replaced element and need not generate one. */
.pstart-picker .cpick-row input[type=checkbox]:checked {
  background-image: var(--p-tick);
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
.pstart-picker .cpick-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
/* Real center names run to 52 characters, so they wrap instead of being cut. */
.pstart-picker .cpick-name {
  font-size: 20px; line-height: 1.05; color: var(--p-ink);
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
}
.pstart-picker .cpick-loc {
  font-family: var(--p-body); font-size: 14px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-ink);
}
/* The highlight ground and the filled checkbox already say "selected", and a
   label on the right squeezed real center names into four wrapped lines on a
   phone. The row keeps its full width for the name instead. */
.pstart-picker .cpick-row.is-on { background: var(--p-hi); box-shadow: none; }
.pstart-picker .cpick-row.is-on .cpick-name { color: var(--p-ink); }
/* Same, without JS: the picker script sets .is-on, the checkbox does not. */
.pstart-picker .cpick-row:has(input:checked) { background: var(--p-hi); box-shadow: none; }
.pstart-picker .cpick-empty { padding: 16px 12px; text-align: left; font-size: 16px; font-weight: 600; color: var(--p-ink); }
.pstart-picker .cpick-count { margin: 18px 0 0; font-size: 17px; font-weight: 700; color: var(--p-ink); }

/* ==========================================================================
   Wizard visibility contract — moved verbatim from the page's inline <style>.
   The script adds .js to the form and toggles .is-collapsed; the <noscript>
   block on the page mirrors these selectors at the same specificity.
   ========================================================================== */
.su-form.js .su-step { display: none; }
.su-form.js .su-step.active { display: block; }
.pstart-nav .pstart-cta.is-collapsed { display: none !important; }
.su-form.js .pstart-fine.is-collapsed { display: none !important; }
.su-form.js .pstart-consent.is-collapsed { display: none !important; }

/* ==========================================================================
   Responsive — the design's own breakpoint and rules
   ========================================================================== */
/* Reclaim vertical space on a phone, where the on-screen keyboard already eats
   half the viewport while you search for a center. Same type, tighter gaps; the
   heading drops 2px so "Choose locations" holds one line. */
@media (max-width: 560px) {
  .pstart { padding-top: 24px; }
  .pstart-prog { margin-bottom: 20px; }
  .pstart-h { font-size: 32px; letter-spacing: -0.05em; margin-bottom: 12px; }
  .pstart-blurb { margin-bottom: 20px; }
  .pstart-picker .cpick-search { margin-bottom: 16px; }
}

/* ---------- manage ---------- */
/* ==========================================================================
   Manage Alerts — /manage and /dashboard. Two screens share this file: the
   accountless sign-in front door (phone -> texted code) and the signed-in
   Manage Alerts page.

   The signed-in page is the imported "Manage Alerts" artboard verbatim: an
   uppercase page title, a 1.4fr / 0.6fr grid, the watched centers and the
   alerts we sent on the left, and a Settings rail with a 4px left rule on the
   right. Every size, weight, rule and colour below is that artboard's own
   value; the few that are not are marked and explained.

   The design has no sign-in artboard, so /manage's form is the design system's
   own field idiom (the Start Alerts artboard's label / input / CTA) under the
   Manage Alerts page head.

   Nothing here is behavioural. Both pages keep production's ids, names, form
   actions, hidden fields and data-* hooks, and the classes the dashboard's
   inline script writes or reads (db-cardtitle, db-cardsub, db-centers,
   db-center, db-btn, db-saver, db-hint, db-testsms-result, db-statusline,
   db-modal*, db-confetti*, is-active / is-paused) keep their names and are
   simply repainted here. Everything new is .pmg-*.
   ========================================================================== */

/* ==========================================================================
   Shared type (both screens)
   ========================================================================== */
.pmg-h1 {
  font-size: clamp(34px, 5.4vw, 62px); line-height: 0.95; letter-spacing: -0.03em;
  margin: 0; text-transform: uppercase;
}
.pmg-blurb {
  font-size: clamp(18px, 2.1vw, 23px); font-weight: 500; line-height: 1.35;
  margin: 0 0 clamp(28px, 3.4vw, 40px); max-width: 600px;
}

/* Flash banners. The design has no message state, so this is built from its own
   parts: the 3px input rule and the highlight, which is how the rest of the
   design says "read this". (0,2,0) so it beats theme.css's .flash.ok/.err on
   source order — poster.css loads after theme.css. */
.pmg .flash,
.pmg-signin .flash {
  border: 3px solid var(--p-ink); border-radius: 0;
  background: var(--p-hi); color: var(--p-ink);
  padding: 16px; font-size: 16px; font-weight: 500; line-height: 1.4;
  margin: 0 0 26px;
}

/* Fields — the Start Alerts artboard's label / input / hint. Form controls do
   not inherit the page font, so the design sets it here; the appearance/radius
   reset only undoes the UA's rounded iOS control. */
.pmg-field { display: block; margin-bottom: 24px; }
.pmg-label {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 10px;
}
.pmg-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--p-body); font-size: 22px; font-weight: 600;
  padding: 18px 16px; border: 3px solid var(--p-ink);
  background: var(--p-paper); color: var(--p-ink);
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.pmg-hint { display: block; font-size: 14px; line-height: 1.55; margin: 8px 0 0; }

/* ==========================================================================
   Sign in (/manage, not authenticated)
   ========================================================================== */
/* .pwrap sets the side gutter with longhands, so these must stay longhands. */
.pmg-signin { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.pmg-signin .pmg-h1 { max-width: 820px; margin: 0 0 clamp(20px, 2.6vw, 32px); }
/* One column: the form is the whole screen, so it keeps the design's own
   600px measure rather than stretching to the 1320px page. */
.pmg-signin-col { max-width: 600px; }

/* Invisible Turnstile: takes no room until a challenge actually surfaces. */
.ma-turnstile { margin: 0; }
.ma-turnstile:not(:empty) { margin: 0 0 24px; }
/* No display property — the inline script toggles this with `hidden`. */
.ma-err {
  border: 3px solid var(--p-ink); background: var(--p-hi);
  padding: 16px; font-size: 16px; font-weight: 500; line-height: 1.4; margin: 0 0 24px;
}

/* Code field: the design's input, set in the display face so four digits read
   as a code rather than as prose. */
.ma-code {
  text-align: center; font-family: var(--p-black); font-weight: 400;
  font-size: 34px; letter-spacing: 0.3em; padding-left: 0.3em;
}

/* Sign-in CTA = the artboard's primary button. The arrow is a pseudo-element
   because the inline script rewrites the button's contents while the POST is in
   flight (spinner + "Sending code…"), which would delete a real child. */
body.poster .ma-submit {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  font-family: var(--p-black); font-size: clamp(19px, 2.3vw, 24px); text-transform: uppercase;
  background: var(--p-ink); color: var(--p-paper);
  border: none; border-radius: 0; padding: 22px 28px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.ma-submit::after { content: '\2192'; margin-left: auto; }

.ma-recovery { margin: 24px 0 0; }
.ma-resend-form { margin: 0; }
.ma-hint { font-size: 14px; line-height: 1.55; margin: 0; }
.ma-hint-quiet { margin: 6px 0 0; }
.ma-foot { font-size: 14px; line-height: 1.55; margin: 24px 0 0; }
.ma-hint a, .ma-foot a { border-bottom: 3px solid var(--p-hi); }
/* "Resend code" is a real submit button; it has to read as the artboard's
   inline link. */
body.poster .ma-linkbtn {
  -webkit-appearance: none; appearance: none; background: none;
  border: 0; border-bottom: 3px solid var(--p-hi); border-radius: 0; padding: 0;
  font-family: var(--p-body); font-size: 14px; font-weight: 700; line-height: 1.55;
  color: var(--p-ink); cursor: pointer;
}
/* During the 30s cooldown the label already reads "Resend code in Ns"; the
   design's muted tone (its own rgba(11,11,11,0.45)) says the rest. */
body.poster .ma-linkbtn:disabled {
  color: rgba(11, 11, 11, 0.45); border-bottom-color: var(--p-rule); cursor: default;
}

/* ==========================================================================
   Manage Alerts (signed in)
   ========================================================================== */
.pmg-inner { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.pmg-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 clamp(20px, 2.4vw, 28px);
}

/* Autosave indicator. The artboard's header sets status type at 700 / 0.1em /
   uppercase; the highlight is the design's own "look here". */
.db-saver {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--p-hi); color: var(--p-ink); padding: 6px 10px;
}
.db-saver.error { background: var(--p-ink); color: var(--p-paper); }
.db-saver .dot { display: none; }   /* the design has no status dots */

/* Monitoring status = the artboard's header status line ("Monitoring active ·
   22 days left"): black bar, uppercase, the highlight for the live state. The
   poster header is shared by every page, so it lives on the page instead. */
.db-statusline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  background: var(--p-ink); color: var(--p-paper);
  padding: 14px clamp(16px, 2vw, 20px); margin: 0 0 clamp(28px, 3.4vw, 44px);
  font-size: clamp(14px, 1.7vw, 17px); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.db-statusline-main { color: var(--p-hi); }
.db-statusline.is-paused .db-statusline-main { color: var(--p-paper); }
.db-statusline-sub { margin-left: auto; }

/* ---- The artboard's 1.4fr / 0.6fr grid ---------------------------------- */
.pmg-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(32px, 4vw, 56px); }
/* A grid item's min size is its content, and a 52-character center name is
   wider than either column: without this the picker would push the page. */
.pmg-main, .pmg-side { min-width: 0; }
.pmg-side { border-left: 4px solid var(--p-ink); padding-left: clamp(24px, 3vw, 40px); }

/* Block headings. .db-cardtitle is the same heading, written by the inline
   script when it re-renders the centers summary. */
.pmg-h2,
.pmg .db-cardtitle {
  font-family: var(--p-black); font-size: clamp(22px, 2.6vw, 28px); line-height: 1;
  margin: 0 0 18px; text-transform: uppercase;
}
.pmg .db-cardtitle { margin-bottom: 10px; }
.pmg .db-cardsub { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 18px; }
.pmg-block { margin-top: clamp(36px, 4vw, 52px); }

/* ---- Rows (the artboard's centers list) --------------------------------- */
.pmg-list { border-top: 2px solid var(--p-ink); }
.pmg-row {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 0; border-bottom: 1px solid var(--p-rule);
}
.pmg-row--last { border-bottom: 2px solid var(--p-ink); }
.pmg-row-copy { flex: 1; font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; }

.pmg .db-centers { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--p-ink); }
.pmg .db-center {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 0; border-bottom: 1px solid var(--p-rule);
  font-family: var(--p-black); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.1;
}
.pmg .db-center:last-child { border-bottom: 2px solid var(--p-ink); }
.pmg .db-center-dot { display: none; }   /* the design has no dots */

/* ---- Buttons ------------------------------------------------------------ */
/* Row action, outline (the artboard's "Remove"). .db-btn--secondary is the same
   button, written by the inline script as the centers summary's "Edit centers". */
body.poster .pmg-btn-out,
body.poster .pmg .db-btn {
  font-family: var(--p-body); font-size: 15px; font-weight: 700; text-transform: uppercase;
  background: var(--p-paper); color: var(--p-ink);
  border: 2px solid var(--p-ink); border-radius: 0; padding: 10px 16px;
  cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none;
}
.pmg .db-btn { margin-top: 20px; }
/* Row action, highlight (the artboard's "Add a center"). */
body.poster .pmg-btn-hi {
  font-family: var(--p-body); font-size: 15px; font-weight: 700; text-transform: uppercase;
  background: var(--p-hi); color: var(--p-ink);
  border: 2px solid var(--p-ink); border-radius: 0; padding: 10px 16px;
  cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none;
}
/* Rail buttons: the artboard's black primary and its outline sibling. */
body.poster .pmg-cta {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  font-family: var(--p-black); font-size: 19px; text-transform: uppercase;
  background: var(--p-ink); color: var(--p-paper);
  border: none; border-radius: 0; padding: 20px;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
body.poster .pmg-btn-block {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  margin-top: 24px;
  font-family: var(--p-body); font-size: 17px; font-weight: 700; text-transform: uppercase;
  background: var(--p-paper); color: var(--p-ink);
  border: 3px solid var(--p-ink); border-radius: 0; padding: 18px;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
body.poster .pmg-cta:focus-visible { outline-color: var(--p-hi); outline-offset: -6px; }

/* ---- Alerts sent -------------------------------------------------------- */
/* The artboard's table, with the wait-times board's header row added: four
   columns of bare timestamps are not self-describing, and that header is the
   same design system's own table head. */
.pmg-table {
  width: 100%; border-collapse: collapse; text-align: left;
  font-size: clamp(16px, 1.9vw, 20px); font-weight: 600;
}
.pmg-table th {
  font-family: var(--p-body); font-size: clamp(12px, 1.3vw, 15px); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: left;
  padding: 0 0 14px; border-bottom: 4px solid var(--p-ink);
}
.pmg-table td { padding: clamp(13px, 1.6vw, 18px) 0; border-bottom: 1px solid var(--p-rule); vertical-align: baseline; }
.pmg-table th + th, .pmg-table td + td { padding-left: 16px; }
.pmg-table .pmg-t-r { text-align: right; }
.pmg-table .pmg-t-when { white-space: nowrap; color: rgba(11, 11, 11, 0.6); }
.pmg-table .pmg-t-name { font-family: var(--p-black); }
.pmg-table .pmg-t-status { font-size: 15px; font-weight: 700; text-transform: uppercase; }

/* ---- Settings rail ------------------------------------------------------ */
.pmg-side-title { font-size: clamp(20px, 2.3vw, 24px); line-height: 1.05; margin: 0 0 18px; text-transform: uppercase; }
.pmg-set {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--p-rule);
  font-size: 16px; font-weight: 600;
}
.pmg-set--first { border-top: 2px solid var(--p-ink); }
.pmg-note { font-size: 14px; line-height: 1.55; margin: 14px 0 0; }
.pmg-help { margin-top: 24px; }
.pmg-note a { border-bottom: 3px solid var(--p-hi); }

/* Text-alerts switch. The design has no switch, so it is drawn as the design's
   own checkbox (26px, 3px rule, filled ink when on). The real input keeps its
   id, size and focus ring and simply sits transparent on top. */
.pmg .db-switch { position: relative; display: inline-block; width: 26px; height: 26px; flex: none; }
.pmg .db-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pmg .db-switch i { position: absolute; inset: 0; border: 3px solid var(--p-ink); background: var(--p-paper); }
.pmg .db-switch input:checked + i { background: var(--p-ink); }
.pmg .db-switch input:disabled { cursor: default; }
.pmg .db-switch input:disabled + i { border-color: var(--p-rule-strong); }

/* Phone row. The rail is a third of the page, so its field runs at the rail's
   own 16px/600 scale instead of the 22px full-width field, and the buttons wrap
   under the input rather than squeezing it. */
.pmg-side .pmg-field { margin: 20px 0 0; }
.pmg-side .pmg-input { font-size: 18px; padding: 14px 12px; }
.pmg-inputrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.pmg-inputrow .pmg-input { flex: 1 1 160px; min-width: 0; }
.pmg-input[readonly] { background: var(--p-paper); color: var(--p-ink); }
.db-hint { font-size: 14px; line-height: 1.55; margin: 10px 0 0; }
.db-hint.saved, .db-hint.warn { background: var(--p-hi); padding: 10px 12px; font-weight: 600; }
.db-testsms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.db-testsms-result { font-size: 14px; font-weight: 600; }
body.poster .pmg-linkbtn {
  -webkit-appearance: none; appearance: none; background: none;
  border: 0; border-bottom: 3px solid var(--p-hi); border-radius: 0; padding: 0;
  font-family: var(--p-body); font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4;
  color: var(--p-ink); cursor: pointer;
}

/* Date range: production's disclosure, wearing the rail's row. The +/- marker is
   the same one the Start Alerts page uses for its optional dates. */
.pmg-dates { margin-top: 20px; border-top: 2px solid var(--p-ink); border-bottom: 2px solid var(--p-ink); }
.pmg-dates-sum {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 14px 0; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none;
}
.pmg-dates-sum::-webkit-details-marker { display: none; }
.pmg-dates-label { flex: 0 1 auto; margin-right: auto; }
.pmg-dates-label::after { content: ' +'; }
.pmg-dates[open] .pmg-dates-label::after { content: ' \2212'; }
.pmg-dates-opt {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(11, 11, 11, 0.45);
}
.pmg-dates-val { font-size: 14px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pmg-dates-body { padding: 0 0 18px; }
.pmg-dates-body .pmg-field:first-child { margin-top: 4px; }

.db-consent { font-size: 14px; line-height: 1.55; margin: 20px 0 0; }
.db-consent a { border-bottom: 3px solid var(--p-hi); }
.pmg-endnote { font-size: 14px; line-height: 1.55; margin: 12px 0 0; }

/* ==========================================================================
   Centers picker (shared partial — scoped to this page only)
   ========================================================================== */
.pmg-picker { margin-top: 20px; }
.pmg-picker .cpick-search {
  width: 100%; box-sizing: border-box; display: block;
  font-family: var(--p-body); font-size: 18px; font-weight: 600;
  padding: 16px 14px; border: 3px solid var(--p-ink);
  background: var(--p-paper); color: var(--p-ink);
  -webkit-appearance: none; appearance: none; border-radius: 0;
  margin-bottom: 20px;
}
/* theme.css kills the focus ring on .input and paints a blue glow; the poster
   focus outline has to come back and the glow has to go. */
.pmg-picker .cpick-search:focus { box-shadow: none; border-color: var(--p-ink); }
.pmg-picker .cpick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pmg-picker .cpick-chips[hidden] { display: none; }
.pmg-picker .cpick-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--p-hi); color: var(--p-ink); border: 2px solid var(--p-ink); border-radius: 0;
  font-family: var(--p-body); font-size: 15px; font-weight: 700; padding: 8px 6px 8px 12px;
}
.pmg-picker .cpick-chip button {
  min-width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--p-ink); opacity: 1; cursor: pointer;
  font-family: var(--p-body); font-size: 20px; font-weight: 700; line-height: 1;
}
.pmg-picker .cpick-list {
  border: 0; border-top: 2px solid var(--p-ink); border-radius: 0;
  background: var(--p-paper); padding: 0;
  /* Production has 119 centers, not the design's ten: production's own cap. */
  max-height: 300px; overflow-y: auto;
}
.pmg-picker .cpick-row {
  display: flex; align-items: center; gap: 18px; padding: 16px 12px;
  border-radius: 0; border-bottom: 1px solid var(--p-rule);
  background: var(--p-paper); cursor: pointer; transition: none;
  font-family: var(--p-black); font-size: 18px; color: var(--p-ink);
}
.pmg-picker .cpick-row input[type=checkbox] {
  width: 26px; height: 26px; box-sizing: content-box; flex: none; margin: 0;
  -webkit-appearance: none; appearance: none; border-radius: 0;
  border: 3px solid var(--p-ink); background: var(--p-paper); cursor: pointer;
}
/* Same tick as the checkout picker — one shared mark for the shared partial. */
.pmg-picker .cpick-row input[type=checkbox]:checked {
  background-image: var(--p-tick);
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
.pmg-picker .cpick-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
/* Real center names run to 52 characters, so they wrap instead of being cut. */
.pmg-picker .cpick-name {
  font-size: 18px; line-height: 1.05; color: var(--p-ink);
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
}
.pmg-picker .cpick-loc {
  font-family: var(--p-body); font-size: 14px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-ink);
}
.pmg-picker .cpick-row.is-on { background: var(--p-hi); box-shadow: none; }
.pmg-picker .cpick-row.is-on .cpick-name { color: var(--p-ink); }
/* Same, without JS: the picker script sets .is-on, the checkbox does not. */
.pmg-picker .cpick-row:has(input:checked) { background: var(--p-hi); box-shadow: none; }
.pmg-picker .cpick-empty { padding: 16px 12px; text-align: left; font-size: 16px; font-weight: 600; color: var(--p-ink); }
.pmg-picker .cpick-count { margin: 18px 0 0; font-size: 17px; font-weight: 700; color: var(--p-ink); }

/* ==========================================================================
   Modals + completion (production's; the design has neither, so both are drawn
   from its own parts: a 4px rule, the highlight, no radius, no shadow)
   ========================================================================== */
body.db-modal-open { overflow: hidden; }
.db-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.db-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 11, 11, 0.6); }
.db-modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: var(--p-paper); border: 4px solid var(--p-ink);
  padding: clamp(24px, 3vw, 32px); max-height: 100%; overflow-y: auto;
}
.pmg-modal-title { font-size: clamp(22px, 2.6vw, 28px); line-height: 1; margin: 0 0 14px; text-transform: uppercase; }
.pmg-modal-sub { font-size: 16px; font-weight: 500; line-height: 1.45; margin: 0; }
.pmg-modal-sub a { border-bottom: 3px solid var(--p-hi); }
.db-modal-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.db-modal-actions .pmg-btn-block { margin-top: 0; }
.pmg-modal-cancel { margin-top: 20px; }
.pmg-modal-cta { margin-top: 24px; }
.pmg-modal-err {
  border: 3px solid var(--p-ink); background: var(--p-hi);
  padding: 12px; font-size: 14px; font-weight: 500; line-height: 1.5; margin: 16px 0 0;
}

/* Confetti: production's celebration, kept working, repainted to the poster
   palette in the page's own script. */
.db-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1300; }
.db-confetti-bit {
  position: absolute; top: -14px; opacity: 0.9;
  animation-name: db-confetti-fall; animation-timing-function: cubic-bezier(.3, .6, .5, 1);
  animation-fill-mode: both;
}
@keyframes db-confetti-fall {
  0% { transform: translateY(-14px) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { .db-confetti-bit { display: none; } }

.pmg-done { border: 4px solid var(--p-ink); padding: clamp(28px, 3.4vw, 40px); max-width: 620px; }
.pmg-done-title { font-size: clamp(26px, 3.2vw, 36px); line-height: 1; margin: 0 0 14px; text-transform: uppercase; }
.pmg-done-copy { font-size: 18px; font-weight: 500; line-height: 1.4; margin: 0 0 24px; }
.pmg-done-foot { font-size: 14px; line-height: 1.55; margin: 20px 0 0; }
.pmg-done-foot a { border-bottom: 3px solid var(--p-hi); }

/* The `hidden` attribute has to keep winning over every display above: the
   dashboard toggles it on buttons, hints, panels and whole views. */
.pmg [hidden] { display: none !important; }

/* ==========================================================================
   Responsive — the design's own breakpoint and rules
   ========================================================================== */
@media (max-width: 860px) {
  .pmg-grid { grid-template-columns: 1fr; }
  .pmg-side {
    border-left: none; border-top: 4px solid var(--p-ink);
    padding-left: 0; padding-top: 32px;
  }
  /* Four columns of timestamps do not fit a phone. Status is the one that is
     always the same word, so it goes — exactly as the wait-times board drops
     its Location column at this width. */
  .pmg-table th:nth-child(4), .pmg-table td:nth-child(4) { display: none; }
  .pmg-table th + th, .pmg-table td + td { padding-left: 12px; }
}

@media (max-width: 560px) {
  /* The artboard's row is label + action side by side; a phone is too narrow
     for a sentence beside a button, so the action takes its own line. */
  .pmg-row { flex-direction: column; align-items: stretch; gap: 14px; }
  body.poster .pmg-btn-hi { width: 100%; }
}

/* ---------- misc ---------- */
/* ==========================================================================
   Small state pages — /success, /cancel, /login and the shared error/state
   page (404s, expired dashboard link, /signed-out).

   There is no imported design for these four, so they are assembled from the
   design system's own parts: the page-head type of /support, the 4px rule of
   .p-mark, the black action block, and the bordered form controls. One yellow
   accent per page, no cards, no centred column — the same left-aligned poster
   reading order as everything else.

   All four templates share this one block, so the pages stay identical in
   rhythm no matter which controller renders them. Prefixed .pmisc-.
   ========================================================================== */

.pmisc { padding-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(64px, 9vw, 120px); }

/* Head: the yellow rule is the page's single accent, so every state page —
   even one with no code and no second link — carries the highlight. */
.pmisc-head {
  border-top: 4px solid var(--p-hi);
  padding-top: clamp(20px, 2.4vw, 28px);
  max-width: 900px;
}
/* HTTP code, when the caller passes one (404s). */
.pmisc-kicker {
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 clamp(12px, 1.6vw, 18px);
}
body.poster .pmisc-title {
  font-size: clamp(38px, 6.6vw, 84px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0; text-transform: uppercase;
}
.pmisc-lead {
  font-size: clamp(18px, 2.2vw, 24px); font-weight: 500; line-height: 1.35;
  max-width: 640px; margin: clamp(20px, 2.6vw, 30px) 0 0;
}
.pmisc-lead:empty { display: none; }

/* Actions */
.pmisc-acts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(20px, 2.6vw, 32px); margin-top: clamp(28px, 3.4vw, 44px);
}
body.poster .pmisc-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-ink); color: var(--p-paper);
  font-family: var(--p-black); font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase; padding: 24px 28px;
}
.pmisc-alt { font-size: clamp(17px, 1.9vw, 20px); font-weight: 700; }

/* ---- Sign-in form (/login) ---- */
.pmisc-form { max-width: 520px; margin: clamp(28px, 3.4vw, 44px) 0 0; }
.pmisc-field { display: block; margin-bottom: 26px; }
.pmisc-label {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 10px;
}
/* Form controls do not inherit the page font, so it is set here. The
   appearance/radius reset only undoes the UA's rounded iOS control — the
   design has no radius anywhere. */
.pmisc-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--p-body); font-size: 20px; font-weight: 600;
  padding: 18px 16px; border: 3px solid var(--p-ink);
  background: var(--p-paper); color: var(--p-ink);
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
body.poster .pmisc-submit {
  width: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--p-black); font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase; background: var(--p-ink); color: var(--p-paper);
  border: none; border-radius: 0; padding: 24px 28px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
/* Flash messages. The system has no message state and no second colour, so
   they use the highlight inside the same 3px rule as the inputs — the way the
   rest of the design says "read this". */
.pmisc-alert {
  border: 3px solid var(--p-ink); background: var(--p-hi); padding: 16px;
  font-size: 16px; font-weight: 500; line-height: 1.4;
  margin: clamp(24px, 3vw, 32px) 0 0; max-width: 520px;
}
.pmisc-hint { font-size: 14px; line-height: 1.55; margin: 16px 0 0; max-width: 520px; }
.pmisc-hint-tail { margin-top: clamp(24px, 3vw, 32px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 560px) {
  body.poster .pmisc-cta, body.poster .pmisc-submit { padding: 20px 22px; }
}

/* ---------- seo ---------- */
/* ==========================================================================
   SEO landing pages (/global-entry-appointment-finder, -alerts,
   /global-entry-interview-slots, /global-entry-appointment-availability,
   /no-global-entry-appointments-available) — poster design.

   These five pages are data-driven from content/seo_pages.php and have no
   design file of their own, so they are built from the poster primitives and
   the house scales the rest of the site already uses: the inner-page hero of
   /pricing and /faq, the ruled prose of the location pages, and the alternating
   white / yellow / black bands of the homepage.

   Also holds the two shared partials this page owns — the benefits band
   (partials/benefits.php) and the closing CTA band (partials/cta_band.php,
   also rendered on /pricing) — plus the disclaimer block.
   ========================================================================== */

/* ---- Page head ----------------------------------------------------------- */
.pseo-head { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(36px, 4.5vw, 56px); }
.pseo-head h1 {
  font-size: clamp(40px, 7.6vw, 96px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 0; max-width: 900px; text-transform: uppercase;
}
/* 760px is the intro's own production max-width, kept verbatim. */
.pseo-lead {
  font-size: clamp(19px, 2.4vw, 26px); line-height: 1.3; font-weight: 500;
  max-width: 760px; margin: clamp(24px, 3vw, 36px) 0 0;
}
.pseo-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(20px, 3vw, 32px); margin-top: clamp(24px, 3vw, 36px);
}
body.poster .pseo-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--p-ink); color: var(--p-paper);
  font-family: var(--p-black); font-size: clamp(21px, 2.6vw, 28px);
  padding: clamp(22px, 2.8vw, 30px) clamp(24px, 3.4vw, 40px); text-transform: uppercase;
}
.pseo-alt { font-size: 17px; font-weight: 700; }

/* ---- Body copy ----------------------------------------------------------- */
.pseo-prose { border-top: 4px solid var(--p-ink); }
.pseo-prose-inner { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.pseo-prose-inner > * { max-width: 760px; }
.pseo-prose h2 {
  font-size: clamp(24px, 3vw, 32px); line-height: 1;
  margin: clamp(28px, 3.4vw, 40px) 0 14px; text-transform: uppercase;
}
.pseo-prose h2:first-child { margin-top: 0; }
.pseo-prose p, .pseo-prose li {
  font-size: clamp(17px, 1.9vw, 20px); font-weight: 500; line-height: 1.55;
}
.pseo-prose p { margin: 0 0 20px; }
.pseo-prose ul { margin: 0 0 20px; padding-left: 20px; }
.pseo-prose li { margin-bottom: 8px; }

/* Every band on these pages opens on a 4px rule. The shared how-it-works
   partial carries none of its own (on /pricing the black price band above it
   supplies the edge), so it gets one here where it follows this page's copy. */
.pseo-head + .ppricing-how,
.pseo-prose + .ppricing-how { border-top: 4px solid var(--p-ink); }

/* ---- Benefits band (partials/benefits.php) -------------------------------- */
.pseo-benefits { border-top: 4px solid var(--p-ink); background: var(--p-hi); }
.pseo-benefits-inner { padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px); }
.pseo-benefits-sub {
  font-size: clamp(17px, 1.9vw, 20px); font-weight: 500; line-height: 1.55;
  max-width: 700px; margin: 16px 0 clamp(30px, 3.6vw, 44px);
}
.pseo-benefits-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(30px, 3.4vw, 44px) clamp(32px, 4vw, 64px);
}
.pseo-benefit { border-top: 2px solid var(--p-ink); padding-top: 20px; }
.pseo-benefit h3 {
  font-size: clamp(21px, 2.4vw, 26px); line-height: 1.1;
  margin: 0 0 12px; text-transform: uppercase;
}
.pseo-benefit p { font-size: clamp(17px, 1.9vw, 20px); font-weight: 500; line-height: 1.45; }

/* ---- Closing band (partials/cta_band.php) -------------------------------- */
.pseo-cta { border-top: 4px solid var(--p-ink); background: var(--p-hi); }
.pseo-cta-inner {
  padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px);
  /* min() on the track floor, as everywhere else: a flat minmax(300px, 1fr)
     pushes the grid wider than the viewport below ~340px. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: end;
}
.pseo-cta h2 {
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1; margin: 0;
  text-transform: uppercase; letter-spacing: -0.02em;
}
.pseo-cta-sub {
  font-size: clamp(17px, 1.9vw, 20px); font-weight: 500; line-height: 1.55;
  margin: 20px 0 0; max-width: 620px;
}
body.poster .pseo-cta-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--p-ink); color: var(--p-paper);
  font-family: var(--p-black); font-size: clamp(21px, 2.6vw, 28px);
  padding: clamp(22px, 2.8vw, 30px) clamp(24px, 3.4vw, 40px); text-transform: uppercase;
}

/* ---- Disclaimer (partials/disclaimer.php) -------------------------------- */
.pseo-note {
  border-top: 2px solid var(--p-ink); padding-top: 18px; max-width: 760px;
  font-size: clamp(16px, 1.8vw, 18px); font-weight: 500; line-height: 1.5;
}
.pseo-note strong { font-family: var(--p-black); font-weight: 400; text-transform: uppercase; }
.pseo-note--compact { font-size: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 560px) {
  /* The two buttons are the widest fixed items on the page; at phone width they
     take the same full-width, tighter treatment the hero CTA does. */
  body.poster .pseo-btn, body.poster .pseo-cta-btn { width: 100%; font-size: 20px; }
  .pseo-actions { gap: 22px; }
}