/* ==========================================================================
   Redix Digital: the privacy check page (privacy-check.html, privacy-check.js)
   In the design of the home page: v2.css draws the bar, the menu, the footer,
   the WhatsApp button, the buttons, the section titles and the questions;
   page.css puts the home page's sky behind it all. The tool opens the page
   the way the form closes the home page: the words on one side, a card of
   dark glass on the other. The card walks through three steps (address,
   details, results) without leaving the page. Every section below leads
   back to the address bar. A result is never told by colour alone: each one
   carries a word and an icon.
   ========================================================================== */

/* --- The opening: the tool first --------------------------------------------------------- */

.pc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr);
  align-items: start;
  gap: clamp(28px, 5vw, 90px);
  /* (the way back up above the title takes about 50px of this: the title and the line of notes
     under it stay where they stood, on the darker sky above the horizon) */
  padding: calc(76px + clamp(40px, 10vh, 112px) - 50px) var(--pad) clamp(64px, 12vh, 132px);
}

/* On a wide screen that is short (1280 by 720) the promises under the title stand on the bright
   line of the horizon: a soft pool of deeper night behind the words, fading out on every side
   (measured 4.0:1, 2026-10-19). A phone has its own, below. */
@media (min-width: 768px) and (max-height: 800px) {
  .pc-hero__copy { position: relative; }

  .pc-hero__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px calc(-1 * var(--pad));   /* (no wider than the margin: it must not widen the page) */
    background: radial-gradient(closest-side, rgba(7, 11, 26, 0.66) 60%, rgba(7, 11, 26, 0) 100%);
    pointer-events: none;
  }
}

/* The opening line of the home page, in its grammar: the light line first, then the bold one */
.pc-title {
  margin: 0;
  font-size: clamp(2.75rem, 5.6vw, 6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.pc-title span { display: block; }
.pc-title span:first-child { font-weight: 200; color: var(--title-thin); }
.pc-title span:last-child { font-weight: 800; color: var(--text); }

.pc-lead {
  max-width: 30em;
  margin: clamp(20px, 4vh, 36px) 0 0;
  padding-top: clamp(16px, 3vh, 26px);
  border-top: 1px solid var(--line);
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  font-weight: 300;
  color: var(--text-mid);
  text-wrap: pretty;
}

/* Three promises, each on its own line of light, never joined by dots */
.pc-notes {
  display: grid;
  gap: 2px;
  margin: clamp(18px, 3.4vh, 32px) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  color: var(--text);
}

.pc-notes li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.pc-notes svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cyan-hi);
}

/* --- The card ------------------------------------------------------------------------------ */

.pc-card [hidden] { display: none !important; }

.pc-card {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 2.8vw, 40px);
}

.pc-card__title {
  margin: 0;
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* A step opens with the focus on its heading; the step itself is the cue */
.pc-card__title:focus { outline: none; }

.pc-card__sub {
  margin: -8px 0 0;
  color: var(--text-mid);
}

.pc-card bdi {
  font-weight: 700;
  color: var(--cyan-hi);
}

.pc-details,
.pc-scan,
.pc-result {
  display: grid;
  gap: 18px;
}

/* The steps: three segments with their names, so colour is never the only cue */
.pc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-steps li {
  display: grid;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-low);
}

.pc-steps li::before {
  content: "";
  height: 3px;
  border-radius: 999px;
  background: rgba(194, 205, 232, 0.18);
  transition: background-color 260ms ease;
}

.pc-card[data-step="start"] .pc-steps [data-for="start"],
.pc-card[data-step="details"] .pc-steps [data-for="details"],
.pc-card:is([data-step="scan"], [data-step="result"]) .pc-steps [data-for="result"] { color: var(--text); }

.pc-card[data-step="start"] .pc-steps [data-for="start"]::before,
.pc-card[data-step="details"] .pc-steps :is([data-for="start"], [data-for="details"])::before,
.pc-card:is([data-step="scan"], [data-step="result"]) .pc-steps li::before { background: var(--cyan-hi); }

/* --- Fields: the home page's form ------------------------------------------------------------ */

.pc-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.pc-row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field__label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.field__label > span { color: var(--cyan-hi); }

