/* ============================================================
   Press room - index (/{lang}/press) and release pages
   (/{lang}/press/:slug) in the fancy-v2-light design language
   (loaded after fancy.css).

   Two halves: the .pr-* page itself, light and warm like the
   rest of the site, and the .pcm-* product mockups inside a
   release, which are dark because they stand in for app
   screenshots. The mockups reuse .appwin from fancy-home.css
   for the window chrome and only add their own interior.
   ============================================================ */

/* ---------- Shared bits ---------- */

.pr-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--w-mut2);
  margin-bottom: 16px;
}

.pr-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--w-mut2);
  margin-bottom: 14px;
}

.pr-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 980px;
  background: var(--blue-light);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- Hero ---------- */

.pr-hero {
  padding: 150px 0 44px;
  text-align: center;
}

.pr-hero h1 {
  font-size: clamp(38px, 5vw, 56px);
  color: var(--w-ink);
  margin: 14px 0 12px;
}

.pr-hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--w-mut);
  max-width: 620px;
  margin: 0 auto 28px;
}

.pr-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Release cards ---------- */

.pr-latest-sec { padding: 0 0 46px; }
.pr-list-sec { padding: 0 0 56px; }

.pr-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pr-card {
  display: block;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.pr-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.pr-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--w-ink);
  margin: 0 0 10px;
}

.pr-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--w-mut);
  margin: 0 0 16px;
}

.pr-card-more {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-700);
}

.pr-card-more i { margin-left: 6px; font-size: 11px; }

.pr-card-featured { padding: 38px 40px; }

.pr-card-featured h3 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  max-width: 780px;
}

.pr-card-featured p { font-size: 16.5px; max-width: 760px; }

/* ---------- Fast facts ---------- */

.pr-facts-sec { padding: 0 0 56px; }

/* Individually bordered cells rather than a hairline grid: a release with an
   odd number of facts would otherwise leave a filled, empty cell in the row. */
.pr-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.pr-fact {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--w-line);
  border-radius: 14px;
  padding: 18px 20px;
}

.pr-fact dt {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w-mut2);
  margin-bottom: 6px;
}

.pr-fact dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--w-ink2);
}

/* ---------- Press kit ---------- */

.pr-kit-sec { padding: 0 0 56px; }

.pr-kit-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--w-mut);
  max-width: 680px;
  margin: 0 0 26px;
}

.pr-kit-heading {
  font-size: 18px;
  color: var(--w-ink);
  margin: 0 0 14px;
}

.pr-kit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}

.pr-kit-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pr-kit-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--w-line);
  background: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.pr-kit-item:hover {
  border-color: var(--green-300);
  box-shadow: var(--shadow-md);
}

.pr-kit-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--w-inset);
  overflow: hidden;
}

.pr-kit-thumb-logo { height: 96px; padding: 12px; }

.pr-kit-thumb-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pr-kit-item-wide .pr-kit-thumb { aspect-ratio: 16 / 10; }

.pr-kit-item-wide .pr-kit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.pr-kit-item-wide .pr-kit-thumb-contain img {
  box-sizing: border-box;
  object-fit: contain;
  padding: 10px;
}

.pr-kit-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--w-ink2);
}

.pr-kit-dl {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-700);
}

.pr-kit-dl i { margin-right: 6px; font-size: 11px; }

/* ---------- Boilerplate + contact ---------- */

.pr-boiler-sec { padding: 0 0 46px; }

.pr-boiler p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--w-mut);
  margin: 0 0 14px;
}

.pr-boiler p:last-child { margin-bottom: 0; }

.pr-contact-sec { padding: 0 0 80px; }

.pr-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.pr-contact h2 {
  font-size: 26px;
  color: var(--w-ink);
  margin: 0 0 6px;
}

.pr-contact-role {
  font-size: 15px;
  color: var(--green-700);
  font-weight: 600;
  margin: 0 0 10px;
}

.pr-contact-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--w-mut);
  margin: 0;
  max-width: 480px;
}

/* ---------- Release article ---------- */

.pr-art { padding: 130px 0 20px; }

.pr-art-wrap { max-width: 820px; }

