/*
 * /start/, in the landing page's look: its tokens (paper, ink, coral, yellow,
 * faces, paper shadow) and its pieces (note, kick, hl, sub, paper, tape, btn)
 * come from landing.css; this adds what the concept never drew, a form.
 */

.nwf-wrap { max-width: 860px; }
.nwf-step[hidden] { display: none; }
.nwf-hd { margin: 0 0 34px; }
.nwf-hd h1 { margin: 10px 0 0; font: 800 clamp(2.5rem, 5.4vw, 4.4rem)/.96 var(--sans); font-stretch: 108%; letter-spacing: -.045em; text-wrap: balance; }
/* a heading is measured to fit its width (flow.js, finish.js): nothing in it may be mid-transition then, and with reduced motion the landing page gives every element a very short one */
.nwf-hd h1, .nwf-hd h1 * { transition: none !important; }
.nwf-hd .sub { margin: 18px 0 0; max-width: 58ch; color: var(--ink-2); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.nwf-hd .sub a { color: var(--coral-deep); }
.nwf-hd .btn { margin-top: 26px; }

.nwf-card { position: relative; padding: clamp(26px, 4.6vw, 50px) clamp(20px, 4.6vw, 54px); }
.nwf-card > .tape { top: -15px; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.nwf-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 22px 0 0; color: var(--ink-3); font: 600 15px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.nwf-meta .note { font-size: 17px; margin-right: 6px; }
.nwf-meta-end { justify-content: flex-end; }

/* reading: a list that ticks itself off, in the landing page's hand-drawn boxes */
.nwf-ticks { list-style: none; margin: 0; padding: 0; }
.nwf-ticks li { position: relative; padding: 12px 0 12px 42px; border-bottom: 1px dashed var(--line-2); color: var(--ink-3); font: 600 18px/1.4 var(--sans); transition: color .4s var(--ease); }
.nwf-ticks li:last-child { border-bottom: 0; }
.nwf-ticks .tbox { position: absolute; left: 0; top: 50%; width: 26px; height: 26px; margin-top: -14px; overflow: visible; }
.nwf-ticks .bx { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; transition: stroke .3s; }
.nwf-ticks .tk { fill: none; stroke: var(--coral); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; transition: stroke-dashoffset .5s var(--ease); }
.nwf-ticks li.on { color: var(--ink); }
.nwf-ticks li.on .bx { stroke: var(--ink); }
.nwf-ticks li.done .tk { stroke-dashoffset: 0; }
.nwf-ticks li.on:not(.done)::after { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-radius: 50%; background: var(--coral); animation: nwf-pulse 1s ease-in-out infinite; }
@keyframes nwf-pulse { 50% { transform: scale(.55); opacity: .5; } }

/* the questions */
.nwf-q { margin: 0 0 30px; padding: 0; border: 0; min-width: 0; }
.nwf-l { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; padding: 0; font: 800 20px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.nwf-l i { font: 400 15px var(--hand); color: var(--ink-3); font-style: normal; }
.nwf-n { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); font: 400 17px/1 var(--hand); color: var(--ink); transform: rotate(-4deg); }
/* the languages the website is in (flow.js tongues; Z, 9 Oct): beside the first question, shown and not asked; the questions wrap beside it and the first box goes below it */
/* the languages the website is in (Z, 9 Oct: shown, not asked; 10 Oct: "better styling and positioning"): a paper label of its own,
   pinned over the card's top right corner like a tag on a parcel, out of the way of the first question; in the card's flow on a phone */
.nwf-langs { position: absolute; z-index: 2; top: -22px; right: clamp(18px, 3.6vw, 44px); display: flex; align-items: center; gap: 12px; max-width: min(340px, calc(50% - 130px)); margin: 0; padding: 10px 18px 11px 13px; border-radius: 10px; background: var(--white, #fff); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 26px -16px rgba(60,48,28,.55), 0 4px 10px -6px rgba(60,48,28,.25); transform: rotate(2.2deg); line-height: 1.25; text-align: left; }
.nwf-langs[hidden] { display: none; }
.nwf-langs svg { flex: none; width: 30px; height: 30px; color: var(--ink); }
.nwf-langs .nwf-langs-t { display: block; min-width: 0; }
.nwf-langs .note { display: block; margin-bottom: 1px; font-size: 16px; line-height: 1.1; }
.nwf-langs b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.nwf-langs .nwf-also { color: var(--ink-2); font-size: 15.5px; font-weight: 500; text-wrap: balance; }
.nwf-hint { margin: -2px 0 10px 42px; color: var(--ink-3); font-size: 15px; line-height: 1.5; }
.nwf-hint.note { color: var(--coral-ink); font-size: 18px; }
.nwf-swatch { display: inline-block; width: .95em; height: .95em; margin: 0 .1em -.12em; border: 2px solid var(--ink); border-radius: 50%; }
.nwf-hint b { color: var(--ink); }
.nwf-q input[type=text], .nwf-q input[type=email], .nwf-q textarea, .nwf-q select {
	display: block; box-sizing: border-box; width: 100%; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 14px; background: #fff;
	font: 500 17px/1.45 var(--sans); color: var(--ink); caret-color: var(--coral); transition: box-shadow .2s var(--ease);
}
.nwf-q textarea { resize: vertical; min-height: 56px; }
.nwf-q select { appearance: none; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22' fill='none' stroke='%2317171C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center no-repeat; padding-right: 48px; }
/* the coral shadow is for boxes that are typed in: on a tick box or a circle it stayed after a click and read as half chosen (Z, 2 Oct); those show a ring for the keyboard only */
/* typing in it (Z, 10 Oct: the ring a gap away "weird with the shadow"): its own line twice as thick and the coral shadow, together, with no second ring; a clear outline stays for forced colours */
.nwf-q input[type=text]:focus, .nwf-q input[type=email]:focus, .nwf-q textarea:focus, .nwf-q select:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--focus, var(--ink)), 5px 5px 0 2px var(--coral); }
.nwf-q input::placeholder, .nwf-q textarea::placeholder { color: var(--ink-3); opacity: .8; }
.nwf-q > input[type], .nwf-q > textarea, .nwf-q > select, .nwf-q > .nwf-chips, .nwf-q > .nwf-pages, .nwf-q > .nwf-opts, .nwf-q > .nwf-rows { margin-left: 42px; width: calc(100% - 42px); }
.nwf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* the email came with the address (neuwp_email_first): its half is hidden, and the name takes the row */
.nwf-two.nwf-one { grid-template-columns: 1fr; }
.nwf-two [data-email-q][hidden], [data-terms-q][hidden] { display: none; }
.nwf-q.nwf-two input[type] { margin-left: 42px; width: calc(100% - 42px); }
.nwf-count { margin: 0 0 12px 42px; color: var(--ink-2); font: 600 16px/1.5 var(--sans); }
.nwf-count b { display: inline-block; margin-right: 6px; padding: 1px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 800; transform: rotate(-1.5deg); }

.nwf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nwf-chips button { height: 36px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 600 14px var(--sans); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.nwf-chips button:hover, .nwf-chips button[aria-pressed=true] { border-color: var(--ink); color: var(--ink); background: #fff; }

.nwf-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.nwf-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nwf-group.is-home { grid-column: 1 / -1; }
.nwf-group.is-home .nwf-page { max-width: 340px; }
.nwf-page.sub-page { position: relative; margin-left: 24px; padding: 8px 12px; font-size: 14.5px; }
.nwf-page.sub-page::before { content: ""; position: absolute; left: -16px; top: -8px; height: calc(50% + 8px); width: 11px; border-left: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); border-bottom-left-radius: 8px; }
.nwf-page.sub-page:not(:last-child)::after { content: ""; position: absolute; left: -16px; top: 50%; bottom: -8px; border-left: 2px solid var(--line-2); }
.nwf-page.sub-page input { width: 20px; height: 20px; }
.nwf-page-t { flex: 1; min-width: 0; }
.nwf-subs { display: flex; flex-direction: column; gap: 6px; }
.nwf-subs[hidden] { display: none; }
.nwf-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: -1px 0 0 24px; padding: 4px 10px 4px 6px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 13.5px/1.3 var(--sans); cursor: pointer; }
.nwf-more::before { content: ""; width: 7px; height: 7px; margin: 0 2px 2px 3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .2s var(--ease); }
.nwf-more[aria-expanded=true]::before { transform: rotate(45deg); margin-bottom: 4px; }
.nwf-more:hover { color: var(--ink); background: var(--paper-2); }
.nwf-more:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwf-always { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding-left: 8px; color: var(--ink-3); font: 600 13px/1.35 var(--sans); white-space: nowrap; }
.nwf-lock { flex: none; }
.nwf-page.home-page { color: var(--ink); }
.nwf-page, .nwf-opt, .nwf-terms { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.nwf-page { padding: 11px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; font: 600 15.5px/1.35 var(--sans); color: var(--ink-2); transition: border-color .2s, box-shadow .2s; }
.nwf-page.sub-page { font-weight: 500; }
.nwf-page:has(input:checked) { border-color: var(--ink); color: var(--ink); box-shadow: 3px 3px 0 var(--yellow); }
.nwf-page:has(input:disabled) { cursor: default; }
.nwf-page:has(input:disabled:not(:checked)) { opacity: .45; }

.nwf-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nwf-opts-2 { grid-template-columns: repeat(2, 1fr); }
.nwf-opt { padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.nwf-opt span { font: 400 14.5px/1.45 var(--sans); color: var(--ink-3); }
.nwf-opt b { display: block; margin: 0 0 3px; font: 700 16px/1.3 var(--sans); color: var(--ink); }
.nwf-opt:has(input:checked) { border-color: var(--ink); box-shadow: 4px 4px 0 var(--coral); }

/* the boxes and circles, drawn rather than the browser's */
.nwf-page input, .nwf-opt input, .nwf-terms input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--ink); border-radius: 6px; background: #fff; cursor: inherit; display: grid; place-items: center; }
.nwf-opt input { border-radius: 50%; margin-top: 1px; }
.nwf-page input:checked, .nwf-terms input:checked { background: var(--ink); }
.nwf-page input:checked::after, .nwf-terms input:checked::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); }
.nwf-opt input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.nwf-page input:focus-visible, .nwf-opt input:focus-visible, .nwf-terms input:focus-visible, .nwf-chips button:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }

