/* ------------------------------------------------------------------
   Personas
   ------------------------------------------------------------------ */

/* Switzer, by Jérémie Fontana for the Indian Type Foundry (ITF Free Font License) */
@font-face { font-family: "Switzer"; src: url("fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* The apps' paper, ink and rules (docs/design.md) */
  --paper: #fcfcfb;
  --white: #ffffff;
  --field: #f4f4f1;
  --hover: rgba(20, 20, 18, .045);
  --ink: #141413;
  --ink-2: #4a4a46;
  --muted: #86867f;
  --rule: #ebebe6;
  --rule-2: #d9d9d3;
  --blue: #1f3a8f;
  --navy: #1c2856;
  --focus: rgba(31, 58, 143, .22);
  --code-bg: #eef1f9;
  --red: #b8432f;
  --raised-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(20, 20, 18, .04);

  --sans: "Switzer", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --display: var(--sans);
  --serif: var(--sans);
  --type: "Courier Prime", "Courier New", monospace;
  --label: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1280px;
  --gutter: clamp(20px, 3.4vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);

  /* Security-envelope weave: the wavy print that hides what's inside an envelope */
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' viewBox='0 0 32 12'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 3Q4 .4 8 3T16 3T24 3T32 3' stroke='%23778dd3' stroke-width='.85'/%3E%3Cpath d='M0 9Q4 6.4 8 9T16 9T24 9T32 9' stroke='%23778dd3' stroke-width='.85'/%3E%3Cpath d='M0 6Q4 8.6 8 6T16 6T24 6T32 6' stroke='%23b4c2ee' stroke-width='.55' stroke-opacity='.75'/%3E%3Cpath d='M0 0Q4 2.6 8 0T16 0T24 0T32 0' stroke='%23b4c2ee' stroke-width='.55' stroke-opacity='.75'/%3E%3Cpath d='M0 12Q4 14.6 8 12T16 12T24 12T32 12' stroke='%23b4c2ee' stroke-width='.55' stroke-opacity='.75'/%3E%3C/g%3E%3C/svg%3E");
  /* The same weave in white, laid over a persona's ink */
  --weave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' viewBox='0 0 32 12'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M0 3Q4 .4 8 3T16 3T24 3T32 3' stroke-width='.85' stroke-opacity='.2'/%3E%3Cpath d='M0 9Q4 6.4 8 9T16 9T24 9T32 9' stroke-width='.85' stroke-opacity='.2'/%3E%3Cpath d='M0 6Q4 8.6 8 6T16 6T24 6T32 6' stroke-width='.55' stroke-opacity='.12'/%3E%3C/g%3E%3C/svg%3E");
  --censor:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .12)),
    var(--weave) 0 50% / 24px 9px repeat,
    var(--navy);

  /* Fine security print behind the logo, and the seal's engraving */
  --fine-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 1.5Q3 .3 6 1.5T12 1.5T18 1.5T24 1.5' stroke='%23778dd3' stroke-opacity='.6' stroke-width='.32'/%3E%3Cpath d='M0 4.5Q3 3.3 6 4.5T12 4.5T18 4.5T24 4.5' stroke='%23778dd3' stroke-opacity='.6' stroke-width='.32'/%3E%3Cpath d='M0 3Q3 4.2 6 3T12 3T18 3T24 3' stroke='%23b4c2ee' stroke-opacity='.35' stroke-width='.25'/%3E%3Cpath d='M0 0Q3 1.2 6 0T12 0T18 0T24 0' stroke='%23b4c2ee' stroke-opacity='.35' stroke-width='.25'/%3E%3Cpath d='M0 6Q3 7.2 6 6T12 6T18 6T24 6' stroke='%23b4c2ee' stroke-opacity='.35' stroke-width='.25'/%3E%3C/g%3E%3C/svg%3E");
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%233c3270' stroke-linejoin='round'%3E%3Cpath d='M34.9 20.0L34.8 19.8L34.6 19.7L34.2 19.5L33.6 19.5L32.9 19.5L32.1 19.6L31.2 19.7L30.2 20.0L29.1 20.4L28.0 20.9L26.9 21.5L25.7 22.3L24.6 23.1L23.6 24.0L22.6 24.9L21.6 25.9L20.8 27.0L20.1 28.1L19.5 29.1L19.0 30.1L18.6 31.1L18.3 32.0L18.1 32.8L18.1 33.5L18.1 34.0L18.1 34.5L18.3 34.7L18.4 34.8L18.6 34.8L18.8 34.5L19.0 34.1L19.1 33.6L19.2 32.9L19.2 32.1L19.1 31.2L18.9 30.1L18.6 29.0L18.2 27.9L17.7 26.7L17.2 25.5L16.5 24.3L15.7 23.1L14.8 22.0L13.9 21.0L13.0 20.1L12.0 19.2L11.0 18.5L10.0 17.9L9.1 17.4L8.2 17.1L7.5 16.8L6.8 16.7L6.2 16.6L5.8 16.6L5.5 16.7L5.4 16.9L5.5 17.1L5.7 17.3L6.0 17.5L6.6 17.7L7.2 17.8L8.1 17.9L9.0 17.9L10.0 17.9L11.2 17.7L12.4 17.4L13.6 17.1L14.9 16.6L16.1 16.0L17.3 15.4L18.5 14.6L19.6 13.8L20.7 13.0L21.6 12.1L22.4 11.2L23.1 10.3L23.7 9.4L24.2 8.6L24.5 7.9L24.7 7.2L24.8 6.7L24.8 6.2L24.7 6.0L24.6 5.8L24.4 5.8L24.2 6.0L23.9 6.4L23.7 6.9L23.5 7.5L23.3 8.3L23.2 9.3L23.2 10.3L23.2 11.5L23.4 12.7L23.6 13.9L23.9 15.2L24.4 16.5L24.9 17.8L25.5 19.1L26.2 20.3L26.9 21.4L27.7 22.4L28.5 23.3L29.3 24.1L30.1 24.8L30.9 25.3L31.6 25.7L32.2 26.0L32.8 26.2L33.2 26.2L33.5 26.2L33.6 26.1L33.6 25.9L33.5 25.6L33.1 25.3L32.7 25.1L32.0 24.8L31.2 24.5L30.3 24.3L29.3 24.2L28.2 24.1L26.9 24.1L25.6 24.2L24.3 24.4L23.0 24.7L21.6 25.1L20.3 25.5L19.1 26.1L17.9 26.7L16.8 27.4L15.8 28.1L14.9 28.8L14.2 29.6L13.6 30.3L13.1 30.9L12.7 31.5L12.5 32.0L12.4 32.5L12.4 32.7L12.5 32.9L12.7 32.9L13.0 32.8L13.3 32.5L13.6 32.1L14.0 31.5L14.3 30.7L14.6 29.8L14.9 28.8L15.1 27.7L15.2 26.5L15.2 25.2L15.2 23.8L15.0 22.5L14.8 21.1L14.4 19.8L14.0 18.5L13.5 17.2L13.0 16.0L12.4 15.0L11.7 14.0L11.1 13.2L10.5 12.5L9.9 12.0L9.3 11.6L8.8 11.3L8.4 11.2L8.1 11.1L7.9 11.2L7.9 11.4L8.0 11.7L8.3 12.0L8.7 12.4L9.2 12.8L9.9 13.2L10.8 13.6L11.8 14.0L12.9 14.3L14.1 14.5L15.3 14.7L16.7 14.8L18.1 14.8L19.4 14.7L20.8 14.5L22.2 14.2L23.5 13.9L24.7 13.4L25.8 12.9L26.8 12.4L27.7 11.9L28.4 11.3L29.0 10.7L29.5 10.2L29.8 9.8L30.0 9.4L30.0 9.1L30.0 8.9L29.8 8.9L29.5 8.9L29.1 9.2L28.7 9.5L28.3 10.0L27.8 10.7L27.3 11.5L26.8 12.5L26.4 13.5L26.0 14.7L25.7 15.9L25.5 17.2L25.4 18.6L25.3 20.0L25.4 21.4L25.5 22.8L25.7 24.1L26.0 25.3L26.4 26.5L26.8 27.5L27.3 28.5L27.8 29.3L28.3 30.0L28.7 30.5L29.1 30.8L29.5 31.1L29.8 31.1L30.0 31.1L30.0 30.9L30.0 30.6L29.8 30.2L29.5 29.8L29.0 29.3L28.4 28.7L27.7 28.1L26.8 27.6L25.8 27.1L24.7 26.6L23.5 26.1L22.2 25.8L20.8 25.5L19.4 25.3L18.1 25.2L16.7 25.2L15.3 25.3L14.1 25.5L12.9 25.7L11.8 26.0L10.8 26.4L9.9 26.8L9.2 27.2L8.7 27.6L8.3 28.0L8.0 28.3L7.9 28.6L7.9 28.8L8.1 28.9L8.4 28.8L8.8 28.7L9.3 28.4L9.9 28.0L10.5 27.5L11.1 26.8L11.7 26.0L12.4 25.0L13.0 24.0L13.5 22.8L14.0 21.5L14.4 20.2L14.8 18.9L15.0 17.5L15.2 16.2L15.2 14.8L15.2 13.5L15.1 12.3L14.9 11.2L14.6 10.2L14.3 9.3L14.0 8.5L13.6 7.9L13.3 7.5L13.0 7.2L12.7 7.1L12.5 7.1L12.4 7.3L12.4 7.5L12.5 8.0L12.7 8.5L13.1 9.1L13.6 9.7L14.2 10.4L14.9 11.2L15.8 11.9L16.8 12.6L17.9 13.3L19.1 13.9L20.3 14.5L21.6 14.9L23.0 15.3L24.3 15.6L25.6 15.8L26.9 15.9L28.2 15.9L29.3 15.8L30.3 15.7L31.2 15.5L32.0 15.2L32.7 14.9L33.1 14.7L33.5 14.4L33.6 14.1L33.6 13.9L33.5 13.8L33.2 13.8L32.8 13.8L32.2 14.0L31.6 14.3L30.9 14.7L30.1 15.2L29.3 15.9L28.5 16.7L27.7 17.6L26.9 18.6L26.2 19.7L25.5 20.9L24.9 22.2L24.4 23.5L23.9 24.8L23.6 26.1L23.4 27.3L23.2 28.5L23.2 29.7L23.2 30.7L23.3 31.7L23.5 32.5L23.7 33.1L23.9 33.6L24.2 34.0L24.4 34.2L24.6 34.2L24.7 34.0L24.8 33.8L24.8 33.3L24.7 32.8L24.5 32.1L24.2 31.4L23.7 30.6L23.1 29.7L22.4 28.8L21.6 27.9L20.7 27.0L19.6 26.2L18.5 25.4L17.3 24.6L16.1 24.0L14.9 23.4L13.6 22.9L12.4 22.6L11.2 22.3L10.0 22.1L9.0 22.1L8.1 22.1L7.2 22.2L6.6 22.3L6.0 22.5L5.7 22.7L5.5 22.9L5.4 23.1L5.5 23.3L5.8 23.4L6.2 23.4L6.8 23.3L7.5 23.2L8.2 22.9L9.1 22.6L10.0 22.1L11.0 21.5L12.0 20.8L13.0 19.9L13.9 19.0L14.8 18.0L15.7 16.9L16.5 15.7L17.2 14.5L17.7 13.3L18.2 12.1L18.6 11.0L18.9 9.9L19.1 8.8L19.2 7.9L19.2 7.1L19.1 6.4L19.0 5.9L18.8 5.5L18.6 5.2L18.4 5.2L18.3 5.3L18.1 5.5L18.1 6.0L18.1 6.5L18.1 7.2L18.3 8.0L18.6 8.9L19.0 9.9L19.5 10.9L20.1 11.9L20.8 13.0L21.6 14.1L22.6 15.1L23.6 16.0L24.6 16.9L25.7 17.7L26.9 18.5L28.0 19.1L29.1 19.6L30.2 20.0L31.2 20.3L32.1 20.4L32.9 20.5L33.6 20.5L34.2 20.5L34.6 20.3L34.8 20.2L34.9 20.0Z' stroke-opacity='.34' stroke-width='.4'/%3E%3Cpath d='M37.2 20.0L37.7 20.5L37.9 20.9L37.7 21.4L37.3 21.8L36.7 22.2L36.3 22.6L36.3 23.0L36.5 23.5L36.9 24.1L37.2 24.6L37.1 25.1L36.7 25.4L36.1 25.7L35.6 26.0L35.2 26.3L35.2 26.8L35.5 27.4L35.7 28.0L35.7 28.5L35.4 28.9L34.8 29.1L34.2 29.2L33.6 29.4L33.4 29.7L33.4 30.3L33.5 30.9L33.5 31.5L33.3 32.0L32.8 32.2L32.2 32.2L31.5 32.1L31.0 32.3L30.8 32.6L30.7 33.3L30.7 33.9L30.5 34.5L30.1 34.7L29.5 34.7L28.9 34.5L28.3 34.4L27.9 34.5L27.6 35.0L27.4 35.6L27.2 36.2L26.9 36.5L26.4 36.5L25.8 36.3L25.2 36.0L24.7 35.8L24.3 36.0L24.0 36.5L23.6 37.1L23.3 37.5L22.8 37.6L22.3 37.4L21.8 37.0L21.3 36.6L20.9 36.5L20.4 36.7L20.0 37.2L19.5 37.7L19.1 37.9L18.6 37.7L18.2 37.3L17.8 36.7L17.4 36.3L17.0 36.3L16.5 36.5L15.9 36.9L15.4 37.2L14.9 37.1L14.6 36.7L14.3 36.1L14.0 35.6L13.7 35.2L13.2 35.2L12.6 35.5L12.0 35.7L11.5 35.7L11.1 35.4L10.9 34.8L10.8 34.2L10.6 33.6L10.3 33.4L9.7 33.4L9.1 33.5L8.5 33.5L8.0 33.3L7.8 32.8L7.8 32.2L7.9 31.5L7.7 31.0L7.4 30.8L6.7 30.7L6.1 30.7L5.5 30.5L5.3 30.1L5.3 29.5L5.5 28.9L5.6 28.3L5.5 27.9L5.0 27.6L4.4 27.4L3.8 27.2L3.5 26.9L3.5 26.4L3.7 25.8L4.0 25.2L4.2 24.7L4.0 24.3L3.5 24.0L2.9 23.6L2.5 23.3L2.4 22.8L2.6 22.3L3.0 21.8L3.4 21.3L3.5 20.9L3.3 20.4L2.8 20.0L2.3 19.5L2.1 19.1L2.3 18.6L2.7 18.2L3.3 17.8L3.7 17.4L3.7 17.0L3.5 16.5L3.1 15.9L2.8 15.4L2.9 14.9L3.3 14.6L3.9 14.3L4.4 14.0L4.8 13.7L4.8 13.2L4.5 12.6L4.3 12.0L4.3 11.5L4.6 11.1L5.2 10.9L5.8 10.8L6.4 10.6L6.6 10.3L6.6 9.7L6.5 9.1L6.5 8.5L6.7 8.0L7.2 7.8L7.8 7.8L8.5 7.9L9.0 7.7L9.2 7.4L9.3 6.7L9.3 6.1L9.5 5.5L9.9 5.3L10.5 5.3L11.1 5.5L11.7 5.6L12.1 5.5L12.4 5.0L12.6 4.4L12.8 3.8L13.1 3.5L13.6 3.5L14.2 3.7L14.8 4.0L15.3 4.2L15.7 4.0L16.0 3.5L16.4 2.9L16.7 2.5L17.2 2.4L17.7 2.6L18.2 3.0L18.7 3.4L19.1 3.5L19.6 3.3L20.0 2.8L20.5 2.3L20.9 2.1L21.4 2.3L21.8 2.7L22.2 3.3L22.6 3.7L23.0 3.7L23.5 3.5L24.1 3.1L24.6 2.8L25.1 2.9L25.4 3.3L25.7 3.9L26.0 4.4L26.3 4.8L26.8 4.8L27.4 4.5L28.0 4.3L28.5 4.3L28.9 4.6L29.1 5.2L29.2 5.8L29.4 6.4L29.7 6.6L30.3 6.6L30.9 6.5L31.5 6.5L32.0 6.7L32.2 7.2L32.2 7.8L32.1 8.5L32.3 9.0L32.6 9.2L33.3 9.3L33.9 9.3L34.5 9.5L34.7 9.9L34.7 10.5L34.5 11.1L34.4 11.7L34.5 12.1L35.0 12.4L35.6 12.6L36.2 12.8L36.5 13.1L36.5 13.6L36.3 14.2L36.0 14.8L35.8 15.3L36.0 15.7L36.5 16.0L37.1 16.4L37.5 16.7L37.6 17.2L37.4 17.7L37.0 18.2L36.6 18.7L36.5 19.1L36.7 19.6L37.2 20.0Z' stroke-opacity='.4' stroke-width='.45'/%3E%3Cpath d='M37.2 20.0L36.7 20.4L36.5 20.9L36.6 21.3L37.0 21.8L37.4 22.3L37.6 22.8L37.5 23.3L37.1 23.6L36.5 24.0L36.0 24.3L35.8 24.7L36.0 25.2L36.3 25.8L36.5 26.4L36.5 26.9L36.2 27.2L35.6 27.4L35.0 27.6L34.5 27.9L34.4 28.3L34.5 28.9L34.7 29.5L34.7 30.1L34.5 30.5L33.9 30.7L33.3 30.7L32.6 30.8L32.3 31.0L32.1 31.5L32.2 32.2L32.2 32.8L32.0 33.3L31.5 33.5L30.9 33.5L30.3 33.4L29.7 33.4L29.4 33.6L29.2 34.2L29.1 34.8L28.9 35.4L28.5 35.7L28.0 35.7L27.4 35.5L26.8 35.2L26.3 35.2L26.0 35.6L25.7 36.1L25.4 36.7L25.1 37.1L24.6 37.2L24.1 36.9L23.5 36.5L23.0 36.3L22.6 36.3L22.2 36.7L21.8 37.3L21.4 37.7L20.9 37.9L20.5 37.7L20.0 37.2L19.6 36.7L19.1 36.5L18.7 36.6L18.2 37.0L17.7 37.4L17.2 37.6L16.7 37.5L16.4 37.1L16.0 36.5L15.7 36.0L15.3 35.8L14.8 36.0L14.2 36.3L13.6 36.5L13.1 36.5L12.8 36.2L12.6 35.6L12.4 35.0L12.1 34.5L11.7 34.4L11.1 34.5L10.5 34.7L9.9 34.7L9.5 34.5L9.3 33.9L9.3 33.3L9.2 32.6L9.0 32.3L8.5 32.1L7.8 32.2L7.2 32.2L6.7 32.0L6.5 31.5L6.5 30.9L6.6 30.3L6.6 29.7L6.4 29.4L5.8 29.2L5.2 29.1L4.6 28.9L4.3 28.5L4.3 28.0L4.5 27.4L4.8 26.8L4.8 26.3L4.4 26.0L3.9 25.7L3.3 25.4L2.9 25.1L2.8 24.6L3.1 24.1L3.5 23.5L3.7 23.0L3.7 22.6L3.3 22.2L2.7 21.8L2.3 21.4L2.1 20.9L2.3 20.5L2.8 20.0L3.3 19.6L3.5 19.1L3.4 18.7L3.0 18.2L2.6 17.7L2.4 17.2L2.5 16.7L2.9 16.4L3.5 16.0L4.0 15.7L4.2 15.3L4.0 14.8L3.7 14.2L3.5 13.6L3.5 13.1L3.8 12.8L4.4 12.6L5.0 12.4L5.5 12.1L5.6 11.7L5.5 11.1L5.3 10.5L5.3 9.9L5.5 9.5L6.1 9.3L6.7 9.3L7.4 9.2L7.7 9.0L7.9 8.5L7.8 7.8L7.8 7.2L8.0 6.7L8.5 6.5L9.1 6.5L9.7 6.6L10.3 6.6L10.6 6.4L10.8 5.8L10.9 5.2L11.1 4.6L11.5 4.3L12.0 4.3L12.6 4.5L13.2 4.8L13.7 4.8L14.0 4.4L14.3 3.9L14.6 3.3L14.9 2.9L15.4 2.8L15.9 3.1L16.5 3.5L17.0 3.7L17.4 3.7L17.8 3.3L18.2 2.7L18.6 2.3L19.1 2.1L19.5 2.3L20.0 2.8L20.4 3.3L20.9 3.5L21.3 3.4L21.8 3.0L22.3 2.6L22.8 2.4L23.3 2.5L23.6 2.9L24.0 3.5L24.3 4.0L24.7 4.2L25.2 4.0L25.8 3.7L26.4 3.5L26.9 3.5L27.2 3.8L27.4 4.4L27.6 5.0L27.9 5.5L28.3 5.6L28.9 5.5L29.5 5.3L30.1 5.3L30.5 5.5L30.7 6.1L30.7 6.7L30.8 7.4L31.0 7.7L31.5 7.9L32.2 7.8L32.8 7.8L33.3 8.0L33.5 8.5L33.5 9.1L33.4 9.7L33.4 10.3L33.6 10.6L34.2 10.8L34.8 10.9L35.4 11.1L35.7 11.5L35.7 12.0L35.5 12.6L35.2 13.2L35.2 13.7L35.6 14.0L36.1 14.3L36.7 14.6L37.1 14.9L37.2 15.4L36.9 15.9L36.5 16.5L36.3 17.0L36.3 17.4L36.7 17.8L37.3 18.2L37.7 18.6L37.9 19.1L37.7 19.5L37.2 20.0Z' stroke-opacity='.26' stroke-width='.35'/%3E%3C/g%3E%3C/svg%3E");

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.03; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.05; letter-spacing: -0.028em; }