.pr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--w-mut2);
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.pr-breadcrumb a { color: var(--green-700); text-decoration: none; font-weight: 600; }
.pr-breadcrumb a:hover { text-decoration: underline; }
.pr-breadcrumb i { font-size: 10px; color: var(--w-faint); }

.pr-art-head { margin-bottom: 26px; }

.pr-art-head h1 {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.08;
  color: var(--w-ink);
  margin: 0 0 16px;
}

.pr-dek {
  font-size: 19px;
  line-height: 1.6;
  color: var(--w-mut);
  margin: 0;
}

.pr-art-body { padding: 38px 44px; }

.pr-dateline {
  font-size: 15px;
  color: var(--w-ink2);
  margin: 0 0 4px;
}

.pr-dateline b { color: var(--w-ink); }

.pr-art-body p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--w-ink2);
  margin: 0 0 18px;
}

.pr-art-body h2 {
  font-size: 24px;
  color: var(--w-ink);
  margin: 34px 0 14px;
}

.pr-list-bullets {
  margin: 0 0 20px;
  padding-left: 22px;
}

.pr-list-bullets li {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--w-ink2);
  margin-bottom: 8px;
}

.pr-quote {
  margin: 30px 0;
  padding: 26px 30px;
  border-left: 3px solid var(--green-400);
  background: var(--blue-light);
  border-radius: 0 16px 16px 0;
}

.pr-quote p {
  font-family: var(--font-display);
  font-size: 20px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em;
  color: var(--w-ink) !important;
  margin: 0 0 12px !important;
}

.pr-quote cite {
  font-style: normal;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--green-700);
}

.pr-facts-card,
.pr-boiler,
.pr-art-contact { margin-top: 20px; }

.pr-art-contact p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--w-mut);
  margin: 0 0 10px;
}

.pr-art-contact p:last-child { margin-bottom: 0; }
.pr-art-contact i { font-size: 11px; margin-left: 4px; }

.pr-prevnext {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}

.pr-pn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 48%;
  padding: 16px 20px;
  text-decoration: none;
}

.pr-pn:hover { box-shadow: var(--shadow-lg); }
.pr-pn-next { margin-left: auto; text-align: right; }

.pr-pn-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w-mut2);
}

.pr-pn-title { font-weight: 600; color: var(--green-700); font-size: 15px; }

.pr-back {
  margin: 26px 0 60px;
  font-size: 15px;
}

.pr-back a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.pr-back a:hover { text-decoration: underline; }
.pr-back i { margin-right: 8px; font-size: 12px; }

/* ---------- Figures ---------- */

.pr-figure {
  margin: 34px 0;
  padding: 0;
}

.pr-figure figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--w-mut2);
}

.pr-figure-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--w-line);
  border-radius: 12px;
}

.pr-figure-split figcaption { text-align: center; }

/* Two phones side by side inside one figure, matched in height so the pair
   reads as one device shot rather than two crops. */
.pcm-phones {
  display: flex;
  gap: 22px;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Product mockups (.pcm-*) - a stand-in for app screenshots,
   using the app's dark palette and the app's own wording.
   Nothing here may ever show message content: the Parent
   Center cannot, and the figure must not suggest otherwise.
   ============================================================ */

/* The credits gold, used only inside the pack strip. The site palette has no
   gold of its own; this is the one the app's credits surfaces use. */
.pcm-strip { --pcm-pack-accent: #d9a441; }

/* Coin and pack strips: a band on the app's dark ground holding real
   artwork, used where a figure shows a set of things rather than a screen.
   The coins and the pack art are the app's own SVGs, so they stay sharp at
   press-kit resolution without a bitmap in the repository. */
.pcm-strip {
  background: var(--app-root);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  padding: 22px 24px 24px;
}

.pcm-strip-head { margin-bottom: 20px; }

.pcm-strip-title {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-hi);
  margin-bottom: 3px;
}

.pcm-strip-sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-low);
}

.pcm-coins {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 8px;
  justify-content: center;
}

/* Shared evenly across one row rather than fixed-width, so a set of nine does
   not drop its last coin onto a line of its own. */
.pcm-coin {
  flex: 1 1 84px;
  max-width: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pcm-coin img {
  width: 68px;
  height: 68px;
  display: block;
  margin-bottom: 9px;
}

.pcm-coin-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-hi);
}

.pcm-coin-req {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-low);
}