.nwf-terms { margin: 6px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--line-2); font: 500 16px/1.5 var(--sans); color: var(--ink-2); }
.nwf-terms a { color: var(--coral-deep); }
/* something went wrong: the words in ink, with an exclamation mark drawn in coral marker before them. No box, and never a coloured border (Z, 2 Oct) */
.nwf-error { position: relative; width: fit-content; max-width: 100%; margin: 20px 0 0; padding: 15px 28px 16px 62px; background: url(doodle-alert.svg) center / 100% 100% no-repeat; color: var(--ink); font: 700 16.5px/1.45 var(--sans); text-wrap: pretty; transform: rotate(-.4deg); }
.nwf-error::before { content: ""; position: absolute; left: 24px; top: 50%; width: 26px; height: 34px; margin-top: -19px; background: url(doodle-bang.svg) center / contain no-repeat; transform: rotate(5deg); }
@media (max-width: 560px) { .nwf-error { padding: 13px 18px 14px 48px; font-size: 16px; } .nwf-error::before { left: 15px; } }
.nwf-go { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; margin: 26px 0 0; }
.nwf-go .note { font-size: 19px; }
.nwf-go .btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* couldn't read: the pages, typed in */
.nwf-rows { display: grid; gap: 8px; }
.nwf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 40px; gap: 8px; align-items: center; }
.nwf-q .nwf-row input[type=text] { padding: 11px 14px; font-size: 16px; border-width: 1.5px; border-radius: 12px; }
.nwf-q .nwf-row input[readonly] { background: var(--paper-2); color: var(--ink); font-weight: 700; }
.nwf-row .nwf-always { justify-content: center; margin: 0; padding: 0; }
.nwf-row .nwf-always span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nwf-x { width: 40px; height: 40px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--paper); color: var(--ink-2); font: 600 20px/1 var(--sans); cursor: pointer; }
.nwf-x:hover { border-color: var(--ink); color: var(--ink); }
.nwf-add { margin: 10px 0 0 42px; height: 38px; padding: 0 16px; border: 1.5px dashed var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 700 14.5px var(--sans); cursor: pointer; }
.nwf-add:hover { background: var(--yellow); }
.nwf-add[hidden] { display: none; }