/* ---------- Brand ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
}
/* The logo: the foil seal set into navy security print (docs/design.md).
   Built from pseudo-elements, so it scales with its box and works anywhere. */
.mark {
  position: relative;
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border-radius: 22%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .18) 80%),
    var(--fine-print) 0 0 / 55% 13.75% repeat,
    #1c2856;
}
.mark::before, .mark::after { content: ""; position: absolute; inset: 19%; border-radius: 50%; }
.mark::before { background: conic-gradient(from 210deg, #cbdcff, #f0d3f0, #fdeecb, #cdf0e0, #cbd8ff, #e6d2ff, #cbdcff); animation: mark-foil 16s linear infinite; }
.mark::after {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 46%),
    var(--rosette) center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .75), 0 0 0 .5px rgba(0, 0, 0, .3);
}
@keyframes mark-foil { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .mark::before { animation: none; } }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font: 500 15px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(20, 20, 18, .12);
  transition: background .2s;
}
.btn:hover { background: var(--navy); }
.btn:active { transform: translateY(.5px); }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.is-solid { border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav .brand .mark { width: 24px; height: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

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

.hero { --h-bg: var(--paper); --h-ink: var(--ink); --h-dim: #a6a69f; --h-text: var(--ink-2); }
.hero { overflow: hidden; background: var(--h-bg); color: var(--h-ink); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  min-height: min(calc(100svh - 64px), 820px);
}
.hero-copy { grid-column: 1 / span 6; align-self: center; padding: 56px 0 104px; position: relative; z-index: 1; }
.hero h1 { max-width: 11.5em; font-size: clamp(38px, 3.9vw, 56px); line-height: 1.05; }
.hero h1 span { display: block; color: var(--h-dim); }
.lede {
  margin-top: 32px;
  max-width: 26em;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--h-text);
  text-wrap: pretty;
}
.hero .btn { margin-top: 40px; }

/* The kit is laid out on a fixed 100 × 94 board (in cqw) and scaled to fit
   its column either way: label in the middle, card under its lower left
   corner, notification over its upper right. */
.hero-art { grid-column: 7 / -1; position: relative; }
.kit { position: absolute; inset: 0; container-type: size; }
.stack {
  position: absolute;
  left: 46%;
  top: 50%;
  width: min(114cqw, 98cqh);
  aspect-ratio: 1 / .94;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
.stack > * { position: absolute; }
.label-wrap { left: 30cqw; top: 13cqw; width: 46cqw; container-type: inline-size; }

/* The card */
.pcard {
  left: 2cqw;
  top: 63cqw;
  width: 52cqw;
  aspect-ratio: 1.586;
  border-radius: 4.7cqw;
  overflow: hidden;
  background:
    var(--weave-light) 0 0 / 7.3cqw 2.75cqw repeat,
    linear-gradient(155deg, #3c4669 0%, #1c2856 45%, #141d3e 100%);
  color: #eceef4;
  box-shadow:
    inset 0 0 0 .35cqw rgba(255, 255, 255, .1),
    inset 0 .35cqw 0 rgba(255, 255, 255, .08),
    0 .3cqw .6cqw rgba(0, 0, 0, .12),
    0 4cqw 8cqw -2cqw rgba(0, 0, 0, .22),
    0 10cqw 18cqw -6cqw rgba(0, 0, 0, .18);
  container-type: inline-size;
}
.pcard > * { position: absolute; }
.pc-brand { left: 7cqw; top: 7cqw; display: flex; align-items: center; gap: 2.2cqw; font-size: 5.6cqw; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
/* On a persona card the brand is the seal alone, as in the apps */
.pc-brand .mark { width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: none; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .28); }
.pc-brand .mark::before, .pc-brand .mark::after { inset: 0; }
.pc-type { right: 7cqw; top: 7.6cqw; font-size: 3.5cqw; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.pc-chip {
  left: 7cqw;
  top: 32cqw;
  width: 12cqw;
  height: 9.4cqw;
  border-radius: 1.6cqw;
  background:
    linear-gradient(90deg, transparent 32%, rgba(70, 58, 30, .4) 32% 34%, transparent 34% 66%, rgba(70, 58, 30, .4) 66% 68%, transparent 68%),
    linear-gradient(0deg, transparent 46%, rgba(70, 58, 30, .4) 46% 54%, transparent 54%),
    linear-gradient(135deg, #d8c99e, #a8956a);
}
.pc-num { right: 7cqw; bottom: 8cqw; font: 4cqw/1.3 var(--mono); letter-spacing: .04em; opacity: .85; }
.pc-name { left: 7cqw; bottom: 13.5cqw; font-size: 4.8cqw; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.pc-co { left: 7cqw; bottom: 8cqw; font: 3.4cqw/1.3 var(--mono); opacity: .7; }

/* The notification */
.notif {
  left: 50cqw;
  top: 2cqw;
  width: 50cqw;
  display: flex;
  gap: 2.4cqw;
  padding: 2.6cqw 3cqw 2.8cqw;
  border-radius: 3.4cqw;
  background: #fff;
  box-shadow:
    0 0 0 .1cqw rgba(0, 0, 0, .05),
    0 1cqw 2cqw rgba(0, 0, 0, .06),
    0 6cqw 12cqw -4cqw rgba(0, 0, 0, .16);
  font-family: -apple-system, "SF Pro Text", var(--sans);
  color: #111;
  z-index: 2;
}
.nt-icon { flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 1.7cqw; background: var(--ink); }
/* The notification's app icon is the logo itself */
.nt-icon .mark { width: 100%; height: 100%; border-radius: inherit; }
.nt-body { flex: 1; min-width: 0; font-size: 2.3cqw; line-height: 1.32; }
.nt-top { display: flex; justify-content: space-between; color: #8a8a86; font-size: 2.1cqw; }
.nt-title { margin-top: .4cqw; font-weight: 600; }
.nt-body p:last-child { color: #333; }

/* The shipping label */
.ship {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100cqw;
  height: 150cqw;
  padding: 4.5cqw 5cqw 4cqw;
  background: #fdfdfb;
  box-shadow:
    0 0 0 .2cqw rgba(0, 0, 0, .03),
    0 .3cqw .6cqw rgba(0, 0, 0, .06),
    0 4cqw 8cqw -2cqw rgba(0, 0, 0, .1),
    0 14cqw 24cqw -8cqw rgba(0, 0, 0, .14);
  font: 700 3cqw/1.2 var(--label);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #121212;
}
.ship p { margin: 0; }
.s-rule { flex: none; height: .9cqw; margin: 2.6cqw -5cqw; background: #121212; }
.s-small { font-size: 2.7cqw; font-weight: 400; }
.s-top { display: flex; justify-content: space-between; align-items: flex-start; }
.s-from { font-size: 2.7cqw; font-weight: 400; line-height: 1.32; }
.s-wt { font-size: 4.4cqw; text-align: right; line-height: 1.1; }
.s-wt span { display: block; font-size: 2.7cqw; font-weight: 400; margin-top: .8cqw; }
.s-to { display: flex; flex-direction: column; align-items: flex-start; }
.s-to .s-small { margin-bottom: 1.4cqw; }
.s-to > .sw { margin-left: 6cqw; font-size: 5.1cqw; line-height: 1.3; white-space: nowrap; }
.s-mid { display: grid; grid-template-columns: 27cqw minmax(0, 1fr); gap: 5cqw; align-items: center; }
.s-maxi { width: 27cqw; height: 27cqw; color: #121212; }
.s-route { font-size: 8.4cqw; line-height: 1; letter-spacing: -.01em; white-space: nowrap; justify-items: start; }
.s-imb { display: block; width: 100%; height: 4.4cqw; margin-top: 3.4cqw; color: #121212; }
.s-svc { display: grid; grid-template-columns: 15cqw minmax(0, 1fr); gap: 4cqw; align-items: center; }
.s-g { display: grid; place-items: center; width: 15cqw; height: 15cqw; background: #121212; color: #fdfdfb; font-size: 11cqw; line-height: 1; }
.ship .s-ground { font-size: 7cqw; line-height: 1; margin-bottom: 1.6cqw; }
.s-code { flex: 1; width: calc(100% - 4cqw); min-height: 0; margin: 0 2cqw; color: #121212; }
.s-foot { display: flex; justify-content: space-between; margin-top: 2.2cqw; font-size: 2.5cqw; font-weight: 400; }
.ship .sw > .bar { inset: .02em -.25em; }

.js .hero-art .ship, .js .hero-art .pcard, .js .hero-art .notif { opacity: 0; }
.js .hero-art.is-in .ship { animation: rise 1.3s var(--ease) .1s forwards; }
.js .hero-art.is-in .pcard { animation: rise 1.3s var(--ease) .45s forwards; }
.js .hero-art .notif.is-in { animation: drop .8s var(--ease) forwards; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6cqw); }
  to   { opacity: 1; transform: none; }
}
@keyframes drop {
  from { opacity: 0; transform: translateY(-3cqw) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-art .ship, .js .hero-art .pcard, .js .hero-art .notif { opacity: 1; }
  .js .hero-art.is-in .ship, .js .hero-art.is-in .pcard, .js .hero-art .notif.is-in { animation: none; }
}

/* ---------- Sections ---------- */

.section { padding: clamp(80px, 10vw, 144px) 0 0; }
.section:last-of-type { padding-bottom: clamp(80px, 10vw, 144px); }

/* Section heading: a label in the margin, the heading in the text column */
.head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  position: relative;
}
.head::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 0;
  border-top: 1px solid var(--rule-2);
}
.head > .label { grid-column: 1 / span 2; padding-top: 14px; }
.head > :not(.label) { grid-column: 3 / -1; padding-top: 44px; }
.label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}
.head-main p {
  margin-top: 20px;
  max-width: 30em;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- Redaction swap ---------- */

.sw { position: relative; display: grid; }
span.sw { display: inline-grid; }
.sw > .r, .sw > .p { grid-area: 1 / 1; }
.sw > .p { visibility: hidden; }
.sw.is-p > .p { visibility: visible; }
.sw.is-p > .r { visibility: hidden; }

.sw > .bar {
  position: absolute;
  inset: -.06em -.28em;
  background: var(--censor);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.sw.wiping > .bar {
  animation:
    redact var(--wipe, .9s) cubic-bezier(.7, 0, .3, 1) forwards,
    drift 1.4s linear infinite;
}
@keyframes redact {
  0%       { clip-path: inset(0 100% 0 0); }
  42%, 58% { clip-path: inset(0 0 0 0); }
  100%     { clip-path: inset(0 0 0 100%); }
}
@keyframes drift {
  from { background-position: 0 0, 0 50%, 0 0; }
  to   { background-position: 0 0, 24px 50%, 0 0; }
}

/* ---------- Story: three orders ---------- */

.story-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  margin-top: 24px;
}
.steps { grid-column: 3 / span 4; grid-row: 1; }
.stage-col { grid-column: 7 / -1; grid-row: 1; }

.step {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
  opacity: .22;
  transition: opacity .45s;
}
.step.is-active { opacity: 1; }
.step h3 { margin-bottom: 12px; font-size: clamp(23px, 2vw, 28px); line-height: 1.12; letter-spacing: -0.022em; }
.step p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 23em; text-wrap: pretty; }
.step .toggle { margin-top: 28px; }

.stage {
  position: sticky;
  top: var(--stage-top, 120px);
  width: calc(440px * var(--s, 1));
  height: calc(500px * var(--s, 1));
  margin: 0 0 0 auto;
}
.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 500px;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  font-size: 11px;
  line-height: 1.35;
}
.canvas > * { position: absolute; }
.canvas .sw > .p { color: var(--blue); }

.co-checkout, .co-dossier, .co-page, .co-copy {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 0 0 .75px var(--rule-2);
}
.co-copy { border-radius: 8px; }
/* Each shop gets its own "brand" face, as shops do */
.shop { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--c); letter-spacing: -0.01em; }

/* 1. Checkout */
.co-checkout {
  left: 50px;
  top: 40px;
  width: 340px;
  padding: 16px 18px 18px;
  box-shadow: 0 0 0 .75px var(--rule-2), 0 30px 50px -40px rgba(23, 22, 20, .35);
  transition: transform .8s var(--ease), opacity .5s;
}
.ck-head { display: flex; align-items: baseline; gap: 9px; }
.ck-head .shop { font-size: 16px; }
.ck-secure { margin-left: auto; font-size: 10.5px; color: var(--muted); }
.ck-item { display: flex; justify-content: space-between; margin-top: 12px; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 11.5px; }
.ck-fields label { display: block; margin-top: 10px; font-size: 10px; color: var(--muted); }
.ck-fields label span {
  display: block;
  margin-top: 4px;
  padding: 7px 9px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 .75px var(--rule-2);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-pair { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; }
.ck-pay { margin-top: 16px; height: 36px; border-radius: 7px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 12.5px; font-weight: 500; }
.stage:not([data-step="1"]) .co-checkout { transform: translate(-150px, -185px) scale(.3); opacity: 0; }

/* 2–3. Copies */
.co-head {
  left: var(--x);
  top: 0;
  width: 140px;
  height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
  box-shadow: inset 0 -1.5px 0 var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s, transform .5s var(--ease);
}
.co-head .shop { display: block; font-size: 12.5px; line-height: 1.15; }
.co-head small { display: block; font-size: 9.5px; color: var(--muted); line-height: 1.3; }

.co-copy {
  left: var(--x);
  top: var(--y);
  width: 140px;
  height: 64px;
  padding: 8px 10px;
  opacity: 0;
  transform: translate(var(--fx), var(--fy)) scale(.35);
  transition: transform .75s var(--ease) var(--d, 0s), opacity .45s var(--d, 0s);
}
.cp-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.cp-top svg { width: 10px; height: 10px; flex: none; fill: var(--ink); }
.cp-top svg.glyph { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-top b { font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.cp-top i { margin-left: auto; font-style: normal; font-size: 9px; color: var(--muted); white-space: nowrap; }
.cp-line { font-size: 10px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.cp-line mark {
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.stage[data-step="2"] .co-head[data-col="0"] { opacity: 1; transform: translateX(150px); }
.stage[data-step="3"] .co-head { opacity: 1; transform: none; }
.stage[data-step="2"] .co-copy[data-col="0"] { opacity: 1; transform: translateX(150px); }
.stage[data-step="3"] .co-copy { opacity: 1; transform: none; }
.stage[data-step="4"] .co-copy, .stage[data-step="5"] .co-copy, .stage[data-step="6"] .co-copy {
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) scale(.25);
  transition: transform .7s cubic-bezier(.6, 0, .3, 1) var(--d, 0s), opacity .5s .2s;
}

/* Matched-by and also-listed lines */
.co-matchers, .co-also {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 10.5px;
  opacity: 0;
}
.co-matchers-label, .co-also > span:first-child { color: var(--muted); margin-right: 7px; }
.mchip { font-weight: 500; color: var(--ink); }
.mchip + .mchip::before { content: "\00b7"; margin: 0 6px; color: var(--muted); font-weight: 400; }

/* 4. Matched profile */
.co-matchers {
  left: 0;
  top: 22px;
  width: 440px;
  transform: translateY(8px);
  transition: opacity .4s, transform .5s var(--ease);
}
.co-dossier {
  left: 40px;
  top: 60px;
  width: 360px;
  overflow: hidden;
  box-shadow: 0 0 0 .75px var(--rule-2), 0 30px 50px -40px rgba(23, 22, 20, .35);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .5s, transform .7s var(--ease);
}
.ds-head {
  display: flex;
  justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--type);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ds-name { padding: 14px 16px 8px; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.ds-name span { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-left: 4px; }
.ds-rows { padding: 0 16px; }
.ds-rows > div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  opacity: 0;
  transition: opacity .4s;
}
.ds-rows dt { font-size: 10px; color: var(--muted); }
.ds-rows dd { font-size: 11.5px; }
.ds-rows em { font-style: normal; font-size: 9.5px; font-weight: 500; color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-guess { padding: 10px 16px 14px; border-top: 1px solid var(--rule); opacity: 0; transition: opacity .4s; }
.ds-guess p { font-size: 10px; color: var(--muted); margin-bottom: 3px; }
.ds-guess span { font-size: 11.5px; font-style: italic; color: var(--ink); }
.ds-guess span + span::before { content: ", "; font-style: normal; }
.stage[data-step="4"] .co-matchers { opacity: 1; transform: none; transition-delay: .5s; }
.stage[data-step="4"] .co-dossier { opacity: 1; transform: none; transition-delay: .35s; }
.stage[data-step="4"] .ds-rows > div, .stage[data-step="4"] .ds-guess { opacity: 1; }
.stage[data-step="4"] .ds-rows > div:nth-child(1) { transition-delay: .7s; }
.stage[data-step="4"] .ds-rows > div:nth-child(2) { transition-delay: .82s; }
.stage[data-step="4"] .ds-rows > div:nth-child(3) { transition-delay: .94s; }
.stage[data-step="4"] .ds-rows > div:nth-child(4) { transition-delay: 1.06s; }
.stage[data-step="4"] .ds-rows > div:nth-child(5) { transition-delay: 1.18s; }
.stage[data-step="4"] .ds-guess { transition-delay: 1.4s; }
.stage[data-step="5"] .co-dossier, .stage[data-step="6"] .co-dossier { transform: translateY(-12px) scale(.98); }

/* 5–6. People-search listing */
.co-page {
  left: 10px;
  top: 0;
  width: 420px;
  overflow: hidden;
  box-shadow: 0 0 0 .75px var(--rule-2), 0 30px 50px -40px rgba(23, 22, 20, .35);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s, transform .7s var(--ease);
}
.pg-bar { display: flex; align-items: center; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--rule); background: var(--field); }
.pg-url { flex: 1; align-items: center; font-size: 10px; color: var(--muted); }
.canvas .pg-url.sw > .p { color: var(--muted); }
.pg-body { padding: 16px 18px 18px; }
.pg-name { font-size: 23px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; justify-items: start; }
.pg-sub { margin: 3px 0 12px; font-size: 11.5px; color: var(--muted); justify-items: start; }
.canvas .pg-sub.sw > .p { color: var(--muted); }
.pg-map { height: 128px; overflow: hidden; }
.pg-map > .r, .pg-map > .p { display: block; }
.pg-map svg { display: block; width: 100%; height: 128px; }
.pg-map.sw > .bar { inset: 0; }
.pg-rows { margin-top: 10px; }
.pg-rows > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule); }
.pg-rows dt { font-size: 10px; color: var(--muted); }
.pg-rows dd { font-size: 11.5px; justify-items: start; }
.pg-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink-2); }
.pg-cta b { padding: 5px 10px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 500; }
.co-also {
  left: 10px;
  top: 452px;
  width: 420px;
  transition: opacity .5s;
}
.stage[data-step="5"] .co-page, .stage[data-step="6"] .co-page { opacity: 1; transform: none; transition-delay: .3s; }
.stage[data-step="5"] .co-also, .stage[data-step="6"] .co-also { opacity: 1; transition-delay: .8s; }

@media (prefers-reduced-motion: reduce) {
  .canvas *, .canvas { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ---------- Toggle ---------- */

.toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 10px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.toggle-btn {
  position: relative;
  z-index: 1;
  height: 34px;
  padding: 0 16px;
  border: 0;
  background: none;
  font: 500 14px/1 var(--sans);
  color: var(--muted);
  cursor: pointer;
  transition: color .3s;
  white-space: nowrap;
}
.toggle-btn[aria-pressed="true"] { color: var(--paper); }
.toggle-thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 7px;
  background: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 20, 18, .2);
  transition: transform .4s var(--ease), background .4s;
}
.toggle[data-mode="persona"] .toggle-thumb { transform: translateX(100%); background: var(--navy); }

/* ---------- FAQ ---------- */

.head-flush > :not(.label) { padding-top: 14px; }
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 48px;
}
.faq > div { max-width: 31em; }
.faq dt { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.faq dd { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }

/* ---------- Request ---------- */

.request-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: 24px;
}
.request-copy { grid-column: 1 / span 4; }
.form-wrap { grid-column: 6 / -1; padding-top: 10px; }
.request-copy > p {
  margin-top: 22px;
  max-width: 22em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  padding: 11px 13px;
  background: var(--white);
  box-shadow: 0 1px 1px rgba(20, 20, 18, .03);
  font: 400 16px/1.4 var(--sans);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .12s, box-shadow .12s;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-2) 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field select:invalid { color: var(--muted); }
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus); }
.form-error {
  margin: 0 0 20px;
  padding: 11px 14px;
  border-radius: 9px;
  background: var(--code-bg);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.form-error { background: color-mix(in srgb, var(--red) 9%, transparent); color: var(--red); }
.hp { position: absolute; left: -9999px; }
.thanks { padding-top: 4px; }
.thanks-title { font-size: 36px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.thanks p + p { margin-top: 10px; font-size: 17px; color: var(--ink-2); }

/* ---------- Footer ---------- */

.weave { height: 44px; background: var(--censor); }
.footer-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: baseline;
  padding-top: 28px;
  padding-bottom: 40px;
  font-size: 13px;
  color: var(--muted);
}
.footer-inner .brand { grid-column: 1 / span 2; font-size: 17px; color: var(--ink); }
.footer-inner .brand .mark { width: 20px; height: 20px; }
.footer-inner p:nth-of-type(1) { grid-column: 3 / span 6; }
.footer-inner p:nth-of-type(2) { grid-column: 10 / -1; text-align: right; }
.footer-inner a:not(.brand) { text-decoration: none; }
.footer-inner a:not(.brand):hover { color: var(--ink); }

/* ---------- Legal pages ---------- */

.legal { max-width: 40em; margin: 0 auto; padding: 72px 0 120px; }
.legal h1 { font-size: clamp(36px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.028em; }
.legal-meta { margin-top: 12px; font-size: 14px; color: var(--muted); }
.legal h2 { margin-top: 44px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.legal h2 + p, .legal h2 + ul { margin-top: 16px; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal .legal-meta + p { margin-top: 28px; }
.legal ul { padding-left: 1.2em; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: var(--muted); }
.legal b { font-weight: 500; color: var(--ink); }
.legal a { color: var(--blue); text-underline-offset: 2px; }

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

@media (max-width: 1080px) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero-art { grid-column: 7 / -1; }
  .head > .label { grid-column: 1 / -1; }
  .head > :not(.label) { grid-column: 1 / -1; padding-top: 28px; }
  .head-flush > :not(.label) { padding-top: 28px; }
  .steps { grid-column: 1 / span 5; }
  .stage-col { grid-column: 6 / -1; }
}

@media (max-width: 920px) {
  .hero-grid { min-height: 0; }
  .hero-copy, .hero-art { grid-column: 1 / -1; }
  .hero-copy { padding: 40px 0 56px; }
  .hero-art { height: min(100vw, 560px); }
  .stack { left: 50%; width: min(94cqw, 98cqh); }
  .hero-copy { padding-bottom: 24px; }
  .story-grid { display: block; }
  .stage-col {
    position: sticky;
    top: 64px;
    z-index: 2;
    margin: 0 calc(var(--gutter) * -1);
    padding: 14px var(--gutter);
    background: var(--paper);
    box-shadow: 0 1px 0 var(--rule);
  }
  .stage { position: relative; top: auto; margin: 0 auto; }
  .step { min-height: 62vh; padding: 24px 0; }
  .request-copy, .form-wrap { grid-column: 1 / -1; }
  .request-grid { grid-template-columns: 1fr; }
  .form-wrap { margin-top: 40px; padding-top: 0; }
  .faq { grid-template-columns: 1fr; row-gap: 36px; }
  .footer-inner { grid-template-columns: 1fr; row-gap: 10px; }
  .footer-inner > * { grid-column: 1 / -1 !important; text-align: left !important; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(38px, 10.6vw, 52px); }
  .hero .btn { width: 100%; }
  .hero-art { height: 104vw; }
  .toggle { display: grid; width: 100%; }
  .field-pair { grid-template-columns: 1fr; gap: 0; }
}