/* ==========================================================================
   iza-gtc: the iza.ai pre-launch page, in the approved landing's language
   (IZA-V4 lane v10fn "Cross it off": paper and ink, Minimal arrangement,
   founder-violet ink, Inter). Token values are the landing's own, derived
   from ink.ts for the default preset; component rules are ported from
   apps/hub/public/landing/landing.css, trimmed to what this page uses.
   No inline styles anywhere (CSP style-src 'self').
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Swap-time metrics (the landing's tokens.css). */
@font-face {
  font-family: "Inter-fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  ascent-override: 90.21%;
  descent-override: 22.46%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

:root {
  /* Ink tokens: founder violet (ink.ts, inkCss(presetChoice("founder-violet"))). */
  --pi-ink: #5769f7;
  --pi-ink-text: #4d5cea;
  --pi-action: #5667f5;
  --pi-action-deep: #4753e0;
  --pi-wash: #f4f6ff;
  --pi-tint: #eaefff;
  --pi-rule: #c9d3f9;
  --pi-margin: #aabbf8;
  --pi-hair: #e4e6ed;
  --pi-hair-strong: #c9ccd6;
  --pi-graphite: #54596b;
  --pi-faint: #646a7c;
  --pi-edge: #8a8fa3;
  --pi-shadow: 11 12 64;
  --pi-danger: #b91c1c;

  --font-sans: "Inter", "Inter-fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 260ms;
  --dur-press: 120ms;
}

.pi {
  --pi-paper: #ffffff;
  --pi-type: #000000;

  --pi-wrap: 1280px;
  --pi-gutter: clamp(20px, 4vw, 56px);
  --pi-space: clamp(64px, 7.5vw, 112px);
  --pi-nav-h: 60px;

  --pi-fs-h1: clamp(2.75rem, 1.2rem + 4.9vw, 5.5rem);
  --pi-fs-h2: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
  --pi-fs-h3: 1.25rem;
  --pi-fs-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --pi-fs-body: 1rem;
  --pi-fs-sm: 0.875rem;
  --pi-fs-xs: 0.8125rem;

  --pi-shadow-paper:
    0 1px 1px rgb(var(--pi-shadow) / 0.06), 0 3px 8px -2px rgb(var(--pi-shadow) / 0.1),
    0 28px 56px -28px rgb(var(--pi-shadow) / 0.42);

  --pi-font: var(--font-sans);

  /* Surface tokens (Minimal arrangement: paper everywhere). */
  --s-bg: var(--pi-paper);
  --s-fg: var(--pi-type);
  --s-fg2: var(--pi-graphite);
  --s-fg3: var(--pi-faint);
  --s-accent: var(--pi-ink);
  --s-accent-text: var(--pi-ink-text);
  --s-mark: var(--pi-ink);
  --s-hair: var(--pi-hair);
  --s-cta-bg: var(--pi-action);
  --s-cta-fg: var(--pi-paper);
  --s-cta-hover: var(--pi-action-deep);
  --s-focus: var(--pi-ink);

  margin: 0;
  background: var(--pi-paper);
  color: var(--pi-type);
  font-family: var(--pi-font);
  font-size: var(--pi-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.pi-root {
  scroll-padding-top: 80px;
  background: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
  .pi-root {
    scroll-behavior: smooth;
  }
}

.pi [hidden] {
  display: none !important;
}

.pi ::selection {
  background: var(--pi-action);
  color: #ffffff;
}

.pi :focus-visible {
  outline: 2.5px solid var(--s-focus);
  outline-offset: 3px;
}

:where(.pi) *,
:where(.pi) *::before,
:where(.pi) *::after {
  box-sizing: border-box;
}

:where(.pi) a {
  color: inherit;
}

:where(.pi) :where(p, h1, h2, h3, h4, ul, ol, dl, dd, figure, fieldset) {
  margin: 0;
}

:where(.pi) :where(ul, ol) {
  padding: 0;
  list-style: none;
}

:where(.pi) fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

#main:focus {
  outline: none;
}

.pi-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pi-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--pi-action);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.pi-skip:focus-visible {
  transform: none;
  outline-color: var(--pi-type);
}

.pi-wrap {
  width: min(100%, var(--pi-wrap));
  margin-inline: auto;
  padding-inline: var(--pi-gutter);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.pi-h1 {
  font-size: var(--pi-fs-h1);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.pi-h2 {
  font-size: var(--pi-fs-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.pi-lead {
  max-width: 36em;
  color: var(--s-fg2);
  font-size: var(--pi-fs-lead);
  line-height: 1.45;
  text-wrap: pretty;
}

.pi-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(32px, 3.75vw, 56px);
}

@media (min-width: 1024px) {
  .pi-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    gap: 56px;
  }
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.pi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--s-cta-bg);
  color: var(--s-cta-fg);
  font: 600 var(--pi-fs-body) / 1 var(--pi-font);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 -2px 0 rgb(var(--pi-shadow) / 0.16),
    0 1px 2px rgb(var(--pi-shadow) / 0.22);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-press) var(--ease-standard);
}

.pi-btn:hover {
  background: var(--s-cta-hover);
}

.pi-btn:active {
  transform: translateY(1px) scale(0.985);
}

.pi-btn[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
}

.pi-btn-sm {
  min-height: 38px;
  padding: 0 18px;
  font-size: var(--pi-fs-sm);
}

.pi-btn-block {
  display: flex;
  width: 100%;
}

.pi-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--s-mark);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color var(--dur-fast) var(--ease-standard);
}

