/*
  Page desks: styles for pages.js. Security, credentials, API, contact.
  Loaded after motion.css on the inner pages.
*/

/* ------------------------------------------------------------------ */
/* Shared: paper rosette                                               */
/* ------------------------------------------------------------------ */

.pg-rosette {
  display: block;
  overflow: visible;
}

.pg-rosette .tail { fill: #7e241d; }
.pg-rosette .scallop { fill: var(--red); stroke: #fbf6ec; stroke-width: 2; }
.pg-rosette .ring { fill: none; stroke: #fbf6ec; stroke-width: 1.5; stroke-dasharray: 3 3; }
.pg-rosette text { fill: #fbf6ec; text-anchor: middle; }
.pg-rosette .big { font-family: var(--display); font-weight: 900; font-size: 19px; }
.pg-rosette .small { font-family: var(--mono); font-weight: 700; font-size: 9px; letter-spacing: 1.5px; }

/* ------------------------------------------------------------------ */
/* Security: the Top 50 band                                           */
/* ------------------------------------------------------------------ */

.pg-rank-count {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.2rem 0 0.6rem;
}

.pg-rank-count b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.6rem, 9vw, 6rem);
  line-height: 0.8;
  color: var(--red);
  font-variant-numeric: lining-nums;
}

.pg-rank-count b::after {
  content: "×";
  font-size: 0.55em;
  margin-left: 0.05em;
}

.pg-rank-count span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.bugcrowd-ranks:has(.pg-rank) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)) !important;
  gap: clamp(0.6rem, 2vw, 1.2rem) !important;
  align-items: end;
}

.bugcrowd-ranks .pg-rank {
  position: relative;
  display: grid !important;
  justify-items: center;
  gap: 0.2rem;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: center;
}

.bugcrowd-ranks .pg-rank .pg-rosette {
  width: min(100%, 7.4rem);
  filter: drop-shadow(0.12rem 0.25rem 0.2rem rgba(26, 25, 22, 0.25));
}

.bugcrowd-ranks .pg-rank strong {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.bugcrowd-ranks .pg-rank span {
  font-family: var(--mono) !important;
  font-size: 0.56rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
}

.bugcrowd-ranks .pg-rank--start {
  align-self: center;
  justify-items: center;
  padding: 1rem 0.6rem !important;
  border: 1.5px dashed var(--rule-strong) !important;
}

.bugcrowd-ranks .pg-rank--start strong {
  position: static !important;
  width: auto;
  height: auto;
  clip: auto;
  font-family: var(--display);
  font-size: 1.4rem;
}

html.pr-motion .bugcrowd-ranks .pg-rank:not(.pg-rank--start) {
  opacity: 0;
  transform: rotate(-12deg) scale(1.9);
}

html.pr-motion .bugcrowd-ranks .pg-rank.is-stamped {
  animation: pgStamp 520ms cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}

@keyframes pgStamp {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.9); }
  60% { opacity: 1; transform: rotate(-3deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(var(--r, -4deg)) scale(1); }
}

.bugcrowd-ranks .pg-rank:nth-child(2) { --r: 3deg; }
.bugcrowd-ranks .pg-rank:nth-child(3) { --r: -2deg; }

.pg-run {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 1.4rem 0 0.4rem;
  padding-top: 0.9rem;
}

.pg-run-line {
  position: absolute;
  left: calc(100% / 14);
  right: calc(100% / 14);
  top: 0.9rem;
  height: 3px;
  background: var(--rule);
}

.pg-run-line i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ink), var(--red));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1600ms cubic-bezier(0.5, 0, 0.2, 1) 200ms;
}

.pg-run.is-in .pg-run-line i {
  transform: scaleX(1);
}

.pg-run-stop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.pg-run-stop b {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.2rem;
  border-radius: 50%;
  background: var(--paper-light);
  border: 2px solid var(--ink);
  transform: scale(0);
  transition: transform 420ms var(--pr-spring);
  transition-delay: calc(200ms + var(--i) * 220ms);
}

