/*
 * /finish/<demo>/, the continuation's page, on top of flow.css (the steps'
 * heading, card, ticking list, form fields and drawn boxes) and the landing
 * page's tokens. This adds what only this page has: findings beside their
 * ticks, the four tiers, what you get, the timeline, the example report, the
 * definition of finished and the block that starts it.
 */

/*
 * Quiet text and the marker's notes sit on white cards here, where the landing
 * page's lighter grey and coral fall just short of 4.5 to 1 (axe, 2 Oct): on
 * this page both are a shade deeper.
 */
.nwx { --ink-3: #666872; }
.nwx .note { color: var(--coral-deep); }
.nwx-wrap { max-width: 940px; }
/* back to the preview, above every step (10 Oct); not over the celebration, which has its own way there */
.nwx-backto { margin: 0 0 clamp(14px, 2vw, 22px); }
.nwx-backto a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 11px; border-radius: 999px; background: var(--white); color: var(--ink); font: 700 15px/1.2 var(--sans); text-decoration: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 10px 20px -14px rgba(60, 48, 28, .55); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.nwx-backto a:hover { transform: translateX(-2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 14px 24px -14px rgba(60, 48, 28, .6); }
.nwx-backto a:hover svg { transform: translateX(-2px); }
.nwx-backto svg { transition: transform .25s var(--ease); }
.nwx-wrap:has(.nwx-project.is-party:not([hidden])) .nwx-backto { display: none; }
/*
 * No orphans (Z, 2 Oct): paragraphs run the width they have, and a short one
 * is balanced, so a last line is never two or three stray words.
 */
.nwx-wrap .nwf-hd .sub { max-width: none; text-wrap: balance; }
.nwx-small { font-size: 16px !important; color: var(--ink-3) !important; }
.nwx-said { margin: 18px 0 0; font-size: 20px; }

/* a section's heading: inside a card, and between cards */
.nwx-h { margin: 0 0 14px; font: 800 clamp(1.3rem, 2.4vw, 1.7rem)/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.nwx-h-out { margin: clamp(54px, 8vw, 84px) 0 20px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-stretch: 108%; letter-spacing: -.035em; text-wrap: balance; }

/* what was found, beside its tick */
.nwx-found li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 18px; }
.nwx-found li > span { flex: 1 1 15em; min-width: 0; }
.nwx-found li em { flex: 0 1 auto; font: 400 19px/1.25 var(--hand); color: var(--coral-ink); font-style: normal; text-align: right; }
.nwx-found li em:empty { display: none; }
.nwx-findings li { font-size: 17.5px; }
.nwx-all { margin: -6px 0 12px; color: var(--ink-2); font: 500 16.5px/1.5 var(--sans); text-wrap: balance; }

/* why a person: a few sentences, and a person drawn by hand beside them */
.nwx-person { display: flex; align-items: flex-start; gap: 8px 24px; margin: 24px 0 0; padding: 24px 28px 22px 18px; border-radius: 14px; background: var(--paper-2); }
.nwx-person-t { flex: 1; min-width: 0; }
.nwx-person-t p { margin: 0 0 10px; color: var(--ink); font: 500 17px/1.6 var(--sans); text-wrap: balance; }
.nwx-person-t p:last-child { margin-bottom: 0; }
.nwx-person-t .nwx-person-k { margin: 0 0 4px; font: 400 21px/1.2 var(--hand); }
.nwx-me { position: relative; flex: none; width: 118px; margin: -2px 0 0; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.nwx-me svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the drawing's groups (site/tools/doodles.mjs): all of her sways, her eyes blink, the raised arm waves from the shoulder */
.nwx-me .all { transform-box: view-box; transform-origin: 76px 260px; animation: nwx-sway 5.5s ease-in-out infinite; }
.nwx-me .arm { transform-box: view-box; transform-origin: 98px 98px; }
.nwx-me .eyes { transform-box: fill-box; transform-origin: center; animation: nwx-blink 4.6s infinite; }
.nwx-me.hi .arm { animation: nwx-wave 1.5s ease-in-out; }
.nwx-me.hi svg { animation: nwx-hop .55s var(--ease); }
.nwx .nwx-hi { position: absolute; left: -4%; top: -2%; padding: 1px 11px 3px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 18px; white-space: nowrap; opacity: 0; transform: rotate(-9deg) scale(.4); transform-origin: right bottom; transition: opacity .2s, transform .35s var(--spring); pointer-events: none; }
.nwx-me.hi .nwx-hi { opacity: 1; transform: rotate(-9deg) scale(1); }
@keyframes nwx-sway { 0%, 100% { transform: rotate(-.9deg); } 50% { transform: rotate(.9deg); } }
@keyframes nwx-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes nwx-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-12deg); } 35% { transform: rotate(13deg); } 55% { transform: rotate(-10deg); } 75% { transform: rotate(11deg); } }
@keyframes nwx-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-7px); } }
.nwx-held { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 18px 0 0; color: var(--ink-3); font: 500 15px/1.5 var(--sans); }
.nwx-held span { text-wrap: balance; }
.nwx-again { height: 36px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 700 14px var(--sans); cursor: pointer; }
.nwx-again:hover { background: var(--yellow); }
.nwx-again:focus-visible, .nwx-addnote:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwx-again[hidden] { display: none; }

/* the four tiers: names, a line each, and theirs marked */
.nwx-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nwx-tier { position: relative; padding: 20px 18px 18px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; }
.nwx-tier h3 { margin: 0 0 6px; font: 800 19px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.nwx-tier-p { margin: 0 0 10px; color: var(--ink-3); font: 500 14px/1.4 var(--sans); }
.nwx-tier-p b { display: block; color: var(--ink); font: 800 24px/1.15 var(--sans); letter-spacing: -.02em; }
.nwx-tier-l { margin: 0; color: var(--ink-2); font: 400 14.5px/1.5 var(--sans); text-wrap: balance; }
.nwx-tier.is-yours { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--coral); }
/* what a tier gives, a line each (Z, 17 Oct: the pricing page's breakdown): at the card's foot, so the four lists line up, under a dashed pencil rule, each line after a drawn tick */
.nwx-tiers > .nwx-tier { display: flex; flex-direction: column; }
.nwx-tier-has { list-style: none; margin: auto 0 0; padding: 14px 0 0; display: grid; gap: 7px; }
.nwx-tier-has::before { content: ""; display: block; height: 0; margin: 0 0 4px; border-top: 1.5px dashed var(--line-2); }
.nwx-tier-has li { position: relative; padding-left: 22px; color: var(--ink-2); font: 500 13.5px/1.4 var(--sans); text-wrap: balance; }
.nwx-tier-has li::before { content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; background: url(doodle-tick.svg) center / contain no-repeat; }
.nwx-yours { position: absolute; top: -14px; right: 12px; padding: 2px 12px 3px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 18px; transform: rotate(3deg); }

/* what you get */
.nwx-gets { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; align-items: start; }
.nwx-get { padding: clamp(22px, 3.4vw, 34px) clamp(20px, 3.4vw, 34px); }
.nwx-get h3, .nwx-report h3 { margin: 0 0 10px; font: 800 22px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.nwx-get h3 .note { display: block; margin: 0 0 2px; font-size: 19px; transform: rotate(-1deg); transform-origin: left; }
.nwx-list li { padding: 10px 0 10px 40px; color: var(--ink) !important; font: 500 16px/1.5 var(--sans); text-wrap: balance; }
.nwx-list .tbox { top: 22px; }
/* yours to keep: a moving box with their own new site standing in it, and two sentences */
.nwx-keep { grid-column: 1 / -1; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 30px; align-items: center; }
.nwx-keep p { margin: 0 0 8px; color: var(--ink-2); font: 400 16.5px/1.6 var(--sans); text-wrap: balance; }
.nwx-keep p:last-child { margin-bottom: 0; }
.nwx-box { position: relative; width: 150px; aspect-ratio: 200 / 170; }
.nwx-box svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.nwx-box-front { z-index: 3; }
.nwx-shot { position: absolute; z-index: 2; left: 27%; top: -4%; width: 46%; aspect-ratio: 8 / 6; padding-top: 5.5%; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper-2); overflow: hidden; transform: rotate(-4deg); }
.nwx-shot[hidden] { display: none; }
/* a browser's bar over the picture, three dots */
.nwx-shot::before { content: ""; position: absolute; left: 5%; top: 3.5%; width: 4px; height: 4px; border-radius: 50%; background: var(--coral); box-shadow: 6px 0 0 var(--yellow), 12px 0 0 var(--line-2); }
.nwx-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* how it goes: six steps as cards, each saying who does it and how long it takes */
.nwx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
.nwx-steps li { display: flex; flex-direction: column; padding: 20px 22px 14px; }
.nwx-steps li:nth-child(odd) { transform: rotate(-.6deg); }
.nwx-steps li:nth-child(even) { transform: rotate(.5deg); }
.nwx-steps li:nth-child(3n) { transform: rotate(-.3deg); }
.nwx-steps .nwx-step-n { font-size: 34px; line-height: 1; }
.nwx-steps h3 { margin: 6px 0 6px; color: var(--ink); font: 800 19px/1.2 var(--sans); letter-spacing: -.015em; }
.nwx-steps p { margin: 0; color: var(--ink-2); font: 400 15.5px/1.55 var(--sans); text-wrap: balance; }
.nwx-steps .nwx-step-f { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-top: auto; padding-top: 12px; }
.nwx-steps .nwx-step-f::before { content: ""; flex: 0 0 100%; margin: 12px 0 8px; border-top: 1px dashed var(--line-2); }
.nwx-steps .nwx-step-f .note { font-size: 16.5px; }
.nwx-steps .nwx-step-f > span:not(.note) { color: var(--ink-2); font: 600 13.5px/1.3 var(--sans); text-align: right; }
.nwx-steps .nwx-step-f > span[hidden] { display: none; }

