@import url('./fonts/fonts.css');

/* ==========================================================================
   PNS — Phuongnamsoft design system
   Extracted from the inline styles of the docs/design-ui mockups.

   Layers, in order:
     1. Tokens          — colour, type, fill and radius variables
     2. Base            — document defaults (was the <helmet> <style> block)
     3. Layout          — page shell, wrappers, rows, stacks, grids
     4. Components      — nav, brand, buttons, cards, pills, forms, paper
     5. Utilities       — type scale, colour, spacing, one-off helpers
     6. Responsive      — fluid display type and narrow-viewport overrides

   Components carry their own intrinsic spacing, so most elements need one
   class. The utility layer only covers values the mockups actually use.

   Every number in layers 1–5 is the value at the 1320px design width, and
   layer 6 is what adapts them. Desktop rendering is unchanged by layer 6.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Ink and surfaces --------------------------------------------------- */
  --pns-ink: #05080F;         /* page background */
  --pns-ink-2: #070D18;       /* alternating band */
  --pns-surface: #0A111E;     /* card */
  --pns-surface-2: #0F1A2C;   /* logo container, muted pill */
  --pns-shell: #161B22;       /* document viewer shell */

  /* Lines -------------------------------------------------------------- */
  --pns-line: #1B2537;        /* card border */
  --pns-line-soft: #162032;   /* divider inside a card */
  --pns-line-dim: #131E30;    /* section separator */
  --pns-line-strong: #22344E; /* logo container border */
  --pns-line-mid: #2B3A52;    /* control border */
  --pns-line-hero: #16203C;   /* hero stat divider */
  --pns-line-accent: #234A5C; /* accent-tinted border */
  --pns-line-hover: #2F5A6E;  /* card hover border */

  /* Accent — the S in the mark ---------------------------------------- */
  --pns-accent: #37C2E8;
  --pns-accent-hi: #5DD3F2;   /* hover */
  --pns-accent-ink: #0C1F29;  /* accent pill background */
  --pns-accent-print: #0F8FB5;/* accent darkened for paper */

  /* Growth green ------------------------------------------------------- */
  --pns-green: #3EDCA0;
  --pns-green-line: #1F4A3A;
  --pns-green-ink: #0B2019;

  /* Caution ------------------------------------------------------------ */
  --pns-red: #F08A8A;
  --pns-red-line: #4A2626;

  /* Text on dark ------------------------------------------------------- */
  --pns-text: #E8EDF5;
  --pns-text-hi: #FFFFFF;
  --pns-text-strong: #D6DEEA;
  --pns-text-1: #B6C2D2;
  --pns-text-2: #9FADC0;
  --pns-text-3: #8A99B0;
  --pns-text-4: #6B7A90;
  --pns-text-5: #4A5C74;

  /* Paper — print-safe documents --------------------------------------- */
  --pns-paper: #FFFFFF;
  --pns-paper-tint: #F4F6FA;
  --pns-paper-ink: #0A111E;
  --pns-paper-text: #26313F;
  --pns-paper-text-2: #3D4C61;
  --pns-paper-text-3: #5A6B82;
  --pns-paper-line: #DCE3EC;
  --pns-paper-line-soft: #EDF1F6;
  --pns-paper-rule: #9AA9BF;

  /* Layout ------------------------------------------------------------- */
  /* 40px at the 1320px design width, tightening on narrow viewports so the
     page gutter never eats the content. Every full-bleed wrapper uses it. */
  --pns-gutter: clamp(18px, 3.08vw, 40px);

  /* Type --------------------------------------------------------------- */
  --pns-sans: 'Archivo', system-ui, sans-serif;
  --pns-mono: 'IBM Plex Mono', monospace;

  /* Type used only by the logo / icon exploration sheets --------------- */
  --pns-lab-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --pns-grotesk: 'Space Grotesk', sans-serif;
  --pns-sora: 'Sora', sans-serif;
  --pns-manrope: 'Manrope', sans-serif;
  --pns-chivo: 'Chivo', sans-serif;
  --pns-bebas: 'Bebas Neue', sans-serif;

  /* Specimen plates and candidate colours ------------------------------ */
  --pns-light: #E8EDF5;        /* light plate behind a lockup */
  --pns-light-line: #E4E9F0;   /* rule on a white plate */
  --pns-light-grey: #C3CDDB;
  --pns-green-print: #0A9C68;
  --pns-accent-line-hi: #2F7F97;
  --pns-warm: #F0A868;         /* candidate only, not in the palette */
  --pns-violet: #9B8CFF;       /* candidate only, not in the palette */

  /* Guideline sheet specifics ------------------------------------------ */
  --pns-line-swatch: #243349;
  --pns-mark-photo-bg: rgba(5, 8, 15, 0.72);
  --pns-mark-photo-line: rgba(232, 237, 245, 0.14);
  --pns-misuse-violet: #5B2BD6;   /* shown as a mistake, never as a brand colour */
  --pns-misuse-gold: #FFD166;

  /* Image placeholder fills -------------------------------------------- */
  --pns-fill-hatch: repeating-linear-gradient(135deg, #141C2B 0 8px, #101827 8px 16px);
  --pns-fill-thumb: repeating-linear-gradient(135deg, #101827 0 10px, #0D1422 10px 20px);
  --pns-fill-thumb-lg: repeating-linear-gradient(135deg, #101827 0 12px, #0D1422 12px 24px);
  --pns-fill-thumb-sm: repeating-linear-gradient(135deg, #141C2B 0 6px, #101827 6px 12px);

  /* Glows -------------------------------------------------------------- */
  --pns-glow-slide: radial-gradient(120% 100% at 14% 0%, #0D2438 0%, #070D18 52%, #05080F 100%);
  --pns-glow-top: radial-gradient(120% 90% at 16% 0%, #0D2438 0%, #070D18 48%, #05080F 100%);
  --pns-glow-bottom: radial-gradient(100% 120% at 50% 100%, #0D2438 0%, #070D18 60%, #05080F 100%);
  --pns-glow-bottom-green: radial-gradient(100% 120% at 50% 100%, #0B2019 0%, #070D18 60%, #05080F 100%);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pns-ink); }
a { color: var(--pns-accent); text-decoration: none; }
a:hover { color: var(--pns-green); }
::selection { background: var(--pns-accent); color: var(--pns-ink); }

/* ==========================================================================
   3. Layout
   ========================================================================== */

/* Page shell ---------------------------------------------------------- */
.pns-page {
  background: var(--pns-ink);
  color: var(--pns-text);
  font-family: var(--pns-sans);
  min-height: 100vh;
}

/* Content width ------------------------------------------------------- */
.pns-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pns-gutter); }
.pns-wrap--wide { max-width: 1320px; }
.pns-wrap--doc { max-width: 900px; }
.pns-wrap--prose { max-width: 820px; }
.pns-wrap--paper { max-width: 860px; padding: 0; }

/* Full-width bands ---------------------------------------------------- */
.pns-band {
  background: var(--pns-ink-2);
  border-top: 1px solid var(--pns-line-dim);
  border-bottom: 1px solid var(--pns-line-dim);
}
.pns-band--open { border-bottom: 0; }
.pns-glow-top { background: var(--pns-glow-top); }
.pns-cta { background: var(--pns-glow-bottom); border-top: 1px solid var(--pns-line-dim); }
.pns-cta--green { background: var(--pns-glow-bottom-green); }
.pns-footer { border-top: 1px solid var(--pns-line-dim); }
.pns-divided-top { border-top: 1px solid var(--pns-line-dim); }

/* Stacks, rows and grids live in the utility layer (section 5) so that
   combining them with a component — .pns-card.pns-grid, for instance —
   overrides the component's own display. */

/* ==========================================================================
   4. Components
   ========================================================================== */

/* Header ------------------------------------------------------------- */
.pns-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--pns-line-dim);
}
.pns-nav--bare { border-bottom: 0; }
.pns-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  color: var(--pns-text-1);
  flex-wrap: wrap;
}
.pns-nav-link { cursor: pointer; }
.pns-nav-link:hover { color: var(--pns-text-hi); }
.pns-nav-link.is-current { color: var(--pns-text-hi); }

/* Brand lockup ------------------------------------------------------- */
.pns-brand { display: flex; align-items: center; gap: 11px; }

.pns-mark {
  --mark-size: 32px;
  --mark-radius: 8px;
  --mark-font: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mark-size);
  height: var(--mark-size);
  border-radius: var(--mark-radius);
  background: var(--pns-surface-2);
  border: 1px solid var(--pns-line-strong);
  flex: none;
}
.pns-mark--20 { --mark-size: 20px; --mark-radius: 5px; --mark-font: 7px; }
.pns-mark--28 { --mark-size: 28px; --mark-radius: 7px; --mark-font: 10px; }
.pns-mark--30 { --mark-size: 30px; --mark-radius: 8px; --mark-font: 10.5px; }
.pns-mark--42 { --mark-size: 42px; --mark-radius: 10px; --mark-font: 14px; }
.pns-mark--44 { --mark-size: 44px; --mark-radius: 11px; --mark-font: 15px; }
.pns-mark--56 { --mark-size: 56px; --mark-radius: 14px; --mark-font: 19px; }
.pns-mark--58 { --mark-size: 58px; --mark-radius: 14px; --mark-font: 20px; }
.pns-mark--64 { --mark-size: 64px; --mark-radius: 15px; --mark-font: 22px; }
.pns-mark--74 { --mark-size: 74px; --mark-radius: 18px; --mark-font: 26px; }
.pns-mark--plain { border: 0; }
.pns-mark--ink { background: var(--pns-surface); }
.pns-mark--slate { background: var(--pns-line); border: 0; }
.pns-mark--light { background: var(--pns-light); border: 0; }
.pns-mark--on-photo {
  background: var(--pns-mark-photo-bg);
  border-color: var(--pns-mark-photo-line);
}

.pns-mark__text {
  font-weight: 900;
  font-size: var(--mark-font);
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--pns-text);
}
.pns-mark__text--light { color: var(--pns-text-hi); }
.pns-mark__s { color: var(--pns-accent); }

.pns-wordmark { font-weight: 700; font-size: 16px; letter-spacing: -0.025em; }
.pns-wordmark--sm { font-size: 14px; letter-spacing: -0.02em; }
.pns-wordmark--lg { font-size: 29px; letter-spacing: -0.03em; line-height: 1.05; }

/* The "soft" half of the wordmark, echoing the accent S in the mark. The mark
   carries its accent on a dark chip whatever it sits on; the wordmark takes the
   colour of its surface, so on paper it darkens to the print accent — cyan on
   white is 2.1:1 and unreadable. */
.pns-wordmark__accent { color: var(--pns-accent); }
.pns-paper .pns-wordmark__accent { color: var(--pns-accent-print); }
.pns-tagline { font-family: var(--pns-mono); font-size: 10px; color: var(--pns-text-4); }

/* Buttons ------------------------------------------------------------- */
.pns-btn {
  font-family: var(--pns-sans);
  font-size: 15px;
  font-weight: 600;
  border: 0;
  border-radius: 9px;
  padding: 14px 26px;
  cursor: pointer;
  background: none;
  color: inherit;
}
.pns-btn--primary { background: var(--pns-accent); color: var(--pns-ink); }
.pns-btn--primary:hover { background: var(--pns-accent-hi); }
.pns-btn--ghost {
  background: transparent;
  color: var(--pns-text);
  border: 1px solid var(--pns-line-mid);
}
.pns-btn--ghost:hover { border-color: var(--pns-accent); }
.pns-btn--sm { border-radius: 8px; padding: 10px 18px; font-size: 13.5px; white-space: nowrap; }
.pns-btn--compact { border-radius: 8px; padding: 12px 22px; font-size: 14px; }
.pns-btn--wide { padding: 14px 28px; }
.pns-btn--link {
  background: transparent;
  color: var(--pns-accent);
  padding: 6px 0;
  font-size: 14.5px;
  white-space: nowrap;
}
.pns-btn--link:hover { color: var(--pns-green); }
.pns-btn--quiet {
  background: transparent;
  color: var(--pns-text-3);
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}
.pns-btn--quiet:hover { color: var(--pns-text); }
.pns-btn--block { width: 100%; }

/* Micro labels -------------------------------------------------------- */
.pns-eyebrow {
  font-family: var(--pns-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pns-accent);
}
.pns-eyebrow--green { color: var(--pns-green); }

.pns-micro {
  font-family: var(--pns-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pns-text-3);
}
.pns-micro--11 { font-size: 11px; }
.pns-micro--t16 { letter-spacing: 0.16em; }
.pns-micro--t14 { letter-spacing: 0.14em; }

/* Badge — the pill above a hero heading ------------------------------- */
.pns-badge {
  display: inline-block;
  border: 1px solid var(--pns-line-accent);
  background: var(--pns-accent-ink);
  color: var(--pns-accent);
  border-radius: 999px;
  padding: 7px 15px;
  font-family: var(--pns-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pns-badge--translucent { background: rgba(12, 31, 41, 0.7); }
.pns-badge--green {
  border-color: var(--pns-green-line);
  background: var(--pns-green-ink);
  color: var(--pns-green);
}

/* Pills — tags and filters ------------------------------------------- */
.pns-pill {
  border: 1px solid var(--pns-line-mid);
  background: var(--pns-surface-2);
  color: var(--pns-text-3);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
}
.pns-pill--accent {
  border-color: var(--pns-line-accent);
  background: var(--pns-accent-ink);
  color: var(--pns-accent);
}
.pns-pill--selected,
.pns-choice input:checked + .pns-pill {
  border-color: var(--pns-accent);
  background: var(--pns-accent-ink);
  color: var(--pns-accent);
}
.pns-pill--green {
  border-color: var(--pns-green-line);
  background: var(--pns-green-ink);
  color: var(--pns-green);
}
.pns-pill--filter { padding: 8px 16px; font-size: 13px; cursor: pointer; }
.pns-pill--choice { padding: 7px 14px; font-size: 12.5px; cursor: pointer; }
.pns-pill--tap { cursor: pointer; }
.pns-pill--tap:hover { color: var(--pns-text); }
.pns-pill--filter.pns-pill--tap:hover { border-color: var(--pns-accent); }

/* Headings and copy --------------------------------------------------- */
.pns-h1 {
  margin: 0;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.pns-h2 {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.pns-h3 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.025em; }
.pns-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }

/* The uppercase rule heading that opens a section --------------------- */
.pns-rule-heading {
  margin: 0 0 24px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pns-text-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pns-line-soft);
}

.pns-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--pns-text-2);
  text-wrap: pretty;
}
.pns-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pns-text-3);
}
.pns-mono { font-family: var(--pns-mono); }