/* ready: the new site, and what was built */
.nwf-ready-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 16px; }
.nwf-ready-k .note { color: var(--coral-ink); font-size: 19px; }
.nwf-ready-host { font: 800 clamp(1.2rem, 2.6vw, 1.6rem)/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.nwf-built li { padding-top: 10px; padding-bottom: 10px; font-size: 17px; }
.nwf-built-more { margin: 8px 0 0 42px; color: var(--ink-3); font: 500 15.5px/1.5 var(--sans); }

/* building */
.nwf-said { margin: 0 0 18px; font: 800 clamp(1.3rem, 2.4vw, 1.7rem)/1.2 var(--sans); letter-spacing: -.02em; min-height: 1.2em; }
/*
 * One progress bar, wherever a design is under way: the waiting screen's and the strip over the questions (Z, 17 Oct: "Make
 * both the same style and a bit more inline with our styles and theme"). White, ruled round twice in pencil as the drawn
 * tick boxes are (doodle-bar.svg from doodles.mjs, laid over it as a border image cut in nine, so its round ends keep their
 * shape at any length), filled with coral stripes that move.
 */
.nwf-bar { position: relative; height: 18px; border-radius: 999px; background: #fff; }
.nwf-bar::after { content: ""; position: absolute; inset: -3px; border: 12px solid transparent; border-image: url(doodle-bar.svg) 14 / 12px stretch; pointer-events: none; }
.nwf-bar i { position: absolute; top: 2px; bottom: 2px; left: 2px; width: 4%; min-width: 14px; max-width: calc(100% - 4px); border-radius: 999px; background: repeating-linear-gradient(-45deg, var(--coral) 0 10px, var(--coral-light) 10px 20px); background-size: 28px 28px; transition: width 1.2s var(--ease); animation: nwf-stripes 1.2s linear infinite; }
.nwf-bar.is-s { height: 11px; }
.nwf-bar.is-s::after { inset: -2px; border-width: 7.5px; border-image-width: 7.5px; }
.nwf-bar.is-s i { top: 1.5px; bottom: 1.5px; left: 1.5px; min-width: 9px; }
@keyframes nwf-stripes { to { background-position: 28px 0; } }

@media (max-width: 760px) {
	.nwf-langs { position: static; display: inline-flex; max-width: 100%; margin: 4px 0 26px; transform: rotate(-1.2deg); }
	.nwf-opts { grid-template-columns: 1fr; }
	.nwf-two { grid-template-columns: 1fr; }
	.nwf-q > input[type], .nwf-q > textarea, .nwf-q > select, .nwf-q > .nwf-chips, .nwf-q > .nwf-pages, .nwf-q > .nwf-opts, .nwf-q > .nwf-rows, .nwf-q.nwf-two input[type] { margin-left: 0; width: 100%; }
	.nwf-hint, .nwf-count, .nwf-add, .nwf-built-more { margin-left: 0; }
	.nwf-rows { gap: 14px; }
	.nwf-row { grid-template-columns: minmax(0, 1fr) 40px; }
	.nwf-row input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
	.nwf-l { font-size: 18px; }
}
/* ---- a business with no website yet (/idea/, flow/idea.php): four steps on one card, drawn as the landing page is ---- */
.nwf-idea .nwf-l { gap: 8px; }
/* a new business's page says first that its design is free: two promises after drawn ticks, and a stamp beside the sentence
   under the heading (beside the heading it lay over its last word where the heading took one line, at 901 to 1040 wide) */
.nwi-free { clear: both; display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; margin: 20px 0 0; padding: 0; font: 700 17px/1.4 var(--sans); color: var(--ink); }
.nwi-free li::before { content: ""; display: inline-block; width: 22px; height: 22px; margin: -4px 8px 0 0; vertical-align: middle; background: url(doodle-tick.svg) center / contain no-repeat; }
.nwi-stamp { float: right; margin: 26px 3% 0 24px; padding: 10px 26px 12px; background: url(doodle-frame.svg) center / 100% 100% no-repeat; font: 400 34px/1 var(--hand); color: var(--coral-ink); white-space: nowrap; transform: rotate(7deg); pointer-events: none; }
@media (max-width: 900px) { .nwi-stamp { display: none; } }
/* where they are: four numbers on a pencil line, the one they are on ringed in coral marker */
.nwi-path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 30px; padding: 0; list-style: none; counter-reset: none; }
.nwi-path::before { content: ""; position: absolute; left: 12%; right: 12%; top: 19px; border-top: 2px dashed var(--line-2); }
.nwi-path li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--pencil); font: 700 14px/1.25 var(--sans); text-align: center; }
.nwi-num { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--line-2); border-radius: 50%; background: var(--paper, #FCFBF7); color: var(--pencil); font: 400 19px/1 var(--hand); }
.nwi-num svg { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); opacity: 0; transform: scale(.6) rotate(-30deg); transition: opacity .3s, transform .45s var(--ease); }
.nwi-path li.on { color: var(--ink); }
/* Bulgarian's hand is Caveat, whose figures are smaller and sit to the right of the circle's middle: measured with the faces (23 Oct), 21 px and 5 px on the right put them within a pixel of it, as Permanent Marker's are */
html[lang="bg"] .nwi-num { padding-right: 5px; font-size: 21px; }
.nwi-path li.on .nwi-num { border-color: var(--ink); color: var(--ink); background: var(--yellow); }
.nwi-path li.on .nwi-num svg { opacity: 1; transform: none; }
.nwi-path li.done { color: var(--ink-2); cursor: pointer; }
.nwi-path li.done .nwi-num { border-color: var(--ink); background: var(--ink); color: #fff; }
.nwi-step { margin: 0; padding: 0; border: 0; min-width: 0; animation: nwi-in .45s var(--ease); }
.nwi-step[hidden] { display: none; }
@keyframes nwi-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.nwi-h { display: block; margin: 0 0 6px; padding: 0; font: 800 clamp(24px, 2.6vw, 32px)/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; outline: none; }
.nwi-hint { margin: 0 0 18px; }
.nwi-h + .nwi-about, .nwi-h + .nwi-recap { margin-top: 18px; }
.nwf-idea .nwi-step .nwf-q { margin-bottom: 22px; }
.nwi-fields .nwf-q:first-child { margin-top: 0; }
.nwf-idea .nwf-q > input[type], .nwf-idea .nwf-q > textarea, .nwf-idea .nwf-q > select, .nwf-idea .nwf-q > .nwf-chips, .nwf-idea .nwf-q.nwf-two input[type] { margin-left: 0; width: 100%; }
.nwf-idea .nwf-hint { margin-left: 0; }

/* the kinds of business: drawn cards that move when pointed at, and stay lit when chosen */
.nwi-trades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nwf-trade { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 14px; border: 1.5px solid var(--line-2); border-radius: 16px; background: #fff; color: var(--ink-2); font: 700 14.5px/1.25 var(--sans); text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease), color .2s; }
.nwf-trade input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.nwi-pic { position: relative; display: block; width: 100%; max-width: 132px; aspect-ratio: 120 / 100; }
.nwi-pic::before { content: ""; position: absolute; left: 12%; right: 12%; top: 18%; bottom: 12%; border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%; background: var(--yellow); opacity: 0; transform: scale(.4) rotate(-12deg); transition: opacity .25s, transform .4s var(--ease); }
.nwi-pic svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.nwi-pic svg .mv { transform-box: fill-box; transform-origin: 50% 50%; }
.nwi-tl { text-wrap: balance; }
.nwf-trade:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px) rotate(-.6deg); }
.nwf-trade:has(input:checked) { border-color: var(--ink); color: var(--ink); box-shadow: 5px 5px 0 var(--coral); transform: rotate(-1deg); }
.nwf-trade:has(input:checked) .nwi-pic::before { opacity: .85; transform: none; }
.nwf-trade:has(input:focus-visible) { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; }
/* what each drawing does: while pointed at or chosen */
.nwf-trade:hover .mv, .nwf-trade:has(input:checked) .mv, .nwf-trade:has(input:focus-visible) .mv { animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.nwf-trade:hover .steam, .nwf-trade:has(:checked) .steam { animation-name: nwi-steam; }
.nwf-trade:hover .awn, .nwf-trade:has(:checked) .awn { transform-origin: 50% 0; animation-name: nwi-sway; }
.nwf-trade:hover .pot, .nwf-trade:has(:checked) .pot { transform-origin: 50% 100%; animation-name: nwi-spin; animation-duration: .9s; }
.nwf-trade:hover .spark, .nwf-trade:has(:checked) .spark { animation-name: nwi-twinkle; }
.nwf-trade:hover .beat, .nwf-trade:has(:checked) .beat { animation-name: nwi-beat; animation-duration: 1s; }
.nwf-trade:hover .turn, .nwf-trade:has(:checked) .turn { transform-origin: 10% 90%; animation-name: nwi-turn; }
.nwf-trade:hover .smoke, .nwf-trade:has(:checked) .smoke { animation-name: nwi-smoke; animation-duration: 2s; }
.nwf-trade:hover .paper, .nwf-trade:has(:checked) .paper { animation-name: nwi-paper; }
.nwf-trade:hover .pen, .nwf-trade:has(:checked) .pen { animation-name: nwi-pen; }
.nwf-trade:hover .draw, .nwf-trade:has(:checked) .draw { animation-name: nwi-wave; }
.nwf-trade:hover .tap, .nwf-trade:has(:checked) .tap { transform-origin: 100% 100%; animation-name: nwi-tap; animation-duration: 1.1s; }
.nwf-trade:hover .grow, .nwf-trade:has(:checked) .grow { transform-origin: 50% 100%; animation-name: nwi-grow; }
.nwf-trade:hover .lift, .nwf-trade:has(:checked) .lift { animation-name: nwi-lift; animation-duration: 1.2s; }
.nwf-trade:hover .glass-l, .nwf-trade:has(:checked) .glass-l { transform-origin: 50% 100%; animation-name: nwi-clink-l; animation-duration: 1.2s; }
.nwf-trade:hover .glass-r, .nwf-trade:has(:checked) .glass-r { transform-origin: 50% 100%; animation-name: nwi-clink-r; animation-duration: 1.2s; }
.nwf-trade:hover .fizz, .nwf-trade:has(:checked) .fizz { animation-name: nwi-smoke; }
.nwf-trade:hover .rays, .nwf-trade:has(:checked) .rays { animation-name: nwi-glow; animation-duration: 1.2s; }
@keyframes nwi-steam { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-5px); opacity: .45; } }
@keyframes nwi-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(2.5deg); } 75% { transform: rotate(-2.5deg); } }
@keyframes nwi-spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.9) skewX(4deg); } }
@keyframes nwi-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.25) rotate(20deg); opacity: .7; } }
@keyframes nwi-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes nwi-turn { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
@keyframes nwi-smoke { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(5px, -8px); opacity: 0; } }
@keyframes nwi-paper { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes nwi-pen { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-6px, 3px) rotate(-6deg); } }
@keyframes nwi-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.7); } }
@keyframes nwi-tap { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-18deg); } 48% { transform: rotate(4deg); } 60% { transform: rotate(0); } }
@keyframes nwi-grow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@keyframes nwi-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes nwi-clink-l { 0%, 100% { transform: rotate(0); } 40%, 55% { transform: rotate(10deg); } }
@keyframes nwi-clink-r { 0%, 100% { transform: rotate(0); } 40%, 55% { transform: rotate(-10deg); } }
@keyframes nwi-glow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.08); } }
.nwf-idea .nwi-otherq { margin: 14px 0 0; }
.nwf-idea .nwi-otherq[hidden] { display: none; }
.nwf-q > .nwf-other[hidden], .nwi-step > .nwf-other[hidden] { display: none; }