.field__control {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: rgba(7, 11, 26, 0.62);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.36);
  font: inherit;
  font-size: 1.0625rem;
  color: var(--text);
  transition: box-shadow 160ms ease;
}

.uni .field__control:focus-visible {
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px var(--cyan-hi);
}

.pc-field.is-invalid .field__control { box-shadow: inset 0 0 0 1.5px var(--c-red-400); }

.field__hint {
  font-size: 0.875rem;
  color: var(--text-low);
}

/* The message under a field: an icon and a sentence, only when there is something to say */
.field__error {
  display: none;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-red-300);
}

.pc-field.is-invalid > .field__error { display: flex; }

.field__error svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* --- The address bar ------------------------------------------------------------------------- */

.vis-dots {
  display: flex;
  gap: 5px;
}

.vis-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(194, 205, 232, 0.32);
}

.pc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 6px;
  padding-inline-start: 20px;
  border-radius: 18px;   /* its button inside is 12px: 18 less the 6 between them */
  background: rgba(7, 11, 26, 0.62);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.36);
  transition: box-shadow 160ms ease;
}

.pc-bar:focus-within { box-shadow: inset 0 0 0 1.5px var(--cyan-hi), 0 0 34px -8px rgba(0, 196, 204, 0.55); }

/* Typing in the bar: the site's focus ring goes round the whole bar (the field itself has none) */
.pc-bar:has(.pc-bar__input:focus) {
  outline: 3px solid var(--cyan-hi);
  outline-offset: 3px;
}
.pc-field.is-invalid .pc-bar { box-shadow: inset 0 0 0 1.5px var(--c-red-400); }

.pc-bar__lock {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cyan-hi);
}

.pc-bar__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.125rem;
  color: var(--text);
  text-align: left;
}

.pc-bar__input::placeholder {
  color: var(--text-low);
  opacity: 1;
}

/* The ring is the bar's own, round the whole of it */
.uni .pc-bar__input:focus-visible { outline: none; }

.pc-bar__go {
  flex: none;
  border-radius: 12px;
}

.pc-bar--small { min-height: 58px; }
.pc-bar--small .pc-bar__go { min-height: 46px; }

@media (hover: hover) and (pointer: fine) {
  .pc-bar:hover:not(:focus-within) { box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.6); }
}

/* --- Step 2: the consent ---------------------------------------------------------------------- */

.pc-check {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}

.pc-check__input {
  position: absolute;
  top: 10px;
  inset-inline-start: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pc-check__box {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px rgba(194, 205, 232, 0.55);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.pc-check__box svg {
  width: 16px;
  height: 16px;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms ease, transform 160ms var(--ease-out-strong);
}

.pc-check__input:checked + .pc-check__box {
  background: var(--cyan);
  box-shadow: none;
}

.pc-check__input:checked + .pc-check__box svg {
  opacity: 1;
  transform: none;
}

.pc-check__input:focus-visible + .pc-check__box {
  outline: 3px solid var(--cyan-hi);
  outline-offset: 3px;
}

.pc-field.is-invalid .pc-check__box { box-shadow: inset 0 0 0 2px var(--c-red-400); }

.pc-check__text {
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}

.pc-check__text > span { color: var(--cyan-hi); }

.pc-consent .field__hint,
.pc-consent .field__error { padding-inline-start: 36px; }

@media (hover: hover) and (pointer: fine) {
  .pc-check:hover .pc-check__input:not(:checked) + .pc-check__box { box-shadow: inset 0 0 0 2px var(--cyan-hi); }
}

/* --- Step 3: the check, row by row -------------------------------------------------------------- */

.pc-progress {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(194, 205, 232, 0.14);
}

.pc-progress span {
  position: absolute;
  inset-block: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, var(--cyan-hi), transparent);
  animation: pc-sweep 1.3s ease-in-out infinite;
}

@keyframes pc-sweep {
  from { transform: translateX(-160%); }
  to { transform: translateX(260%); }
}

.pc-card[data-step="result"] .pc-progress { display: none; }

/* Rows on hairlines, as the lists of the home page */
.pc-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "icon body badge";
  gap: 6px 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.pc-row:last-child { border-bottom: 1px solid var(--line); }

.pc-row__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 196, 204, 0.12);
  color: var(--cyan-hi);
}

