/* The brief: one question on screen at a time. Restyled 2026-10-08 to match the v4 home page.
   Self-contained. White page, black type. Pink = something you can act on. Green = one highlighter stroke.
   Neither color is ever used as text on white. */
@font-face { font-family: "Simple Syrup Sans"; font-weight: 400; font-display: swap;
  src: url("fonts/SimpleSyrupSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Simple Syrup Sans"; font-weight: 500; font-display: swap;
  src: url("fonts/SimpleSyrupSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Simple Syrup Sans"; font-weight: 600; font-display: swap;
  src: url("fonts/SimpleSyrupSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap;
  src: url("fonts/GeistMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap;
  src: url("fonts/GeistMono-Medium.ttf") format("truetype"); }

:root {
  --pink: #FD7EE7;
  --green: #DBFE66;
  --black: #080810;
  --dim: #6c6c78;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 2.6vw, 36px);
}
* { box-sizing: border-box; }
body.flow {
  margin: 0; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr;
  background: #fff; color: var(--black);
  font: 400 16px/1.45 "Simple Syrup Sans", "Inter Tight", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--green); color: var(--black); }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.flow [hidden] { display: none !important; }

/* Same film grain as the home page. */
.flow::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .16; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.mark {
  display: inline-block; background: currentColor;
  -webkit-mask: url("img/mark.png") center / contain no-repeat;
          mask: url("img/mark.png") center / contain no-repeat;
}

/* Progress is pink: it is the thing you are doing. */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 5; height: 5px; }
.bar i { display: block; width: 0; height: 100%; background: var(--pink); transition: width .45s cubic-bezier(.2, .7, .2, 1); }

.flow-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px var(--gutter) 13px; border-bottom: 1px solid var(--black);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.brand .mark { width: 26px; height: 26px; }
.flow-top .count { color: var(--dim); }
.flow-top .close:hover { text-decoration: underline; text-underline-offset: 5px; }

/* The question and its Next button stay together. */
.flow-main { align-self: center; width: 100%; padding-block: clamp(20px, 3vw, 40px) 7vh; }
#brief { width: 100%; padding-inline: var(--gutter); }
.step { display: none; }
.step.on { display: block; animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* Questions are set like the titles on the home page. */
h1 {
  margin: 0 0 0 -.045em; max-width: 15ch;
  font-weight: 600; font-size: clamp(38px, 7.6vw, 132px); line-height: .82; letter-spacing: -0.055em; text-transform: uppercase;
}
h1 label { cursor: text; }
/* The one green stroke on this page: their name. */
h1 em {
  font-style: normal; padding: 0 .06em; margin: 0 -.06em;
  background: linear-gradient(transparent 21%, var(--green) 21%, var(--green) 85%, transparent 85%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.step input[type=text], .step input[type=email], .step textarea {
  display: block; width: 100%; max-width: 1100px; margin-top: clamp(22px, 3.4vw, 48px); padding: 8px 0 12px;
  border: 0; border-bottom: 2px solid var(--black); border-radius: 0; background: transparent;
  font-family: inherit; font-weight: 400; font-size: clamp(21px, 2.8vw, 38px); line-height: 1.25;
  letter-spacing: -0.015em; color: var(--black); outline: 0; resize: none;
}
.step input:focus, .step textarea:focus { box-shadow: 0 4px 0 var(--pink); }
.step ::placeholder { color: var(--dim); opacity: .55; }
.step .note { max-width: 52ch; margin: 16px 0 0; font-size: 16px; color: var(--dim); }
.step .note.how { margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; color: var(--black); }
/* An error is a thing to act on, so it gets a pink fill. Black text, never pink text. */
.step .err { margin: 14px 0 0; min-height: 30px; }
.step .err:not(:empty) {
  display: inline-block; padding: 7px 10px; background: var(--pink);
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}

/* Choices: a quiet radio list. Small mono labels and a square marker against the huge question.
   Two earlier tries were rejected: the home page's ruled index rows (a list is not an option), and
   chunky bordered boxes with letter keys (too childish). */
.choices { display: grid; justify-items: start; margin-top: clamp(22px, 3.2vw, 44px); }
.choices button {
  display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 18px 0 0;
  border: 0; border-radius: 0; background: none; color: var(--black);
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-align: left;
  cursor: pointer;
}
.choices button::before {
  content: ""; flex: none; width: 15px; height: 15px; border: 1.5px solid var(--black); transition: background .1s;
}
.choices button:hover::before, .choices button:focus-visible::before { background: var(--pink); }
.choices button:hover, .choices button:focus-visible { text-decoration: underline; text-underline-offset: 5px; outline: 0; }
.choices button[aria-pressed=true]::before { background: var(--black); }

/* The sign-off boxes match the radio list: same marker, same small mono label.
   Ticked, the box is pink with a black check. */
.checks { display: grid; justify-items: start; max-width: 70ch; margin-top: clamp(22px, 3.2vw, 40px); }
.check {
  display: flex; align-items: flex-start; gap: 14px; min-height: 44px; padding: 13px 0;
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1.45; text-transform: uppercase;
  cursor: pointer;
}
.check:hover span { text-decoration: underline; text-underline-offset: 5px; }
.check input {
  -webkit-appearance: none; appearance: none; flex: none; width: 15px; height: 15px; margin: 2px 0 0;
  border: 1.5px solid var(--black); border-radius: 0; background: #fff; cursor: pointer;
}
.check input:checked {
  background: var(--pink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.3 6.3l2.5 2.6 5-5.8' fill='none' stroke='%23080810' stroke-width='1.9'/></svg>") center / 100% no-repeat;
}
.send { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 3.2vw, 40px); }
.step p.after { max-width: 36ch; margin: clamp(18px, 2.6vw, 30px) 0 0; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.4; }

/* Buttons: small, square, black. Pink only answers a hover or a focus. */
.btn {
  padding: 13px 20px; border: 0; border-radius: 0; background: var(--black); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .12s, color .12s;
}
.btn:hover, .btn:focus-visible { background: var(--pink); color: var(--black); outline: 0; }
.btn[disabled] { opacity: .5; cursor: default; }

.flow-nav { display: flex; align-items: center; gap: 18px; padding: 6px var(--gutter) 0; min-height: 56px; max-width: calc(1100px + 2 * var(--gutter)); }
#back {
  padding: 12px 0; border: 0; background: none; color: var(--dim);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
#back:hover { color: var(--black); text-decoration: underline; text-underline-offset: 5px; }
.flow-nav .key { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.flow-nav .key + #next { margin-left: 0; }
#next { margin-left: auto; }

@media (hover: none) { .flow-nav .key { display: none; } }
@media (max-width: 760px) {
  .flow-main { align-self: start; padding-top: 6vh; }
  .brand { font-size: 12px; }
  .brand .mark { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .step.on { animation: none; }
  .bar i { transition: none; }
}