/* Cards --------------------------------------------------------------- */
.pns-card {
  background: var(--pns-surface);
  border: 1px solid var(--pns-line);
  border-radius: 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pns-card--accent { border-color: var(--pns-line-accent); }
.pns-card--green { border-color: var(--pns-green-line); }
.pns-card--danger { border-color: var(--pns-red-line); }
.pns-card--dashed { border-style: dashed; border-color: var(--pns-line-strong); }
.pns-card--r14 { border-radius: 14px; }
.pns-card--r12 { border-radius: 12px; }
.pns-card--clip { overflow: hidden; }
.pns-card--paper-tint { background: var(--pns-paper-tint); }
.pns-card--link { cursor: pointer; }
.pns-card--link:hover { border-color: var(--pns-line-hover); }

/* A list of short lines under a divider ------------------------------- */
.pns-checklist {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  color: var(--pns-text-1);
  border-top: 1px solid var(--pns-line-soft);
  padding-top: 18px;
}

/* Label / value row --------------------------------------------------- */
.pns-kv { display: flex; justify-content: space-between; gap: 16px; }
.pns-kv--ruled { border-bottom: 1px solid var(--pns-line-soft); padding-bottom: 13px; }
.pns-kv__k { font-size: 14.5px; color: var(--pns-text-1); }
.pns-kv__v { font-family: var(--pns-mono); font-size: 14.5px; white-space: nowrap; }

/* Numbers ------------------------------------------------------------- */
.pns-metric { font-family: var(--pns-mono); font-size: 26px; color: var(--pns-text); }
.pns-stat { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.pns-stat__l { font-size: 12.5px; color: var(--pns-text-3); }
.pns-hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid var(--pns-line-hero);
  width: 100%;
  max-width: 760px;
}

/* Timeline column ----------------------------------------------------- */
.pns-phase {
  border-top: 2px solid var(--pns-line-mid);
  padding-top: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pns-phase--now { border-top-color: var(--pns-accent); }
.pns-phase--green { border-top-color: var(--pns-green); }

/* Image placeholders -------------------------------------------------- */
.pns-thumb {
  height: 150px;
  background: var(--pns-fill-thumb);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pns-thumb--170 { height: 170px; }
.pns-thumb--320 { height: auto; min-height: 320px; background: var(--pns-fill-thumb-lg); }
.pns-thumb--hero {
  height: 340px;
  border-radius: 16px;
  border: 1px solid var(--pns-line);
  background: var(--pns-fill-thumb-lg);
}
.pns-thumb__label {
  font-family: var(--pns-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pns-text-5);
}

.pns-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pns-fill-thumb-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pns-avatar--sm {
  width: 34px;
  height: 34px;
  background: var(--pns-line);
  flex: none;
}

/* Form controls ------------------------------------------------------- */
.pns-field { display: flex; flex-direction: column; gap: 7px; }
.pns-field__label { font-size: 13px; color: var(--pns-text-3); }
.pns-input {
  background: var(--pns-ink);
  border: 1px solid var(--pns-line-mid);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--pns-text);
  font-family: var(--pns-sans);
  font-size: 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.pns-input:focus { border-color: var(--pns-accent); }
.pns-input--area { min-height: 96px; resize: vertical; }

/* Paper — print-safe proposal / report ------------------------------- */
.pns-doc-shell { background: var(--pns-shell); padding: 56px var(--pns-gutter) 100px; }
.pns-paper {
  background: var(--pns-paper);
  color: var(--pns-paper-ink);
  border-radius: 4px;
  padding: 64px 64px 56px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.pns-paper__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--pns-paper-ink);
  padding-bottom: 22px;
}
.pns-paper-h1 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.pns-paper-h2 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pns-paper-text-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pns-paper-line);
}
.pns-paper-row {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pns-paper-line-soft);
}
.pns-paper-row--last { border-bottom: 0; }
.pns-paper-row__id {
  font-family: var(--pns-mono);
  font-size: 12.5px;
  color: var(--pns-accent-print);
  width: 34px;
  flex: none;
}
.pns-paper-money {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pns-paper-line-soft);
}
.pns-paper-money--total {
  padding: 16px 0;
  border-bottom: 0;
  border-top: 2px solid var(--pns-paper-ink);
  margin-top: 8px;
}
.pns-paper-note {
  background: var(--pns-paper-tint);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pns-paper-sign { border-bottom: 1px solid var(--pns-paper-rule); width: 220px; max-width: 100%; }
.pns-paper-foot {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  border-top: 1px solid var(--pns-paper-line);
  padding-top: 26px;
}

/* ==========================================================================
   4a. Brand guidelines sheet — the multi-screen "Brand & UI" document
   ========================================================================== */

/* Sticky screen switcher ---------------------------------------------- */
.pns-doc-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 8, 15, 0.9);
  backdrop-filter: blur(14px);
}
.pns-doc-nav__bar {
  display: flex;
  align-items: center;
  gap: 34px;
  min-height: 62px;
  border-bottom: 1px solid var(--pns-line-dim);
  flex-wrap: wrap;
}
.pns-doc-nav__tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.pns-tab {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--pns-text-3);
  font-family: var(--pns-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 21px 11px;
  white-space: nowrap;
}
.pns-tab:hover { color: var(--pns-text); }
.pns-tab__underline {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 0;
  height: 2px;
  background: var(--pns-accent);
}