.pc-row__icon svg {
  width: 20px;
  height: 20px;
}

.pc-row__body {
  grid-area: body;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pc-row__title {
  margin: 0;
  font-weight: 700;
  color: var(--text);
}

.pc-row__line {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-mid);
  overflow-wrap: anywhere;
}

.pc-row__badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.pc-row__badge:empty { display: none; }

.pc-row__badge svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Waiting for the server: every row is "in progress" at once, and nothing pretends to know
   which check finishes first */
.pc-row[data-state="wait"] .pc-row__line { color: var(--text-low); }
.pc-row[data-state="wait"] .pc-row__icon { animation: pc-breathe 1.6s ease-in-out infinite; }

@keyframes pc-breathe {
  50% { opacity: 0.45; }
}

.pc-row[data-state="ok"] .pc-row__icon { background: rgba(37, 211, 102, 0.14); color: #8be8b2; }
.pc-row[data-state="ok"] .pc-row__badge { background: rgba(37, 211, 102, 0.15); color: #a6efc5; }

.pc-row[data-state="warn"] .pc-row__icon { background: rgba(255, 138, 138, 0.14); color: #ffb3b3; }
.pc-row[data-state="warn"] .pc-row__badge { background: rgba(255, 138, 138, 0.15); color: #ffc9c9; }

.pc-row[data-state="unknown"] .pc-row__icon { background: rgba(194, 205, 232, 0.1); color: var(--text-mid); }
.pc-row[data-state="unknown"] .pc-row__badge { background: rgba(194, 205, 232, 0.12); color: var(--text-mid); }

/* A result lands: the state is already set, the motion only shows the change */
.pc-row:is([data-state="ok"], [data-state="warn"], [data-state="unknown"]) { animation: pc-land 460ms var(--ease-out-strong); }

@keyframes pc-land {
  from { opacity: 0.35; transform: translate3d(0, 8px, 0); }
}

/* --- The summary ------------------------------------------------------------------------------ */

.pc-result__lead {
  margin: 0;
  color: var(--text-mid);
}

.pc-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pc-next__text {
  flex-basis: 100%;
  margin: 0;
  font-weight: 700;
  color: var(--text);
}

.pc-again-btn {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--cyan-hi);
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.pc-result__fine {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-low);
}

@media (hover: hover) and (pointer: fine) {
  .pc-again-btn:hover { color: #fff; }
}

/* --- The sections below: each a title of the home page, then what it says -------------------------- */

.pc-sec {
  padding: clamp(64px, 12vh, 132px) var(--pad);
  background: var(--veil);   /* long, small text gets a quieter sky behind it */
}

.pc-sec > .sec-title { max-width: 15em; }

/* Why now: four facts on hairlines, the claim beside its detail */
.pc-facts {
  max-width: 1120px;
  margin: clamp(32px, 6vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.pc-fact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
  gap: 10px clamp(24px, 4vw, 72px);
  padding: clamp(22px, 3.6vh, 34px) 0;
  border-top: 1px solid var(--line);
}

.pc-fact__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}

.pc-fact__text {
  margin: 0;
  color: var(--text-mid);
}

.pc-source {
  margin: 22px 0 0;
  font-size: 0.9375rem;
  color: var(--text-mid);
}

.pc-source a,
.pc-who__role a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cyan-hi);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* What the check looks at: six panes of the home page's glass */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: clamp(32px, 6vh, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.pc-tile {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 24px;
  background: linear-gradient(158deg, rgba(28, 40, 82, 0.88) 0%, rgba(13, 20, 44, 0.92) 62%, rgba(9, 14, 33, 0.94) 100%);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: none;
}

.pc-tile__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 196, 204, 0.12);
  color: var(--cyan-hi);
}

.pc-tile__icon svg {
  width: 22px;
  height: 22px;
}

.pc-tile__title {
  margin: 4px 0 0;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--text);
}

.pc-tile__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-mid);
}