.pcm-packs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.pcm-pack {
  position: relative;
  flex: 0 0 164px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 12px 16px;
  border-radius: 12px;
  background: var(--app-frame);
  border: 1px solid var(--app-border);
}

.pcm-pack-on { border-color: var(--pcm-pack-accent); }

.pcm-pack img {
  width: 56px;
  height: 56px;
  display: block;
  margin-bottom: 10px;
}

.pcm-pack-credits {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-hi);
  line-height: 1.1;
}

.pcm-pack-label {
  font-size: 11.5px;
  color: var(--text-low);
  margin-top: 1px;
}

.pcm-pack-price {
  margin-top: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pcm-pack-accent);
}

.pcm-pack-tag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--pcm-pack-accent);
  color: var(--app-root);
}

.pcm-win { max-width: 100%; }

.pcm-body {
  display: flex;
  background: var(--app-root);
  min-height: 380px;
}

.pcm-nav {
  width: 176px;
  flex-shrink: 0;
  padding: 16px 12px;
  background: var(--app-frame);
  border-right: 1px solid var(--app-border);
}

.pcm-nav-head { padding: 0 8px 14px; }

.pcm-nav-title {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-hi);
  margin-bottom: 3px;
}

.pcm-nav-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.4;
}

.pcm-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-low);
  margin-bottom: 2px;
}

.pcm-tab i { font-size: 12px; width: 14px; text-align: center; }

.pcm-tab-on {
  background: var(--app-hover);
  color: var(--text-hi);
}

.pcm-main {
  flex: 1;
  min-width: 0;
  padding: 16px;
  background: var(--app-chat);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pcm-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  padding: 14px 16px;
}

.pcm-card-tight { padding: 12px 14px; }

.pcm-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-hi);
  margin-bottom: 5px;
}

.pcm-card-title i { font-size: 11.5px; color: var(--name-green); }

.pcm-desc {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-low);
  margin-bottom: 10px;
}

.pcm-note {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
  margin-top: 10px;
}

.pcm-note-pad { padding: 0 14px 14px; }

.pcm-time { font-size: 11px; color: var(--text-faint); }

/* Connect code */

.pcm-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pcm-code {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-hi);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--app-border);
  border-radius: 9px;
  padding: 9px 16px;
}

/* Buttons (inert - these are pictures of buttons) */

.pcm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pcm-btn i { font-size: 11px; }

.pcm-btn-primary { background: var(--green-400); color: #0c1a12; }

.pcm-btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-mid);
  border: 1px solid var(--app-border);
}

.pcm-btn-block { display: flex; margin-top: 12px; }

/* Avatars: initials, never a photograph - these rows stand for
   a minor's account, and a stock face reads as a real child. */

.pcm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  color: #101a14;
}

.pcm-avatar-sm { width: 24px; height: 24px; font-size: 11px; }
.pcm-avatar-lg { width: 42px; height: 42px; font-size: 17px; }

.pcm-tone-a { background: #6ebf8b; }
.pcm-tone-b { background: #7fb6d9; }
.pcm-tone-c { background: #c9a86a; }
.pcm-tone-d { background: #b39ad9; }

/* Rows */

.pcm-request,
.pcm-child-row,
.pcm-childhead {
  display: flex;
  align-items: center;
  gap: 11px;
}

.pcm-request {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  flex-wrap: wrap;
}

.pcm-request-info,
.pcm-person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pcm-request-info b,
.pcm-person b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
}

.pcm-request-info > span,
.pcm-person > span {
  font-size: 11.5px;
  color: var(--text-low);
}

.pcm-request-actions { display: flex; gap: 8px; }

.pcm-child-row {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.pcm-chevron { color: var(--text-faint); font-size: 12px; }

.pcm-childhead { padding: 2px 0 2px; flex-wrap: wrap; }

.pcm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-low);
  margin-right: 4px;
}

.pcm-back i { font-size: 10px; }

.pcm-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(110, 191, 139, 0.1);
  border: 1px solid rgba(110, 191, 139, 0.22);
  font-size: 11.5px;
  line-height: 1.5;
  color: #bfe0cc;
}

.pcm-banner i { color: var(--name-green); margin-top: 2px; }

/* Friends */

.pcm-friends { display: flex; gap: 8px; flex-wrap: wrap; }

.pcm-friend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.05);
}