/* Colour swatches ----------------------------------------------------- */
.pns-swatch {
  border: 1px solid var(--pns-line);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}
.pns-swatch__chip { height: 104px; }
.pns-swatch__chip--ruled { border-bottom: 1px solid var(--pns-line); }
.pns-swatch__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--pns-surface);
}
.pns-swatch-mini {
  border: 1px solid var(--pns-line);
  border-radius: 12px;
  background: var(--pns-surface);
}
.pns-swatch-mini__chip { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.pns-swatch-mini__chip--ruled { border: 1px solid var(--pns-line-swatch); }

/* Construction and clear-space diagrams ------------------------------- */
.pns-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--pns-line-mid);
  border-radius: 11px;
}
.pns-photo-plate { border-radius: 11px; background: var(--pns-fill-hatch); }

/* Misuse panel — each tile shows one thing not to do ------------------ */
.pns-misuse { background: var(--pns-surface-2); border-radius: 11px; }
.pns-misuse-skew { transform: skewX(-12deg); }
.pns-misuse-serif { font-family: Georgia, serif; font-style: italic; }
.pns-misuse-glow { box-shadow: 0 0 22px 4px rgba(55, 194, 232, 0.55); }
.pns-mark--misuse-colour { background: var(--pns-misuse-violet); border: 0; }
.pns-c-misuse-colour { color: var(--pns-misuse-gold); }

/* ==========================================================================
   4b. Specimen sheets — logo options, icon options, kit
       These documents exist to compare candidates side by side, which is why
       they carry more explicit sizes than the site pages do.
   ========================================================================== */

/* Sheet scaffolding ---------------------------------------------------- */
.pns-sheet {
  background: var(--pns-ink);
  color: var(--pns-text);
  font-family: var(--pns-sans);
  padding: 72px var(--pns-gutter) 120px;
}
.pns-sheet--lab { font-family: var(--pns-lab-sans); }
.pns-sheet--kit { padding: 68px var(--pns-gutter) 110px; }
.pns-sheet__inner { max-width: 1320px; margin: 0 auto; }
.pns-sheet__inner--1280 { max-width: 1280px; }
.pns-sheet__inner--1240 { max-width: 1240px; }