/*
 * The monthly report, as an example: a sheet of paper filled in by hand, with
 * two more pages showing under it.
 */
.nwx-rep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 26px clamp(28px, 4.5vw, 54px); align-items: center; margin: clamp(54px, 8vw, 84px) 0 0; }
.nwx-rep-say .nwx-h-out { margin-top: 0; }
.nwx-rep-say .sub { margin: 0 0 12px; color: var(--ink-2); font-size: 18px; line-height: 1.55; text-wrap: balance; }
.nwx-rep-say .nwx-list { margin: 0 0 18px; }
.nwx-rep-say p { margin: 0; }
/* the example, small: the sheet is laid out 880 wide and shown at the width it has here (finish.js sets --z) */
.nwx-rep-mini { position: relative; min-width: 0; }
.nwx-rep-mini .nwx-rep-stack { width: 880px; zoom: var(--z, .5); margin-left: auto; margin-right: auto; }
/* the example is a picture of a report's first page (Z, 9 Oct: it "takes too much vertical space"), seen through a window: pointed at or
   tapped, the page rolls up to its end, and down again when let go; a fade at the window's foot, and at its head once it has rolled,
   says there is more beyond either edge (Z, 10 Oct). finish.js sets --roll (how far, in the sheet's own pixels) and --roll-t. */