.pc-limits {
  max-width: 62em;
  margin: clamp(26px, 5vh, 44px) 0 0;
  color: var(--text-mid);
}

.pc-limits b { color: var(--text); }

/* The address bar again, further down the page: a call of its own, in the middle */
.pc-handoff {
  max-width: 640px;
  margin: clamp(28px, 5vh, 48px) auto 0;
}

.pc-handoff .field__label {
  display: block;
  text-align: center;
}

.pc-handoff .field__error { justify-content: center; }

/* Under the six questions the bar asks a question of its own */
.pc-what .pc-handoff .field__label {
  margin-bottom: 6px;
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  font-weight: 800;
}

/* How it works: a real sequence, so it is numbered, and it is a path. Three stations on a line of
   light; a shield travels the line as the page scrolls (privacy-check.js) and every station it
   reaches lights, the way the bird flies the route of the home page. The line is laid out in the
   pixels of the path, so it keeps one thickness on any screen. Without the script, or with the
   motion stopped, the three stations simply stand lit. */
.pc-path {
  position: relative;
  margin: clamp(36px, 7vh, 64px) 0 0;
}

.pc-path__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.pc-path__svg path {
  fill: none;
  stroke-linecap: round;
}

.pc-path__rail {
  stroke: rgba(194, 205, 232, 0.34);
  stroke-width: 1.5;
  stroke-dasharray: 1 10;
}

/* A second, wider stroke under the lit part: a blur here would be redrawn on every scroll frame */
.pc-path__glow {
  stroke: rgba(0, 196, 204, 0.2);
  stroke-width: 12;
}

.pc-path__lit {
  stroke: var(--cyan-hi);
  stroke-width: 2.5;
}

.pc-flow {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A station: its number on the line, then what happens there */
.pc-flow__step {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  text-align: center;
}

.pc-flow__node {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 8px rgba(125, 240, 244, 0.16), 0 0 34px rgba(0, 196, 204, 0.42);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  text-shadow: none;
  transition: background-color 320ms ease, box-shadow 320ms ease, color 320ms ease, transform 420ms var(--ease-out-strong);
}

.pc-flow__title {
  margin: 0;
  font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
  font-weight: 800;
  color: var(--text);
  transition: color 320ms ease;
}

.pc-flow__text {
  max-width: 22em;
  margin: 0;
  color: var(--text-mid);
  transition: color 320ms ease;
}

/* The shield that travels the line. It waits at the head of the line, before the first station */
.pc-path__guard { display: none; }

.pc-path.is-live .pc-path__guard {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #1d2c5c, #0b1230);
  box-shadow: inset 0 0 0 1.5px var(--cyan-hi), 0 0 0 6px rgba(125, 240, 244, 0.14), 0 0 26px rgba(0, 196, 204, 0.55);
  color: var(--cyan-hi);
  will-change: transform;
}

.pc-path__guard svg {
  width: 20px;
  height: 20px;
}

/* Stations the shield has not reached yet: unlit, and their titles quieter (still easy to read).
   Their lines keep the light text of the page: in the low grey, crossing the bright line of the
   horizon on a short phone, they measured under 4.5:1 (2026-10-19). */
.pc-path.is-live .pc-flow__step:not(.is-on) .pc-flow__node {
  background: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(194, 205, 232, 0.5);
  font-weight: 300;
  color: var(--text-mid);
  transform: scale(0.9);
}

.pc-path.is-live .pc-flow__step:not(.is-on) .pc-flow__title { color: var(--text-mid); }

/* Who is behind it: the photo and a few lines, on a pane */
.pc-who {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  max-width: 820px;
  margin: clamp(40px, 8vh, 72px) 0 0;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 24px;
  background: linear-gradient(158deg, rgba(28, 40, 82, 0.88) 0%, rgba(13, 20, 44, 0.92) 62%, rgba(9, 14, 33, 0.94) 100%);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: none;
}

/* The photo of the home page, in a small arched window of the same light */
.pc-who__window {
  display: block;
  overflow: hidden;
  width: 132px;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 18px 18px;
  background:
    radial-gradient(62% 44% at 50% 30%, rgba(47, 224, 230, 0.34) 0, rgba(0, 196, 204, 0.12) 46%, rgba(0, 196, 204, 0) 74%),
    linear-gradient(180deg, #25346d 0%, #151d42 54%, #0a1024 100%);
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.24);
}

.pc-who__window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 4%;
}