/* about it: its name and its place side by side (the hanging sign beside them was taken out: Z, 23 Oct, "remove the sign gimmick") */
.nwi-about { display: block; margin-bottom: 22px; }
.nwi-fields { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 20px; align-items: end; }
.nwf-idea .nwi-fields .nwf-q { margin: 0; }
/* the heading's examples taking turns (flow.js turns()): the words fade over, the marker is drawn in anew */
/* the examples always on a line of their own, under "A website for" (Z, 23 Oct: "some stay on the first line, some go on the second one, not great"): a table is as wide as its words and stands alone */
.nwf-hd h1 .hl[data-turns] { display: table; }
.nwf-hd h1 .nwi-turn { transition: opacity .28s ease, translate .28s ease !important; }
.nwf-hd h1 .nwi-turn.nwi-out { opacity: 0; translate: 0 .12em; }
.nwf-hd h1 .nwi-turn::before { transition: clip-path .7s var(--ease, ease) .08s; }
.nwf-hd h1 .nwi-turn.nwi-now::before { transition: none; }
.nwi-count { margin: 6px 0 0; font-size: 16px; color: var(--pencil); text-align: right; }
.nwi-count.ok { color: #2F9E6B; }

/* the feel: stickers with a swatch of their own */
.nwf-moods { display: flex; flex-wrap: wrap; gap: 8px; }
.nwf-moods label { position: relative; cursor: pointer; }
.nwf-moods input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.nwf-moods span { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font: 600 15px var(--sans); transition: border-color .2s, background .2s, color .2s, transform .25s var(--ease), box-shadow .2s; }
.nwf-moods label:hover span { border-color: var(--ink); color: var(--ink); }
.nwf-moods input:checked + span { border-color: var(--ink); background: var(--yellow); color: var(--ink); }
.nwf-moods input:disabled + span { opacity: .45; }
.nwf-moods label:has(input:disabled) { cursor: default; }
.nwf-moods input:focus-visible + span { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwi-moods { margin: 0 0 22px; gap: 10px; }
.nwi-moods span { gap: 8px; height: 42px; padding: 0 16px 0 10px; font-size: 15.5px; }
.nwi-moods span i { width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 50% 46% 52% 48%; background: var(--sw); }
.nwi-moods label:nth-child(3n) span { transform: rotate(-1.4deg); }
.nwi-moods label:nth-child(3n+1) span { transform: rotate(1deg); }
.nwi-moods input:checked + span { box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg) scale(1.04); }

/* everything else, folded away */
.nwi-more { margin: 4px 0 0; border-top: 1px dashed var(--line-2); }
.nwi-more summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 18px 0 4px; cursor: pointer; list-style: none; font: 800 18px/1.3 var(--sans); color: var(--ink); }
.nwi-more summary::-webkit-details-marker { display: none; }
.nwi-more summary::before { content: ""; align-self: center; width: 9px; height: 9px; margin: 0 4px 0 2px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(-45deg); transition: transform .2s var(--ease); }
.nwi-more[open] summary::before { transform: rotate(45deg); }
.nwi-more summary .note { font-size: 17px; }
.nwi-more summary:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; border-radius: 6px; }
.nwi-more-in { padding: 16px 0 0; animation: nwi-in .35s var(--ease); }
.nwf-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* their own logo and photos (flow.js own(); Z, 25 Oct): boxes of paper to drop a file on or press, and what was added as
   small prints, slightly askew, each with a cross to take it off again. No coloured border on a rounded box: a box is
   paper with a soft shadow, lit yellow while a file is held over it or the keyboard is on it */