.nwx-rep-mini .nwx-sheet-1 { padding: 0; background-image: none; }
.nwx-rep-mini .nwx-rep-win { position: relative; height: 760px; overflow: hidden; border-radius: 5px; }
/* a picture, so nothing in it is selected by a press or a drag (Z, 10 Oct: the text was selected, and it read as something to drag) */
.nwx-rep-mini { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nwx-rep-mini .nwx-rep-roll { padding: clamp(28px, 4.4vw, 46px) clamp(20px, 4.4vw, 50px) clamp(22px, 3.4vw, 34px); background-image: repeating-linear-gradient(transparent 0 33px, rgba(23, 23, 28, .05) 33px 34px); background-position: 0 14px; transition: transform var(--roll-t, 1.2s) cubic-bezier(.45, 0, .25, 1); }
.nwx-rep-mini.rolling .nwx-rep-roll { transform: translateY(calc(-1px * var(--roll, 0))); }
.nwx-rep-mini .nwx-rep-win::before, .nwx-rep-mini .nwx-rep-win::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; pointer-events: none; transition: opacity .5s ease; }
.nwx-rep-mini .nwx-rep-win::before { top: 0; height: 150px; background: linear-gradient(#fff 18%, rgba(255, 255, 255, 0)); opacity: 0; }
.nwx-rep-mini .nwx-rep-win::after { bottom: 0; height: 190px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 82%); }
.nwx-rep-mini.rolled .nwx-rep-win::before { opacity: 1; transition-delay: .35s; }
.nwx-rep-mini.at-end .nwx-rep-win::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .nwx-rep-mini .nwx-rep-roll { transition: none; } }
.nwx-rep-mini .nwx-stamp { margin-bottom: 12px; }
.nwx-rep-full { width: min(980px, calc(100vw - 20px)); max-width: none; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); padding: 0 clamp(10px, 3vw, 30px) 30px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 7px 7px 0 var(--coral); color: var(--ink); overflow: auto; }
.nwx-rep-full::backdrop { background: rgba(23, 23, 28, .55); }
.nwx-rep-full form { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; padding: 14px 0 10px; background: var(--paper); }
.nwx-rep-full form .note { font-size: 18px; }
.nwx-rep-full .nwx-sheet-1 { transform: none; }
/* the label on the example: marker words in a box ruled by hand */
.nwx-stamp { display: inline-block; margin: 0 0 20px 4px; padding: 6px 18px 7px; background: url(doodle-frame.svg) center / 100% 100% no-repeat; font-size: 18px; transform: rotate(-2deg); }
.nwx-rep-stack { position: relative; margin: 0 0 clamp(150px, 17vw, 190px); }
.nwx-sheet { border-radius: 5px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 28, .1), 0 14px 30px -14px rgba(23, 23, 28, .28); }
.nwx-sheet-1 { container: nwxrep / inline-size; position: relative; z-index: 3; padding: clamp(28px, 4.4vw, 46px) clamp(20px, 4.4vw, 50px) clamp(22px, 3.4vw, 34px); transform: rotate(-.5deg); background-image: repeating-linear-gradient(transparent 0 33px, rgba(23, 23, 28, .05) 33px 34px); background-position: 0 14px; }
.nwx-sheet-1 > .tape { top: -15px; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.nwx-sheet-2, .nwx-sheet-3 { position: absolute; display: flex; align-items: flex-end; }
.nwx-sheet-2 { z-index: 2; inset: 40px 8px -54px 14px; transform: rotate(.9deg); }
.nwx-sheet-3 { z-index: 1; inset: 80px 22px -104px 28px; transform: rotate(-.8deg); }
.nwx-sheet-2 p, .nwx-sheet-3 p { margin: 0; padding: 0 clamp(18px, 4vw, 42px) 13px; color: var(--ink-2); font: 800 16px/1.3 var(--sans); }
.nwx-sheet-2 p .note, .nwx-sheet-3 p .note { margin-right: 10px; font-size: 17px; }
.nwx-rep-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; }
.nwx-rep-hd h3 { margin: 0; font: 800 clamp(1.4rem, 2.8vw, 1.8rem)/1.15 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.nwx-rep-hd .note { font-size: 19px; transform: rotate(-1.5deg); }
.nwx-report-sub { margin: 6px 0 22px; color: var(--ink-2); font: 400 16px/1.5 var(--sans); }
.nwx-sheet-1 h4 { margin: 26px 0 10px; color: var(--ink); font: 800 16.5px/1.3 var(--sans); letter-spacing: -.01em; }
.nwx-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.nwx-figs div { padding: 11px 16px 12px; border: 2px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: #fff; }
.nwx-figs div:nth-child(even) { border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; transform: rotate(.5deg); }
.nwx-figs div:nth-child(3n) { transform: rotate(-.4deg); }
.nwx-figs dt { color: var(--coral-deep); font: 400 16px/1.2 var(--hand); }
.nwx-figs dd { margin: 3px 0 0; color: var(--ink); font: 800 25px/1.15 var(--sans); letter-spacing: -.02em; }
.nwx-figs dd i { color: var(--ink-2); font: 500 14px var(--sans); font-style: normal; letter-spacing: 0; }
/* the month: a calendar ruled by hand, a few words on the days something happened */
.nwx-rep-cal-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 20px; margin: 26px 0 10px; }
.nwx-rep-cal-hd h4 { margin: 0; }
.nwx-cal-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font: 500 13.5px/1.4 var(--sans); }
.nwx-cal-key li { display: inline-flex; align-items: center; gap: 6px; }
.nwx-cal-key i, .nwx-ev > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); }
.nwx-cal-key .nwx-ev-we, .nwx-ev-we > i { background: var(--coral); }
.nwx-cal-key .nwx-ev-you, .nwx-ev-you > i { background: var(--yellow); box-shadow: 0 0 0 1.5px var(--ink); }
.nwx-ev-down > i { background: var(--ink); }
.nwx-cal { position: relative; }
.nwx-cal table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.nwx-cal th { height: 26px; padding: 0 0 4px 8px; text-align: left; color: var(--coral-deep); font: 400 15px/1 var(--hand); }
.nwx-cal th abbr { text-decoration: none; }
.nwx-cal td { padding: 0; vertical-align: top; }
/* every day the same height, whatever is written in it, so the ruled lines fall between them */
.nwx-cal td > div { height: var(--cal-h, 104px); padding: 6px 6px 4px 9px; overflow: hidden; }
.nwx-cal td b { display: block; margin: 0 0 2px; color: var(--ink); font: 400 15px/1.1 var(--hand); }
.nwx-cal td.is-off { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(23, 23, 28, .05) 6px 7px); }
.nwx-cal td.is-down { background: rgba(255, 210, 74, .45); }
.nwx-cal .nwx-ev { display: flex; align-items: flex-start; gap: 5px; margin: 0 0 3px; color: var(--ink); font: 500 11.5px/1.25 var(--sans); }
.nwx-cal .nwx-ev > i { margin-top: 3px; width: 7px; height: 7px; }
.nwx-cal-rules { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; width: 100%; height: calc(100% - 30px); overflow: visible; pointer-events: none; }
.nwx-cal-list { display: none; margin: 14px 0 0; padding: 0; list-style: none; }
.nwx-cal-list.is-shown { display: block; }
.nwx-cal .nwx-ev-more { color: var(--ink-2); }
.nwx-cal-list li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; color: var(--ink); font: 500 14.5px/1.4 var(--sans); }
.nwx-cal-list li > i { transform: translateY(-1px); }
.nwx-cal-list b { flex: none; min-width: 3.6em; font: 400 15px/1.2 var(--hand); color: var(--coral-deep); }
.nwx-rep-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-items: start; }
.nwx-sk { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.nwx-sk-b { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nwx-sk-b.nwx-sk-mark { fill: var(--yellow); }
.nwx-sk-t { fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nwx-sk-l { fill: none; stroke: var(--coral); stroke-width: 3.2; stroke-linecap: round; }
.nwx-sk-h { fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; }
.nwx-sk-d circle { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.nwx-sk-n text { fill: var(--ink); font: 800 13px var(--sans); }
.nwx-sk-w text { fill: var(--ink-2); font: 400 11px var(--hand); }
/* the second line of the speed chart, a desktop's: pen blue, square marks (the first is a phone's: coral, round) */
.nwx { --pen: #2D6CDF; }
.nwx-sk-speed { max-width: 380px; }
.nwx-sk-l2 { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; }
.nwx-sk-speed .nwx-sk-d circle { stroke: var(--coral-deep); }
.nwx-sk-d2 rect { fill: #fff; stroke: var(--pen); stroke-width: 2; }
.nwx-sk-key { margin: -4px 0 6px; }
.nwx-sk-key i { background: #fff; }
.nwx-sk-key .nwx-key-phone { box-shadow: inset 0 0 0 2px var(--coral-deep); }
.nwx-sk-key .nwx-key-desk { border-radius: 1px; box-shadow: inset 0 0 0 2px var(--pen); }
.nwx-rep-note { margin: 8px 0 0; font-size: 16.5px; }
.nwx-rep-did li { padding-top: 8px; padding-bottom: 8px; border-bottom-color: transparent; }
.nwx-rep-did .tbox { top: 20px; }
.nwx-rep-hours p { margin: 8px 0 0; color: var(--ink-2); font: 500 15.5px/1.4 var(--sans); }
.nwx-rep-hours p b { color: var(--ink); }
.nwx-rep-sign { margin: 22px 0 0; text-align: right; font-size: 19px; transform: rotate(-1.5deg); }

/* the definition of finished */
.nwx-def-sub { margin: -6px 0 30px !important; max-width: none; text-wrap: balance; }
.nwx-items { display: grid; gap: 10px; margin: 0 0 30px; }
/* each item a card: its tick and words, "add a note" at its right, the note under them when there is one */
.nwx-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.nwx-item:has(.nwx-item-l input:checked) { border-color: var(--ink); box-shadow: 3px 3px 0 var(--yellow); }
.nwx-item .nwx-item-l, .nwx-item .nwx-item-l:has(input:checked) { align-items: flex-start; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.nwx-item-l b { display: block; color: var(--ink); font: 700 16.5px/1.35 var(--sans); }
.nwx-item-d { display: block; margin: 2px 0 0; color: var(--ink-2); font: 400 14.5px/1.5 var(--sans); text-wrap: balance; }
.nwx-item.is-out { border-style: dashed; box-shadow: none; }
.nwx-item.is-out b { color: var(--ink-3); text-decoration: line-through; }
.nwx-item.is-out .nwx-item-d { color: var(--ink-3); }
.nwx-item.is-fixed, .nwx-item.is-fixed:has(.nwx-item-l input:checked) { background: var(--paper-2); box-shadow: none; border-color: var(--line-2); }
.nwx-item.is-fixed .nwf-always { white-space: nowrap; text-align: right; }
.nwx-addnote { padding: 6px 0; border: 0; background: none; color: var(--coral-deep); font: 600 14px/1.4 var(--sans); white-space: nowrap; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nwx-addnote:hover { color: var(--ink); }
.nwx-note { grid-column: 1 / -1; box-sizing: border-box; width: calc(100% - 34px); min-height: 44px; margin: 10px 0 2px 34px; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 500 15.5px/1.4 var(--sans); resize: none; overflow: hidden; }
.nwx-note::placeholder { color: var(--ink-3); }
.nwx-note:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--focus, var(--ink)), 4px 4px 0 2px var(--coral); }
.nwx-note[hidden] { display: none; }
.nwx-q.nwf-q > input[type], .nwx-q.nwf-q > textarea { margin-left: 0; width: 100%; }
.nwx-q .nwf-hint { margin-left: 0; text-wrap: balance; }
.nwx-q:last-of-type { margin-bottom: 0; }
.nwx-saved { margin: 22px 0 0; padding: 10px 16px; border-radius: 10px; background: var(--yellow); color: var(--ink); font-size: 20px; }
.nwx-saved[hidden] { display: none; }

/* the block that starts it */
.nwx-start { margin: clamp(34px, 5vw, 50px) 0 0; padding: clamp(26px, 4.6vw, 46px) clamp(20px, 4.6vw, 50px); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 7px 7px 0 var(--coral); }
.nwx-start::before { display: none; }
.nwx-start-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 8px; }
.nwx-start-k .note { font-size: 22px; }
.nwx-start-k b { color: var(--ink); font: 800 clamp(2.2rem, 6vw, 3.6rem)/1 var(--sans); font-stretch: 108%; letter-spacing: -.04em; }
.nwx-start [data-if="check"] .nwx-start-k b, .nwx-start [data-if="custom"] .nwx-start-k b, .nwx-start [data-review] .nwx-start-k b { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.03em; }
.nwx-start-l { margin: 0 0 6px; color: var(--ink-2); font: 400 clamp(17px, 1.9vw, 19px)/1.55 var(--sans); text-wrap: balance; }
.nwx-start-l b { color: var(--ink); }
.nwx-quiet { color: var(--ink-3); font-size: 15.5px; }
.nwx-quiet[hidden] { display: none; }
.nwx-start .nwf-go { margin: 20px 0 16px; }
.nwx-start-in[hidden] { display: none; }
/*
 * The button that starts it: larger than any other, circled in coral marker
 * the way the landing page circles "better.", with three flicks off its
 * corner. The loop draws itself when the box comes into view.
 */
.nwx-shine { position: relative; display: inline-flex; margin: 32px 48px 30px; }
.btn.nwx-big { height: 66px; padding: 0 34px; border-radius: 17px; font-size: 20px; box-shadow: 5px 5px 0 var(--coral); }
.btn.nwx-big:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--coral); }
.btn.nwx-big:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--coral); }
/* the button that starts it has its ring of marker instead of the shadow */
.nwx-shine .btn.nwx-big, .nwx-shine .btn.nwx-big:hover, .nwx-shine .btn.nwx-big:active { transform: none; box-shadow: none; }
/* a second button of the same size, drawn in outline: the one that matters less (Z, 8 Oct) */
.btn.nwx-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
/* an outline button stays where it is when pointed at: it has no shadow to lift off (Z, 10 Oct: "weird movement on hover") */
.btn.nwx-line:hover { transform: none; background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.nwx-line:active { transform: translate(1px, 1px); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.nwx-big svg { width: 21px; height: 21px; }
.nwx-loop { position: absolute; left: -44px; top: -27px; width: calc(100% + 88px); height: calc(100% + 54px); overflow: visible; pointer-events: none; transition: transform .45s var(--spring); }
.nwx-flick { position: absolute; right: -78px; top: -50px; width: 38px; height: 38px; overflow: visible; pointer-events: none; transition: transform .45s var(--spring); transform-origin: left bottom; }
.nwx-loop path, .nwx-flick path { stroke-dasharray: 900; stroke-dashoffset: 900; }
.nwx-start.in .nwx-loop path { animation: nwx-ray 1s var(--ease) .2s forwards; }
.nwx-start.in .nwx-flick path { animation: nwx-ray .5s var(--ease) 1s forwards; }
.nwx-shine:hover .nwx-loop { transform: scale(1.04) rotate(-1deg); }
.nwx-shine:hover .nwx-flick { transform: scale(1.2); }
@keyframes nwx-ray { to { stroke-dashoffset: 0; } }
/* on a wide screen the button stands beside the money, and what happens next runs under both */
@media (min-width: 900px) {
	.nwx-start-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 44px; align-items: center; }
	.nwx-start-in > * { grid-column: 1; }
	.nwx-start-in > .nwf-go { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: center; gap: 6px; margin: 0; text-align: center; }
	.nwx-start-in > .nwx-start-end { grid-column: 1 / -1; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--line-2); }
}

/*
 * Wants to start: paper confetti thrown up from behind the heading (it lands
 * and stays), the person cheering, and what happens now.
 */
.nwx-party { position: relative; }
.nwx-party .nwf-hd { position: relative; z-index: 1; }
.nwx-cheer { width: 136px; margin: 0 0 6px 4px; }
.nwx-cheer svg { display: block; width: 100%; height: auto; overflow: visible; animation: nwx-jump .62s ease-in-out .15s 3; }
.nwx-cheer .arm-l { transform-box: view-box; transform-origin: 53px 98px; animation: nwx-cheer-l .5s ease-in-out infinite alternate; }
.nwx-cheer .arm-r { transform-box: view-box; transform-origin: 97px 98px; animation: nwx-cheer-r .5s ease-in-out .1s infinite alternate; }
.nwx-cheer .eyes { transform-box: fill-box; transform-origin: center; animation: nwx-blink 4.6s infinite; }
/* the pieces land in the air beside the person, above the heading, never on its words */
.nwx-bits { position: absolute; left: 4px; top: 0; width: 136px; height: 0; pointer-events: none; }
/* thrown from her two raised hands, as from a party popper: up and out in a fan, then falling away and gone */
.nwx-bit { position: absolute; left: 13%; top: 40px; width: 9px; height: 15px; margin: -7px 0 0 -4px; border-radius: 2px; background: var(--c); opacity: 0; animation: nwx-pop-out 1.5s cubic-bezier(.2, .7, .3, 1) calc(.35s + var(--d)) both; }
.nwx-bit-r { left: 87%; }
.nwx-bit-1 { width: 9px; height: 9px; border-radius: 50%; }
.nwx-bit-2 { width: 15px; height: 6px; }
.nwx-bit-3 { width: 6px; height: 19px; border-radius: 3px; }
@keyframes nwx-pop-out { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.3); } 38% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); animation-timing-function: cubic-bezier(.5, 0, .9, .6); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + var(--f))) rotate(calc(var(--r) * 2.4)) scale(1); } }
@keyframes nwx-jump { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-14px); } }
@keyframes nwx-cheer-l { from { transform: rotate(-9deg); } to { transform: rotate(8deg); } }
@keyframes nwx-cheer-r { from { transform: rotate(9deg); } to { transform: rotate(-8deg); } }
.nwx-next-l { list-style: none; counter-reset: nwx; margin: 0; padding: 0; }
.nwx-next-l li { counter-increment: nwx; position: relative; padding: 13px 0 13px 50px; border-top: 1px dashed var(--line-2); }
.nwx-next-l li:first-child { border-top: 0; }
.nwx-next-l li::before { content: counter(nwx); position: absolute; left: 0; top: 11px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 400 19px/1 var(--hand); transform: rotate(-4deg); }
.nwx-next-l b { display: block; margin: 0 0 1px; color: var(--ink); font: 800 18px/1.3 var(--sans); }
.nwx-next-l span { color: var(--ink-2); font: 400 16px/1.55 var(--sans); }
.nwx-next-l a { color: var(--coral-deep); }

