/* ─── PMA marketing site ───────────────────────────────────────────────────
   Tokens and scale from Claude Design's handoff (28.10.2026). Scoped under
   .ps so it cannot reach the app, and the app's tokens cannot reach it.
   Departures from the handoff, with their numbers, are recorded in
   docs/marketing-site-2026-10-28.md. */

.ps {
  --ps-bg: #ffffff;
  --ps-ink: #0b0b0c;
  --ps-body: #45454b;
  --ps-muted: #5f5f66;
  --ps-faint: #74747b;          /* handoff #8b8b92 was 3.38:1 on white; this is 4.64:1 */
  --ps-line: #e7e7ea;
  --ps-line-faq: #dcdce0;
  --ps-control: #cfcfd4;
  --ps-input-line: #85858c;     /* form field border, 3.66:1 on white (a control boundary needs 3:1) */
  --ps-sent-bg: #eef1fb;        /* ink 17.44:1, accent link 6.01:1 */
  --ps-failed-bg: #fdf1f0;      /* ink 17.82:1, accent link 6.14:1 */
  --ps-error: #b42318;          /* 6.57:1 on white */
  --ps-accent: #3550c4;
  --ps-accent-hover: #28409f;
  --ps-accent-on-dark: #9fb0f0;
  --ps-on-dark: #c4c4cc;
  --ps-line-dark: #34343a;
  --ps-selection: #d9def5;
  /* Screenshots: a window of the app on a tinted stage. */
  --ps-stage: #eceffa;
  --ps-window-edge: #d3d6e2;
  --ps-window-bar: #f6f6f8;
  --ps-dot: #cfd1d9;

  /* "PMA Headline" goes first here once the client's font is supplied. */
  --ps-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --ps-text: "Hanken Grotesk", system-ui, sans-serif;
  --ps-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ps-gutter: clamp(20px, 4vw, 40px);
  --ps-section: clamp(72px, 10vw, 128px);
  --ps-ease: 150ms ease;

  min-height: 100vh;
  overflow-x: clip;
  background: var(--ps-bg);
  color: var(--ps-ink);
  font-family: var(--ps-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(.ps) a { color: var(--ps-accent); text-decoration: none; transition: color var(--ps-ease), background-color var(--ps-ease), border-color var(--ps-ease); }
:where(.ps) a:hover { color: var(--ps-ink); }
.ps :focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 3px; }
.ps ::selection { background: var(--ps-selection); }
:where(.ps) :where(p, h1, h2, dl, dd, ol, ul) { margin: 0; }
:where(.ps) :where(ol, ul) { padding: 0; list-style: none; }

.ps-wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--ps-gutter); }
.ps-skip { position: absolute; left: var(--ps-gutter); top: -100px; z-index: 30; background: var(--ps-ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.ps-skip:focus { top: 14px; }
.ps-skip:hover { color: #fff; }
.ps-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Type ── */
.ps-kicker { font-family: var(--ps-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--ps-muted); }
.ps-kicker--label { margin-bottom: 20px; font-weight: 400; }
.ps-num { font-family: var(--ps-mono); font-size: 13px; color: var(--ps-accent); }
.ps-display, .ps-h1, .ps-h2, .ps-h3, .ps-close__h, .ps-step__num, .ps-step__title, .ps-wordmark {
  font-family: var(--ps-display); font-weight: 800; text-wrap: balance;
}
.ps-display { font-size: clamp(42px, 8.2vw, 124px); line-height: 0.95; letter-spacing: -0.045em; }
.ps-h1 { font-size: clamp(40px, 7.4vw, 112px); line-height: 0.95; letter-spacing: -0.045em; }
.ps-h2 { font-size: clamp(34px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.04em; }
.ps-h3 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.02; letter-spacing: -0.04em; }
.ps em { font-style: normal; color: var(--ps-accent); }
/* The accent phrase starts its own line, so a line break never splits it (art director). */
.ps-display em, .ps-h1 em, .ps-close__h em { display: block; }
.ps-lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; max-width: 560px; color: var(--ps-body); text-wrap: pretty; }
.ps-intro { font-size: 18px; max-width: 500px; color: var(--ps-body); text-wrap: pretty; }
.ps-body { font-size: 18px; max-width: 560px; color: var(--ps-body); text-wrap: pretty; }
.ps-note { margin-top: 16px; font-size: 16px; max-width: 560px; color: var(--ps-body); text-wrap: pretty; }
.ps-aside { margin-top: 32px; font-size: 16px; color: var(--ps-body); }
.ps-aside a { font-weight: 600; }
.ps-aside--tight { margin-top: 20px; }
.ps-draft { color: var(--ps-ink); font-weight: 600; border-bottom: 2px dashed var(--ps-accent); }

/* ── Layout ── */
.ps-hero { padding-top: clamp(56px, 9vw, 104px); display: flex; flex-direction: column; gap: 28px; }
.ps-hero > .ps-display, .ps-hero > .ps-h1 { max-width: 1080px; }
.ps-hero__row { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-end; justify-content: space-between; }
.ps-section { padding-top: var(--ps-section); }
.ps-stack { display: flex; flex-direction: column; gap: 24px; }
.ps-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px 64px; }
.ps-split--end { align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.ps-split--rule { align-items: start; border-top: 1px solid var(--ps-line); padding-top: clamp(32px, 4vw, 48px); }
.ps-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ps-actions--lead { margin-top: 12px; }

/* ── Buttons ── */
.ps-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.ps-btn--primary { background: var(--ps-accent); color: #fff; font-size: 17px; padding: 16px 29px; }
.ps-btn--primary:hover { background: var(--ps-accent-hover); color: #fff; }
.ps-btn--secondary { border-color: var(--ps-control); color: var(--ps-ink); font-size: 17px; padding: 16px 28px; }
.ps-btn--secondary:hover { border-color: var(--ps-ink); color: var(--ps-ink); }
.ps-btn--header { background: var(--ps-ink); color: #fff; font-size: 15px; padding: 10px 19px; }
.ps-btn--header:hover { background: var(--ps-accent); color: #fff; }

/* ── Header ── */
.ps-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ps-line); }
.ps-header__bar { height: 72px; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); }
.ps-wordmark { color: var(--ps-ink); font-size: 28px; line-height: 1; letter-spacing: -0.04em; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; flex: none; }
.ps-wordmark img { display: block; flex: none; }
/* 21px at 1100 instead of 24: the Welsh header with Sign in measured 1102px there. */
.ps-nav { display: flex; flex: 1; gap: clamp(16px, 1.9vw, 24px); }
.ps-nav a, .ps-signin, .ps-lang { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; font-size: 15px; white-space: nowrap; }
.ps-nav a { color: var(--ps-muted); }
.ps-nav a:hover, .ps-nav a[aria-current] { color: var(--ps-ink); }
.ps-nav a[aria-current] { font-weight: 600; }
.ps-signin { color: var(--ps-ink); font-weight: 500; }
.ps-signin:hover { color: var(--ps-accent); }
.ps-lang { color: var(--ps-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ps-lang:hover { color: var(--ps-accent); }
.ps-spacer { display: none; flex: 1; }
.ps-menu { display: none; }
.ps-menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border: 1px solid var(--ps-control); border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: border-color var(--ps-ease); }
.ps-menu > summary::-webkit-details-marker { display: none; }
.ps-menu > summary:hover, .ps-menu[open] > summary { border-color: var(--ps-ink); }
.ps-menu > summary span { display: block; width: 16px; height: 2px; background: var(--ps-ink); }
.ps-menu__panel { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: 8px var(--ps-gutter) 20px; background: #fff; border-top: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); }
.ps-menu__link { color: var(--ps-ink); font-family: var(--ps-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--ps-line); }
.ps-menu__link[aria-current] { color: var(--ps-accent); }
.ps-menu__lang { align-self: flex-start; font-size: 18px; font-weight: 600; padding: 16px 0 4px; min-height: 40px; }

@media (max-width: 1099px) {
  .ps-nav, .ps-signin { display: none; }
  .ps-spacer, .ps-menu { display: block; }
}
@media (max-width: 559px) {
  .ps-header .ps-lang { display: none; }
  .ps-btn--header { font-size: 14px; padding: 8px 13px; }
}

/* ── Dark band ── */
.ps-band { margin-top: var(--ps-section); background: var(--ps-ink); color: #fff; }
.ps-band__inner { padding-block: clamp(64px, 9vw, 112px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px 64px; align-items: start; }
.ps-band .ps-kicker { color: var(--ps-accent-on-dark); }
.ps-band .ps-intro { color: var(--ps-on-dark); }
.ps-band :focus-visible { outline-color: var(--ps-accent-on-dark); }
.ps-rows { display: flex; flex-direction: column; align-self: end; }
.ps-rows > li, .ps-rows > div { padding: 20px 0; border-top: 1px solid var(--ps-line-dark); font-size: clamp(18px, 2vw, 22px); font-weight: 500; }
.ps-rows--services dt { font-family: var(--ps-display); font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
.ps-rows--services dd { margin-top: 10px; font-size: 16px; font-weight: 400; color: var(--ps-on-dark); max-width: 520px; text-wrap: pretty; }

/* ── Links to the step pages: a 4:3 screenshot of the step, then ruled text;
   columns from 820px, stacked below. 820, not 720: "Cyn-gynhyrchu" broke at
   its hyphen in a 207px column at 720. */
.ps-steplinks { display: grid; grid-template-columns: repeat(var(--ps-count, 3), minmax(0, 1fr)); gap: 32px; }
.ps-steplink { display: flex; flex-direction: column; gap: 20px; color: var(--ps-ink); }
.ps-steplink:hover { color: var(--ps-ink); }
.ps-steplink__body { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 2px solid var(--ps-ink); transition: border-color var(--ps-ease); }
.ps-steplink:hover .ps-steplink__body { border-top-color: var(--ps-accent); }
.ps-steplink:hover .ps-window { border-color: var(--ps-control); }
.ps-steplink__n { font-family: var(--ps-mono); font-size: 13px; color: var(--ps-accent); }
.ps-steplink__name { font-family: var(--ps-display); font-weight: 800; font-size: clamp(28px, 3vw, 36px); line-height: 1; letter-spacing: -0.035em; }
.ps-steplink__line { font-size: 16px; color: var(--ps-body); text-wrap: pretty; }
.ps-steplink__more { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--ps-accent); }
/* Stacked, the links are an index of numbered rows: no pictures, since the
   hero already shows the product and each step page has its own (art director). */
@media (max-width: 819px) {
  .ps-steplinks { grid-template-columns: 1fr; gap: 28px; }
  .ps-steplink .ps-figure { display: none; }
  .ps-steplink { gap: 16px; }
  .ps-steplink__body { display: grid; grid-template-columns: 32px 1fr auto; column-gap: 12px; row-gap: 6px; align-items: baseline; padding-top: 16px; border-top-width: 1px; }
  .ps-steplink__n { grid-area: 1 / 1; }
  .ps-steplink__name { grid-area: 1 / 2; font-size: 28px; }
  .ps-steplink__line { grid-area: 2 / 2; font-size: 15px; }
  .ps-steplink__more { grid-area: 1 / 3; margin: 0; font-size: 20px; }
  .ps-steplink__label { display: none; }
}

/* ── Screenshots of the portal (copy/shots.js) ──
   Each is a window of the app on a tinted stage, so it reads as the product
   and not as more of the page (Aled, 30.10.2026). The window's foot runs into
   the stage's edge: a deliberate crop in place of the fade it had. Clipped
   with overflow: clip, not hidden, so the stage is not a scroll container
   and the scroll-driven reveal below follows the page. */
.ps-figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ps-stage { background: var(--ps-stage); border-radius: 20px; padding: clamp(16px, 4.4vw, 56px) clamp(16px, 4.4vw, 56px) 0; overflow: clip; }
.ps-feature__shot .ps-stage { padding: clamp(16px, 3.2vw, 40px) clamp(16px, 3.2vw, 40px) 0; }
.ps-figure--small .ps-stage { border-radius: 14px; padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 0; }
.ps-window { background: #fff; border: 1px solid var(--ps-window-edge); border-bottom: 0; border-radius: 12px 12px 0 0; margin-bottom: calc(-1 * var(--ps-crop, 0%)); overflow: clip; box-shadow: 0 30px 60px -24px rgba(17, 27, 74, 0.28), 0 2px 6px rgba(17, 27, 74, 0.06); transition: border-color var(--ps-ease); }
/* Every thumbnail is cut where the shortest (footage, crop 0.16 of a 4:3
   shot, 12% of its width) is, so the rules beneath line up; and 4px further,
   so the hover lift never shows a gap under the window (design QA). */
.ps-figure--small .ps-window { border-radius: 8px 8px 0 0; margin-bottom: calc(-12% - 4px); }
/* The address is centred on the window, not on the room beside the dots. */
.ps-window__bar { display: grid; grid-template-columns: minmax(42px, 1fr) minmax(0, 300px) minmax(42px, 1fr); align-items: center; gap: 12px; height: 36px; padding: 0 14px; background: var(--ps-window-bar); border-bottom: 1px solid var(--ps-line); }
.ps-window__dots { display: flex; gap: 6px; }
.ps-window__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--ps-dot); }
.ps-window__url { height: 22px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--ps-line); border-radius: 6px; background: #fff; font-family: var(--ps-mono); font-size: 12px; color: var(--ps-muted); white-space: nowrap; }
.ps-figure--small .ps-window__bar { height: 22px; padding: 0 10px; }
.ps-figure--small .ps-window__dots { gap: 5px; }
.ps-figure--small .ps-window__dots span { width: 7px; height: 7px; }
.ps-shot { display: block; width: 100%; height: auto; background: #fff; }
.ps-caption { font-family: var(--ps-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--ps-muted); text-wrap: pretty; }
.ps-hero__shot { margin-top: clamp(8px, 2vw, 24px); }
@media (max-width: 559px) {
  .ps-window__bar { height: 28px; padding: 0 10px; gap: 8px; grid-template-columns: minmax(34px, 1fr) minmax(0, 220px) minmax(34px, 1fr); }
  .ps-window__dots span { width: 8px; height: 8px; }
  .ps-window__url { height: 18px; font-size: 11px; }
}
/* ── The film (Film.jsx): Home's hero is a still from the film, and the button that opens it ──
   The whole 16:9 frame sits on the stage with no window bar, padded on all
   four sides. The still is the film's end board (Aled, 02.11.2026): ink, its
   words on the left, nothing in the bottom-right corner in either language
   (the Welsh tagline reaches 77% across, the URL row ends 74% down). The
   pill sits in that corner, 4% of the frame in from the right and 6% up from
   the foot (paddings are of the stage's width: the frame's width is 100%
   less two insets, its height 9/16 of that). The whole stage takes the
   press; the pill says what it does. On the ink board the pill is white:
   19.67:1 against the board, ink text 19.67:1, the length #5f5f66 6.33:1; on
   hover the accent, with white 6.78:1 and the length 5.37:1. Under 560px
   the pill is the 40px play button alone, its words for screen readers only:
   with them, on the 178px frame at 390, it reached the URL line. The dialog
   fills the screen in near-black, and the picture is as large as fits under
   the close button. */
.ps-figure--film .ps-stage { --ps-film-inset: clamp(16px, 4.4vw, 56px); position: relative; padding: var(--ps-film-inset); }
.ps-figure--film .ps-window { border: 0; border-radius: 12px; background: var(--ps-ink); }
.ps-figure--film .ps-shot { background: var(--ps-ink); }
.ps-film__open { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 calc(var(--ps-film-inset) + (100% - 2 * var(--ps-film-inset)) * 0.04) calc(var(--ps-film-inset) + (100% - 2 * var(--ps-film-inset)) * 0.03375) 0; border: 0; border-radius: inherit; background: none; font: inherit; color: inherit; cursor: pointer; }
.ps-film__pill { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 24px 8px 8px; border-radius: 999px; background: #fff; color: var(--ps-ink); font-size: 17px; font-weight: 600; white-space: nowrap; transition: background-color var(--ps-ease), color var(--ps-ease); }
.ps-film__play { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ps-accent); transition: background-color var(--ps-ease); }
.ps-film__play::after { content: ""; position: absolute; left: 16px; top: 13px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; transition: border-color var(--ps-ease); }
.ps-film__len { font-family: var(--ps-mono); font-size: 14px; font-weight: 400; color: var(--ps-muted); transition: color var(--ps-ease); }
.ps-film__open:hover .ps-film__pill { background: var(--ps-accent); color: #fff; }
.ps-film__open:hover .ps-film__play { background: #fff; }
.ps-film__open:hover .ps-film__play::after { border-left-color: var(--ps-accent); }
.ps-film__open:hover .ps-film__len { color: #dfe4fa; }
.ps-film__open:focus-visible { outline: none; }
.ps-film__open:focus-visible .ps-film__pill { outline: 2px solid var(--ps-accent); outline-offset: 3px; }
@media (max-width: 559px) {
  .ps-film__pill { min-height: 40px; gap: 0; padding: 4px; font-size: 16px; }
  .ps-film__watch { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ps-film__play { width: 32px; height: 32px; }
  .ps-film__play::after { left: 12px; top: 10px; border-width: 6px 0 6px 9px; }
  .ps-film__len { display: none; }
}
.ps-film { --ps-film-pad: clamp(64px, 9vh, 96px); width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--ps-film-pad) var(--ps-gutter); border: 0; background: rgba(11, 11, 12, 0.94); color: #fff; overflow: hidden; }
.ps-film[open] { display: flex; align-items: center; justify-content: center; }
.ps-film::backdrop { background: transparent; }
.ps-film :focus-visible { outline-color: var(--ps-accent-on-dark); }
.ps-film__frame { position: relative; width: 100%; max-width: min(1280px, calc((100dvh - 2 * var(--ps-film-pad)) * 16 / 9)); }
.ps-film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; }
.ps-film__bar { position: absolute; right: 0; bottom: calc(100% + 12px); margin: 0; }
.ps-film__close { position: relative; display: block; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ps-on-dark); border-radius: 50%; background: none; cursor: pointer; transition: background-color var(--ps-ease), border-color var(--ps-ease); }
.ps-film__close::before, .ps-film__close::after { content: ""; position: absolute; left: 13px; top: 20px; width: 16px; height: 2px; background: #fff; transform: rotate(45deg); transition: background-color var(--ps-ease); }
.ps-film__close::after { transform: rotate(-45deg); }
.ps-film__close:hover { background: #fff; border-color: #fff; }
.ps-film__close:hover::before, .ps-film__close:hover::after { background: var(--ps-ink); }
html:has(.ps-film[open]) { overflow: hidden; }

/* A feature with a screenshot: text beside a larger image, alternating sides;
   text first when they stack. */
/* Doubled class: .ps-feature (later in this file) sets a grid. */
.ps-feature.ps-feature--shot { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-start; }
.ps-feature.ps-feature--shot.is-flip { flex-direction: row-reverse; }
.ps-feature__text { flex: 1 1 320px; max-width: 480px; display: flex; flex-direction: column; gap: 16px; padding-top: clamp(8px, 2vw, 24px); }
.ps-feature__shot { flex: 1.4 1 420px; min-width: 0; }
/* Stacked, both lose their flex-basis: as a height it left the text 385px tall at 768. */
@media (max-width: 899px) { .ps-feature.ps-feature--shot, .ps-feature.ps-feature--shot.is-flip { flex-direction: column; align-items: stretch; } .ps-feature__text, .ps-feature__shot { flex: none; } }

/* ── Numbered rows: step-page features, How it works, Pricing ── */
.ps-features { display: flex; flex-direction: column; }
/* Heading and paragraph share a first baseline. */
.ps-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 64px; align-items: baseline; padding-block: clamp(32px, 4vw, 48px); border-top: 1px solid var(--ps-line); }
.ps-steps { display: flex; flex-direction: column; }
/* One column below 960px, so a title never sits apart from its paragraph (art director). */
.ps-step { display: grid; grid-template-columns: 1fr; gap: 12px; padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--ps-ink); }
@media (min-width: 960px) { .ps-step { grid-template-columns: 200px 1fr 1.3fr; gap: 16px 48px; align-items: baseline; } }
/* The last row ends on the section rhythm, not on its own padding as well. */
.ps-feature:last-child, .ps-step:last-child { padding-bottom: 0; }
.ps-step__head { display: flex; gap: 20px; align-items: baseline; }
.ps-step__num { font-size: clamp(48px, 6vw, 80px); line-height: 0.9; letter-spacing: -0.05em; color: var(--ps-accent); }
.ps-step__who { font-family: var(--ps-mono); font-size: 13px; color: var(--ps-muted); }
.ps-step__title { font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.035em; }
.ps-step .ps-body { font-size: 17px; }
/* How it works links each step to its page, since the step pages left the header (02.11.2026). */
.ps-step__more { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ps-accent); }
.ps-step__more:hover { color: var(--ps-ink); }

/* ── Links to the market pages (MarketLinks): the step links' ruled text, with
   no picture and no number, and a smaller name for the longer Welsh ones. */
.ps-steplinks--plain .ps-steplink__name { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; }
/* Market pages have no screenshot between their rows, so the titles take the step-title size. */
.ps-features--text .ps-h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.05; }
/* In columns, each link shares three rows with its neighbours, so names that
   wrap differently leave the lines and arrows level across a row (design QA:
   up to 63px apart in Welsh). Two columns take the split's 64px gap, so the
   second starts where the text of a split above it does. */
@media (min-width: 820px) {
  .ps-steplinks--plain .ps-steplink { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
  .ps-steplinks--plain .ps-steplink__body { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .ps-steplinks--pairs { column-gap: 64px; }
}
@media (max-width: 819px) {
  .ps-steplinks--plain .ps-steplink__body { grid-template-columns: 1fr auto; }
  .ps-steplinks--plain .ps-steplink__name { grid-area: 1 / 1; font-size: 24px; }
  .ps-steplinks--plain .ps-steplink__line { grid-area: 2 / 1; }
  .ps-steplinks--plain .ps-steplink__more { grid-area: 1 / 2; }
}

/* ── FAQ ── */
.ps-faq { flex-direction: row; flex-wrap: wrap; gap: 40px 64px; }
.ps-faq__intro { flex: 1 1 300px; display: flex; flex-direction: column; gap: 24px; }
/* The handoff's own FAQ size (FAQ.dc.html): the H1 shares its row with the answers. */
.ps-h1--faq { font-size: clamp(40px, 6vw, 88px); }
/* The same size for the hub's and market pages' headlines, whose Welsh ran to four lines at the full size (design QA). */
.ps-h1--long { font-size: clamp(40px, 6vw, 88px); }
.ps-faq__intro .ps-intro { max-width: 340px; font-size: 17px; }
.ps-faq__intro a { font-weight: 600; }
.ps-faq__list { flex: 2 1 520px; min-width: 0; border-top: 1px solid var(--ps-line-faq); }
.ps-faq__list details { border-bottom: 1px solid var(--ps-line-faq); }
.ps-faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 0; font-size: clamp(17px, 2vw, 20px); font-weight: 500; }
.ps-faq__list summary::-webkit-details-marker { display: none; }
.ps-faq__list details p { margin-bottom: 24px; font-size: 16px; max-width: 620px; color: var(--ps-body); text-wrap: pretty; }
.ps-faq__icon { position: relative; flex: none; width: 16px; height: 16px; margin-top: 0.3em; }
.ps-faq__icon::before, .ps-faq__icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--ps-accent); transition: transform var(--ps-ease); }
.ps-faq__icon::after { transform: rotate(90deg); }
.ps-faq__list details[open] .ps-faq__icon::after { transform: rotate(0deg); }

/* ── Book a demo ── */
/* No closing call to action on this page, so it carries the gap above the footer itself. */
.ps-demo { flex-direction: row; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; padding-bottom: var(--ps-section); }
.ps-demo__intro { flex: 1 1 360px; display: flex; flex-direction: column; gap: 28px; }
.ps-demo__intro .ps-aside { margin-top: 0; }
.ps-demo__panel { flex: 1 1 400px; border: 1px solid var(--ps-line); border-radius: 20px; padding: clamp(24px, 4vw, 40px); }

/* The enquiry form. Plain HTML: the API sends the visitor back to #sent or #failed, and
   :target shows that notice. Once sent, the form gives way to the thank-you. */
.ps-notice { display: none; margin-bottom: 28px; padding: 16px 20px; border-left: 3px solid var(--ps-accent); border-radius: 0 16px 16px 0; background: var(--ps-sent-bg); font-size: 17px; color: var(--ps-ink); text-wrap: pretty; }
.ps-notice--failed { border-left-color: var(--ps-error); background: var(--ps-failed-bg); }
.ps-notice:target { display: block; }
.ps-notice { scroll-margin-top: 96px; } /* clear of the sticky 72px header */
.ps-notice:focus { outline: none; }
.ps-demo__panel:has(#sent:target) .ps-form { display: none; }
.ps-demo__panel:has(#sent:target) .ps-notice--sent { margin-bottom: 0; }
.ps-form { display: flex; flex-direction: column; gap: 24px; }
.ps-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ps-field__label { padding: 0; font-size: 15px; font-weight: 600; color: var(--ps-ink); }
.ps-field__opt { font-weight: 400; color: var(--ps-muted); }
.ps-field__hint { margin-top: -4px; font-size: 15px; color: var(--ps-muted); text-wrap: pretty; }
.ps-input { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--ps-input-line); border-radius: 16px; background: #fff; font: inherit; font-size: 17px; color: var(--ps-ink); transition: border-color var(--ps-ease); }
.ps-input:hover { border-color: var(--ps-ink); }
.ps-input:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 1px; border-color: var(--ps-accent); }
.ps-input--area { min-height: 132px; resize: vertical; line-height: 1.5; }
.ps-choices { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.ps-choice { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 17px; color: var(--ps-ink); cursor: pointer; }
.ps-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ps-accent); cursor: pointer; }
.ps-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ps-form__privacy { font-size: 15px; color: var(--ps-body); text-wrap: pretty; }
.ps-form__send { align-self: flex-start; font-family: inherit; cursor: pointer; }

/* ── Closing call to action and footer ── */
.ps-close { padding-top: clamp(88px, 11vw, 144px); padding-bottom: clamp(72px, 9vw, 120px); display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.ps-close__h { font-size: clamp(44px, 8vw, 120px); line-height: 0.95; letter-spacing: -0.045em; }
.ps-footer { border-top: 1px solid var(--ps-line); }
.ps-footer__inner { padding-top: 56px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 48px; }
.ps-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px 32px; }
.ps-footer__brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* Five columns since Who it's for joined (02.11.2026). Auto-fit left one
   alone on a second row at 1024 and an empty cell at 768 (design QA), so the
   counts are set: all five in a row from 1100px; below that the brand takes
   its own row over the four link columns, four across from 820px, two below. */
@media (min-width: 1100px) { .ps-footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 560px) and (max-width: 1099px) { .ps-footer__brand { grid-column: 1 / -1; } }
@media (min-width: 820px) and (max-width: 1099px) { .ps-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 560px) and (max-width: 819px) { .ps-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ps-footer__brand p { font-size: 15px; color: var(--ps-muted); max-width: 260px; text-wrap: pretty; }
.ps-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.ps-footer__col h2 { margin-bottom: 8px; font-family: var(--ps-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ps-faint); }
.ps-footer__col a { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; font-size: 15px; color: var(--ps-ink); }
.ps-footer__col a:hover { color: var(--ps-accent); }
.ps-footer__col .ps-footer__lang { color: var(--ps-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ps-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--ps-line); font-size: 14px; color: var(--ps-muted); }

/* ── Phones: one full-width action, the second as a text link; the demo form before the email link ── */
@media (max-width: 559px) {
  .ps-hero .ps-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }
  .ps-hero .ps-btn--secondary { align-self: flex-start; justify-content: flex-start; padding: 0; border: 0; font-weight: 600; color: var(--ps-accent); }
  .ps-hero .ps-btn--secondary:hover { color: var(--ps-ink); }
  .ps-hero .ps-btn--secondary::after { content: "\00a0→" / ""; }
  .ps-demo { flex-direction: column; flex-wrap: nowrap; gap: 24px; }
  .ps-demo__intro { display: contents; }
  .ps-demo__intro > .ps-kicker { order: 1; }
  .ps-demo__intro > .ps-h1 { order: 2; }
  .ps-demo__intro > .ps-lead { order: 3; }
  .ps-demo__panel { order: 4; border: 0; border-radius: 0; padding: 8px 0 0; }
  .ps-form__send { align-self: stretch; }
  .ps-demo__cta { order: 5; }
  .ps-demo__write { order: 6; }
  .ps-demo__client { order: 7; margin-top: 0; }
}

/* ── Screenshot motion: transform and opacity only, none under reduced motion ──
   A step page's hero window settles from a slight tilt as the page loads
   (transform only, so the image paints at once); Home's, below the first
   screen, settles as it scrolls in. The others rise into their stage as
   they scroll into view, where scroll-driven animation is supported; elsewhere
   they simply stand. A step link's window lifts on hover, on `translate` so it
   composes with the reveal's `transform`. */
@keyframes ps-settle { from { transform: translateY(32px) rotateX(9deg) scale(0.97); } to { transform: none; } }
@keyframes ps-rise { from { opacity: 0; transform: translateY(56px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ps-figure--hero .ps-stage { perspective: 1800px; }
  .ps-figure--hero .ps-window { transform-origin: 50% 0; animation: ps-settle 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
  @supports (animation-timeline: view()) {
    .ps-figure:not(.ps-figure--hero) .ps-window { animation: ps-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    /* Home's hero starts below the first screen: a settle on load would finish unseen. */
    .ps-figure--hero.ps-figure--scroll .ps-window { animation: ps-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
  .ps-steplink .ps-window { transition: translate 200ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color var(--ps-ease); }
  .ps-steplink:hover .ps-window { translate: 0 -4px; }
  /* The film's dialog fades in and its picture rises a little; it closes at once. */
  .ps-film[open] { animation: ps-film-in 200ms ease-out; }
  .ps-film[open] .ps-film__frame { animation: ps-film-rise 320ms cubic-bezier(0.16, 1, 0.3, 1); }
}
@keyframes ps-film-in { from { opacity: 0; } }
@keyframes ps-film-rise { from { transform: translateY(16px) scale(0.98); } }

@media (prefers-reduced-motion: reduce) {
  .ps *, .ps *::before, .ps *::after { transition: none !important; }
}