.pi-link:hover {
  color: var(--s-accent-text);
}

.pi-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.pi-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  color: var(--s-fg2);
  font-size: var(--pi-fs-sm);
}

.pi-assure li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pi-tick {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--s-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Nav: a paper bar
   -------------------------------------------------------------------------- */

.pi-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.94);
  border-bottom: 1px solid var(--s-hair);
}

@supports (backdrop-filter: blur(8px)) {
  .pi-nav {
    background: rgb(255 255 255 / 0.82);
    backdrop-filter: saturate(1.4) blur(10px);
  }
}

.pi-nav-bar {
  display: flex;
  align-items: center;
  gap: 36px;
  height: var(--pi-nav-h);
}

.pi-nav-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--s-fg);
}

.pi-logo {
  display: block;
  width: 58px;
  height: auto;
  fill: currentColor;
}

.pi-nav-links {
  display: none;
}

@media (min-width: 900px) {
  .pi-nav-links {
    display: flex;
    gap: 28px;
  }
}

.pi-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--s-fg);
  font-size: var(--pi-fs-sm);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.pi-nav-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--s-mark);
}

.pi-nav-account {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Hero: the promise on the left, the sign-up sheet on the right.
   The approved H1 is twice the landing's length, so the hero sets the H1 one
   notch down (as the landing's own mono variant does) to keep four lines.
   -------------------------------------------------------------------------- */

.pi-hero {
  position: relative;
  padding-block: clamp(28px, 4vw, 60px) clamp(56px, 6.5vw, 96px);
  overflow-x: clip;
  --pi-fs-h1: clamp(2.5rem, 1.25rem + 3.6vw, 4.25rem);
}

.pi-hero-grid {
  display: grid;
  gap: clamp(40px, 7vw, 64px);
}

@media (min-width: 1024px) {
  .pi-hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(400px, 0.88fr);
    align-items: start;
    gap: clamp(40px, 4vw, 72px);
  }
  .pi-hero-copy {
    position: sticky;
    top: calc(var(--pi-nav-h) + 36px);
  }
}

.pi-hero-copy {
  display: grid;
  align-content: start;
  gap: 24px;
  padding-top: clamp(8px, 2vw, 32px);
}

@media (min-width: 640px) {
  .pi-h1 > span {
    display: block;
  }
}

.pi-hero-lead {
  max-width: 32em;
  color: var(--s-fg2);
  font-size: var(--pi-fs-lead);
  line-height: 1.45;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   The pad: top-bound notepad, ruled lines, a margin, two sheets underneath.
   Here it is the waitlist's sign-up sheet.
   -------------------------------------------------------------------------- */

.pi-hero-pad {
  position: relative;
  padding-bottom: 14px;
}

.pi-pad {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
}

.pi-pad::before,
.pi-pad::after {
  content: "";
  position: absolute;
  inset: 18px 0 0;
  border-radius: 3px 3px 6px 6px;
  background: var(--pi-paper);
  box-shadow: var(--pi-shadow-paper);
}

.pi-pad::before {
  transform: translate(5px, 9px) rotate(1.1deg);
}

.pi-pad::after {
  transform: translate(-4px, 6px) rotate(-0.9deg);
}

@media (min-width: 1024px) {
  .pi-pad::before {
    transform: translate(10px, 9px) rotate(1.8deg);
  }
  .pi-pad::after {
    transform: translate(-6px, 6px) rotate(-1.2deg);
  }
  /* The form sheet itself stays square, so its text and inputs render crisp;
     the sheets underneath keep the landing's off-square stack. */
  .pi-hero-pad .pi-pad {
    margin-top: 10px;
  }
}

.pi-pad-sheet {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 3px 3px 6px 6px;
  background:
    linear-gradient(90deg, transparent 55px, var(--pi-margin) 55px, var(--pi-margin) 56px, transparent 56px) 0 0 / 100%
      100% no-repeat,
    var(--pi-paper);
  box-shadow: var(--pi-shadow-paper);
}

/* Gummed binding strip and a row of perforations under it. */
.pi-pad-sheet::before {
  content: "";
  display: block;
  height: 22px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), transparent 45%), var(--pi-type);
}