/*
 * The checkout for the start amount: what is paid today, as lines of a bill.
 * Where it is a stand-in it says so in a box ruled by hand.
 */
.nwx-pay .nwx-h { margin-bottom: 10px; }
.nwx-row { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 11px 0; color: var(--ink); font: 500 17px/1.4 var(--sans); }
.nwx-row > i { flex: 1; min-width: 18px; border-bottom: 1.5px dotted var(--line-2); transform: translateY(-4px); }
.nwx-row b { font-weight: 800; white-space: nowrap; }
.nwx-row-sum { border-top: 1.5px dashed var(--line-2); font-size: 21px; font-weight: 800; }
.nwx-standin { margin: 16px 0 0; padding: 18px 24px 20px; background: url(doodle-frame-tall.svg) center / 100% 100% no-repeat; }
.nwx-standin[hidden] { display: none; }
.nwx-standin .note { display: block; margin: 0 0 4px; font-size: 18px; transform: rotate(-1deg); transform-origin: left center; }
.nwx-standin p:not(.note) { margin: 0; color: var(--ink-2); font: 400 15.5px/1.55 var(--sans); text-wrap: balance; }
.nwx-pay-go { gap: 14px 16px; }
.nwx-pay-go .btn[disabled], .nwx-pay-go .nwx-again[disabled] { opacity: .6; cursor: progress; }

/*
 * The project, from the start payment on: where it stands on the six steps
 * (ticked up to now, the step it is at pulsing), and the receipt, as the
 * landing page's own.
 */
.nwx-pj { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 30px 38px; align-items: start; margin-top: clamp(26px, 4vw, 40px); }
.nwx-road-l li { padding-top: 13px; padding-bottom: 13px; }
.nwx-road-l .tbox { top: 14px; margin-top: 0; }
.nwx-road-l li.on:not(.done)::after { top: 23px; margin-top: 0; }
.nwx-road-l li > span { display: block; }
.nwx-road-l b { display: block; color: inherit; font: 800 18px/1.3 var(--sans); }
.nwx-road-l em { display: block; margin-top: 1px; color: var(--ink-3); font: 400 15px/1.5 var(--sans); }
.nwx-road-l li.on em { color: var(--ink-2); }
.nwx-road-l li.is-now b::after { content: "now"; display: inline-block; margin-left: 10px; color: var(--coral-deep); font: 400 17px/1 var(--hand); transform: rotate(-4deg); }
.nwx-road-go { margin: 16px 0 0; }
.nwx-road-go .nwx-again { display: inline-flex; align-items: center; text-decoration: none; }
.nwx-slip { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.nwx-receipt, .fine.in .nwx-receipt { width: min(310px, 100%); transform: rotate(1.6deg); transition: none; }
.nwx-receipt .muted { color: #666872; }
.nwx-receipt .row span:first-child { min-width: 0; }
.nwx-receipt .row span:last-child { white-space: nowrap; }
.nwx-receipt-standin { margin-top: 8px; }
.nwx-receipt-standin[hidden] { display: none; }
/*
 * The project page (step 3). Three cards under the heading: what is theirs
 * to do now (the list of what we need, or the review), then the thread.
 */
.nwx-need, .nwx-rev, .nwx-talk { margin-top: clamp(26px, 4vw, 38px); }
.nwx-need[hidden], .nwx-rev[hidden] { display: none; }
.nwx-need .sub, .nwx-rev .sub { margin: 0 0 14px; color: var(--ink-2); font-size: 17px; line-height: 1.55; text-wrap: balance; }
/* no passwords: said plainly, with the lock the flow already uses, in a box ruled by hand */
.nwx-nopass { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 22px 15px; background: url(doodle-frame-tall.svg) center / 100% 100% no-repeat; color: var(--ink-2); font: 400 15.5px/1.5 var(--sans); }
.nwx-nopass svg { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--ink); }
.nwx-nopass b { color: var(--ink); }
.nwx-nopass span { text-wrap: balance; }

/* an item of the list: its name and why, the choices it can be answered with, files where they help, a note */
.nwx-needs { display: grid; gap: 12px; margin: 0 0 6px; }
.nwx-nitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; min-width: 0; margin: 0; padding: 14px 16px 12px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.nwx-nitem.is-in { border-color: var(--ink); box-shadow: 3px 3px 0 var(--yellow); }
.nwx-nitem-h { display: flex; align-items: flex-start; gap: 12px; float: left; width: 100%; padding: 0; grid-column: 1 / -1; }
.nwx-nitem-h .tbox { flex: none; width: 26px; height: 26px; margin-top: 1px; overflow: visible; }
.nwx-nitem-h .bx { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.nwx-nitem-h .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 .45s var(--ease); }
.nwx-nitem.is-in .tk { stroke-dashoffset: 0; }
.nwx-nitem-h b { display: block; color: var(--ink); font: 800 17.5px/1.3 var(--sans); }
.nwx-nitem-h small { display: block; margin-top: 2px; color: var(--ink-2); font: 400 14.5px/1.5 var(--sans); text-wrap: balance; }
.nwx-nitem.is-in .nwx-nitem-h b::after { content: "sent"; display: inline-block; margin-left: 10px; color: var(--coral-deep); font: 400 16px/1 var(--hand); transform: rotate(-3deg); }
.nwx-nitem.is-ask .nwx-nitem-h b::after { content: "we’ll help"; display: inline-block; margin-left: 10px; color: var(--coral-deep); font: 400 16px/1 var(--hand); transform: rotate(-3deg); }
.nwx-choices { grid-column: 1 / -1; display: grid; gap: 2px; margin: 8px 0 0 38px; }
.nwx-choice { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; color: var(--ink); font: 500 15.5px/1.45 var(--sans); cursor: pointer; }
.nwx-choice input { flex: none; appearance: none; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--ink); border-radius: 50%; background: #fff; cursor: pointer; }
.nwx-choice input:checked { background: radial-gradient(circle, var(--ink) 0 5px, #fff 6px); }
.nwx-choice input:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwx-need-f { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 0 38px; }
.nwx-nitem-n { grid-column: 1 / -1; margin: 0 0 0 38px; }
.nwx-nitem-n .nwx-note { width: 100%; margin: 4px 0 4px; }
.nwx-nitem-open, .nwx-nitem-sent { grid-column: 1 / -1; min-width: 0; }
.nwx-nitem-open[hidden], .nwx-nitem-sent[hidden] { display: none; }
.nwx-nitem-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 4px 38px; }
.nwx-nitem-go .btn { height: 46px; padding: 0 18px; font-size: 15.5px; }
.nwx-nitem-go .note { font-size: 17px; }
/* until something is picked there is nothing to send: the button waits, quietly */
.nwx-nitem:not(.is-picked) .nwx-nitem-go { display: none; }
.nwx-nitem-sent { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; margin: 4px 0 2px 38px; }
.nwx-nitem-sent > * { grid-column: 1; }
.nwx-nitem-sent > .nwx-again { grid-column: 2; grid-row: 1; }
.nwx-nitem-a { margin: 0; color: var(--ink); font: 500 15.5px/1.5 var(--sans); text-wrap: balance; }
.nwx-nitem-an { margin: 0; color: var(--ink-2); font: 400 italic 15px/1.5 var(--sans); overflow-wrap: anywhere; }
.nwx-nitem.is-sent .nwx-nitem-h small { display: none; }
/* completion: the plan, by the month or by the year, as two cards to choose between; then what full access is */
.nwx .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nwx-final { position: relative; }
.nwx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 12px; margin: 16px 0 18px; padding: 0; border: 0; min-width: 0; }
.nwx-plan { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.nwx-plan.is-on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--yellow); }
.nwx-plan input { flex: none; appearance: none; width: 20px; height: 20px; margin: 2px 0 0; border: 2px solid var(--ink); border-radius: 50%; background: #fff; cursor: pointer; }
.nwx-plan input:checked { background: radial-gradient(circle, var(--ink) 0 5px, #fff 6px); }
.nwx-plan input:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwx-plan b { display: block; color: var(--ink); font: 800 17px/1.3 var(--sans); }
.nwx-plan em { display: block; margin: 2px 0; color: var(--ink); font: 600 normal 16px/1.4 var(--sans); }
.nwx-plan small { display: block; color: var(--ink-2); font: 400 14px/1.45 var(--sans); text-wrap: balance; }
.nwx-final .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
/* the launch: the day agreed and what happens on it, each line ticked once it is true */
.nwx-launch .nwx-h .note { display: inline-block; margin-left: 8px; font-size: 20px; transform: rotate(-3deg); }
.nwx-launch-l { margin: 4px 0 0; }
.nwx-launch-l li { color: var(--ink); }
.nwx-launch-l li .bx { stroke: var(--ink); }
.nwx-launch-l li em { color: var(--ink-2); overflow-wrap: anywhere; }
.nwx-launch .nwx-small { margin: 14px 0 0; text-wrap: balance; }
.nwx-launch .nwx-access-go .note { overflow-wrap: anywhere; }
.nwx-launch [hidden] { display: none; }
.nwx-access .nwx-h .note { display: inline-block; margin-left: 8px; font-size: 20px; transform: rotate(-3deg); }
.nwx-access-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 32px; margin: 6px 0 4px; }
.nwx-access-two h3 { margin: 10px 0 6px; font: 800 17px/1.3 var(--sans); }
.nwx-access-two h3 .note { margin-right: 6px; font-size: 18px; }
.nwx-access-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 0; }
/*
 * Every month (step 5): the month's card on a client's page, and a report
 * opened as a sheet. The sheet is the example's, with their own numbers.
 */
.nwx-care { margin-top: clamp(26px, 4vw, 38px); }
.nwx-care[hidden] { display: none; }
.nwx-care .nwx-h .note { display: inline-block; margin-left: 8px; font-size: 20px; transform: rotate(-3deg); }
.nwx-care .sub { margin: 0 0 16px; color: var(--ink-2); font-size: 17px; line-height: 1.55; text-wrap: balance; }
.nwx-care-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 40px; align-items: start; }
.nwx-care h3 { margin: 6px 0 10px; font: 800 17px/1.3 var(--sans); color: var(--ink); }
.nwx-care h3 .note { margin-right: 6px; font-size: 18px; }
.nwx-care-h { margin-top: 24px !important; }
.nwx-care-h[hidden] { display: none; }
.nwx-care-small { margin: 6px 0 0; color: var(--ink-2); font: 400 14.5px/1.5 var(--sans); text-wrap: balance; }
.nwx-care-reports p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.nwx-care-reports .nwx-care-small { flex-basis: 100%; }
/* each piece of work on a slip of its own, as the thread's log is kept: white paper a little askew, a soft shadow, no border */
.nwx-care-work { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.nwx-care-work .nwx-work { position: relative; padding: 16px 20px 16px 52px; border: 0; border-radius: 3px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 28, .1), 0 12px 24px -16px rgba(23, 23, 28, .3); color: var(--ink); font: 500 16px/1.5 var(--sans); }
.nwx-care-work .nwx-work:nth-child(even) { transform: rotate(.25deg); }
.nwx-care-work .nwx-work.is-quoted { background: #FFFDF4; }
.nwx-care-work .nwx-work .tbox { top: 17px; left: 16px; margin-top: 0; }
.nwx-work-dot { position: absolute; left: 21px; top: 22px; width: 13px; height: 13px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; }
.nwx-work.is-declined { opacity: .82; }
/* a pencil line between the month's parts */
.nwx-rule { display: block; height: 12px; margin: 30px 0 22px; background: url(doodle-rule.svg) center / 100% 100% no-repeat; opacity: .75; }
.nwx-rule[hidden] { display: none; }
.nwx-care .nwx-rule + .nwx-care-h { margin-top: 0 !important; }
/* paid: a tick in coral marker beside the word, as a teacher marks a page; drawn in when it was just paid for */
.nwx-paidmark { position: absolute; top: 10px; right: 16px; display: flex; align-items: center; gap: 2px; color: var(--coral-deep); font: 400 23px/1 var(--hand); transform: rotate(-7deg); pointer-events: none; }
.nwx-paidmark svg { display: block; width: 42px; height: 37px; overflow: visible; }
.nwx-work.is-paid { padding-right: 116px; }
.nwx-work.just-paid .nwx-paidmark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nwx-paid-draw .55s .35s var(--ease) forwards; }
.nwx-work.just-paid .nwx-paidmark > span { opacity: 0; animation: nwx-paid-say .4s .85s var(--spring) forwards; }
@keyframes nwx-paid-draw { to { stroke-dashoffset: 0; } }
@keyframes nwx-paid-say { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.nwx-work.just-paid .nwx-paidmark path, .nwx-work.just-paid .nwx-paidmark > span { animation: none; stroke-dashoffset: 0; opacity: 1; }
}
@media (max-width: 640px) {
	.nwx-care-work .nwx-work { padding: 14px 16px 14px 46px; }
	.nwx-care-work .nwx-work .tbox { left: 12px; }
	.nwx-work-dot { left: 17px; }
	.nwx-work.is-paid { padding-right: 16px; }
	.nwx-paidmark { position: static; display: inline-flex; margin: 8px 0 -4px -4px; transform: rotate(-4deg); transform-origin: left center; }
}
/*
 * Where they are needed (Z, 8 October: "like a sticker on documents where a
 * person needs to sign"): a flag hatched in coral marker, pointing at the
 * button, laid in the margin where the page has room; where it has not, a
 * tab above the button, its point down. Drawn by doodles.mjs; its words are
 * the page's marker face, and a screen reader is told nothing of it (the
 * button says what it does).
 */