.pns-sheet-h1 { margin: 0; font-size: 46px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.pns-sheet-h1--grotesk { font-family: var(--pns-grotesk); font-weight: 700; letter-spacing: -0.02em; }

.pns-sheet-h2 {
  margin: 0 0 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pns-text-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pns-line-soft);
}
.pns-sheet-h2__note {
  color: var(--pns-text-4);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* Option card — header, stage, size row -------------------------------- */
.pns-spec {
  background: var(--pns-surface);
  border: 1px solid var(--pns-line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pns-spec__head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--pns-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pns-spec__head--tight { padding: 16px 24px; gap: 12px; }
.pns-spec__name { font-family: var(--pns-grotesk); font-weight: 700; font-size: 15px; }
.pns-spec__name--sans { font-family: var(--pns-sans); font-size: 14.5px; white-space: nowrap; }
.pns-spec__note { font-family: var(--pns-mono); font-size: 11px; color: var(--pns-text-4); }
.pns-spec__note--nowrap { white-space: nowrap; }
.pns-spec__stage {
  padding: 52px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 170px;
}
.pns-spec__stage--tall { min-height: 180px; }
.pns-spec__stage--roomy { padding: 58px 24px; }
.pns-spec__foot {
  padding: 20px 24px;
  border-top: 1px solid var(--pns-line-soft);
  display: flex;
  align-items: center;
  gap: 26px;
  background: var(--pns-ink-2);
}
.pns-spec__foot--wrap { padding: 18px 24px; flex-wrap: wrap; gap: 24px; row-gap: 16px; }
.pns-spec__caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  border-top: 1px solid var(--pns-line-soft);
  padding-top: 16px;
  width: 100%;
}
.pns-spec-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--pns-text-4);
  border-top: 1px solid var(--pns-line-soft);
  padding-top: 14px;
}

/* Size legend --------------------------------------------------------- */
.pns-legend {
  display: flex;
  gap: 10px;
  font-family: var(--pns-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pns-text-4);
}
.pns-legend__item { border: 1px solid var(--pns-line); border-radius: 999px; padding: 6px 12px; }

/* Row of the same icon at three sizes --------------------------------- */
.pns-chip-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  justify-content: center;
  padding: 16px 0;
}

/* Icon container. Size and corner travel together, so one class does both.
   The default is the 52px container used in most lockups. */
.pns-chip {
  --chip-size: 52px;
  --chip-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--chip-size);
  height: var(--chip-size);
  border-radius: var(--chip-radius);
  background: var(--pns-surface-2);
  flex: none;
}
.pns-chip--72 { --chip-size: 72px; --chip-radius: 17px; }
.pns-chip--64 { --chip-size: 64px; --chip-radius: 15px; }
.pns-chip--62 { --chip-size: 62px; --chip-radius: 50%; }
.pns-chip--60 { --chip-size: 60px; --chip-radius: 14px; }
.pns-chip--54 { --chip-size: 54px; --chip-radius: 13px; }
.pns-chip--48 { --chip-size: 48px; --chip-radius: 12px; }
.pns-chip--44 { --chip-size: 44px; --chip-radius: 11px; }
.pns-chip--34 { --chip-size: 34px; --chip-radius: 9px; }
.pns-chip--32 { --chip-size: 32px; --chip-radius: 8px; }
.pns-chip--28 { --chip-size: 28px; --chip-radius: 7px; }
.pns-chip--26 { --chip-size: 26px; --chip-radius: 7px; }
.pns-chip--20 { --chip-size: 20px; --chip-radius: 5px; }
.pns-chip--20r6 { --chip-size: 20px; --chip-radius: 6px; }

.pns-chip--outlined { border: 1px solid var(--pns-line-strong); }
.pns-chip--outlined-hi { border: 1px solid var(--pns-accent-line-hi); }
.pns-chip--accent { background: var(--pns-accent); }
.pns-chip--ink { background: var(--pns-surface); }
.pns-chip--light { background: var(--pns-light); }
.pns-chip--round { --chip-radius: 50%; }
.pns-chip--ring { background: none; border: 2px solid var(--pns-accent); --chip-radius: 50%; }
.pns-chip--ring-thin { border-width: 1.5px; }
.pns-chip--stack { flex-direction: column; line-height: 0.82; }
.pns-chip--clip { overflow: hidden; }
.pns-chip--split { flex-direction: column; align-items: stretch; overflow: hidden; }
.pns-chip__face { flex: 1; display: flex; align-items: center; justify-content: center; }
.pns-chip__bar { background: var(--pns-accent); height: 12px; }
.pns-chip__bar--10 { height: 10px; }
.pns-chip__bar--8 { height: 8px; }
.pns-chip__bar--6 { height: 6px; }
.pns-chip__bar--4 { height: 4px; }

/* The lettering inside a chip ----------------------------------------- */
.pns-glyph { font-weight: 900; line-height: 1; letter-spacing: -0.055em; }
.pns-glyph--mono { font-family: var(--pns-mono); font-weight: 500; letter-spacing: -0.06em; }

/* Light plate behind a lockup ----------------------------------------- */
.pns-plate { background: var(--pns-light); border-radius: 9px; }
.pns-plate--r8 { border-radius: 8px; }
.pns-plate--r10 { border-radius: 10px; }
.pns-plate--tint { background: var(--pns-paper-tint); }
.pns-plate--white { background: var(--pns-paper); }

/* Accent rule under a wordmark ---------------------------------------- */
.pns-bar { background: var(--pns-accent); }
.pns-bar--r2 { border-radius: 2px; }
.pns-bar--print { background: var(--pns-accent-print); }
.pns-bar--w10 { width: 10px; }
.pns-bar--w16 { width: 16px; }
.pns-bar--w28 { width: 28px; }
.pns-bar--w30 { width: 30px; }
.pns-bar--w32 { width: 32px; }
.pns-bar--w56 { width: 56px; }
.pns-bar--full { width: 100%; }
.pns-bar--h15 { height: 1.5px; }
.pns-bar--h2 { height: 2px; }
.pns-bar--h3 { height: 3px; }
.pns-bar--h4 { height: 4px; }

/* Growth dot ---------------------------------------------------------- */
.pns-dot { border-radius: 50%; background: var(--pns-green); }
.pns-dot--9 { width: 9px; height: 9px; }
.pns-dot--6 { width: 6px; height: 6px; }
.pns-dot--5 { width: 5px; height: 5px; }
.pns-dot--print { background: var(--pns-green-print); }

/* Four-square module mark — three neutral cells and one accent -------- */
.pns-mod {
  --mod-cell: 22px;
  --mod-gap: 4px;
  --mod-radius: 5px;
  display: grid;
  grid-template-columns: repeat(2, var(--mod-cell));
  grid-template-rows: repeat(2, var(--mod-cell));
  gap: var(--mod-gap);
}
.pns-mod--24 { --mod-cell: 24px; }
.pns-mod--14 { --mod-cell: 14px; --mod-gap: 3px; --mod-radius: 3px; }
.pns-mod--8 { --mod-cell: 8px; --mod-gap: 2px; --mod-radius: 2px; }
.pns-mod > span { border-radius: var(--mod-radius); background: var(--pns-line-strong); }
.pns-mod > span:last-child { background: var(--pns-accent); }
.pns-mod--light > span { background: var(--pns-light-grey); }
.pns-mod--light > span:last-child { background: var(--pns-accent-print); }

/* Slash lockup — P/N/S ------------------------------------------------ */
.pns-slash {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--pns-grotesk);
  font-weight: 700;
}
.pns-slash--tight { gap: 1px; }
.pns-slash__sep { color: var(--pns-accent); font-weight: 400; }
.pns-slash--light {
  background: var(--pns-light);
  color: var(--pns-paper-ink);
  border-radius: 8px;
  padding: 7px 12px;
}
.pns-slash--light .pns-slash__sep { color: var(--pns-accent-print); }

/* Wordmark separated from a seal by a hairline ------------------------ */
.pns-seal-note { border-left: 1px solid var(--pns-line-strong); padding-left: 15px; }