.pcm-friend b { font-size: 12px; font-weight: 600; color: var(--text-mid); }

/* Connected-time table */

.pcm-table {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  overflow: hidden;
}

.pcm-tr {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-mid);
  border-bottom: 1px solid var(--app-border);
}

.pcm-tr:last-child { border-bottom: none; }

.pcm-th {
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

/* Location: state + events, ordered widest-reach first */

.pcm-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-hi);
}

.pcm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--name-green);
  box-shadow: 0 0 0 3px rgba(74, 156, 93, 0.22);
}

.pcm-event {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--text-faint);
  margin-bottom: 7px;
}

.pcm-event b { font-size: 12.5px; font-weight: 600; color: var(--text-hi); }

.pcm-exposure-high { border-left-color: #d98b5c; }
.pcm-exposure-low { border-left-color: var(--name-green); }

/* Alerts */

.pcm-alert-list { padding: 10px; display: flex; flex-direction: column; gap: 7px; }

.pcm-alert {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.pcm-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(110, 191, 139, 0.14);
  color: var(--name-green);
  font-size: 12px;
}

.pcm-alert-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcm-alert-text b { font-size: 12.5px; font-weight: 600; color: var(--text-hi); }
.pcm-alert-text > span { font-size: 11.5px; color: var(--text-low); }

/* Phone frame (the child's own screen, and the alerts feed) */

.pcm-phone {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 100%;
  padding: 10px;
  border-radius: 38px;
  background: #101317;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.09), 0 -1px 0 rgba(255, 255, 255, 0.12) inset;
}

.pcm-phone-notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 20px;
  border-radius: 980px;
  background: #05070a;
  z-index: 2;
}

.pcm-phone-screen {
  flex: 1;
  border-radius: 30px;
  background: var(--app-chat);
  overflow: hidden;
  padding-bottom: 4px;
  min-height: 470px;
}

.pcm-phone-head {
  padding: 42px 16px 12px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-hi);
  text-align: center;
  border-bottom: 1px solid var(--app-border);
}

.pcm-phone-screen .pcm-banner,
.pcm-phone-screen .pcm-restricted,
.pcm-phone-screen .pcm-card { margin: 10px; }

.pcm-restricted {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(217, 139, 92, 0.1);
  border: 1px solid rgba(217, 139, 92, 0.26);
}

.pcm-restricted i { color: #d98b5c; font-size: 13px; margin-top: 2px; }
.pcm-restricted > span { display: flex; flex-direction: column; gap: 4px; }

.pcm-restricted b {
  font-size: 12.5px;
  font-weight: 700;
  color: #f0cdb5;
}

.pcm-restricted > span > span {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-low);
}

.pcm-input {
  display: block;
  padding: 9px 12px;
  margin-bottom: 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--app-border);
  font-size: 12px;
  color: var(--text-faint);
}

.pcm-input-code {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--text-mid);
}

/* ---------- Growth chart and milestone badge (1,000 members) ----------
   One series on one axis: new members per month. The running total is text
   under the axis rather than a second line, because a second scale on the
   same plot is exactly what a growth chart must not do. The last bar is the
   month the counter passed the milestone; it is a lighter step of the same
   green and carries its own label, so the emphasis never rests on colour
   alone. */

.pcm-growth {
  --pcm-bar: var(--green-mint);
  --pcm-bar-on: var(--green-200);
  display: flex;
  align-items: stretch;
  gap: 26px;
}

.pcm-growth-hero {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 26px;
  border-right: 1px solid var(--app-border);
}

.pcm-growth-hero-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-hi);
}

.pcm-growth-hero-label {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pcm-bar-on);
}

.pcm-growth-hero-note {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-low);
}

.pcm-growth-plot { flex: 1 1 auto; min-width: 0; }

.pcm-growth-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 100%;
}

.pcm-growth-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pcm-growth-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 6px;
}

/* The track is what gives every column the same baseline; the bar inside it
   is a percentage of the tallest month, computed in the figure builder. */
.pcm-growth-track {
  width: 100%;
  height: 132px;
  display: flex;
  align-items: flex-end;
}

.pcm-growth-bar {
  width: 100%;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--pcm-bar);
}