.nwx-flagged { position: relative; }
.nwx-flag { position: absolute; z-index: 2; right: calc(100% + 16px); top: 0; box-sizing: border-box; display: flex; align-items: center; width: 158px; height: 50px; padding: 0 46px 2px 15px; background: url(doodle-flag.svg) center / 100% 100% no-repeat; color: var(--ink); font: 400 16.5px/1 var(--hand); letter-spacing: .02em; white-space: nowrap; transform: rotate(-3deg); pointer-events: none; filter: drop-shadow(0 6px 6px rgba(60, 48, 28, .18)); }
.nwf-go.nwx-flagged > .nwx-flag { top: calc(50% - 24px); }
.nwx-work-go.nwx-flagged > .nwx-flag { top: -1px; }
.nwx-nitem.nwx-flagged > .nwx-flag { top: 10px; right: calc(100% + 12px); }
@media (max-width: 1179px) {
	.nwf-go.nwx-flagged > .nwx-flag { position: static; order: -1; flex: 0 0 100%; width: 100%; height: 58px; margin: 0 0 -16px; padding: 0 16px 19px 16px; background: url(doodle-flag-down.svg) 0 0 / 152px 58px no-repeat; transform: rotate(-2deg); transform-origin: 0 50%; }
	.nwx-nitem.nwx-flagged { margin-top: 38px; }
	.nwx-nitem.nwx-flagged > .nwx-flag { top: -46px; left: 8px; right: auto; width: 152px; height: 58px; padding: 0 16px 19px 16px; background-image: url(doodle-flag-down.svg); transform: rotate(-2deg); }
}
.nwx-work.is-doing .nwx-work-dot, .nwx-work.is-approved .nwx-work-dot { background: var(--coral); }
.nwx-work.is-quoted .nwx-work-dot { background: var(--yellow); }
.nwx-work b { display: block; font-weight: 800; overflow-wrap: anywhere; text-wrap: balance; }
.nwx-work-when { display: block; color: var(--ink-2); font: 400 14px/1.4 var(--sans); }
.nwx-work p { margin: 4px 0 0; color: var(--ink-2); font: 400 15.5px/1.5 var(--sans); text-wrap: balance; }
.nwx-work.is-quoted p:first-of-type { color: var(--ink); font-weight: 600; }
.nwx-work .nwx-work-words { color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.nwx-work-go { margin: 12px 0 2px; }
.nwx-work-go .btn[disabled], .nwx-work-go .nwx-again[disabled] { opacity: .6; cursor: progress; }
/* their card and plan, at Stripe (inc/stripe.php): for a plan paid by card, under the receipt */
.nwx-care-bill { box-sizing: border-box; width: min(310px, 100%); margin: 26px auto 0; text-align: center; }
.nwx-care-bill[hidden] { display: none; }
.nwx-care-bill .nwx-care-small { margin: 10px 0 0; }
.nwx-care-bill .nwf-error { margin-top: 14px; text-align: left; }
.nwx-care-ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 18px 0 0; }
.nwx-care-ask a { color: var(--ink); font: 700 16px/1.4 var(--sans); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nwx-care-ask a:hover { color: var(--coral-deep); }
.nwx-care-ask a svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.nwx-care-ask .note { font-size: 18px; }
.nwx-sheet-real .nwx-rep-hd .note { overflow-wrap: anywhere; }
.nwx-cal td.is-out b { color: var(--pencil); opacity: .85; }
.nwx-cal .nwx-ev-down > i, .nwx-cal-list .nwx-ev-down > i { background: var(--ink); }
.nwx-rep-none { margin: 0; color: var(--ink-2); font: 400 15px/1.5 var(--sans); }
.nwx-rep-did li small { color: var(--ink-2); font: 500 14px var(--sans); white-space: nowrap; }
.nwx-rep-line { margin: 0; color: var(--ink); font: 400 16.5px/1.6 var(--sans); white-space: pre-line; overflow-wrap: anywhere; text-wrap: balance; }
.nwx-need-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 18px 0 0; color: var(--ink-2); font: 400 15.5px/1.5 var(--sans); }
.nwx-need-foot .note { font-size: 19px; }
.nwx-need-foot a, .nwx-rev-else a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nwx-need-foot a:hover, .nwx-rev-else a:hover { color: var(--coral-deep); }
.nwx-rev-else { margin: 16px 0 0; color: var(--ink-2); font: 400 15.5px/1.55 var(--sans); text-wrap: balance; }
.nwx-need .btn[disabled], .nwx-rev .btn[disabled], .nwx-write .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.nwx-rev .btn[hidden] { display: none; }