.pg-run-stop.is-top b {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: -0.38rem;
  border: 0;
  border-radius: 0;
  background: var(--red);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.pg-run.is-in .pg-run-stop b {
  transform: scale(1);
}

.pg-run-stop em {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.pg-run-stop.is-top em {
  color: var(--red);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Security: area panels cut in                                        */
/* ------------------------------------------------------------------ */

.area-panel.pg-cutin {
  animation: pgCutIn 620ms cubic-bezier(0.6, 0, 0.2, 1);
}

@keyframes pgCutIn {
  0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.area-panel.pg-cutin .area-facts > div {
  animation: pgRowIn 520ms cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

.area-panel.pg-cutin .area-facts > div:nth-child(2) { animation-delay: 120ms; }
.area-panel.pg-cutin .area-facts > div:nth-child(3) { animation-delay: 240ms; }

@keyframes pgRowIn {
  from { opacity: 0; translate: 1.2rem 0; rotate: 1deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

.area-tabs [role="tab"] {
  transition: background 240ms ease, color 240ms ease, translate 320ms var(--pr-spring) !important;
}

.area-tabs [role="tab"][aria-selected="true"] {
  translate: 0.35rem 0;
  box-shadow: -0.35rem 0 0 var(--red) !important;
}

/* ------------------------------------------------------------------ */
/* Security: the lab fires and stamps                                  */
/* ------------------------------------------------------------------ */

.lab-pane--response {
  position: relative;
  overflow: hidden;
}

.pg-lab-stamp {
  position: absolute;
  right: 0.9rem;
  top: 2.6rem;
  z-index: 3;
  display: grid;
  justify-items: center;
  padding: 0.4rem 0.8rem;
  border: 3px solid currentColor;
  border-radius: 0.3rem;
  color: #7c9a6a;
  font-family: var(--display);
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-9deg) scale(2.2);
  pointer-events: none;
}

.pg-lab-stamp[data-tone="leak"] {
  color: #e0654a;
}

.pg-lab-stamp b {
  font-size: 1.8rem;
  font-weight: 900;
}

.pg-lab-stamp span {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.pg-lab-stamp.is-on {
  animation: pgLabStamp 460ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

@keyframes pgLabStamp {
  to { opacity: 0.92; transform: rotate(-9deg) scale(1); }
}

.pg-lab-envelope {
  position: fixed;
  z-index: 4450;
  width: 2.6rem;
  height: 1.7rem;
  margin: -0.85rem 0 0 -1.3rem;
  background:
    linear-gradient(to bottom right, transparent 49%, rgba(26, 25, 22, 0.35) 50%, transparent 52%) 0 0 / 50% 60% no-repeat,
    linear-gradient(to bottom left, transparent 49%, rgba(26, 25, 22, 0.35) 50%, transparent 52%) 100% 0 / 50% 60% no-repeat,
    #fbf6ec;
  border: 1.5px solid var(--ink);
  border-radius: 0.2rem;
  box-shadow: 0 0.5rem 1rem rgba(26, 25, 22, 0.3);
  pointer-events: none;
  animation: pgFly 520ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

@keyframes pgFly {
  0% { translate: 0 0; rotate: -8deg; scale: 0.6; }
  50% { translate: calc(var(--dx) * 0.5) calc(var(--dy) * 0.5 - 3rem); rotate: 6deg; scale: 1.1; }
  100% { translate: var(--dx) var(--dy); rotate: 0deg; scale: 0.5; opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* Security: a checklist that ticks itself                             */
/* ------------------------------------------------------------------ */

.pg-checkmeter {
  position: sticky;
  top: 0.7rem;
  z-index: 5;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--ink);
  background: linear-gradient(160deg, #f0e7d8, #ddd1bd);
  box-shadow: 0.2rem 0.2rem 0 rgba(26, 25, 22, 0.85);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pg-checkmeter b {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0;
  color: var(--red);
}

.pg-checkmeter i {
  height: 4px;
  background: var(--rule);
}

.pg-checkmeter em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ink), var(--red));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform 500ms var(--ease);
}

.pg-checkmeter.is-done {
  background: var(--ink);
  color: var(--paper-light);
}

.pg-checkmeter.is-done b {
  color: #e0845c;
}

.method-step .pg-check {
  position: relative;
  display: grid !important;
  place-items: center;
  width: 2.8rem !important;
  height: 2.8rem !important;
  min-width: 2.8rem;
  border: 2px solid var(--ink) !important;
  border-radius: 0.25rem !important;
  color: var(--ink) !important;
  background: #fbf6ec !important;
  box-shadow: 0.18rem 0.22rem 0 rgba(26, 25, 22, 0.2) !important;
  transform: rotate(-2deg);
  transition: background 300ms ease, transform 420ms var(--pr-spring);
}

.method-step .pg-check small {
  position: absolute;
  left: 0.2rem;
  top: 0.12rem;
  font-family: var(--mono);
  font-size: 0.5rem;
  color: var(--muted);
}

.method-step .pg-check svg {
  width: 80%;
  height: 80%;
  overflow: visible;
}

.method-step .pg-check path {
  fill: none;
  stroke: var(--red);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 420ms cubic-bezier(0.6, 0, 0.3, 1) 120ms;
}

.method-step.is-checked .pg-check {
  transform: rotate(2deg) scale(1.06);
}

.method-step.is-checked .pg-check path {
  stroke-dashoffset: 0;
}

.method-step h3 {
  background-image: linear-gradient(transparent 62%, rgba(209, 90, 53, 0.22) 62%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 700ms cubic-bezier(0.6, 0, 0.3, 1) 300ms;
}

.method-step.is-checked h3 {
  background-size: 100% 100%;
}

/* ------------------------------------------------------------------ */
/* Security: FIXED stamp, unfolding patterns, the envelope             */
/* ------------------------------------------------------------------ */

.report-sheet {
  position: relative;
}

.pg-fixed {
  position: absolute;
  right: clamp(0.6rem, 3vw, 2rem);
  top: clamp(2.6rem, 6vw, 4rem);
  z-index: 3;
  display: grid;
  justify-items: center;
  padding: 0.5rem 1rem;
  border: 4px double #4f6b3c;
  color: #4f6b3c;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-12deg) scale(2.4);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.pg-fixed b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1;
}

.pg-fixed span {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.pg-fixed.is-on {
  animation: pgFixed 520ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

@keyframes pgFixed {
  to { opacity: 0.85; transform: rotate(-12deg) scale(1); }
}

html.pr-motion .pg-fold dl {
  perspective: 900px;
}

html.pr-motion .pg-fold dl > div {
  transform-origin: 50% 0;
  transform: rotateX(-92deg);
  opacity: 0;
  transition: transform 620ms cubic-bezier(0.2, 1.2, 0.35, 1), opacity 300ms ease;
}

html.pr-motion .pg-fold.is-open dl > div {
  transform: none;
  opacity: 1;
}

html.pr-motion .pg-fold.is-open dl > div:nth-child(2) { transition-delay: 160ms; }
html.pr-motion .pg-fold.is-open dl > div:nth-child(3) { transition-delay: 320ms; }

.sec-disclosure-inner {
  position: relative;
}

.pg-envelope {
  position: relative;
  width: min(17rem, 70vw);
  aspect-ratio: 1.55;
  margin: 2rem auto 0;
  perspective: 700px;
}

.pg-env-back,
.pg-env-front,
.pg-env-flap {
  position: absolute;
  inset: 0;
}

.pg-env-back {
  background: #8a2a22;
  border-radius: 0.3rem;
  box-shadow: 0 1rem 2rem rgba(26, 25, 22, 0.28);
}

.pg-env-front {
  z-index: 3;
  background: var(--red);
  clip-path: polygon(0 34%, 50% 70%, 100% 34%, 100% 100%, 0 100%);
  border-radius: 0.3rem;
}

.pg-env-flap {
  z-index: 4;
  background: #b8452c;
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  transform-origin: 50% 0;
  transition: transform 700ms cubic-bezier(0.6, 0, 0.3, 1);
}

.pg-envelope.is-open .pg-env-flap {
  z-index: 1;
  transform: rotateX(180deg);
}

.pg-env-letter {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 10%;
  bottom: 6%;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  background: #fbf6ec;
  box-shadow: 0 0.3rem 0.6rem rgba(26, 25, 22, 0.2);
  transition: transform 800ms cubic-bezier(0.2, 1.2, 0.35, 1) 450ms;
}

.pg-envelope.is-open .pg-env-letter {
  transform: translateY(-58%);
}

.pg-env-letter b {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--red);
}

.pg-env-letter i {
  display: block;
  height: 0.28rem;
  width: 90%;
  background: var(--rule);
}

.pg-env-letter i:nth-of-type(2) { width: 70%; }
.pg-env-letter i:nth-of-type(3) { width: 80%; }

.pg-env-letter em {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-style: normal;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ */
/* Credentials: paper tags and dealt certificates                      */
/* ------------------------------------------------------------------ */

.skill-list:has(.pg-tag) {
  gap: 0.55rem 0.7rem !important;
}

.skill-chip.pg-tag {
  position: relative;
  padding: 0.45rem 0.8rem 0.45rem 1.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(170deg, #fbf6ec, #eee3d0) !important;
  box-shadow: 0.1rem 0.18rem 0 rgba(26, 25, 22, 0.18) !important;
  clip-path: polygon(0.7rem 0, 100% 0, 100% 100%, 0.7rem 100%, 0 50%);
  transform-origin: 0.55rem 50%;
  rotate: var(--tilt, 0deg);
  transition: rotate 420ms var(--pr-spring), translate 300ms ease;
}

.skill-chip.pg-tag .skill-dot {
  position: absolute !important;
  left: 0.5rem;
  top: 50%;
  width: 0.34rem !important;
  height: 0.34rem !important;
  margin: 0 !important;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--paper) !important;
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
}

.skill-chip.pg-tag:hover {
  rotate: calc(var(--tilt, 0deg) * -3);
  translate: 0 -2px;
}

html.pr-motion .skill-group .skill-chip.pg-tag {
  opacity: 0;
  translate: 0 -0.8rem;
}

html.pr-motion .skill-group.pg-tags-in .skill-chip.pg-tag {
  animation: pgTagIn 560ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(300ms + var(--i) * 55ms);
}

@keyframes pgTagIn {
  0% { opacity: 0; translate: 0 -0.9rem; rotate: calc(var(--tilt, 0deg) * 6); }
  100% { opacity: 1; translate: 0 0; rotate: var(--tilt, 0deg); }
}

.cert-card.pg-dealt {
  position: relative;
}

html.pr-motion .certs-grid .cert-card.pg-dealt {
  animation: pgDeal 640ms cubic-bezier(0.2, 1.1, 0.35, 1) both;
  animation-delay: calc(var(--deal, 0) * 55ms);
}

@keyframes pgDeal {
  0% { opacity: 0; translate: 0 2.4rem; rotate: var(--deal-r, -4deg); scale: 0.92; }
  70% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}

.cert-card:has(.pg-seal) .cert-title {
  padding-right: 2.6rem;
}

.cert-card .pg-seal {
  position: absolute;
  right: 0.55rem;
  top: 1.9rem;
  z-index: 2;
  width: 2.3rem;
  opacity: 0;
  transform: rotate(-14deg) scale(2);
  pointer-events: none;
}

.cert-card .pg-seal .pg-rosette .big { font-size: 28px; }

.cert-card.pg-dealt .pg-seal {
  animation: pgSeal 420ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
  animation-delay: calc(420ms + var(--deal, 0) * 55ms);
}

@keyframes pgSeal {
  to { opacity: 0.95; transform: rotate(-10deg) scale(1); }
}

.cert-card {
  transition: translate 300ms var(--pr-spring), rotate 300ms var(--pr-spring), box-shadow 300ms ease !important;
}

.cert-card:hover,
.cert-card:focus-visible {
  translate: 0 -0.3rem;
  rotate: -0.6deg;
  box-shadow: 0 1rem 1.6rem rgba(26, 25, 22, 0.2) !important;
}

/* ------------------------------------------------------------------ */
/* API: the route map                                                  */
/* ------------------------------------------------------------------ */

.pg-map {
  margin: 1.4rem 0 0;
  padding: clamp(0.8rem, 2vw, 1.2rem);
  color: var(--paper-light);
  background: #12110f;
  box-shadow: 0.35rem 0.35rem 0 rgba(26, 25, 22, 0.25);
}

.pg-map-head {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}

.pg-map-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e0845c;
}

.pg-map-kicker i {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #e0845c;
}

.pg-map-note {
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(234, 223, 206, 0.7);
}

.pg-map-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(234, 223, 206, 0.16);
}

@media (max-width: 760px) {
  .pg-map-stage {
    aspect-ratio: 3 / 4;
  }
}

.pg-map-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.pg-map-canvas:focus-visible {
  outline: 2px solid #e0845c;
  outline-offset: 2px;
}

.pg-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pg-map-legend span::before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 4px;
  margin-right: 0.4rem;
  vertical-align: 0.15em;
  background: var(--c, #fbf6ec);
}

.pg-map-legend .pg-map-last {
  margin-left: auto;
  color: rgba(234, 223, 206, 0.6);
}

.pg-map-legend .pg-map-last::before {
  display: none;
}

.api-console-body.pg-print {
  animation: pgPrint 700ms steps(10, end);
}

@keyframes pgPrint {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ------------------------------------------------------------------ */
/* Contact: paper tabs and the paper plane                             */
/* ------------------------------------------------------------------ */

.contact-topic.pg-tab {
  transition: translate 300ms var(--pr-spring), rotate 300ms var(--pr-spring) !important;
}

.contact-topic.pg-tab:hover {
  translate: 0 -2px;
  rotate: -1deg;
}

.contact-topic.pg-tab.pg-tab-pop {
  animation: pgTabPop 420ms cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes pgTabPop {
  0% { scale: 0.92; rotate: 3deg; }
  100% { scale: 1; rotate: 0deg; }
}

.pg-plane {
  position: fixed;
  z-index: 4450;
  width: 4rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  pointer-events: none;
  animation: pgPlane 1400ms cubic-bezier(0.5, 0, 0.6, 1) forwards;
}

.pg-plane svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.6rem 0.8rem rgba(26, 25, 22, 0.3));
}

@keyframes pgPlane {
  0% { translate: 0 0; rotate: 0deg; scale: 0.3; opacity: 0; }
  15% { scale: 1; opacity: 1; }
  45% { translate: -6rem 2rem; rotate: -18deg; }
  100% { translate: 70vw -80vh; rotate: 25deg; scale: 0.5; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bugcrowd-ranks .pg-rank { opacity: 1 !important; transform: none !important; }
  .pg-run-line i { transform: scaleX(1); }
  .pg-run-stop b { transform: scale(1); }
  .pg-lab-envelope, .pg-plane { display: none; }
}

/* ================================================================ */
/* Contact: the letter pad                                           */
/* The message column is a pad of the journal's own letter paper:    */
/* a perforated binding, ruled lines and a red margin, postage that  */
/* is pressed on and franked as it arrives, paper tags for topics,   */
/* typewriter blanks to fill in, and a wax seal to send it. On send  */
/* the letter is folded, sealed into an envelope and flown off.      */
/* ================================================================ */

.contact-page .contact-form-column.post-desk {
  position: relative;
  isolation: isolate;
  padding-top: clamp(2.6rem, 5vw, 3.4rem) !important;
  padding-left: clamp(2.2rem, 5vw, 3.6rem) !important;
  border: 1px solid rgba(26, 25, 22, 0.3) !important;
  border-radius: 4px !important;
  background:
    linear-gradient(90deg, transparent calc(clamp(1.4rem, 3.4vw, 2.5rem) - 1px), rgba(209, 90, 53, 0.55) calc(clamp(1.4rem, 3.4vw, 2.5rem) - 1px) clamp(1.4rem, 3.4vw, 2.5rem), transparent clamp(1.4rem, 3.4vw, 2.5rem)),
    repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), rgba(37, 63, 84, 0.1) calc(2rem - 1px) 2rem),
    linear-gradient(180deg, #fcf8ef, #f3eadb 70%, #ede2cf) !important;
  color: var(--ink);
  /* Sheets underneath: the pad, then a red backing card, cut paper style */
  box-shadow:
    0.45rem 0.5rem 0 -1px #e6dac6,
    0.45rem 0.5rem 0 0 rgba(26, 25, 22, 0.28),
    0.95rem 1rem 0 -1px var(--red),
    0 1.6rem 3rem rgba(26, 25, 22, 0.16) !important;
}

/* The binding strip, punched along the top */
.pd-binding {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.3rem;
  border-bottom: 2px solid var(--ink);
  background:
    radial-gradient(circle at 50% 55%, #d6ccbd 0 0.2rem, rgba(26, 25, 22, 0.55) 0.21rem 0.26rem, transparent 0.27rem) 0 0 / 1.3rem 1.3rem repeat-x,
    linear-gradient(180deg, #2a2621, #171612);
  pointer-events: none;
}

/* Postage: a perforated stamp, pressed on, then franked */
.pd-postage {
  position: absolute;
  top: 2.1rem;
  right: clamp(0.9rem, 3vw, 1.8rem);
  z-index: 1;
  width: clamp(7.4rem, 18vw, 10rem);
  height: 6.2rem;
  pointer-events: none;
}

.pd-stamp {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 4.8rem;
  height: 5.8rem;
  padding: 0.42rem;
  /* Solid paper in the middle, a ring of perforation holes round the edge */
  background:
    linear-gradient(#fffaf0, #fffaf0) content-box,
    radial-gradient(circle, transparent 0.15rem, #fffaf0 0.16rem) -0.25rem -0.25rem / 0.5rem 0.5rem border-box;
  filter: drop-shadow(1px 2px 1px rgba(26, 25, 22, 0.28));
  rotate: 4deg;
  opacity: 0;
  transform: translateY(-1.2rem) scale(1.3) rotate(-12deg);
}

.pd-stamp-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #efe3cc;
  outline: 1px solid rgba(163, 49, 40, 0.5);
}

/* A little paper-cut landscape: sun, two hills */
.pd-stamp-art i {
  position: absolute;
  left: -20%;
  right: -20%;
  border-radius: 50% 50% 0 0;
}

.pd-stamp-art i:nth-child(1) { left: 55%; right: auto; top: 18%; width: 1rem; height: 1rem; border-radius: 50%; background: var(--red-hot); }
.pd-stamp-art i:nth-child(2) { bottom: -38%; height: 90%; background: #c7b8a4; box-shadow: 0 -2px 0 rgba(26, 25, 22, 0.15); }
.pd-stamp-art i:nth-child(3) { bottom: -58%; left: -50%; height: 100%; background: var(--red); box-shadow: 0 -2px 0 rgba(26, 25, 22, 0.2); }

.pd-stamp-art b {
  position: relative;
  font: 900 1rem/1 var(--display);
  color: #fffaf0;
  text-shadow: 1px 1px 0 var(--ink);
  translate: 0 0.55rem;
}

.pd-stamp-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 0.22rem;
}

.pd-stamp-foot em {
  font: 900 0.72rem/1 var(--display);
  font-style: normal;
  color: var(--red);
}

.pd-stamp-foot small {
  font: 700 0.3rem/1.1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  max-width: 2rem;
}

.pd-cancel {
  position: absolute;
  right: 1.6rem;
  top: 0.6rem;
  width: 8.2rem;
  height: auto;
  overflow: visible;
  opacity: 0;
  transform: scale(1.35) rotate(-14deg);
}

.pd-cancel circle,
.pd-cancel path {
  fill: none;
  stroke: rgba(37, 63, 84, 0.72);
  stroke-width: 2.2;
}

.pd-cancel text {
  fill: rgba(37, 63, 84, 0.78);
  font: 700 9px var(--mono);
  letter-spacing: 1px;
  text-anchor: middle;
}

.pd-cancel .pd-cancel-sub { font-size: 7px; }

.post-desk.is-posted .pd-stamp { animation: pdStampOn 560ms cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
.post-desk.is-posted .pd-cancel { animation: pdFrank 360ms 480ms cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }

@keyframes pdStampOn {
  to { opacity: 1; transform: none; }
}

@keyframes pdFrank {
  0% { opacity: 0; transform: scale(1.35) rotate(-14deg); }
  60% { opacity: 0.95; transform: scale(0.95) rotate(-8deg); }
  100% { opacity: 0.85; transform: scale(1) rotate(-9deg); }
}

/* Heading: typed onto the pad */
.post-desk .section-kicker { color: var(--red) !important; margin-right: clamp(6.5rem, 16vw, 9rem) !important; }

.post-desk .contact-form-title {
  position: relative;
  padding-right: clamp(5.5rem, 16vw, 8rem);
  color: var(--ink) !important;
}

.post-desk .contact-form-title .pn-caret {
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: var(--red-hot);
  animation: pnBlink 0.9s steps(1) infinite;
}

@keyframes pnBlink { 50% { opacity: 0; } }

.post-desk .contact-form-helper { color: var(--ink-soft) !important; max-width: 34rem; }

/* Topics: paper tags on a string */
.post-desk .contact-topics legend,
.post-desk .contact-field > span {
  color: var(--red) !important;
  font-family: var(--mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
}

.post-desk .contact-topics { gap: 0.55rem 0.5rem !important; }

.post-desk .contact-topic > span {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem 0.35rem 1.35rem !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0.2rem 0.55rem 0.55rem 0.2rem !important;
  background: #fffaf0 !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink) !important;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, rotate 260ms var(--pr-spring) !important;
}

/* The punched hole of the tag */
.post-desk .contact-topic > span::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 50%;
  width: 0.34rem;
  height: 0.34rem;
  margin-top: -0.17rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.2px var(--ink);
}

.post-desk .contact-topic > span:hover { background: #fdeadf !important; }

.post-desk .contact-topic input:checked + span {
  background: var(--red) !important;
  color: #fffaf0 !important;
  border-color: var(--ink) !important;
  rotate: -2deg;
}

.post-desk .contact-topic input:checked + span .topic-seal { border-color: #fffaf0 !important; color: #fffaf0 !important; }

/* Blanks to fill in, on the typewriter */
.post-desk .contact-field input,
.post-desk .contact-field textarea {
  border: 0 !important;
  border-bottom: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  caret-color: var(--red-hot);
  font-family: var(--mono) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  transition: border-color 200ms ease, background 200ms ease !important;
}

.post-desk .contact-field textarea {
  min-height: 12rem;
  padding: 0.25rem 0.2rem 0 !important;
  border: 1.5px solid rgba(26, 25, 22, 0.35) !important;
  line-height: 2rem !important;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), rgba(37, 63, 84, 0.22) calc(2rem - 1px) 2rem) !important;
  background-attachment: local !important;
}

.post-desk .contact-field input::placeholder,
.post-desk .contact-field textarea::placeholder { color: rgba(26, 25, 22, 0.38) !important; }

.post-desk .contact-field input:focus,
.post-desk .contact-field textarea:focus {
  outline: none !important;
  border-color: var(--red-hot) !important;
  background-color: rgba(209, 90, 53, 0.06) !important;
}

/* Seal and send: an ink pill with the wax pressed on the front */
.post-desk .contact-send-button {
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: #fbf6ec !important;
  box-shadow: 4px 4px 0 var(--red) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.post-desk .contact-send-button:hover,
.post-desk .contact-send-button:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--red) !important;
  outline: none;
}

.post-desk .contact-send-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--red) !important; }

.post-desk .contact-form-status { color: var(--green) !important; }
.post-desk .contact-form-status[data-state="error"] { color: var(--red) !important; }

/* The preview: a carbon copy, paper-clipped to the pad */
.post-desk .letter {
  margin-top: 1.6rem;
  background:
    repeating-linear-gradient(180deg, rgba(26, 25, 22, 0.04) 0 1px, transparent 1px 7px),
    #fffaf0 !important;
  border: 1px solid rgba(26, 25, 22, 0.35) !important;
  box-shadow: 3px 4px 0 rgba(26, 25, 22, 0.18) !important;
  transform: rotate(0.8deg);
}

.post-desk .letter::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: -0.9rem;
  width: 0.8rem;
  height: 2.2rem;
  border: 2.5px solid #7c8792;
  border-radius: 0.4rem;
  border-bottom-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.post-desk .letter.is-live { transform: rotate(0deg); }

/* Sending: fold, seal, fly */
.pn-envelope {
  position: absolute;
  left: 50%;
  top: 70%;
  width: min(20rem, 70%);
  aspect-ratio: 1.6;
  translate: -50% -50%;
  opacity: 0;
  scale: 0.6;
  pointer-events: none;
  perspective: 700px;
  transition: opacity 260ms ease, scale 380ms cubic-bezier(0.2, 1.5, 0.4, 1);
}

.pn-env-back, .pn-env-front, .pn-env-flap { position: absolute; inset: 0; }
.pn-env-back { border-radius: 6px; background: #e9dcc2; box-shadow: 0 24px 40px rgba(26, 25, 22, 0.35); outline: 1.5px solid rgba(26, 25, 22, 0.3); }
.pn-env-front {
  background:
    linear-gradient(32deg, #efe3cb 50%, transparent 50%) left bottom / 50% 100% no-repeat,
    linear-gradient(-32deg, #efe3cb 50%, transparent 50%) right bottom / 50% 100% no-repeat;
  border-radius: 6px;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.15));
}

.pn-env-flap {
  bottom: 38%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #e2d2b4, #d7c4a2);
  transform-origin: 50% 0;
  transform: rotateX(178deg);
  transition: transform 420ms cubic-bezier(0.5, 0, 0.3, 1) 180ms;
}

.pn-env-seal {
  position: absolute;
  left: 50%;
  top: 52%;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e45a3c, #a33128 60%, #6d1c16);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(0, 0, 0, 0.15);
  color: #ffd9c9;
  font: 900 0.95rem/1 "Playfair Display", Georgia, serif;
  opacity: 0;
  scale: 2.4;
  transition: opacity 120ms ease 560ms, scale 260ms cubic-bezier(0.4, 1.6, 0.5, 1) 560ms;
}

.pn-env-post {
  position: absolute;
  left: 0.8rem;
  bottom: 0.6rem;
  font: 700 0.52rem/1 "Courier New", Courier, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(23, 22, 18, 0.55);
}

.post-desk.is-sending .letter { animation: pnFold 520ms cubic-bezier(0.6, 0, 0.8, 0.4) forwards; }
.post-desk.is-sealed .pn-envelope { opacity: 1; scale: 1; }
.post-desk.is-sealed .pn-env-flap { transform: rotateX(0deg); }
.post-desk.is-sealed .pn-env-seal { opacity: 1; scale: 1; }
.post-desk.is-flying .pn-envelope {
  translate: 90% -160%;
  rotate: -18deg;
  scale: 0.45;
  opacity: 0;
  filter: blur(1.5px);
  transition: translate 900ms cubic-bezier(0.55, 0, 0.7, 0.3), rotate 900ms ease, scale 900ms ease, opacity 300ms ease 600ms, filter 400ms ease;
}

@keyframes pnFold {
  0% { transform: rotate(0deg); opacity: 1; }
  45% { transform: perspective(900px) rotateX(62deg) scaleY(0.6); opacity: 1; }
  100% { transform: perspective(900px) translateY(40px) rotateX(86deg) scale(0.5); opacity: 0; }
}

@media (max-width: 640px) {
  .pd-postage { top: 1.9rem; width: 5.6rem; transform: scale(0.82); transform-origin: 100% 0; }
  .post-desk .section-kicker { margin-right: 5.2rem !important; }
  .post-desk .contact-form-title { padding-right: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .post-desk .pd-stamp, .post-desk .pd-cancel { animation: none !important; opacity: 1; transform: none; }
  .post-desk .pd-cancel { opacity: 0.85; transform: rotate(-9deg); }
  .post-desk.is-sending .letter { animation: none; }
}

/* ================================================================ */
/* API: the console no longer grows with the JSON. On wide screens   */
/* it takes the height of the column beside it and scrolls inside;   */
/* the route map grows to fill that column.                          */
/* ================================================================ */

@media (min-width: 981px) {
  .api-quickstart .api-console {
    contain: size;
    min-height: 36rem;
  }

  .api-quickstart .api-quickstart-copy {
    display: flex;
    flex-direction: column;
  }

  .api-quickstart .pg-map {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .api-quickstart .pg-map-stage {
    flex: 1;
    min-height: 16rem;
    aspect-ratio: auto;
  }
}

@media (max-width: 980px) {
  .api-quickstart .api-console { height: min(74vh, 38rem); }
}

.api-console-body { min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(163, 49, 40, 0.5) transparent; }

.pg-wire {
  position: relative;
  margin: clamp(1rem, 2vw, 1.6rem) 0 0;
  height: clamp(88px, 11vw, 132px);
  border: 1px solid #000;
  background:
    radial-gradient(circle at 12% 0, rgba(209, 90, 53, 0.18), transparent 18rem),
    linear-gradient(180deg, #1c1915, #11100d);
  box-shadow: 0 16px 34px rgba(15, 13, 11, 0.22);
  overflow: hidden;
}

.pg-wire-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.pg-wire-cap {
  position: absolute;
  left: 0.9rem;
  top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font: 700 0.58rem/1 "Courier New", Courier, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(241, 232, 216, 0.6);
}

.pg-wire-cap i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0492c;
  box-shadow: 0 0 10px rgba(224, 73, 44, 0.8);
  animation: navRec 1.1s ease-in-out infinite;
}

@keyframes navRec { 50% { opacity: 0.3; } }

/* ================================================================ */
/* Contact: the four brief cards and the direct line                 */
/* ================================================================ */

/* The circle badge is for the card number only. It used to match every
   span in the card, including the word spans the headline animation
   wraps each title word in, so "Security research" became a row of
   overlapping circles. */
body[data-page="contact"] .contact-brief-grid article :is(h2, p) span {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

body[data-page="contact"] .contact-brief-grid h2 :is(.pr-w, .pr-wi) { display: inline-block; }

body[data-page="contact"] .contact-brief-grid article > span:first-child {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  background: #fffaf0;
  color: var(--red);
  font-family: var(--mono);
  font-size: 0.7rem;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="contact"] .contact-brief-grid article:hover > span:first-child {
    padding: 0;
    background: var(--red);
    color: #fffaf0;
  }
  body[data-page="contact"] .contact-brief-grid article:hover :is(h2, p) span { background: none; color: inherit; padding: 0; }
}

/* The address never breaks mid-word: it scales to its column instead. */
body[data-page="contact"] .contact-column--email .email-link {
  font-size: clamp(1.5rem, 2.55vw, 2.9rem) !important;
  line-height: 1 !important;
  overflow-wrap: normal !important;
  word-break: keep-all;
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 1100px) {
  body[data-page="contact"] .contact-column--email .email-link { font-size: clamp(1.6rem, 6.4vw, 2.9rem) !important; }
}