.pi-pad-sheet::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 0;
  right: 0;
  height: 4px;
  background: radial-gradient(circle, var(--pi-hair-strong) 1.2px, transparent 1.6px) 4px 0 / 10px 4px repeat-x;
}

.pi-pad-head {
  padding: 22px 22px 14px 72px;
  border-bottom: 1px solid var(--pi-rule);
}

.pi-pad-h {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.pi-pad-h:focus {
  outline: none;
}

.pi-pad-sub {
  margin-top: 4px;
  color: var(--pi-graphite);
  font-size: var(--pi-fs-sm);
  line-height: 1.45;
}

/* Form rows sit on the ruled lines, right of the margin. */
.pi-join {
  display: grid;
}

.pi-join-summary {
  margin: 0;
  padding: 12px 22px 12px 72px;
  border-bottom: 1px solid var(--pi-rule);
  background: #fff5f5;
  color: var(--pi-danger);
  font-size: var(--pi-fs-sm);
  font-weight: 500;
}

.pi-join-summary:focus {
  outline: none;
}

.pi-field {
  display: grid;
  gap: 6px;
  padding: 14px 22px 14px 72px;
  border-bottom: 1px solid var(--pi-rule);
}

.pi-label {
  font-size: var(--pi-fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.pi-opt {
  color: var(--pi-faint);
  font-weight: 400;
}

.pi-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--pi-edge);
  border-radius: 10px;
  background: var(--pi-paper);
  color: var(--pi-type);
  font: 400 var(--pi-fs-body) / 1.3 var(--pi-font);
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.pi-input:hover {
  border-color: var(--pi-graphite);
}

.pi-input:focus-visible {
  outline: 2.5px solid var(--pi-ink);
  outline-offset: 1px;
  border-color: var(--pi-ink);
}

.pi-input[aria-invalid="true"] {
  border-color: var(--pi-danger);
}

.pi-select {
  appearance: none;
  padding-right: 40px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2354596b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      right 14px center / 12px 8px no-repeat,
    var(--pi-paper);
}

.pi-field-err {
  color: var(--pi-danger);
  font-size: var(--pi-fs-sm);
  font-weight: 500;
}

.pi-svc {
  border-bottom: 1px solid var(--pi-rule);
}

.pi-svc legend {
  float: left;
  width: 100%;
  padding: 14px 22px 0 72px;
}

.pi-svc-hint {
  clear: both;
  padding: 2px 22px 8px 72px;
  color: var(--pi-faint);
  font-size: var(--pi-fs-xs);
}

.pi-svc > .pi-field-err {
  padding: 0 22px 10px 72px;
}

/* A ticked line, as on the landing's pad. */
.pi-line {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  padding: 6px 22px 6px 0;
  border-top: 1px solid var(--pi-rule);
  cursor: pointer;
}

.pi-line-input,
.pi-check-input {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pi-line-input {
  top: 50%;
  left: 15px;
  margin-top: -13px;
}

.pi-box {
  width: 26px;
  height: 26px;
  justify-self: center;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  border-radius: 6px;
}

.pi-box-edge {
  stroke: var(--pi-type);
  stroke-width: 1.5;
}

.pi-box-tick {
  stroke: var(--pi-ink);
  stroke-width: 2.6;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}

:is(.pi-line-input, .pi-check-input):checked ~ .pi-box .pi-box-tick {
  stroke-dashoffset: 0;
}

:is(.pi-line-input, .pi-check-input):focus-visible ~ .pi-box {
  outline: 2.5px solid var(--pi-ink);
  outline-offset: 2px;
}

.pi-check-input[aria-invalid="true"] ~ .pi-box .pi-box-edge {
  stroke: var(--pi-danger);
  stroke-width: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .pi-box-tick {
    transition: stroke-dashoffset 260ms var(--ease-out-expo);
  }
}

.pi-line:hover {
  background: var(--pi-wash);
}

.pi-line-body {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding-left: 14px;
}

.pi-line-chore {
  font-size: var(--pi-fs-body);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pi-line-studio {
  color: var(--pi-faint);
  font-size: var(--pi-fs-xs);
}

.pi-line-price {
  min-width: 2.2em;
  padding-left: 14px;
  color: var(--pi-faint);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}

.pi-line-input:checked ~ .pi-line-price {
  color: var(--pi-ink-text);
}

.pi-consent {
  display: grid;
  gap: 6px;
  padding: 14px 22px 14px 0;
  border-bottom: 1px solid var(--pi-rule);
}

.pi-check {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  font-size: var(--pi-fs-sm);
  line-height: 1.45;
  cursor: pointer;
}

.pi-check .pi-check-input {
  top: 0;
  left: 15px;
}

.pi-check .pi-box {
  margin-top: -3px;
}

.pi-check > span {
  padding-left: 14px;
}

.pi-consent-link,
.pi-consent > .pi-field-err {
  padding-left: 70px;
  font-size: var(--pi-fs-sm);
}

.pi-consent-link {
  color: var(--pi-graphite);
}

.pi-consent-link a,
.pi-join-note a,
.pi-doc a,
.pi-msg-sheet p a {
  color: var(--pi-ink-text);
  font-weight: 500;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Honeypot: off-screen, not focusable, hidden from assistive tech. */
.pi-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pi-join-foot {
  display: grid;
  gap: 10px;
  padding: 18px 22px 22px 72px;
}

.pi-join-note {
  color: var(--pi-faint);
  font-size: var(--pi-fs-xs);
}

/* /confirm: the pad comes back for one press. */
.pi-confirm {
  display: grid;
}

.pi-confirm-h {
  font-size: 1.75rem;
  letter-spacing: -0.035em;
}

.pi-confirm-who {
  display: grid;
  gap: 4px;
  padding: 14px 22px 14px 72px;
  border-bottom: 1px solid var(--pi-rule);
}

.pi-confirm-who strong {
  font-size: 1.0625rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* /pass (founder pass, unlinked): the confirm pad with one code field. The code is set
   larger and tracked open, so its four groups can be checked letter by letter on a phone. */
.pi-code {
  min-height: 54px;
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-variant-ligatures: none;
}

.pi-code-hint {
  color: var(--pi-faint);
  font-size: var(--pi-fs-xs);
}

.pi-pass-off {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.pi-pass-leave {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pi-ink-text);
  font: 600 var(--pi-fs-sm) / 1 var(--pi-font);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.pi-pass-leave:hover {
  color: var(--pi-type);
}

.pi-pass .pi-join-summary p strong {
  display: block;
}

/* Success, in the pad (JS) and on /joined. */
.pi-joined {
  display: grid;
  gap: 12px;
  padding: 26px 26px 30px 72px;
  min-height: 280px;
  align-content: start;
}

.pi-joined p {
  color: var(--pi-graphite);
  font-size: var(--pi-fs-body);
  line-height: 1.5;
}

.pi-joined p strong {
  color: var(--pi-type);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pi-joined .pi-joined-small {
  font-size: var(--pi-fs-sm);
}

.pi-joined-h {
  font-size: 1.75rem;
  letter-spacing: -0.035em;
}

.pi-msg-mark {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--pi-ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .pi-joined .pi-msg-mark path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: pi-draw 520ms var(--ease-out-expo) 120ms forwards;
  }
}

@keyframes pi-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 479px) {
  .pi-pad-sheet {
    background:
      linear-gradient(90deg, transparent 43px, var(--pi-margin) 43px, var(--pi-margin) 44px, transparent 44px) 0 0 / 100%
        100% no-repeat,
      var(--pi-paper);
  }
  .pi-pad-head,
  .pi-field,
  .pi-join-summary,
  .pi-join-foot,
  .pi-confirm-who,
  .pi-joined {
    padding-left: 58px;
    padding-right: 16px;
  }
  .pi-svc legend,
  .pi-svc-hint,
  .pi-svc > .pi-field-err {
    padding-left: 58px;
    padding-right: 16px;
  }
  .pi-line,
  .pi-check {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .pi-check {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .pi-line {
    padding-right: 16px;
  }
  .pi-line-input,
  .pi-check .pi-check-input {
    left: 9px;
  }
  .pi-consent {
    padding-right: 16px;
  }
  .pi-consent-link,
  .pi-consent > .pi-field-err {
    padding-left: 58px;
  }
}

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

.pi-section {
  padding-block: var(--pi-space);
  border-top: 1px solid var(--pi-rule);
}

/* The portfolio: one folder per job, each a printed price list. */
.pi-folders {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
}

.pi-folder {
  position: relative;
}

.pi-folder-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: -1px;
  padding: 0 20px;
  border: 1px solid var(--pi-hair-strong);
  border-bottom-color: var(--pi-paper);
  border-radius: 10px 10px 0 0;
  background: var(--pi-paper);
  font-size: var(--pi-fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.pi-folder-sheet {
  border: 1px solid var(--pi-hair-strong);
  border-radius: 0 6px 6px 6px;
  background: var(--pi-paper);
  box-shadow: 0 1px 1px rgb(var(--pi-shadow) / 0.04), 0 18px 40px -30px rgb(var(--pi-shadow) / 0.35);
}

.pi-folder-intro {
  padding: 18px clamp(20px, 2.4vw, 32px) 16px;
  border-bottom: 1px solid var(--pi-rule);
  color: var(--pi-graphite);
  font-size: var(--pi-fs-sm);
}

.pi-ledger-row {
  display: grid;
  gap: 4px 32px;
  padding: 18px clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--pi-rule);
}

.pi-ledger-row:first-child {
  border-top: 0;
}

@media (min-width: 900px) {
  .pi-ledger-row {
    grid-template-columns: minmax(200px, 0.9fr) minmax(0, 2fr) minmax(180px, 0.8fr);
    align-items: baseline;
  }
}

.pi-ledger-name {
  font-size: var(--pi-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.pi-ledger-line {
  max-width: 44em;
  color: var(--pi-graphite);
  line-height: 1.5;
}

.pi-ledger-price {
  color: var(--pi-graphite);
  font-size: var(--pi-fs-sm);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .pi-ledger-price {
    text-align: right;
  }
}

.pi-ledger-price strong {
  color: var(--pi-type);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Two commitments. */
.pi-promises {
  display: grid;
  gap: 20px 56px;
}

@media (min-width: 900px) {
  .pi-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pi-promise {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 6px 14px;
  padding: 24px 0;
  border-top: 2px solid var(--pi-type);
}

.pi-promise .pi-tick {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  grid-row: span 2;
}

.pi-promise h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pi-promise p {
  max-width: 34em;
  color: var(--pi-graphite);
}

.pi-facts {
  display: grid;
  gap: 0;
  margin: clamp(28px, 3vw, 44px) 0 0;
  border-top: 1px solid var(--pi-rule);
}

@media (min-width: 720px) {
  .pi-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pi-facts > div {
  display: grid;
  gap: 2px;
  padding: 18px 0;
  border-bottom: 1px solid var(--pi-rule);
}

.pi-facts dt {
  color: var(--pi-graphite);
  font-size: var(--pi-fs-sm);
}

.pi-facts dd {
  margin: 0;
  font-size: var(--pi-fs-body);
  font-variant-numeric: tabular-nums;
}

.pi-facts dd strong {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* The film. */
.pi-film {
  overflow: hidden;
  border-radius: 6px;
  background: var(--pi-type);
  box-shadow: var(--pi-shadow-paper);
}

.pi-film-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* The close. */
.pi-final {
  padding-block: var(--pi-space);
  border-top: 1px solid var(--pi-rule);
  background: var(--pi-wash);
}

.pi-final-grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px) {
  .pi-final-grid {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: end;
    gap: 56px;
  }
}

.pi-final-h {
  font-size: var(--pi-fs-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* What happens next: three moments on one ruled line, in the order they happen.
   Phones read it down a vertical rule; wide screens across a horizontal one. */
.pi-steps {
  display: grid;
  margin-top: clamp(36px, 4.5vw, 64px);
}

.pi-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 0 0 32px 28px;
  border-left: 1.5px solid var(--pi-type);
}

.pi-step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* The stop on the rule. */
.pi-step::before {
  content: "";
  position: absolute;
  top: 3px;
  left: -6.75px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--pi-type);
  border-radius: 50%;
  background: var(--pi-wash);
}

.pi-step-when {
  color: var(--pi-ink-text);
  font-size: var(--pi-fs-sm);
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.pi-step-h {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pi-step-p {
  max-width: 30em;
  color: var(--pi-graphite);
}

@media (min-width: 900px) {
  .pi-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1.5px solid var(--pi-type);
  }

  .pi-step,
  .pi-step:last-child {
    padding: 28px 40px 0 0;
    border-left: 0;
  }

  .pi-step::before {
    top: -6.75px;
    left: 0;
  }
}

/* Message pages: confirm, unsubscribe, errors, /joined. */
.pi-msg {
  padding-block: clamp(48px, 8vw, 120px);
}

.pi-msg-sheet {
  display: grid;
  gap: 16px;
  max-width: 640px;
}

.pi-msg-h {
  font-size: var(--pi-fs-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.pi-msg-sheet p {
  max-width: 36em;
  color: var(--pi-graphite);
  font-size: var(--pi-fs-lead);
  line-height: 1.5;
}

.pi-msg-actions {
  margin-top: 8px;
}

.pi-msg-actions form {
  display: contents;
}

.pi-pad-solo {
  max-width: 480px;
}

.pi-pad-solo .pi-pad,
.pi-pad.pi-pad-solo {
  margin-inline: 0;
}

/* The privacy notice. */
.pi-doc {
  padding-block: clamp(40px, 6vw, 88px) var(--pi-space);
}

.pi-doc-wrap {
  max-width: calc(46rem + 2 * var(--pi-gutter));
  margin-inline: 0;
}

@media (min-width: 1280px) {
  .pi-doc-wrap {
    margin-inline: max(0px, calc((100% - var(--pi-wrap)) / 2));
  }
}

.pi-doc-h {
  margin-bottom: 16px;
}

.pi-doc-meta {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pi-rule);
  color: var(--pi-graphite);
}

.pi-doc h2 {
  margin: 36px 0 10px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.pi-doc p,
.pi-doc li {
  line-height: 1.6;
}

.pi-doc p + p {
  margin-top: 10px;
}

.pi-doc ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 10px;
  padding-left: 1.25em;
  list-style: disc;
}

.pi-doc li::marker {
  color: var(--pi-ink);
}

/* The legal notice: two lines under the heading. */
.pi-imprint {
  display: grid;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--pi-rule);
}

.pi-doc .pi-imprint p {
  margin: 0;
  font-size: var(--pi-fs-lead);
}

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

.pi-footer {
  padding-bottom: 40px;
}

.pi-footer-grid {
  display: grid;
  padding-top: 48px;
  border-top: 1px solid var(--s-hair);
  gap: 36px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .pi-footer-grid {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }
}

.pi-footer-brand {
  display: grid;
  align-content: start;
  gap: 14px;
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .pi-footer-brand {
    grid-column: auto;
  }
}

.pi-footer-brand p {
  color: var(--s-fg2);
  font-size: var(--pi-fs-sm);
}

.pi-footer-col {
  display: grid;
  align-content: start;
  gap: 4px;
}

.pi-footer-h {
  margin-bottom: 6px;
  color: var(--s-fg);
  font-size: var(--pi-fs-sm);
  font-weight: 600;
}

.pi-footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--s-fg2);
  font-size: var(--pi-fs-sm);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pi-footer-col a:hover {
  color: var(--s-fg);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pi-footer-line {
  margin-top: 40px;
  color: var(--s-fg2);
  font-size: var(--pi-fs-xs);
}

.pi-footer-line a {
  text-decoration: underline;
  text-decoration-color: var(--pi-hair-strong);
  text-underline-offset: 3px;
}

.pi-footer-line a:hover {
  color: var(--s-fg);
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .pi *,
  .pi *::before,
  .pi *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
}