.pc-who__cap {
  display: grid;
  gap: 6px;
}

.pc-who__name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.pc-who__role { color: var(--text-mid); }

.pc-who__proof {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #a6efc5;
}

.pc-who__proof svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

/* The last call: a question and the bar, in the middle */
.pc-again { text-align: center; }

.pc-again > .sec-title,
.pc-again .sec-sub { margin-inline: auto; }

.pc-again .sec-sub { margin-top: clamp(14px, 2.4vh, 22px); }

/* --- Smaller screens ---------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .pc-hero { grid-template-columns: minmax(0, 1fr); }
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pc-hero { padding-top: calc(64px + clamp(32px, 7vh, 64px) - 34px); }

  /* On a small phone the promises under the title stand on the bright line of the horizon: a
     deeper night behind the words only, soft at its edges (as the opening of the home page has) */
  .pc-hero__copy { position: relative; }

  .pc-hero__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px calc(-1 * var(--pad)) -48px;
    background: linear-gradient(180deg, rgba(7, 11, 26, 0) 0, rgba(7, 11, 26, 0.6) 56px, rgba(7, 11, 26, 0.6) calc(100% - 56px), rgba(7, 11, 26, 0) 100%);
    pointer-events: none;
  }
  /* The stations stand one under another, the line runs down beside their numbers */
  .pc-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .pc-flow__step {
    grid-template-columns: 56px minmax(0, 1fr);
    justify-items: start;
    column-gap: 18px;
    row-gap: 4px;
    text-align: start;
  }

  .pc-flow__node {
    grid-row: span 2;
    width: 56px;
    height: 56px;
    margin: 0;
    font-size: 1.5rem;
  }

  .pc-flow__text { max-width: none; }
  .pc-fact { grid-template-columns: minmax(0, 1fr); }
  .pc-row2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .pc-grid { grid-template-columns: minmax(0, 1fr); }

  /* The bar stacks: the address on top, the button full width under it */
  .pc-bar {
    flex-wrap: wrap;
    padding: 8px 10px 10px;
    border-radius: 18px;
  }

  .pc-bar .vis-dots { display: none; }
  .pc-bar__lock { margin-inline-start: 6px; }
  .pc-bar__go { flex-basis: 100%; }

  .pc-row {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "icon body" "icon badge";
  }

  .pc-row__icon {
    width: 36px;
    height: 36px;
    align-self: start;
  }

  .pc-row__badge { justify-self: start; }
  .pc-next .btn { flex: 1 1 100%; }

  .pc-who {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
  }

  .pc-who__window { width: 88px; }
}

/* --- Motion stopped --------------------------------------------------------------------------- */

.no-motion .pc-progress span {
  inset-inline: 0;
  width: auto;
  opacity: 0.55;
  animation: none;
  transform: none;
}

.no-motion :is(.pc-row, .pc-row__icon) { animation: none; }
.no-motion :is(.pc-check__box, .pc-check__box svg, .pc-steps li::before, .pc-bar, .field__control, .pc-flow__node, .pc-flow__title, .pc-flow__text) { transition-duration: 1ms; }

/* --- The colour modes of the accessibility menu, and the system's forced colours ---------------
   What was told apart by its glass or its fill is told apart by a line */

html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.pc-tile, .pc-who, .pc-bar, .field__control) { outline: 1px solid currentColor; }
html.a11y-light .pc-who__window { background: none; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.pc-check__box, .pc-flow__node, .pc-path__guard) { outline: 2px solid currentColor; }

@media (forced-colors: active) {
  .pc-tile,
  .pc-who,
  .pc-bar,
  .field__control {
    border: 1px solid CanvasText;
    background-color: Canvas;
  }

  .pc-check__box,
  .pc-flow__node,
  .pc-path__guard { border: 2px solid CanvasText; }
  .pc-check__input:checked + .pc-check__box { background-color: Highlight; }
  .pc-steps li::before { background-color: CanvasText; }
}