/* Letters stacked one per line --------------------------------------- */
.pns-letters {
  display: flex;
  flex-direction: column;
  line-height: 0.78;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Email signature ----------------------------------------------------- */
.pns-sig-body { border-left: 2px solid var(--pns-light-line); padding-left: 18px; }

/* Slides — 16:9 previews --------------------------------------------- */
.pns-slide {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid var(--pns-line);
  padding: 6%;
  display: flex;
  flex-direction: column;
}
.pns-slide--title { background: var(--pns-glow-slide); justify-content: space-between; }
.pns-slide--divider { background: var(--pns-surface); justify-content: center; }
.pns-slide--content { background: var(--pns-ink); padding: 5.5%; }
.pns-slide-card {
  background: var(--pns-surface);
  border: 1px solid var(--pns-line);
  border-radius: 7px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ==========================================================================
   5. Utilities
   ========================================================================== */

/* Display primitives — stacks and rows -------------------------------- */
.pns-stack { display: flex; flex-direction: column; }
.pns-row { display: flex; align-items: center; flex-wrap: wrap; }
.pns-row--between { justify-content: space-between; }
.pns-row--center { justify-content: center; }
.pns-row--top { align-items: flex-start; }
.pns-row--bottom { align-items: flex-end; }
.pns-row--baseline { align-items: baseline; }
.pns-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pns-jc-center { justify-content: center; }

/* Display primitives — auto-fit grids, the number is the column minimum */
.pns-grid { display: grid; }
.pns-grid--128 { grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); }
.pns-grid--150 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.pns-grid--190 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.pns-grid--200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.pns-grid--220 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.pns-grid--230 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.pns-grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.pns-grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.pns-grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.pns-grid--270 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.pns-grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.pns-grid--290 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.pns-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.pns-grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.pns-grid--360 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.pns-grid--400 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.pns-grid--top { align-items: start; }

/* Display primitives — fixed column counts, used by the specimen sheets */
.pns-grid--2 { grid-template-columns: 1fr 1fr; }
.pns-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Font family — the specimen sheets compare several ------------------- */
.pns-ff-sans { font-family: var(--pns-sans); }
.pns-ff-grotesk { font-family: var(--pns-grotesk); }
.pns-ff-sora { font-family: var(--pns-sora); }
.pns-ff-manrope { font-family: var(--pns-manrope); }
.pns-ff-chivo { font-family: var(--pns-chivo); }
.pns-ff-bebas { font-family: var(--pns-bebas); }

/* Type scale — a dash stands in for the decimal point ----------------- */
.pns-fs-5-5 { font-size: 5.5px; }
.pns-fs-6 { font-size: 6px; }
.pns-fs-6-5 { font-size: 6.5px; }
.pns-fs-7 { font-size: 7px; }
.pns-fs-7-5 { font-size: 7.5px; }
.pns-fs-8 { font-size: 8px; }
.pns-fs-8-5 { font-size: 8.5px; }
.pns-fs-9 { font-size: 9px; }
.pns-fs-9-5 { font-size: 9.5px; }
.pns-fs-10 { font-size: 10px; }
.pns-fs-10-5 { font-size: 10.5px; }
.pns-fs-11 { font-size: 11px; }
.pns-fs-11-5 { font-size: 11.5px; }
.pns-fs-12 { font-size: 12px; }
.pns-fs-12-5 { font-size: 12.5px; }
.pns-fs-13 { font-size: 13px; }
.pns-fs-13-5 { font-size: 13.5px; }
.pns-fs-14 { font-size: 14px; }
.pns-fs-14-5 { font-size: 14.5px; }
.pns-fs-15 { font-size: 15px; }
.pns-fs-15-5 { font-size: 15.5px; }
.pns-fs-16 { font-size: 16px; }
.pns-fs-16-5 { font-size: 16.5px; }
.pns-fs-17 { font-size: 17px; }
.pns-fs-17-5 { font-size: 17.5px; }
.pns-fs-18 { font-size: 18px; }
.pns-fs-19 { font-size: 19px; }
.pns-fs-20 { font-size: 20px; }
.pns-fs-21 { font-size: 21px; }
.pns-fs-22 { font-size: 22px; }
.pns-fs-23 { font-size: 23px; }
.pns-fs-24 { font-size: 24px; }
.pns-fs-25 { font-size: 25px; }
.pns-fs-26 { font-size: 26px; }
.pns-fs-27 { font-size: 27px; }
.pns-fs-28 { font-size: 28px; }
.pns-fs-30 { font-size: 30px; }
.pns-fs-32 { font-size: 32px; }
.pns-fs-34 { font-size: 34px; }
.pns-fs-36 { font-size: 36px; }
.pns-fs-38 { font-size: 38px; }
.pns-fs-40 { font-size: 40px; }
.pns-fs-42 { font-size: 42px; }
.pns-fs-44 { font-size: 44px; }
.pns-fs-48 { font-size: 48px; }
.pns-fs-50 { font-size: 50px; }
.pns-fs-52 { font-size: 52px; }
.pns-fs-54 { font-size: 54px; }
.pns-fs-56 { font-size: 56px; }
.pns-fs-62 { font-size: 62px; }

/* Weight -------------------------------------------------------------- */
.pns-fw-400 { font-weight: 400; }
.pns-fw-500 { font-weight: 500; }
.pns-fw-600 { font-weight: 600; }
.pns-fw-700 { font-weight: 700; }
.pns-fw-800 { font-weight: 800; }
.pns-fw-900 { font-weight: 900; }

/* Background — swatch chips ------------------------------------------- */
.pns-bg-void { background: var(--pns-ink); }
.pns-bg-surface { background: var(--pns-surface); }
.pns-bg-surface-2 { background: var(--pns-surface-2); }
.pns-bg-accent { background: var(--pns-accent); }
.pns-bg-green { background: var(--pns-green); }
.pns-bg-line-strong { background: var(--pns-line-strong); }
.pns-bg-text-3 { background: var(--pns-text-3); }
.pns-bg-text { background: var(--pns-text); }
.pns-bg-warm { background: var(--pns-warm); }
.pns-bg-paper-tint { background: var(--pns-paper-tint); }

/* Colour on dark ------------------------------------------------------ */
.pns-c-text { color: var(--pns-text); }
.pns-c-hi { color: var(--pns-text-hi); }
.pns-c-strong { color: var(--pns-text-strong); }
.pns-c-1 { color: var(--pns-text-1); }
.pns-c-3 { color: var(--pns-text-3); }
.pns-c-4 { color: var(--pns-text-4); }
.pns-c-5 { color: var(--pns-text-5); }
.pns-c-accent { color: var(--pns-accent); }
.pns-c-green { color: var(--pns-green); }
.pns-c-red { color: var(--pns-red); }
.pns-c-ink { color: var(--pns-ink); }
.pns-c-line-strong { color: var(--pns-line-strong); }
.pns-c-warm { color: var(--pns-warm); }
.pns-c-violet { color: var(--pns-violet); }

/* Colour on paper ----------------------------------------------------- */
.pns-c-paper-ink { color: var(--pns-paper-ink); }
.pns-c-paper-1 { color: var(--pns-paper-text); }
.pns-c-paper-2 { color: var(--pns-paper-text-2); }
.pns-c-paper-3 { color: var(--pns-paper-text-3); }
.pns-c-paper-accent { color: var(--pns-accent-print); }

/* Tracking — n is negative, p is positive, the number is 1/1000 em ---- */
.pns-ls-n1 { letter-spacing: -0.01em; }
.pns-ls-n15 { letter-spacing: -0.015em; }
.pns-ls-n2 { letter-spacing: -0.02em; }
.pns-ls-n25 { letter-spacing: -0.025em; }
.pns-ls-n3 { letter-spacing: -0.03em; }
.pns-ls-n35 { letter-spacing: -0.035em; }
.pns-ls-n4 { letter-spacing: -0.04em; }
.pns-ls-n45 { letter-spacing: -0.045em; }
.pns-ls-n5 { letter-spacing: -0.05em; }
.pns-ls-n6 { letter-spacing: -0.06em; }
.pns-ls-n7 { letter-spacing: -0.07em; }
.pns-ls-p1 { letter-spacing: 0.01em; }
.pns-ls-p2 { letter-spacing: 0.02em; }
.pns-ls-p4 { letter-spacing: 0.04em; }
.pns-ls-p6 { letter-spacing: 0.06em; }
.pns-ls-p8 { letter-spacing: 0.08em; }
.pns-ls-p10 { letter-spacing: 0.1em; }
.pns-ls-p12 { letter-spacing: 0.12em; }
.pns-ls-p14 { letter-spacing: 0.14em; }
.pns-ls-p16 { letter-spacing: 0.16em; }
.pns-ls-p19 { letter-spacing: 0.19em; }
.pns-ls-p20 { letter-spacing: 0.2em; }
.pns-ls-p24 { letter-spacing: 0.24em; }
.pns-ls-p26 { letter-spacing: 0.26em; }
.pns-ls-p28 { letter-spacing: 0.28em; }
.pns-ls-p30 { letter-spacing: 0.3em; }

/* Optical inset that cancels the trailing space of tracked text ------- */
.pns-pl-e8 { padding-left: 0.08em; }
.pns-pl-e10 { padding-left: 0.1em; }
.pns-pl-e12 { padding-left: 0.12em; }
.pns-pl-e26 { padding-left: 0.26em; }
.pns-pl-e28 { padding-left: 0.28em; }
.pns-pl-e30 { padding-left: 0.3em; }

/* Line height and wrapping -------------------------------------------- */
.pns-lh-09 { line-height: 0.9; }
.pns-lh-1 { line-height: 1; }
.pns-lh-145 { line-height: 1.45; }
.pns-lh-15 { line-height: 1.5; }
.pns-lh-103 { line-height: 1.03; }
.pns-lh-105 { line-height: 1.05; }
.pns-lh-108 { line-height: 1.08; }
.pns-lh-11 { line-height: 1.1; }
.pns-lh-115 { line-height: 1.15; }
.pns-lh-125 { line-height: 1.25; }
.pns-lh-155 { line-height: 1.55; }
.pns-lh-16 { line-height: 1.6; }
.pns-lh-165 { line-height: 1.65; }
.pns-lh-17 { line-height: 1.7; }
.pns-uppercase { text-transform: uppercase; }
.pns-balance { text-wrap: balance; }
.pns-pretty { text-wrap: pretty; }
.pns-nowrap { white-space: nowrap; }
.pns-anywhere { overflow-wrap: anywhere; }

/* Measure ------------------------------------------------------------- */
.pns-ch-17 { max-width: 17ch; }
.pns-ch-18 { max-width: 18ch; }
.pns-ch-20 { max-width: 20ch; }
.pns-ch-22 { max-width: 22ch; }
.pns-ch-26 { max-width: 26ch; }
.pns-ch-52 { max-width: 52ch; }
.pns-ch-54 { max-width: 54ch; }
.pns-ch-58 { max-width: 58ch; }
.pns-ch-60 { max-width: 60ch; }
.pns-ch-62 { max-width: 62ch; }
.pns-ch-64 { max-width: 64ch; }
.pns-ch-66 { max-width: 66ch; }
.pns-ch-70 { max-width: 70ch; }
.pns-ch-72 { max-width: 72ch; }

/* Gap ----------------------------------------------------------------- */
.pns-gap-1 { gap: 1px; }
.pns-gap-2 { gap: 2px; }
.pns-gap-3 { gap: 3px; }
.pns-gap-4 { gap: 4px; }
.pns-gap-5 { gap: 5px; }
.pns-gap-6 { gap: 6px; }
.pns-gap-7 { gap: 7px; }
.pns-gap-8 { gap: 8px; }
.pns-gap-9 { gap: 9px; }
.pns-gap-10 { gap: 10px; }
.pns-gap-11 { gap: 11px; }
.pns-gap-12 { gap: 12px; }
.pns-gap-13 { gap: 13px; }
.pns-gap-14 { gap: 14px; }
.pns-gap-15 { gap: 15px; }
.pns-gap-16 { gap: 16px; }
.pns-gap-18 { gap: 18px; }
.pns-gap-20 { gap: 20px; }
.pns-gap-22 { gap: 22px; }
.pns-gap-24 { gap: 24px; }
.pns-gap-26 { gap: 26px; }
.pns-gap-28 { gap: 28px; }
.pns-gap-32 { gap: 32px; }
.pns-gap-34 { gap: 34px; }
.pns-gap-40 { gap: 40px; }
.pns-gap-44 { gap: 44px; }

/* Padding — box ------------------------------------------------------- */
.pns-p-5-11 { padding: 5px 11px; }
.pns-p-5-12 { padding: 5px 12px; }
.pns-p-8-12 { padding: 8px 12px; }
.pns-p-8-14 { padding: 8px 14px; }
.pns-p-9-13 { padding: 9px 13px; }
.pns-p-10-14 { padding: 10px 14px; }
.pns-p-13-15 { padding: 13px 15px; }
.pns-p-14-16 { padding: 14px 16px; }
.pns-p-26-30 { padding: 26px 30px; }
.pns-p-28-32 { padding: 28px 32px; }
.pns-p-13 { padding: 13px; }
.pns-p-20-14 { padding: 20px 14px; }
.pns-p-60-40 { padding: 60px 40px; }
.pns-py-5 { padding: 5px 0; }
.pns-py-14 { padding: 14px 0; }
.pns-py-20 { padding: 20px 0; }
.pns-p-20-24 { padding: 20px 24px; }
.pns-p-24 { padding: 24px; }
.pns-p-26 { padding: 26px; }
.pns-p-28 { padding: 28px; }
.pns-p-30 { padding: 30px; }
.pns-p-32 { padding: 32px; }
.pns-p-34 { padding: 34px; }
.pns-p-36 { padding: 36px; }
.pns-p-40 { padding: 40px; }
.pns-p-44 { padding: 44px; }

/* Padding — vertical rhythm on a wrapper ------------------------------ */
.pns-pt-10 { padding-top: 10px; }
.pns-pt-14 { padding-top: 14px; }
.pns-pt-16 { padding-top: 16px; }
.pns-pt-18 { padding-top: 18px; }
.pns-pt-24 { padding-top: 24px; }
.pns-pt-44 { padding-top: 44px; }
.pns-pt-52 { padding-top: 52px; }
.pns-pt-64 { padding-top: 64px; }
.pns-pt-68 { padding-top: 68px; }
.pns-pt-72 { padding-top: 72px; }
.pns-pt-80 { padding-top: 80px; }
.pns-pt-88 { padding-top: 88px; }
.pns-pt-96 { padding-top: 96px; }

.pns-pb-9 { padding-bottom: 9px; }
.pns-pb-10 { padding-bottom: 10px; }
.pns-pb-11 { padding-bottom: 11px; }
.pns-pb-20 { padding-bottom: 20px; }
.pns-pb-34 { padding-bottom: 34px; }
.pns-pb-40 { padding-bottom: 40px; }
.pns-pb-44 { padding-bottom: 44px; }
.pns-pb-52 { padding-bottom: 52px; }
.pns-pb-56 { padding-bottom: 56px; }
.pns-pb-64 { padding-bottom: 64px; }
.pns-pb-72 { padding-bottom: 72px; }
.pns-pb-80 { padding-bottom: 80px; }
.pns-pb-88 { padding-bottom: 88px; }
.pns-pb-120 { padding-bottom: 120px; }

/* Margin -------------------------------------------------------------- */
.pns-mt-4 { margin-top: 4px; }
.pns-mt-6 { margin-top: 6px; }
.pns-mt-8 { margin-top: 8px; }
.pns-mt-26 { margin-top: 26px; }
.pns-mt-36 { margin-top: 36px; }
.pns-my-26 { margin: 26px 0; }
.pns-mt-40 { margin-top: 40px; }
.pns-mt-44 { margin-top: 44px; }
.pns-mt-auto { margin-top: auto; }
.pns-mb-4 { margin-bottom: 4px; }
.pns-mb-5 { margin-bottom: 5px; }
.pns-mb-7 { margin-bottom: 7px; }
.pns-mb-16 { margin-bottom: 16px; }
.pns-mb-20 { margin-bottom: 20px; }
.pns-mb-22 { margin-bottom: 22px; }
.pns-mb-26 { margin-bottom: 26px; }
.pns-mb-28 { margin-bottom: 28px; }
.pns-mb-32 { margin-bottom: 32px; }
.pns-mb-34 { margin-bottom: 34px; }
.pns-mb-36 { margin-bottom: 36px; }
.pns-mb-44 { margin-bottom: 44px; }
.pns-mb-18 { margin-bottom: 18px; }
.pns-mb-48 { margin-bottom: 48px; }
.pns-mb-52 { margin-bottom: 52px; }
.pns-mb-54 { margin-bottom: 54px; }
.pns-mb-56 { margin-bottom: 56px; }
.pns-mb-64 { margin-bottom: 64px; }

/* Dividers used on their own ------------------------------------------ */
.pns-rule-t { border-top: 1px solid var(--pns-line-soft); }
.pns-rule-b { border-bottom: 1px solid var(--pns-line-soft); }
.pns-rule-t--light { border-top: 1px solid var(--pns-light-line); }
.pns-vline { width: 1px; background: var(--pns-line-strong); }
.pns-vline--soft { background: var(--pns-line-soft); }
.pns-vline--stretch { align-self: stretch; }

/* Box helpers --------------------------------------------------------- */
.pns-mh-280 { min-height: 280px; }
.pns-min0 { min-width: 0; }
.pns-minw-200 { min-width: 200px; }
.pns-flex1 { flex: 1; }
.pns-none { flex: none; }
.pns-self-start { align-self: flex-start; }
.pns-ai-center { align-items: center; }
.pns-ai-start { align-items: flex-start; }
.pns-ai-end { align-items: flex-end; }
.pns-w-66 { width: 66px; }
.pns-h-64 { height: 64px; }
.pns-tc { text-align: center; }
.pns-tr { text-align: right; }
.pns-ty-1 { transform: translateY(1px); }
.pns-ty-2 { transform: translateY(2px); }

/* ==========================================================================
   6. Responsive

   Two mechanisms, in this order:

   a) Fluid display type. Headings scale with the viewport via clamp(), where
      the vw coefficient is size/1300 — so the clamp is already saturated at
      1300px and every heading renders at exactly its design value on any
      viewport at or above the 1320px design width.
      These rules match on role + size together (.pns-h1.pns-fs-62) rather than
      on the size utility alone, because .pns-fs-* is also what sets the size
      of the logo and icon specimens: those are the subject of their sheets and
      must keep their stated pixel size at every viewport.

   b) Structural overrides at 900px and 600px, for things that cannot be made
      fluid: grids with a fixed column count, section rhythm, card padding,
      and the fixed heights of image placeholders.

   Auto-fit grids (.pns-grid--190 … --400) need no breakpoint: their tracks are
   declared as minmax(min(Npx, 100%), 1fr), so a column whose minimum is wider
   than the viewport collapses to the available width instead of overflowing it.
   ========================================================================== */

/* a) Fluid display type ------------------------------------------------ */

/* Page headings */
.pns-h1 { font-size: clamp(32px, 4.31vw, 56px); }
.pns-h1.pns-fs-62 { font-size: clamp(34px, 4.77vw, 62px); }
.pns-h1.pns-fs-54 { font-size: clamp(31px, 4.15vw, 54px); }
.pns-h1.pns-fs-52 { font-size: clamp(30px, 4.0vw, 52px); }
.pns-h1.pns-fs-50 { font-size: clamp(30px, 3.85vw, 50px); }

.pns-h2 { font-size: clamp(25px, 2.92vw, 38px); }
.pns-h2.pns-fs-40 { font-size: clamp(26px, 3.08vw, 40px); }
.pns-h2.pns-fs-36 { font-size: clamp(24px, 2.77vw, 36px); }
.pns-h2.pns-fs-34 { font-size: clamp(24px, 2.62vw, 34px); }
.pns-h2.pns-fs-30 { font-size: clamp(22px, 2.31vw, 30px); }

/* Specimen sheet headings */
.pns-sheet-h1 { font-size: clamp(28px, 3.54vw, 46px); }
.pns-sheet-h1.pns-fs-50 { font-size: clamp(30px, 3.85vw, 50px); }
.pns-sheet-h1.pns-fs-48 { font-size: clamp(29px, 3.69vw, 48px); }

/* Paper document heading */
.pns-paper-h1 { font-size: clamp(24px, 2.77vw, 36px); }

/* b) Tablet and below -------------------------------------------------- */

@media (max-width: 900px) {
  /* Fixed column counts */
  .pns-grid--2 { grid-template-columns: 1fr; }
  .pns-grid--3 { grid-template-columns: 1fr 1fr; }
  /* A slide preview is a miniature of a 1920×1080 deck — its internal grid
     is part of the artwork, not the page layout. */
  .pns-slide .pns-grid--2 { grid-template-columns: 1fr 1fr; }

  /* Section rhythm */
  .pns-pt-96 { padding-top: 64px; }
  .pns-pt-88 { padding-top: 60px; }
  .pns-pt-80 { padding-top: 56px; }
  .pns-pt-72 { padding-top: 52px; }
  .pns-pt-68 { padding-top: 48px; }
  .pns-pt-64 { padding-top: 44px; }
  .pns-pt-52 { padding-top: 38px; }
  .pns-pt-44 { padding-top: 32px; }
  .pns-pb-120 { padding-bottom: 72px; }
  .pns-pb-88 { padding-bottom: 60px; }
  .pns-pb-80 { padding-bottom: 56px; }
  .pns-pb-72 { padding-bottom: 52px; }
  .pns-pb-64 { padding-bottom: 44px; }
  .pns-pb-56 { padding-bottom: 40px; }
  .pns-pb-52 { padding-bottom: 38px; }
  .pns-pb-44 { padding-bottom: 32px; }

  .pns-mb-64 { margin-bottom: 44px; }
  .pns-mb-56 { margin-bottom: 40px; }
  .pns-mb-54 { margin-bottom: 38px; }
  .pns-mb-52 { margin-bottom: 36px; }
  .pns-mb-48 { margin-bottom: 34px; }
  .pns-mb-44 { margin-bottom: 32px; }

  /* Two-column splits sit closer together once stacked */
  .pns-gap-44 { gap: 30px; }
  .pns-gap-40 { gap: 28px; }
  .pns-gap-36 { gap: 26px; }

  /* Card padding */
  .pns-p-60-40 { padding: 44px 28px; }
  .pns-p-44 { padding: 30px; }
  .pns-p-40 { padding: 28px; }
  .pns-p-36 { padding: 26px; }
  .pns-p-34 { padding: 26px; }
  .pns-p-32 { padding: 24px; }
  .pns-p-30 { padding: 24px; }
  .pns-p-28-32 { padding: 24px; }
  .pns-p-26-30 { padding: 22px; }

  /* Sheets and paper documents */
  .pns-sheet { padding-top: 52px; padding-bottom: 72px; }
  .pns-sheet--kit { padding-top: 48px; padding-bottom: 66px; }
  .pns-paper { padding: 40px 36px 32px; gap: 28px; }
  .pns-doc-shell { padding-top: 40px; padding-bottom: 64px; }

  /* Navigation */
  .pns-nav-links { gap: 16px; }
  .pns-doc-nav__bar { gap: 14px; }

  /* Specimen stages */
  .pns-spec__stage { padding: 38px 20px; min-height: 150px; }
  .pns-spec__stage--tall { min-height: 158px; }
  .pns-spec__stage--roomy { padding: 42px 20px; }
  .pns-spec__foot { padding: 16px 20px; gap: 18px; flex-wrap: wrap; row-gap: 14px; }
  .pns-spec__head { padding: 16px 20px; }
  .pns-spec__head--tight { padding: 14px 20px; }

  /* Image placeholders */
  .pns-thumb--hero { height: 240px; }
  .pns-thumb--320 { min-height: 240px; }
  .pns-mh-280 { min-height: 220px; }
}

/* c) Phone ------------------------------------------------------------- */

@media (max-width: 600px) {
  .pns-grid--3 { grid-template-columns: 1fr; }
  .pns-slide .pns-grid--2 { grid-template-columns: 1fr 1fr; }

  /* Section rhythm */
  .pns-pt-96 { padding-top: 44px; }
  .pns-pt-88 { padding-top: 40px; }
  .pns-pt-80 { padding-top: 38px; }
  .pns-pt-72 { padding-top: 36px; }
  .pns-pt-68 { padding-top: 34px; }
  .pns-pt-64 { padding-top: 32px; }
  .pns-pt-52 { padding-top: 28px; }
  .pns-pt-44 { padding-top: 24px; }
  .pns-pb-120 { padding-bottom: 52px; }
  .pns-pb-88 { padding-bottom: 40px; }
  .pns-pb-80 { padding-bottom: 38px; }
  .pns-pb-72 { padding-bottom: 36px; }
  .pns-pb-64 { padding-bottom: 32px; }
  .pns-pb-56 { padding-bottom: 30px; }
  .pns-pb-52 { padding-bottom: 28px; }
  .pns-pb-44 { padding-bottom: 24px; }

  .pns-mb-64, .pns-mb-56, .pns-mb-54, .pns-mb-52 { margin-bottom: 32px; }
  .pns-mb-48, .pns-mb-44 { margin-bottom: 28px; }
  .pns-mb-36, .pns-mb-34 { margin-bottom: 24px; }

  .pns-gap-44, .pns-gap-40, .pns-gap-36, .pns-gap-34 { gap: 24px; }

  /* Card padding */
  .pns-p-60-40 { padding: 30px 20px; }
  .pns-p-44, .pns-p-40, .pns-p-36, .pns-p-34 { padding: 22px; }
  .pns-p-32, .pns-p-30, .pns-p-28-32, .pns-p-28 { padding: 20px; }
  .pns-p-26-30, .pns-p-26 { padding: 18px; }

  /* Sheets and paper documents */
  .pns-sheet { padding-top: 36px; padding-bottom: 52px; }
  .pns-sheet--kit { padding-top: 34px; padding-bottom: 48px; }
  .pns-paper { padding: 26px 20px 24px; gap: 22px; }
  .pns-paper__head { padding-bottom: 18px; }
  .pns-doc-shell { padding-top: 26px; padding-bottom: 44px; }
  /* Let the week column drop below the milestone description */
  .pns-paper-row { flex-wrap: wrap; row-gap: 6px; }
  .pns-paper-foot { gap: 22px; }
  .pns-minw-200 { min-width: 0; }

  /* Navigation — the tab row and the site nav both wrap to two lines here */
  .pns-nav { gap: 14px; min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  .pns-nav-links { gap: 12px; }
  .pns-doc-nav__bar { gap: 10px; min-height: 0; }
  .pns-tab { padding: 14px 8px; }
  .pns-tab__underline { left: 8px; right: 8px; }

  /* Hero */
  .pns-hero-stats { gap: 20px; margin-top: 24px; padding-top: 24px; }
  .pns-stat { min-width: 104px; }

  /* Specimen stages */
  .pns-spec__stage { padding: 30px 16px; min-height: 130px; }
  .pns-spec__stage--tall { min-height: 136px; }
  .pns-spec__stage--roomy { padding: 34px 16px; }
  .pns-spec__foot { padding: 14px 16px; gap: 14px; }
  .pns-legend { flex-wrap: wrap; }
  .pns-chip-row { gap: 12px; }

  /* Image placeholders — base first, so the modifiers below still win */
  .pns-thumb { height: 130px; }
  .pns-thumb--170 { height: 146px; }
  .pns-thumb--320 { min-height: 200px; }
  .pns-thumb--hero { height: 180px; }
  .pns-mh-280 { min-height: 180px; }

  /* Construction diagram — nested dashed frames get thin fast */
  .pns-guide.pns-p-30 { padding: 16px; }
  .pns-guide.pns-p-26 { padding: 16px; }
  .pns-my-26 { margin: 18px 0; }
}

/* ==========================================================================
   7. Anchors adopting component treatments
   The mockups draw navigation and calls to action as <button> and <span>.
   On the live site these are anchors, which need display, text-decoration
   and colour normalised — the base `a` rule paints them accent, and `a:hover`
   paints them green, neither of which the mockups do.

   Colour is never set on the bare `a.pns-btn`: it would outrank
   .pns-btn--primary and break the accent fill. Each variant that carries its
   own label colour re-states it for :hover instead, which is the only state
   `a:hover` can reach.
   ========================================================================== */

a.pns-btn,
a.pns-nav-link,
a.pns-card,
a.pns-pill { text-decoration: none; }

a.pns-btn { display: inline-block; text-align: center; }
a.pns-btn--block { display: block; }
a.pns-card { color: inherit; }

a.pns-btn--primary:hover { color: var(--pns-ink); }
a.pns-btn--ghost:hover { color: var(--pns-text); }

/* The brand lockup is plain text in the mockups, in the nav and the footer. */
a.pns-brand,
a.pns-brand:hover { color: inherit; }

/* Nav links take their resting colour from .pns-nav-links, and their
   current/hover colour from the component rules above. */
a.pns-nav-link { color: inherit; }
a.pns-nav-link:hover,
a.pns-nav-link.is-current { color: var(--pns-text-hi); }

/* Choice pills backed by radio inputs --------------------------------- */
.pns-choice { display: inline-flex; position: relative; }
.pns-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pns-choice input:focus-visible + .pns-pill {
  outline: 2px solid var(--pns-accent);
  outline-offset: 2px;
}

/* Radio groups need a <fieldset>/<legend> pair for screen readers, and the
   UA chrome on both — groove border, inset padding, min-content width — has
   to come off before they match the .pns-field stack the design draws. The
   legend cannot be a flex item in every browser, so it keeps block flow and
   reproduces .pns-field's 7px gap with a margin. */
.pns-fieldset {
  display: block;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.pns-fieldset > legend { padding: 0; margin-bottom: 7px; }
.pns-fieldset > .pns-field__error { display: block; margin-top: 7px; }

/* Bot bait: present and fillable in the DOM, out of flow so it adds no gap. */
.pns-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Field validation ----------------------------------------------------- */
.pns-field__error { font-size: 12.5px; color: var(--pns-red); }
.pns-input--invalid { border-color: var(--pns-red-line); }