/* a file: a picture shown small, anything else by its name; ours of an update shown large */
.nwx-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nwx-files:empty { display: none; }
.nwx-file { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 10px 5px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; font: 500 14px/1.3 var(--sans); }
.nwx-file small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.nwx-file-n { min-width: 0; padding: 2px 0; border: 0; background: none; color: var(--ink); font: 600 14px/1.3 var(--sans); text-align: left; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; cursor: pointer; }
.nwx-file-n:hover { color: var(--coral-deep); }
.nwx-file.is-pic { padding: 4px; }
.nwx-file.is-pic img { display: block; width: 86px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--paper-2); }
.nwx-files.is-large { align-items: flex-start; gap: 12px; }
.nwx-files.is-large .nwx-file.is-pic { display: block; width: min(100%, 440px); padding: 0; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.nwx-files.is-large .nwx-file.is-pic img { width: 100%; height: auto; border-radius: 0; }
.nwx-file-x { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font: 700 15px/1 var(--sans); cursor: pointer; }
.nwx-file.is-pic .nwx-file-x { position: absolute; right: -7px; top: -7px; }
.nwx-file-x:focus-visible, .nwx-file-n:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwx-attach { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.nwx-attach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.nwx-attach:focus-within { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwx-attach.is-busy { opacity: .6; pointer-events: none; }
.nwx-attach.is-busy::after { content: "…"; margin-left: 2px; }

/* the review: each item of their definition, and whether it needs a change */
.nwx-rev-open { margin: 0 0 24px; }
.nwx-rev-open[hidden] { display: none; }
.nwx-rev-l { margin-bottom: 4px; }
.nwx-rev .nwf-hint { margin: 0 0 12px; font-size: 15.5px; text-wrap: balance; }
.nwx-rev .nwf-hint[hidden] { display: none; }
.nwx-revs { display: grid; gap: 10px; margin: 0 0 28px; }
.nwx-ritem { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 18px; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; }
.nwx-ritem.is-bad { border-color: var(--ink); box-shadow: 3px 3px 0 var(--coral-light, #F8B09E); }
.nwx-ritem-t b { display: block; color: var(--ink); font: 700 16.5px/1.35 var(--sans); }
.nwx-ritem-t small { display: block; margin-top: 2px; color: var(--ink-2); font: 400 14.5px/1.5 var(--sans); text-wrap: balance; }
.nwx-ritem-c { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font: 600 14.5px/1.3 var(--sans); white-space: nowrap; cursor: pointer; }
.nwx-ritem-c input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--ink); border-radius: 6px; background: #fff; cursor: pointer; }
.nwx-ritem-c input:checked { background: var(--ink) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; }
.nwx-ritem-c input:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwx-ritem .nwx-note { width: 100%; margin: 10px 0 2px; }
.nwx-rev-asked { margin: 0; padding: 0; list-style: none; }
.nwx-rev-asked li { padding: 10px 0; border-top: 1px dashed var(--line-2); }
.nwx-rev-asked li:first-child { border-top: 0; }
.nwx-rev-asked b { display: block; font: 700 16.5px/1.35 var(--sans); }
.nwx-rev-asked span { color: var(--ink-2); font: 400 15.5px/1.5 var(--sans); }
.nwx-rev .nwx-small { margin: 14px 0 0; text-wrap: balance; }

/* the thread: who and when in the margin's marker, then the words; what happened is a quiet line */
/* the thread, as a conversation: each day named once; what happened as a line with a drawn tick; our words on paper beside the person who wrote them, theirs on a yellow slip at the right */
.nwx-talk-sub { margin: -6px 0 18px; font-size: 16px; }
.nwx-thread { list-style: none; display: grid; gap: 12px; margin: 0 0 24px; padding: 0; }
.nwx-tday { margin: 8px 0 -2px; text-align: center; }
.nwx-tday:first-child { margin-top: 0; }
.nwx-tday .note { display: inline-block; font-size: 17px; color: var(--ink-2); transform: rotate(-1.5deg); }
.nwx-tnote { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.nwx-tnote time { margin-left: auto; padding-left: 10px; color: var(--ink-3); font: 500 12.5px/1.3 var(--mono); white-space: nowrap; }
/* what happened, as a log kept by hand: a slip of white paper a little askew, its lines ticked off, a marker word at its corner */
.nwx-tlog { position: relative; justify-self: center; box-sizing: border-box; width: min(100%, 620px); margin: 6px 0 4px; padding: 16px 20px 12px 18px; border-radius: 3px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 28, .1), 0 12px 24px -16px rgba(23, 23, 28, .32); transform: rotate(-.35deg); }
.nwx-tlog:nth-of-type(even) { transform: rotate(.3deg); }
.nwx-tlog-k { position: absolute; top: -11px; left: 14px; padding: 0 8px; background: var(--yellow); color: var(--ink); font-size: 15px; line-height: 22px; transform: rotate(-3deg); }
.nwx-tlog-l { list-style: none; display: grid; margin: 0; padding: 0; }
.nwx-tlog-l li { display: flex; align-items: flex-start; gap: 11px; padding: 8px 0; border-top: 1px dashed var(--line-2); }
.nwx-tlog-l li:first-child { border-top: 0; }
.nwx-tlog-l p { flex: 1; min-width: 0; margin: 0; color: var(--ink); font: 500 15.5px/1.45 var(--sans); text-wrap: balance; overflow-wrap: anywhere; }
.nwx-tlog-l time { margin: 3px 0 0; padding-left: 10px; color: var(--ink-2); font: 500 12.5px/1.3 var(--mono); white-space: nowrap; }
.nwx-tlog-l .nwx-ttick { margin-top: 1px; }
.nwx-ttick { flex: none; width: 20px; height: 20px; }
.nwx-ttick svg, .nwx-tface svg { display: block; width: 100%; height: auto; overflow: visible; }
/* a drawn head one of us chose (inc/faces.php): a picture of the same drawing's size */
.nwx-tface-head { display: block; width: 100%; height: auto; }
.nwx-tface { flex: none; width: 40px; margin-top: 2px; }
/* one of us with a picture of their own: in a ring drawn a little out of true, as the head is */
.nwx-tface.has-pic { width: 44px; }
.nwx-tface-pic { display: block; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; object-fit: cover; background: #fff; transform: rotate(-2deg); }
.nwx-tsay { min-width: 0; max-width: min(100%, 560px); padding: 12px 16px 14px; border-radius: 4px 16px 16px 16px; background: var(--paper-2); }
.nwx-tnote.is-mine { justify-content: flex-end; }
.nwx-tnote.is-mine .nwx-tsay { border-radius: 16px 4px 16px 16px; background: #FFF1C2; }
.nwx-tnote.is-update .nwx-tsay { max-width: 100%; flex: 1; }
.nwx-tnote-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 4px; }
.nwx-tnote-h b { color: var(--ink); font: 800 14.5px/1.3 var(--sans); }
.nwx-tnote-h .note { font-size: 16px; }
.nwx-tnew { display: inline-block; transform: rotate(-4deg); }
.nwx-tnote-b { margin: 0; color: var(--ink); font: 400 16.5px/1.55 var(--sans); white-space: pre-line; overflow-wrap: anywhere; }
.nwx-tnote .nwx-files { margin-top: 10px; }
.nwx-note-none { padding: 2px 0 6px; color: var(--ink-3); font: 400 16px/1.5 var(--sans); }
.nwx-write { margin: 0; padding: 20px 0 0; border-top: 1.5px solid var(--line-2); }
.nwx-write .nwf-l { font-size: 18px; }
.nwx-write textarea { box-sizing: border-box; display: block; width: 100%; min-height: 60px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 500 16.5px/1.45 var(--sans); resize: none; overflow: hidden; }
.nwx-write textarea:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--focus, var(--ink)), 5px 5px 0 2px var(--coral); }
.nwx-write textarea::placeholder { color: var(--ink-3); }
.nwx-write .nwx-files { margin-top: 10px; }
.nwx-write .nwf-go { margin-top: 16px; gap: 12px 16px; }
.nwx-write .btn { height: 50px; }

/*
 * Paid: the celebration, and not a quiet one (Z, 2 Oct). Bunting across the
 * top with its flags flapping, confetti falling the height of the window,
 * the person jumping, two shouts and a PAID stamp pressed on. All of it only
 * right after the payment (.is-party), once. With
 * reduced motion: the bunting, the stamp and the landed confetti, standing still.
 */
.nwx-project .nwx-bunting, .nwx-project .nwx-bits, .nwx-project .nwx-cheer, .nwx-rain { display: none; }
.nwx-project.is-party .nwx-bunting, .nwx-project.is-party .nwx-bits, .nwx-project.is-party .nwx-cheer, .nwx-project.is-party .nwx-rain { display: block; }
.nwx-bunting { height: 92px; margin: -8px 0 6px; }
/*
 * The project's celebration (Z, 8 Oct, after the page "From preview to
 * launch"): the bunting from edge to edge just under the header, and the
 * person beside the heading, her feet near the card below, so the words come
 * up the page. --sbw is the scrollbar's width (finish.js), so the bunting is
 * the window's width and not one pixel more.
 */
.nwx-paid .nwx-bunting { position: relative; z-index: 0; width: calc(100vw - var(--sbw, 0px)); height: max(70px, calc((100vw - var(--sbw, 0px)) * 110 / 1200)); margin: calc(64px - clamp(128px, 16vh, 168px)) 0 clamp(28px, 3.4vw, 52px) calc(50% - (100vw - var(--sbw, 0px)) / 2); }
@media (max-width: 600px) { .nwx-paid .nwx-bunting { margin-top: calc(70px - 112px); margin-bottom: 18px; } }
/* the drawing's lowest flags hang a little below its own frame: shown whole (Z, 8 Oct: "the ribbon ends are cut off"); sideways, main.nwx clips */
.nwx-paid .nwx-bunting svg { overflow: visible; }
/* on a phone too, she stands beside the words, smaller, her shouts over her head */
.nwx-project.is-party .nwx-paid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bunt bunt" "hd cheer"; align-items: end; column-gap: 10px; }
.nwx-paid .nwx-bunting { grid-area: bunt; }
.nwx-paid .nwf-hd { grid-area: hd; }
.nwx-paid .nwx-cheer-big { grid-area: cheer; position: relative; z-index: 2; margin: 0 0 -8px; }
/* she stands at the right now: what she throws is cut at the window's edge (main.nwx clips sideways), never a page wider than the window */
.nwx-paid .nwx-bits { grid-area: cheer; position: absolute; top: 0; left: 0; }
main.nwx { overflow-x: clip; }
@media (max-width: 760px) {
	.nwx-paid .nwx-cheer-big { width: 92px; align-self: start; margin-top: 34px; }
	.nwx-paid .nwx-bits { width: 92px; }
	.nwx-paid .nwx-yay { left: auto; right: 6px; top: -26px; font-size: 17px; transform-origin: right bottom; }
	.nwx-paid .nwx-yay-2 { display: none; }
}
@media (min-width: 761px) {
	.nwx-project.is-party .nwx-paid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bunt bunt" "hd cheer"; align-items: end; column-gap: clamp(24px, 4vw, 64px); }
	.nwx-paid .nwx-bunting { grid-area: bunt; }
	.nwx-paid .nwf-hd { grid-area: hd; }
	.nwx-paid .nwx-cheer-big { grid-area: cheer; position: relative; z-index: 2; margin: 0 clamp(0px, 3vw, 48px) -10px 0; }
	.nwx-paid .nwx-bits { grid-area: cheer; position: absolute; top: 0; left: 0; }
	/* her shouts to her left, where the page has room */
	.nwx-paid .nwx-yay { left: auto; right: 150px; transform-origin: right bottom; }
	.nwx-paid .nwx-yay-2 { left: auto; right: 168px; }
}
.nwx-bunting svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nwx-bunting .flag { transform-box: fill-box; transform-origin: 50% 0; animation: nwx-flap 1.5s ease-in-out infinite alternate; }
.nwx-bunting .flag-1 { animation-delay: -.4s; } .nwx-bunting .flag-2 { animation-delay: -.8s; } .nwx-bunting .flag-3 { animation-delay: -1.2s; }
.nwx-paid .nwx-bits { top: clamp(78px, 8.6vw, 128px); width: 164px; }
.nwx-paid .nwx-bit { top: 48px; }
.nwx-cheer-big { position: relative; width: 164px; }
.nwx-project.is-party .nwx-cheer-big svg { animation: nwx-jump .62s ease-in-out .15s 9; }
.nwx-yay { position: absolute; left: 158px; top: 2px; white-space: nowrap; font-size: 23px; opacity: 0; transform: rotate(-9deg) scale(.4); transform-origin: left bottom; }
.nwx-yay-2 { left: 178px; top: 62px; font-size: 20px; transform: rotate(7deg) scale(.4); }
.nwx-project.is-party .nwx-yay { animation: nwx-pop .5s var(--spring) .5s forwards; }
.nwx-project.is-party .nwx-yay-2 { animation-delay: 1s; }
.nwx-rain { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.nwx-drop { position: absolute; left: calc(var(--x) * 1%); top: -34px; width: 9px; height: 15px; border-radius: 2px; background: var(--c); animation: nwx-fall var(--t) linear var(--d) 2 both; }
.nwx-project.is-party .nwx-receipt { animation: nwx-print 1.5s cubic-bezier(.35, .1, .3, 1) .6s both; }
@keyframes nwx-flap { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes nwx-pop { to { opacity: 1; transform: rotate(var(--tilt, -9deg)) scale(1); } }
@keyframes nwx-fall { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(calc(var(--w) * 1px), calc(100vh + 80px)) rotate(calc(var(--r) + 720deg)); } }
@keyframes nwx-print { 0% { clip-path: inset(0 0 100% 0); transform: translateY(-40px) rotate(0deg); } 100% { clip-path: inset(0 0 -14px 0); transform: rotate(1.6deg); } }
.nwx-yay-2 { --tilt: 7deg; }

@media (max-width: 900px) {
	.nwx-tiers { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
	.nwx-steps { grid-template-columns: 1fr 1fr; }
	.nwx-rep { grid-template-columns: 1fr; }
	.nwx-pj { grid-template-columns: 1fr; }
	.nwx-rep-mini { max-width: 470px; }
}
@media (max-width: 760px) {
	.nwx-gets { grid-template-columns: 1fr; }
	.nwx-found li em { flex-basis: 100%; text-align: left; }
	.nwx-item.is-fixed .nwf-always span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.nwx-keep { grid-template-columns: 1fr; }
	.nwx-box { width: 132px; }
}
@media (max-width: 620px) {
	.nwx-steps { grid-template-columns: 1fr; }
	.nwx-steps li { transform: none !important; }
	.nwx-item { grid-template-columns: minmax(0, 1fr); }
	.nwx-ritem { grid-template-columns: minmax(0, 1fr); gap: 8px 0; }
	.nwx-choices, .nwx-need-f, .nwx-nitem-n, .nwx-nitem-go, .nwx-nitem-sent { margin-left: 0; }
	.nwx-tface { width: 30px; }
	.nwx-tnote { gap: 8px; }
	.nwx-tsay { padding: 10px 12px 12px; }
	.nwx-item .nwx-addnote { justify-self: start; margin-left: 34px; }
	.nwx-shine { margin-left: 22px; margin-right: 22px; }
	.nwx-cheer-big { width: 132px; }
	.nwx-yay { left: 128px; font-size: 20px; } .nwx-yay-2 { left: 140px; top: 50px; font-size: 18px; }
	.nwx-bunting { height: 76px; }
	.nwx-paid .nwx-bits { top: 74px; width: 132px; }
	.nwx-paid .nwx-bit { top: 38px; }
	.nwx-row { font-size: 16px; }
	.nwx-flick { right: -44px; }
}
/* the report's sheet, when it is itself narrow (in the full view on a phone): the days keep their marks, and what they say is listed under the month */
@container nwxrep (max-width: 640px) {
	.nwx-figs { grid-template-columns: 1fr 1fr; gap: 10px; }
	.nwx-figs dd { font-size: 21px; }
	.nwx-figs dt { font-size: 15px; }
	.nwx-rep-two { grid-template-columns: 1fr; }
	.nwx-cal td > div { height: 46px; padding: 4px 2px 4px 5px; }
	.nwx-cal th { padding-left: 4px; font-size: 13px; }
	.nwx-cal .nwx-ev { display: inline-flex; margin: 0 1px 0 0; }
	.nwx-cal .nwx-ev > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.nwx-cal .nwx-ev > i { width: 9px; height: 9px; margin-top: 2px; }
	.nwx-cal-list { display: block; }
}
@media (max-width: 560px) {
	/* the person sits in the corner of the text, which runs round them */
	.nwx-person { display: block; padding: 20px 18px 18px; }
	.nwx-me { float: right; width: 92px; margin: -8px -4px 2px 10px; }
	.nwx .nwx-hi { left: -14%; top: 0; }
}
@media (max-width: 460px) {
	.nwx-tiers { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.nwx-me .all, .nwx-me .eyes, .nwx-me.hi .arm, .nwx-me.hi svg { animation: none; }
	.nwx-loop path, .nwx-flick path { animation: none !important; stroke-dashoffset: 0 !important; }
	.nwx-bits { display: none !important; }
	.nwx-cheer svg, .nwx-cheer .arm { animation: none !important; }
	.nwx-project.is-party .nwx-rain { display: none; }
	.nwx-bunting .flag, .nwx-project.is-party .nwx-receipt, .nwx-project.is-party .nwx-cheer-big svg { animation: none !important; }
	.nwx-project.is-party .nwx-yay { animation: none; opacity: 1; transform: rotate(var(--tilt, -9deg)); }
}
/* the way back in (inc/find.php): an address and one button */
.nwx-find { max-width: 620px; margin: 26px 0 18px; }
.nwx-find-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.nwx-find-row input { flex: 1 1 260px; min-width: 0; }
/* the page's heading pushes its own buttons down; this one stands beside its box (Z, 10 Oct: "styling is broken") */
.nwx-find-row .btn { flex: none; height: 57px; margin-top: 0; }
@media (max-width: 560px) { .nwx-find-row .btn { flex: 1 1 100%; } }
.nwx-find .nwx-said { margin: 14px 0 0; }
/* the page's foot: another website, and signing out on this device */
.nwx-leave { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin: clamp(34px, 5vw, 56px) 0 0; padding-top: 22px; background: url(doodle-rule.svg) top center / 100% 12px no-repeat; }
.nwx-leave a { color: var(--ink); font: 700 16px/1.4 var(--sans); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nwx-leave a:hover { color: var(--coral-deep); }
.nwx-leave a svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.nwx-leave-out { padding: 0; border: 0; background: none; color: var(--ink-2); font: 500 15px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nwx-leave-out:hover { color: var(--ink); }

/* under the four tiers: straight down to where they start (Z, 9 Oct) */
.nwx-to-start { display: flex; justify-content: center; margin: 26px 0 0; }
.nwx-to-start .btn .ico { width: 18px; height: 18px; }
/* its arrow points down, so it nudges down, not sideways */
.nwx-to-start .btn:hover .ico, .nwx-to-start .btn:focus-visible .ico { transform: translateY(3px); }
/*
 * Talking it over before they pay (inc/finish-talk.php): the thread as the project page draws it, our prices on a
 * slip under the words they came with (the one that stands now with its sticker, an older one faded), what they took
 * back faded with a word, and the box to write in.
 */
.nwx-talk { margin: clamp(46px, 6vw, 70px) 0 0; }
.nwx-talk[hidden] { display: none; }
.nwx-talk-c { padding: clamp(22px, 3.6vw, 34px) clamp(18px, 3.6vw, 36px) clamp(22px, 3.2vw, 30px); }
.nwx-talk-l { margin: 4px 0 26px; }
.nwx-talk-l[hidden] { display: none; }
.nwx-talk-w .nwf-l { display: block; margin: 0 0 8px; }
.nwx-talk-w textarea { display: block; box-sizing: border-box; width: 100%; min-height: 84px; resize: vertical; }
.nwx-talk-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; }
.nwx-talk-go .note { color: var(--ink-3); font-size: 17px; }
.nwx-tnote.is-taken .nwx-tsay { opacity: .55; }
.nwx-tnote.is-taken .nwx-tnote-b { text-decoration: line-through; text-decoration-color: rgba(23, 23, 28, .45); }
.nwx-tprice { position: relative; display: grid; gap: 2px; margin: 12px 0 2px; padding: 12px 16px 12px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 28, .1), 0 10px 20px -14px rgba(23, 23, 28, .35); transform: rotate(-.4deg); }
.nwx-tprice-k { color: var(--ink-2); font-size: 16px; line-height: 1.2; }
.nwx-tprice-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.nwx-tprice-p b { color: var(--ink); font: 800 26px/1.15 var(--sans); font-stretch: 106%; letter-spacing: -.03em; }
.nwx-tprice-p span { color: var(--ink-2); font: 500 15px/1.4 var(--sans); }
.nwx-tprice-now { position: absolute; top: -12px; right: 12px; padding: 1px 9px 2px; border-radius: 4px; background: var(--yellow); color: var(--ink); font-size: 15px; line-height: 21px; transform: rotate(3deg); }
.nwx-tprice.is-far { box-shadow: 0 1px 2px rgba(23, 23, 28, .08); }
.nwx-tprice.is-was { background: rgba(255, 255, 255, .55); box-shadow: none; transform: none; }
.nwx-tprice.is-was .nwx-tprice-p b { color: var(--ink-2); font-size: 20px; text-decoration: line-through; text-decoration-color: rgba(23, 23, 28, .4); }
.nwx-tprice.is-same .nwx-tprice-p b { text-decoration: none; }
/* the start box: a price agreed in the conversation, and the way back up to it */
.nwx-agreed { margin: 10px 0 0; font-size: 16px; }
.nwx-agreed[hidden] { display: none; }
.nwx-agreed a, .nwx-start [data-wait] a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nwx-start [data-wait][hidden], .nwx-start [data-back-wrap][hidden] { display: none; }
.nwx-start [data-wait] .nwx-start-k b { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.03em; }
.nwx-start [data-back-wrap] { margin-top: 14px; }
.nwx-start [data-back-wrap] .nwx-again { margin-left: 4px; vertical-align: 1px; }
/* a price of our own: a card under the four tiers, the words and the figure side by side */
.nwx-quote { margin: 26px 0 0; }
.nwx-quote[hidden] { display: none; }
.nwx-quote-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 32px; padding: 22px 24px; }
.nwx-quote-c h3 { margin-bottom: 6px; }
.nwx-quote-c .nwx-tier-l { max-width: 60ch; }
.nwx-quote-c .nwx-tier-p { margin: 0; text-align: right; }
.nwx-quote-c .nwx-tier-p b { font-size: 30px; }
@media (max-width: 600px) { .nwx-quote-c { grid-template-columns: 1fr; padding: 20px 18px; } .nwx-quote-c .nwx-tier-p { text-align: left; } }
.nwx-start:focus { outline: none; }
.nwx-start:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 4px; }

/* who orders, beside "Start my site": a private person asks us to begin within their 14 days (inc/finish-withdraw.php) */
.nwx-who { margin: 16px 0 0; }
.nwx-who .nwf-terms { margin: 10px 0 0; padding: 0; border-top: 0; font-size: 15.5px; }
.nwx-start-terms { margin-top: 12px !important; }
.nwx-start-terms a { color: var(--coral-deep); text-underline-offset: 3px; }

/* a private person's 14 days to withdraw, under the project's heading: "Withdraw from contract here", and the statement it opens */
/* under the receipt and the billing line, after a thin line, in their size (Z, 13 Oct) */
.nwx-wd { box-sizing: border-box; width: min(310px, 100%); margin: 26px auto 0; padding: 22px 0 0; border-top: 1px solid rgba(23, 23, 28, .14); text-align: center; }
.nwx-wd[hidden] { display: none; }
.nwx-wd-row { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nwx-wd-l { margin: 0; color: var(--ink-2); font: 400 14.5px/1.5 var(--sans); text-wrap: balance; }
.nwx-wd-l b { color: var(--ink); font-weight: 600; }
.nwx-wd-form { margin: 20px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--line-2); text-align: left; }
.nwx-wd-form .nwx-h { font-size: 19px; }
.nwx-wd-form .nwf-l { font-size: 15px; }
.nwx-wd-form .nwx-q + .nwx-q { margin-top: 14px; }
.nwx-wd-back { margin: 16px 0 0; color: var(--ink); font: 600 15px/1.5 var(--sans); text-wrap: pretty; }
.nwx-wd-form .nwf-go { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.nwx-wd-form .sub { max-width: none; margin: 0 0 16px; font-size: 14.5px; }

/* a new business (inc/idea-project.php): what its site should do, as stickers to pick as many of as they like, and their own words */
.nwx-wish .nwx-all { max-width: none; text-wrap: pretty; margin-bottom: 20px; }
.nwx-wish .nwx-wishes { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.nwx-wishes label { position: relative; cursor: pointer; max-width: 100%; }
.nwx-wishes input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.nwx-wishes span { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 7px 16px 7px 9px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font: 600 15.5px/1.25 var(--sans); transition: border-color .2s, background .2s, color .2s, transform .25s var(--ease), box-shadow .2s; }
.nwx-wishes span i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 50% 46% 52% 48%; background: #fff; }
.nwx-wishes span i::after { content: '+'; color: var(--ink); font: 800 15px/1 var(--sans); }
.nwx-wishes label:hover span { border-color: var(--ink); color: var(--ink); }
.nwx-wishes label:nth-child(3n) span { transform: rotate(-1.2deg); }
.nwx-wishes label:nth-child(3n+1) span { transform: rotate(.9deg); }
.nwx-wishes input:checked + span { border-color: var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.6deg); }
.nwx-wishes input:checked + span i { background: var(--coral); }
.nwx-wishes input:checked + span i::after { content: '✓'; color: #fff; font-size: 13px; }
.nwx-wishes input:focus-visible + span { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.nwx-wish textarea { min-height: 170px; }
.nwx-wish .nwf-q.nwx-q { margin-bottom: 26px; }
.nwx-wish .nwf-go { margin-top: 22px; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.nwx-wish .nwx-said { margin: 16px 0 0; }
@media (prefers-reduced-motion: reduce) { .nwx-wishes span, .nwx-wishes input:checked + span { transform: none; transition: none; } }

/*
 * What you get, how it goes and the monthly report, behind one switch (Z, 15 Oct; the kraft folder of the first try
 * "not looking great"): the three names set large, as the page's own headings are, the one open in ink with the
 * headings' yellow marker drawn in under it, the others in pencil, the page's pencil rule under them; what it opens
 * lies on the page as before.
 */
.nwx-book { margin: clamp(54px, 8vw, 84px) 0 0; }
.nwx-book:not(.is-tabbed) .nwx-pan + .nwx-pan { margin-top: clamp(40px, 6vw, 64px); }
.nwx-book.is-tabbed .nwx-book-h { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.nwx-book.is-tabbed .nwx-pan:not(.on), .nwx-pan[hidden], .nwx-tab[hidden] { display: none; }
.nwx-tabs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px clamp(14px, 2.6vw, 34px); margin: 0 0 clamp(26px, 3.6vw, 38px); padding-bottom: clamp(14px, 2vw, 20px); background: url(doodle-rule.svg) bottom center / 100% 12px no-repeat; }
.nwx-tabs[hidden] { display: none; }
.nwx-tab { position: relative; z-index: 0; padding: 2px 0; border: 0; background: none; color: var(--pencil, #5E626E); font: 800 clamp(1.45rem, 3.4vw, 2.4rem)/1.15 var(--sans); font-stretch: 108%; letter-spacing: -.035em; white-space: nowrap; cursor: pointer; transition: color .25s; }
.nwx-tab::before { content: ""; position: absolute; z-index: -1; left: -.14em; right: -.14em; top: .5em; bottom: .02em; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5%2C9%20C40%2C4%2090%2C7%20140%2C5%20C165%2C4%20185%2C6%20197%2C8%20L195%2C33%20C160%2C37%20120%2C34%2080%2C36%20C50%2C37%2025%2C35%203%2C34%20Z%22%20fill%3D%22%23FFD24A%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat; opacity: .9; clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease); }
.nwx-tab:hover { color: var(--ink); }
.nwx-tab.on { color: var(--ink); }
.nwx-tab.on::before { clip-path: inset(0 0 0 0); }
.nwx-tab:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 4px; border-radius: 4px; }
.nwx-tab:not([hidden]) ~ .nwx-tab::after { content: ""; position: absolute; left: calc(-1 * clamp(14px, 2.6vw, 34px) / 2 - 1px); top: .28em; bottom: .2em; width: 2px; border-radius: 2px; background: var(--line-2, rgba(23, 23, 28, .16)); transform: rotate(14deg); }
.nwx-tabs.snug .nwx-tab { font-size: clamp(1.3rem, 2.8vw, 2rem); }
.nwx-tabs.stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.nwx-tabs.stack .nwx-tab { white-space: normal; text-align: left; }
.nwx-tabs.stack .nwx-tab::after { display: none; }
.nwx-book.is-tabbed .nwx-pan .nwx-rep { margin: 0; }
.nwx-book.is-tabbed .nwx-pan.on { animation: nwx-pan-in .35s var(--ease) both; }
@keyframes nwx-pan-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nwx-tab::before { transition: none; } .nwx-book.is-tabbed .nwx-pan.on { animation: none; } }