.nwi-ownhint { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--ink-2); }
.nwi-ownhint svg { flex: none; color: var(--coral-line); transform: rotate(-4deg); }
.nwi-own { min-width: 0; margin: 0 0 26px; padding: 0; border: 0; }
.nwi-own-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 26px; margin-top: 4px; }
.nwi-shots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; min-width: 0; }
.nwi-thumbs { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.nwi-thumbs:empty { display: none; }
.nwi-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 128px; min-height: 112px; padding: 12px 10px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(23,23,28,.12), 0 8px 18px -10px rgba(23,23,28,.35); color: var(--ink); text-align: center; cursor: pointer; transition: background .2s, transform .25s var(--ease), box-shadow .2s; }
.nwi-drop[hidden] { display: none; }
.nwi-drop input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; font-size: 0; }
.nwi-drop b { font: 800 14.5px/1.2 var(--sans); text-wrap: balance; }
.nwi-drop .note { font-size: 16px; line-height: 1.1; }
.nwi-drop-in { display: grid; place-items: center; color: var(--coral-line); transition: transform .3s var(--ease); }
.nwi-drop:hover, .nwi-drop.over { background: var(--yellow); transform: rotate(-1.5deg); }
.nwi-drop:hover .nwi-drop-in, .nwi-drop.over .nwi-drop-in { transform: rotate(90deg); }
.nwi-drop:has(input:focus-visible) { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; }
.nwi-drop-logo { width: 150px; }
.nwi-print { position: relative; display: block; margin: 0; padding: 6px 6px 18px; background: #fff; box-shadow: 0 1px 2px rgba(23,23,28,.12), 0 8px 18px -10px rgba(23,23,28,.35); transform: rotate(-2deg); }
.nwi-thumbs .nwi-print:nth-child(even) { transform: rotate(1.6deg); }
.nwi-thumbs .nwi-print:nth-child(3n) { transform: rotate(-.6deg); }
.nwi-print img { display: block; width: 100px; height: 88px; object-fit: cover; background: var(--paper-2); }
.nwi-logoshow { padding: 10px 10px 18px; transform: rotate(1.2deg); }
.nwi-logoshow[hidden] { display: none; }
.nwi-logoshow img { width: 130px; height: 84px; object-fit: contain; background: #fff; }
.nwi-off { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.nwi-off:hover { background: var(--coral-btn); transform: scale(1.08); }
.nwi-off:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwi-ownerr { margin-top: 18px; }
.nwi-ownerr[hidden] { display: none; }

/* the last step: what they told us, in a line, then where to send it */
.nwi-recap { margin: 0 0 22px; padding: 12px 16px; border-radius: 4px; background: var(--paper-2, #F4F1EA); color: var(--ink-2); font: 500 16px/1.5 var(--sans); transform: rotate(-.4deg); }
.nwi-recap b { color: var(--ink); font-weight: 800; }

.nwi-go { justify-content: flex-start; }
.nwf-idea .nwi-go .btn { min-width: 240px; min-height: 58px; padding: 0 34px; justify-content: center; font-size: 18px; }
.nwi-go .nwi-back { height: 58px; padding: 0 20px; }
.nwi-back { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: 700 15px var(--sans); cursor: pointer; }
.nwi-back:hover { border-color: var(--ink); }
.nwi-back[hidden] { display: none; }
.nwf-idea .nwf-go .btn { max-width: 100%; white-space: normal; text-align: left; }
.nwf-have { margin: 22px 0 0; text-align: center; color: var(--ink-2); font: 500 15.5px/1.5 var(--sans); }
.nwf-have a { color: var(--ink); font-weight: 700; }
@media (max-width: 1100px) { .nwi-trades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.nwi-trades { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.nwf-trade { font-size: 14px; }
	.nwi-fields { grid-template-columns: 1fr; }
	.nwf-idea .nwi-fields .nwf-q + .nwf-q { margin-top: 22px; }
	.nwf-three { grid-template-columns: 1fr; }
	.nwi-own-row { gap: 16px; }
	.nwi-drop, .nwi-drop-logo { width: 112px; min-height: 104px; }
	.nwi-print img { width: 84px; height: 76px; }
	.nwi-logoshow img { width: 112px; height: 76px; }
	.nwi-path li { font-size: 12.5px; }
	.nwi-path::before { left: 14%; right: 14%; }
	.nwf-idea .nwi-go .btn { min-width: 0; flex: 1 1 auto; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.nwf-trade .mv, .nwi-step, .nwi-more-in { animation: none !important; }
	.nwi-drop, .nwi-drop:hover, .nwi-drop.over, .nwi-drop:hover .nwi-drop-in, .nwi-drop.over .nwi-drop-in { transform: none; }
	.nwf-trade, .nwf-trade:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nwf-bar i, .nwf-ticks li.on:not(.done)::after { animation: none; }
	.nwf-ticks .tk { transition: none; }
}

/*
 * Designed while they answer (Z, 16 Oct: "show somehow that we are actually building it while they answer these
 * optional questions"): a slip of paper over the questions saying what the design is doing now and how far it has come,
 * with the waiting screen's own bar (flow.js live()). It scrolls with the page; once it is out of sight, the same said
 * small at the foot of the screen (.nwf-dock), never at the top under a header that hides itself (Z, 17 Oct: "weirdly
 * sticky"), and gone again where the form's own button is in view.
 */
.nwf-live { display: grid; gap: 14px; margin: 0 0 30px; padding: 17px 22px 20px; transform: rotate(-.3deg); }
.nwf-live[hidden] { display: none; }
.nwf-live-w { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; text-wrap: pretty; }
.nwf-live-w b { margin-right: 6px; color: var(--ink); font-weight: 800; letter-spacing: -.005em; }
.nwf-live-dot { display: inline-block; width: 11px; height: 11px; margin: 0 10px 0 1px; border-radius: 50%; background: var(--coral); vertical-align: 1px; animation: nwf-breathe 1.8s ease-in-out infinite; }
.nwf-live.is-done .nwf-live-dot, .nwf-dock.is-done .nwf-live-dot { animation: none; background: #2f9e5b; }
.nwf-live.is-done .nwf-bar i, .nwf-dock.is-done .nwf-bar i { animation: none; }
@keyframes nwf-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(241, 92, 62, .45); } 60% { box-shadow: 0 0 0 9px rgba(241, 92, 62, 0); } }
.nwf-dock { position: fixed; z-index: 40; right: 22px; bottom: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px 0; width: min(380px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 16px 14px; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: var(--paper-shadow, 0 1px 2px rgba(60, 48, 28, .12)), 0 22px 44px -24px rgba(23, 23, 28, .6); font: 700 14.5px/1.3 var(--sans); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s, transform .35s var(--ease), visibility 0s .35s; }
.nwf-dock[hidden] { display: none; }
.nwf-dock.on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .35s var(--ease), visibility 0s; }
.nwf-dock b { min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nwf-dock .nwf-bar { grid-column: 1 / -1; }
/* on a phone, the width of the screen less its margins */
@media (max-width: 640px) { .nwf-live { padding: 14px 16px 17px; } .nwf-live-w { font-size: 14.5px; } .nwf-dock { left: 16px; right: 16px; bottom: 14px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .nwf-live-dot { animation: none; } .nwf-bar i { transition: none; } .nwf-dock, .nwf-dock.on { transform: none; transition: none; } }

/* the email given in the box, shown and locked (Z, 16 Oct): read, not typed in */
.nwf-q input.is-locked[readonly] { border-style: dashed; background: var(--paper-2, #F5F1E8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E626E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") right 14px center / 18px 18px no-repeat; padding-right: 44px; color: var(--ink-2); cursor: default; }
.nwf-q input.is-locked[readonly]:focus { box-shadow: 0 0 0 2px var(--focus, var(--ink)); }
.nwf-q [data-email-locked] { margin: 8px 0 0 42px; font-size: 14px; color: var(--pencil, #5E626E); }
@media (max-width: 760px) { .nwf-q [data-email-locked] { margin-left: 0; } }
/* "Skip the questions" (the list of ideas, 10): under the heading, where the email came with the address */
.nwf-skip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 14px 0 0; }
.nwf-skip[hidden] { display: none; }
.nwf-skip-b { padding: 8px 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font: 700 15px/1.2 var(--sans); cursor: pointer; }
.nwf-skip-b:hover { background: var(--paper-2); }
.nwf-skip .note { color: var(--pencil); font-size: 17px; }

/* under /idea/'s form: what it is, and its questions (21 Oct, the list of ideas' 33), for whoever arrives from a search */
.nwi-intro { max-width: 760px; margin: clamp(56px, 8vw, 96px) auto 0; }
.nwi-intro h2 { margin: 0; font: 800 clamp(26px, 3vw, 38px)/1.1 var(--sans); font-stretch: 106%; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.nwi-intro > p { margin: 14px 0 0; color: var(--ink-2); font: 500 17px/1.6 var(--sans); text-wrap: pretty; }
.nwi-faq { margin: 26px 0 0; display: grid; gap: 12px; }
.nwi-faq details { padding: 0 20px; border-radius: 12px; background: var(--white, #fff); box-shadow: 0 0 0 1.5px var(--ink), 4px 4px 0 var(--ink); }
.nwi-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font: 800 18px/1.3 var(--sans); color: var(--ink); text-wrap: balance; }
.nwi-faq summary::-webkit-details-marker { display: none; }
.nwi-faq summary::after { content: "+"; flex: none; font: 400 28px/1 var(--hand); color: var(--coral-ink); transition: transform .3s var(--ease); }
.nwi-faq details[open] summary::after { transform: rotate(45deg); }
.nwi-faq summary:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 4px; border-radius: 6px; }
.nwi-faq details p { margin: 0 0 18px; color: var(--ink-2); font: 500 16px/1.6 var(--sans); text-wrap: pretty; }
.nwi-faq details a { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .nwi-faq summary::after { transition: none; } }