.pcm-growth-bar-on { background: var(--pcm-bar-on); }

.pcm-growth-month {
  margin-top: 8px;
  padding-top: 8px;
  width: 100%;
  border-top: 1px solid var(--app-border);
  font-size: 11.5px;
  color: var(--text-low);
}

.pcm-growth-month-on { color: var(--text-hi); font-weight: 600; }

.pcm-growth-total {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* A span, not a <p>: a bare paragraph inside a release figure inherits
   `.pr-art-body p`, which paints it in the page's dark ink on the dark card. */
.pcm-growth-key {
  display: block;
  margin-top: 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-low);
}

/* ---------- Member map (1,000 members) ----------
   Three steps of one green on the dark card, lightest where most members
   live. The steps are spread far enough apart to read without the legend,
   but the legend and the country names carry the reading on their own. */

.pcm-map {
  --pcm-map-t1: #eef6ee;
  --pcm-map-t2: #93cba8;
  --pcm-map-t3: #4a8f62;
  --pcm-map-base: var(--app-frame);
  --pcm-map-line: var(--app-root);
  display: flex;
  align-items: center;
  gap: 24px;
}

.pcm-map-svg {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  width: 100%;
  height: auto;
}

.pcm-map-svg path {
  fill: var(--pcm-map-base);
  stroke: var(--pcm-map-line);
  stroke-width: 0.7;
  stroke-linejoin: round;
}

.pcm-map-svg path.pcm-map-t1 { fill: var(--pcm-map-t1); }
.pcm-map-svg path.pcm-map-t2 { fill: var(--pcm-map-t2); }
.pcm-map-svg path.pcm-map-t3 { fill: var(--pcm-map-t3); }

/* A dark halo under every name, so it reads over sea, a grey neighbour or a
   green step alike. */
.pcm-map-label {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  fill: var(--text-hi);
  stroke: var(--app-root);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
}

.pcm-map-leader {
  stroke: var(--text-low);
  stroke-width: 1.2;
}

.pcm-map-legend {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pcm-map-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 10px;
  align-items: baseline;
}

.pcm-map-swatch {
  grid-row: span 2;
  align-self: start;
  margin-top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.pcm-map-swatch.pcm-map-t1 { background: var(--pcm-map-t1); }
.pcm-map-swatch.pcm-map-t2 { background: var(--pcm-map-t2); }
.pcm-map-swatch.pcm-map-t3 { background: var(--pcm-map-t3); }

.pcm-map-count {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-hi);
}

.pcm-map-count small {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-low);
}

.pcm-map-where {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-mid);
}

.pcm-map-note {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-low);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .pr-list { grid-template-columns: 1fr; }
  .pr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcm-nav { display: none; }
}

@media (max-width: 760px) {
  .pr-hero { padding-top: 120px; }
  .pr-art { padding-top: 110px; }
  .pr-art-body { padding: 26px 22px; }
  .pr-card-featured { padding: 26px 24px; }
  .pr-facts { grid-template-columns: 1fr; }
  .pr-kit-grid { grid-template-columns: 1fr; }
  .pr-contact { flex-direction: column; align-items: flex-start; }
  .pr-prevnext { flex-direction: column; }
  .pr-pn { max-width: none; }
  .pr-pn-next { text-align: left; margin-left: 0; }
  .pcm-request-actions { width: 100%; }
  .pcm-btn { flex: 1; }
  .pcm-growth { flex-direction: column; gap: 20px; }
  .pcm-growth-hero {
    padding-right: 0;
    padding-bottom: 18px;
    border-right: none;
    border-bottom: 1px solid var(--app-border);
  }
  .pcm-growth-hero-num { font-size: 44px; }
  .pcm-growth-bars { gap: 5px; }
  .pcm-growth-val { font-size: 10.5px; }
  .pcm-growth-track { height: 104px; }
  .pcm-growth-month { font-size: 10.5px; }
  .pcm-growth-total { font-size: 10px; }
  .pcm-map { flex-direction: column; align-items: stretch; }
  .pcm-map-legend { flex-basis: auto; }
  /* At phone width the names would be a few pixels high; the legend below
     the map names every country, so the map drops its own labels. */
  .pcm-map-label, .pcm-map-leader { display: none; }
}