/*
 * NeuWP: the four pages beside the landing page (Pricing, Process, Why WordPress, Company & legal), in its look.
 * Loaded after landing.css and shell.css (inc/pages.php) and built only from landing.css's tokens: the paper, the
 * ink, the coral marker, the yellow highlighter, the pencil, the tape, Archivo and the marker face. New parts are
 * named nx-. The header, the footer and the text link with its pencil line (.nx-link) are the site's own, in
 * landing.css and shell.css; the example report is the project page's (flow/finish.css), and the build checks
 * that its rules here are still the same as there.
 */

/* ---------------------------------------------------------------- shared */
.nx main{display:block}
.nx .sec{padding:calc(var(--gap) / 2) 0}
.nx h3{text-wrap:balance}

/* a ring of coral marker round a word: its path is fitted to the word by pages.js */
.circ{position:relative;z-index:0;display:inline-block;white-space:nowrap}
.circ .ringmark{position:absolute;left:-.44em;top:-.24em;width:calc(100% + .86em);height:calc(100% + .5em);overflow:visible;pointer-events:none;z-index:1}
.circ .ringmark path{fill:none;stroke:var(--coral);stroke-width:5.5;stroke-linecap:round;stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000)}
.circ.in .ringmark path{transition:stroke-dashoffset 1.2s var(--ease) .35s;stroke-dashoffset:0}
h2 .circ .ringmark path{stroke-width:4.6}
h3 .circ .ringmark path,.nx-small .circ .ringmark path{stroke-width:3.2}

/* marks from the drawing script */
.tickmark{width:20px;height:20px;flex:none;overflow:visible}
.framemark{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.doo2{display:block;width:100%;height:100%;overflow:visible}
.doo2 .pop{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--spring)}
.harrow{overflow:visible}
.harrow path{fill:none;stroke:var(--coral-line);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tbox{width:26px;height:26px;flex:none;overflow:visible}
.tbox .bx{fill:none;stroke:var(--ink)}
.tbox .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) var(--d,0s)}
.in .tbox .tk,.tbox.in .tk{stroke-dashoffset:0}

/* a grid-paper window for a drawing, as the four steps and the question cards have */
.nx-art{position:relative;border-radius:4px;background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);background-size:16px 16px}


/* ---------------------------------------------------------------- the top of a page */
.nx-hero{position:relative;padding:190px 0 calc(var(--gap) * .62);overflow-x:clip}
.nx-hero-grid{display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);gap:clamp(32px,4vw,64px);align-items:center}
.nx-hero h1{margin:18px 0 0;font:800 clamp(2.9rem,5.2vw,4.8rem)/.97 var(--sans);font-stretch:108%;letter-spacing:-.045em;text-wrap:balance}
.nx-hero .lead{margin:26px 0 0;max-width:31em;font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:var(--ink-2)}
.nx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:34px}
/* the lead is there from the first paint and slides into place: faded in, the largest paint on a phone was the logo (13 October) */
.nx-hero .kick,.nx-hero h1,.nx-hero .nx-acts,.nx-hero-art{opacity:0;animation:fade .9s var(--ease) forwards}
.nx-hero .lead{transform:translateY(14px);animation:nx-settle .9s var(--ease) forwards}
@keyframes nx-settle{to{transform:none}}
.nx-hero .kick{animation-name:up;animation-delay:.1s}
.nx-hero h1{animation-delay:.18s}.nx-hero .lead{animation-delay:.32s}.nx-hero .nx-acts{animation-delay:.44s}.nx-hero-art{animation-delay:.3s}
.nx-hero-art{position:relative;min-width:0}

/* ================================================================ PRICING ================================================================ */
/* three price tags hung on a pencil line */
.nx-tags{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,26px);padding:44px clamp(0px,1vw,14px) 30px}
.nx-rail{position:absolute;left:-3%;top:26px;width:106%;height:26px;overflow:visible}
.nx-rail path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.nx-rail path.p2{stroke-width:1.2;stroke-opacity:.5}
.nx-tag{position:relative;padding-top:var(--str,34px);transform-origin:50% 0;animation:nxsway var(--t,5s) ease-in-out infinite;filter:drop-shadow(0 26px 22px rgba(60,48,28,.28)) drop-shadow(0 4px 5px rgba(60,48,28,.16))}
.nx-tag::before{content:"";position:absolute;left:50%;top:-14px;width:2px;height:calc(var(--str,34px) + 40px);margin-left:-1px;background:var(--ink);border-radius:1px}
.nx-tag:nth-child(2){--str:74px;--t:6.2s;animation-delay:-2s}
.nx-tag:nth-child(3){--str:16px;--t:5.4s;animation-delay:-3.4s}
.nx-tag:nth-child(4){--str:52px;--t:6.8s;animation-delay:-1s}
.nx-tag:hover{animation-duration:1.4s}
@keyframes nxsway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.nx-tag .tg{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 12px 26px;background:#fff;
  clip-path:polygon(26% 0,74% 0,100% 15%,100% 100%,0 100%,0 15%)}
.nx-tag .tg::before{content:"";position:absolute;left:50%;top:22px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2.5px var(--ink)}
.nx-tag.yel .tg{background:#FFD95F}
.nx-tag.pnk .tg{background:#FAC0B1}
.nx-tag .tg .note{color:var(--ink);font-size:clamp(15px,1.3vw,19px)}
.nx-tag .tg b{display:block;margin:14px 0 6px;font:800 clamp(2.5rem,4.6vw,4.3rem)/1 var(--sans);font-stretch:104%;letter-spacing:-.05em}
.nx-tag .tg b small{font:700 .32em/1 var(--sans);letter-spacing:0;vertical-align:.9em;margin-right:.1em}
.nx-tag .tg span.s{font:600 clamp(13px,1.05vw,15px)/1.35 var(--sans);color:var(--ink-2);text-wrap:balance}
.nx-tag.yel .tg span.s,.nx-tag.pnk .tg span.s{color:var(--ink)}
.nx-tags .anote{opacity:1;transform:rotate(var(--rr,-2deg))}
.nx-tags .n-here{left:2%;bottom:-34px;--rr:-3deg}
.nx-tags .n-here .harrow{position:absolute;left:58%;bottom:100%;width:60px;height:40px;transform:scaleY(-1) rotate(12deg)}
.nx-tags .n-then{right:1%;bottom:-34px;--rr:2deg}

/* four tiers: four sheets taped up */
.nx-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:70px;align-items:stretch}
.nx-tier{position:relative;display:flex;flex-direction:column;padding:28px 24px 20px;background:var(--white);border-radius:5px;box-shadow:var(--paper-shadow);transform:rotate(var(--r,0deg));transition:transform .5s var(--spring),box-shadow .5s var(--ease)}
.nx-tier:nth-child(1){--r:-.9deg}.nx-tier:nth-child(2){--r:.7deg}.nx-tier:nth-child(3){--r:-.5deg}.nx-tier:nth-child(4){--r:1deg}
.nx-tier:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 64px -40px rgba(60,48,28,.5),0 10px 22px -14px rgba(60,48,28,.24)}
.nx-tier .tape{left:50%;top:-15px;width:84px;height:28px;margin-left:-42px;transform:rotate(-2deg)}
.nx-tier:nth-child(even) .tape{transform:rotate(3deg)}
.nx-tier .size{font:400 17px/1 var(--hand);color:var(--coral-deep)}
.nx-tier h3{margin:8px 0 8px;font:800 28px/1.05 var(--sans);font-stretch:108%;letter-spacing:-.025em}
.nx-tier .for{margin:0;min-height:4.7em;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.nx-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;margin-top:16px}
.nx-price b{font:800 clamp(2.6rem,3.6vw,3.3rem)/1 var(--sans);font-stretch:104%;letter-spacing:-.05em}
.nx-price b small{font:700 .42em/1 var(--sans);letter-spacing:0;vertical-align:.72em;margin-right:.08em}
.nx-price b small.after{margin:0 0 0 .14em}
.nx-price span{font:600 14.5px/1.2 var(--sans);color:var(--ink-2)}
.nx-plus{position:relative;display:inline-block;align-self:flex-start;margin:12px 0 0;padding:1px 0;font:700 17px/1.3 var(--sans);z-index:0}
.nx-plus b{font-weight:800}
.nx-plus::before{content:"";position:absolute;z-index:-1;left:-6px;right:-6px;top:38%;bottom:-2px;background:rgba(255,210,74,.7);transform:rotate(-.6deg);border-radius:2px}
.nx-tier ul{list-style:none;margin:20px 0 18px;padding:18px 0 0;border-top:1.5px dashed var(--line-2);display:grid;gap:10px}
.nx-tier li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--ink)}
.nx-tier li .tickmark{width:18px;height:18px;margin-top:1px}
.nx-tier li b{font-weight:800}
.nx-tier .foot-n{margin-top:auto;padding-top:12px;border-top:1.5px dashed var(--line-2);font:400 15.5px/1.25 var(--hand);color:var(--coral-deep)}
.nx-tier.kraft{background:#F4E6C9;background-image:linear-gradient(170deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%)}
.nx-tier.kraft .for{color:var(--kraft-ink)}
.nx-tier.kraft ul,.nx-tier.kraft .foot-n{border-color:rgba(46,36,24,.28)}
.nx-tier.kraft .nx-plus::before{background:rgba(255,255,255,.75)}
.nx-tiers-note{position:relative;display:flex;justify-content:center;margin-top:34px}
.nx-tiers-note .note{max-width:34em;text-align:center;font-size:clamp(17px,1.5vw,21px);line-height:1.3;transform:rotate(-1deg)}

/* three slips under the tiers */
.nx-slips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:calc(var(--gap) * .55)}
.nx-slip{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;padding:16px 20px 16px 14px;background:#fff;border-radius:5px;box-shadow:var(--paper-shadow)}
.nx-slip:nth-child(1){transform:rotate(.5deg)}.nx-slip:nth-child(2){transform:rotate(-.6deg)}.nx-slip:nth-child(3){transform:rotate(.4deg)}
.nx-slip .nx-art{height:74px}
.nx-slip h3{margin:0 0 4px;font:800 18.5px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.015em}
.nx-slip p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.nx-slip:hover .doo2 .pop{transform:rotate(-6deg) scale(1.1)}

/* what you get: once, every month, always */
.nx-gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:64px}
.nx-get{position:relative;padding:30px 28px 28px;background:#fff;border-radius:5px;box-shadow:var(--paper-shadow)}
.nx-get:nth-child(1){transform:rotate(-.5deg)}.nx-get:nth-child(3){transform:rotate(.5deg)}
.nx-get .tape{left:28px;top:-14px;width:92px;height:28px;transform:rotate(-4deg)}
.nx-get h3{margin:0 0 18px;font:800 25px/1.1 var(--sans);font-stretch:108%;letter-spacing:-.02em}
.nx-get h3 .note{display:block;margin-bottom:7px;font-size:18px;color:var(--coral-deep)}
.nx-ticks{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.nx-ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink)}
.nx-ticks li .tbox{width:23px;height:23px;margin-top:0}
.nx-ticks li:nth-child(2) .tk{--d:.1s}.nx-ticks li:nth-child(3) .tk{--d:.2s}.nx-ticks li:nth-child(4) .tk{--d:.3s}.nx-ticks li:nth-child(5) .tk{--d:.4s}.nx-ticks li:nth-child(6) .tk{--d:.5s}
.nx-get.keep{display:flex;flex-direction:column}
.nx-get.keep .nx-art{height:150px;margin:0 -8px 18px}
.nx-get.keep p{margin:0 0 12px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.nx-get.keep:hover .doo2 .pop{transform:translateY(-8px) rotate(-3deg)}

/* when you pay: the landing page's receipt, printing an example */
.nx-pay .fine-copy .sub{max-width:none}
.nx-when{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;counter-reset:w}
.nx-when li{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;padding:0 0 22px}
.nx-when li::before{counter-increment:w;content:counter(w);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--ink);font:400 17px/1 var(--hand);color:var(--coral-deep);z-index:1}
.nx-when li:not(:last-child)::after{content:"";position:absolute;left:16px;top:34px;bottom:0;border-left:2px dashed var(--line-2)}
.nx-when b{display:block;font:800 18px/1.25 var(--sans);font-stretch:106%;letter-spacing:-.01em}
.nx-when span{display:block;margin-top:2px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.nx-pay .receipt .tot svg{left:-12px;top:-9px;width:calc(100% + 24px);height:calc(100% + 18px)}
.nx-pay .receipt .tot svg path{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
/* in Danish the total is in kroner ("3.700 kr.", lang.py kroner) beside a long label: a size smaller on the narrowest phones, so it stays on its paper (20 Oct: 4 px past it at 360) */
@media (max-width:380px){html[lang="da"] .nx-pay .receipt .tot{font-size:18px}}
.nx-pay .r-note{left:calc(50% + 184px);top:57%;opacity:0;transition:opacity .5s var(--ease) 3.4s}
.nx-pay.in .r-note{opacity:1}

/* more than your hours hold */
.nx-extra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,90px);align-items:center}
.nx-quote{position:relative;max-width:470px;margin-inline:auto;padding:30px 30px 26px;background:#FFFEFA;border-radius:3px;box-shadow:var(--paper-shadow);transform:rotate(1.4deg);font:500 14.5px/1.6 var(--mono);color:#2B2B31}
.nx-quote .tape{right:-30px;top:10px;transform:rotate(34deg)}
.nx-quote .qh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 20px/1 var(--hand);color:var(--ink)}
.nx-quote .qh small{font:500 12.5px var(--mono);color:var(--pencil)}
.nx-quote hr{border:0;border-top:1.5px dashed #C9CACF;margin:14px 0}
.nx-quote .row{display:flex;align-items:baseline;gap:8px}
.nx-quote .row i{flex:1;border-bottom:1.5px dotted #B8B9C0;transform:translateY(-4px)}
.nx-quote .tot{font:700 19px/1.3 var(--mono)}
.nx-quote .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.nx-quote .fake{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:12px;font:700 15px var(--sans);background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--coral)}
.nx-quote .fake.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.nx-quote .q-note{right:-16px;bottom:-40px;--rr:-3deg;opacity:1;transform:rotate(-3deg)}

/* questions: the landing page's cards */
.nx .qcard .qd{display:flex;justify-content:center}
.nx .qd .doo2{width:auto;height:100%;aspect-ratio:200/124;flex:none}
.nx .qcard:hover .doo2 .pop{transform:rotate(-6deg) scale(1.08)}
.nx .ask-card .stamp{background:var(--coral-btn);border-radius:2px;display:grid;place-items:center;font:400 13px var(--hand);color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(23,23,28,.14)}

/* the coral band, here with a button */
.nx .cta-band{margin:0}
/* the band's address box is the landing page's own (build-pages.py, CB_ACT); the page's second link sits under its heading */
.nx .cta-band .cb-more{margin-top:18px}
.nx .cta-band .nx-link .undermark path{stroke:var(--ink)}
.nx-end{padding:calc(var(--gap) / 2) 0 calc(var(--gap) * .8)}

/* ================================================================ PROCESS ================================================================ */
/* the people, standing on a pencil line */
.nx-crew{position:relative;display:flex;align-items:flex-end;justify-content:center;padding:56px 0 0;margin:0 0 0 2%}
.nx-crew .mem{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;margin:0 -4.4%;cursor:default;-webkit-tap-highlight-color:transparent}
.nx-crew .who-svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 100%;transform:scale(var(--s,1))}
.nx-crew .mem:nth-child(1){--s:.94}.nx-crew .mem:nth-child(2){--s:1.04}.nx-crew .mem:nth-child(3){--s:.98}.nx-crew .mem:nth-child(4){--s:1.07}.nx-crew .mem:nth-child(5){--s:.93}
.nx-crew .tagn{position:absolute;bottom:calc(100% - 6px);left:50%;transform:translateX(-50%) rotate(var(--rr,-3deg));white-space:nowrap;font:400 clamp(14px,1.25vw,18px)/1 var(--hand);color:var(--coral-ink)}
.nx-crew .mem:nth-child(even) .tagn{--rr:3deg;bottom:calc(100% + 22px)}
.nx-crew .tagn{margin-left:-6%}
.nx-ground{position:absolute;left:0;bottom:0;width:100%;height:14px;overflow:visible}
.nx-ground path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.who-svg .arm{transition:transform .5s var(--spring)}
.mem:hover .who-svg .arm,.nx-per:hover .who-svg .arm,.who-svg.hi .arm{animation:nxwave 1.1s var(--ease)}
@keyframes nxwave{0%,100%{transform:none}22%{transform:rotate(-13deg)}48%{transform:rotate(9deg)}74%{transform:rotate(-8deg)}}
.who-svg .eyes{transform-box:fill-box;transform-origin:center;animation:nxblink 5.2s infinite}
.mem:nth-child(2) .eyes,.nx-per:nth-child(2) .eyes{animation-delay:-1.3s}.mem:nth-child(3) .eyes,.nx-per:nth-child(3) .eyes{animation-delay:-2.9s}.mem:nth-child(4) .eyes,.nx-per:nth-child(4) .eyes{animation-delay:-.6s}.mem:nth-child(5) .eyes,.nx-per:nth-child(5) .eyes{animation-delay:-3.8s}
@keyframes nxblink{0%,94%,100%{transform:none}97%{transform:scaleY(.1)}}

.nx-chips{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font:600 15px var(--sans);color:var(--ink-2)}
.nx-chips span{display:flex;align-items:center;gap:7px}
.nx-chips .ico{width:16px;height:16px;color:#2F9E6B;stroke-width:2.8}

/* the road: a pencil line down the middle, a stop on each side in turn */
.nx-road{position:relative;list-style:none;margin:76px auto 0;padding:0;max-width:1120px}
.roadline{position:absolute;left:50%;top:0;width:40px;height:100%;margin-left:-20px;overflow:visible;pointer-events:none}
.roadline path{fill:none;stroke:var(--pencil);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:3 9}
.nx-stop{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);align-items:center;padding:0 0 46px}
.nx-stop:last-child{padding-bottom:0}
.nx-stop .n{grid-column:2;grid-row:1;justify-self:center;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2.5px var(--ink),0 0 0 8px var(--paper);font:400 27px/1 var(--hand);color:var(--coral-deep);transform:rotate(-4deg);z-index:1}
.nx-stop.we .n{background:var(--ink);color:#fff}
.nx-stop.zero .n,.nx-stop.ever .n{background:var(--yellow);font-size:22px}
.nx-stopcard{grid-column:1;grid-row:1;position:relative;display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding:18px 22px 18px 18px;transform:rotate(var(--r,-.6deg));transition:transform .5s var(--spring)}
.nx-stop:nth-child(even) .nx-stopcard{grid-column:3;--r:.6deg}
.nx-stopcard:hover{transform:rotate(0deg) translateY(-4px)}
.nx-stopcard:hover .doo2 .pop{transform:rotate(-6deg) scale(1.1)}
.nx-stopcard .tape{left:auto;right:36px;top:-14px;width:80px;height:26px;transform:rotate(3deg)}
.nx-stop:nth-child(even) .nx-stopcard .tape{right:auto;left:36px;transform:rotate(-3deg)}
.nx-stopcard .nx-art{min-height:128px}
.nx-stopcard h3{margin:4px 0 6px;font:800 23px/1.12 var(--sans);font-stretch:108%;letter-spacing:-.02em}
.nx-stopcard p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.nx-stopcard .who{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:14px;padding-top:11px;border-top:1.5px dashed var(--line-2)}
.nx-stopcard .by{font:400 16px/1 var(--hand);color:var(--coral-deep);white-space:nowrap}
.nx-stopcard .time{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--sans);color:var(--ink-2)}
.nx-stopcard .time .ico{width:15px;height:15px;color:var(--ink-3)}
.nx-side{grid-column:3;grid-row:1;position:relative;display:flex;align-items:flex-end;gap:10px;padding:0 0 0 14px;min-height:150px}
.nx-stop:nth-child(even) .nx-side{grid-column:1;flex-direction:row-reverse;padding:0 14px 0 0}
.nx-side .who-svg{flex:none;width:118px;height:auto;overflow:visible}
.nx-side .who-svg+.who-svg{margin-left:-26px}
.nx-stop:nth-child(even) .nx-side .who-svg+.who-svg{margin-left:0;margin-right:-26px}
.nx-side .say{position:relative;align-self:center;max-width:15em;font:400 clamp(16px,1.35vw,19px)/1.3 var(--hand);color:var(--coral-ink);transform:rotate(-2deg)}
.nx-stop:nth-child(even) .nx-side .say{text-align:right;transform:rotate(2deg)}
.nx-side:hover .who-svg .arm{animation:nxwave 1.1s var(--ease)}

/* how long the building takes, by tier: three clocks */
.nx-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:900px;margin:calc(var(--gap) * .5) auto 0}
.nx-day{position:relative;padding:20px 18px 18px;text-align:center}
.nx-day b{display:block;font:800 clamp(2.2rem,3.4vw,3rem)/1 var(--sans);font-stretch:104%;letter-spacing:-.04em}
.nx-day span:not(.note){display:block;margin-top:6px;font:600 14.5px/1.3 var(--sans);color:var(--ink-2)}
.nx-day .note{display:block;margin-bottom:8px;font-size:18px;color:var(--coral-deep)}
.nx-days-note{margin:22px auto 0;max-width:46em;text-align:center;font-size:15.5px;color:var(--ink-2)}

/* the people, one card each */
.nx-people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-top:66px}
.nx-per{position:relative;display:flex;flex-direction:column;padding:14px 16px 20px;background:#fff;border-radius:5px;box-shadow:var(--paper-shadow);transform:rotate(var(--r,0deg));transition:transform .5s var(--spring)}
.nx-per:nth-child(1){--r:-1.1deg}.nx-per:nth-child(2){--r:.8deg}.nx-per:nth-child(3){--r:-.5deg}.nx-per:nth-child(4){--r:1deg}.nx-per:nth-child(5){--r:-.8deg}
.nx-per:hover{transform:rotate(0deg) translateY(-6px)}
.nx-per .tape{left:50%;top:-14px;width:78px;height:26px;margin-left:-39px;transform:rotate(-3deg)}
.nx-per:nth-child(even) .tape{transform:rotate(4deg)}
.nx-per .nx-art{display:flex;align-items:flex-end;justify-content:center;height:232px;padding-top:12px;overflow:hidden}
.nx-per .who-svg{height:216px;width:auto;overflow:visible;margin-left:10px}
.nx-per .role{margin:14px 0 0;font:400 17px/1 var(--hand);color:var(--coral-deep)}
.nx-per h3{margin:6px 0 8px;font:800 20.5px/1.15 var(--sans);font-stretch:106%;letter-spacing:-.018em}
.nx-per p{margin:0;font-size:14.8px;line-height:1.5;color:var(--ink-2)}
.nx-per .when{margin-top:auto;padding-top:14px;font:600 13px/1.35 var(--sans);color:var(--pencil)}
.nx-why{position:relative;max-width:900px;margin:calc(var(--gap) * .5) auto 0;padding:30px clamp(22px,4vw,46px) 30px;background:#FFFEFA;border-radius:3px;box-shadow:var(--paper-shadow);transform:rotate(-.4deg)}
.nx-why .tape{left:50%;top:-15px;margin-left:-59px;transform:rotate(-2deg)}
.nx-why .note{display:block;margin-bottom:10px;font-size:20px;color:var(--coral-deep)}
.nx-why p{margin:0;font-size:17px;line-height:1.65;color:var(--ink)}

/* one page for everything: the project page, small */
.nx-proj-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(30px,5vw,84px);align-items:center}
.nx-proj{position:relative;padding:12px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(.8deg)}
.nx-proj .tape.t1{left:-30px;top:12px;transform:rotate(-36deg)}
.nx-proj .tape.t2{right:-30px;top:12px;transform:rotate(36deg)}
.nx-proj-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:5px 5px 0 0;background:var(--paper-2)}
.nx-proj-bar i{width:9px;height:9px;border-radius:50%;background:#D8D2C6}
/* the address is shown whole on a phone, 360 wide too: the Bulgarian one ("vashiyat-sait") was cut to "vashiyat-sa…"
   (16 Oct) */
.nx-proj-bar span{margin:0 auto;height:22px;padding:0 12px;border-radius:6px;background:#fff;font:500 12px/22px var(--mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:86%}
@media (max-width:400px){.nx-proj-bar span{padding:0 9px;font-size:11px}}
.nx-proj-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;padding:20px 18px 18px;border:1.5px solid var(--line);border-top:0;border-radius:0 0 5px 5px;background:#FFFEFB}
.nx-proj .nx-h{margin:0 0 12px;font:800 16.5px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.01em;color:var(--ink)}
.nx-proj .need{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nx-proj .need li{display:flex;gap:9px;align-items:flex-start;font:600 14px/1.35 var(--sans)}
.nx-proj .need li .tbox{width:20px;height:20px}
.nx-proj .need li.open{color:var(--pencil)}
.nx-proj .need li.open .tk{display:none}
.nx-clock{margin-top:18px;padding-top:14px;border-top:1.5px dashed var(--line-2)}
.nx-clock small{display:block;font:600 12.5px var(--sans);color:var(--pencil)}
.nx-clock .bar{position:relative;height:16px;margin-top:8px;border-radius:3px;box-shadow:inset 0 0 0 1.8px var(--ink);overflow:hidden}
.nx-clock .bar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(-52deg,var(--coral) 0 3px,transparent 3px 7px);transition:width 1.6s var(--ease) .4s}
.in .nx-clock .bar i{width:60%}
.nx-clock b{display:block;margin-top:7px;font:400 15px var(--hand);color:var(--coral-deep)}
.nx-thread{display:grid;gap:10px;align-content:start}
.nx-msg{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:start}
.nx-msg .face{width:34px;height:36px}
.nx-msg .face svg{width:100%;height:100%;overflow:visible}
.nx-msg .bub{padding:9px 12px 10px;border-radius:3px 12px 12px 12px;background:var(--paper-2);font:500 13.5px/1.45 var(--sans)}
.nx-msg .bub b{display:block;margin-bottom:2px;font:700 12px var(--sans);color:var(--pencil)}
.nx-msg.me{grid-template-columns:minmax(0,1fr)}
.nx-msg.me .bub{justify-self:end;max-width:86%;border-radius:12px 3px 12px 12px;background:#FCE4DD}
.nx-noted{display:flex;align-items:center;gap:8px;font:500 12px/1.3 var(--mono);color:var(--pencil)}
.nx-noted .tickmark{width:15px;height:15px}
.nx-noted::after{content:"";flex:1;border-top:1.5px dashed var(--line-2)}

/* launch day */
.nx-launch{position:relative;padding-top:calc(var(--gap) / 2 + 60px)!important}
.bunting{position:absolute;left:0;top:calc(var(--gap) * .1);width:100%;height:110px;overflow:visible;pointer-events:none}
.bunting .flag{transform-box:fill-box;transform-origin:50% 0;animation:nxflag 3.6s ease-in-out infinite}
.bunting .flag-1{animation-delay:-.9s}.bunting .flag-2{animation-delay:-1.8s}.bunting .flag-3{animation-delay:-2.7s}
@keyframes nxflag{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.nx-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 44px;max-width:1080px;margin:60px auto 0;list-style:none;padding:0}
.nx-pts li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;align-items:center}
.nx-pts .nx-art{height:88px;background:#fff;box-shadow:var(--paper-shadow);background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);background-size:16px 16px;transform:rotate(-1.5deg)}
.nx-pts li:nth-child(even) .nx-art{transform:rotate(1.5deg)}
.nx-pts li:hover .doo2 .pop{transform:rotate(-6deg) scale(1.1)}
.nx-pts h3{margin:0 0 5px;font:800 21px/1.15 var(--sans);font-stretch:106%;letter-spacing:-.018em}
.nx-pts p{margin:0;font-size:15.8px;line-height:1.55;color:var(--ink-2)}

/* every month: the report, small */
.nx-month-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,5vw,84px);align-items:center}
.nx-rep{position:relative;padding:28px 26px 24px;background:#fff;border-radius:4px;box-shadow:var(--paper-shadow);transform:rotate(-1deg)}
.nx-rep::after,.nx-rep::before{content:"";position:absolute;inset:0;border-radius:4px;background:#fff;box-shadow:var(--paper-shadow);z-index:-1;transform:rotate(2.2deg) translate(8px,6px)}
.nx-rep::before{transform:rotate(4deg) translate(16px,10px);z-index:-2;background:#FBF8F1}
.nx-rep .tape{left:50%;top:-15px;margin-left:-59px;transform:rotate(2deg)}
.nx-rep-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px}
.nx-rep-hd h3{margin:0;font:800 21px/1.1 var(--sans);font-stretch:106%;letter-spacing:-.02em}
.nx-rep-hd .note{font-size:16px}
.nx-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0}
.nx-figs div{position:relative;padding:12px 12px 12px}
.nx-figs dt{font:600 12px/1.2 var(--sans);color:var(--pencil)}
.nx-figs dd{margin:5px 0 0;font:800 clamp(18px,1.9vw,24px)/1.1 var(--sans);letter-spacing:-.02em}
.nx-figs dd i{font:600 11.5px var(--sans);font-style:normal;color:var(--pencil);letter-spacing:0}
.nx-hours{margin-top:16px}
.nx-hours small{display:flex;justify-content:space-between;font:600 12.5px var(--sans);color:var(--pencil)}
.nx-hours .bar{position:relative;height:16px;margin-top:7px;border-radius:3px;box-shadow:inset 0 0 0 1.8px var(--ink);overflow:hidden}
.nx-hours .bar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(-52deg,var(--coral) 0 3px,transparent 3px 7px);transition:width 1.6s var(--ease) .5s}
.in .nx-hours .bar i{width:62%}
.nx-rep .eg{position:absolute;right:-14px;bottom:-22px;transform:rotate(3deg);background:var(--paper)}

/* ================================================================ COMPANY AND LEGAL ================================================================ */
/* the top: a ruled pad with the deal in six lines, and the reader beside it */
.nx-pad-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:flex-end;gap:0;padding:10px 0 0}
.nx-pad{--lh:38px;position:relative;padding:44px 26px 26px 62px;border-radius:2px;background:#FFFEFA linear-gradient(transparent 0 calc(var(--lh) - 1px),rgba(61,109,242,.2) calc(var(--lh) - 1px) var(--lh)) 0 40px/100% var(--lh);
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 30px 50px -30px rgba(60,48,28,.55),0 8px 16px -12px rgba(60,48,28,.25);transform:rotate(-1.4deg)}
.nx-pad::before{content:"";position:absolute;left:46px;top:0;bottom:0;width:1.5px;background:rgba(216,67,42,.4)}
.nx-pad::after{content:"";position:absolute;left:0;right:0;top:-5px;height:10px;background:radial-gradient(circle at 5px 5px,var(--paper) 3.4px,transparent 3.8px) 0 0/14px 10px repeat-x}
.nx-pad p{position:relative;display:flex;align-items:center;gap:10px;margin:0;min-height:var(--lh);font:400 clamp(15px,1.45vw,19.5px)/var(--lh) var(--hand);color:var(--ink);text-wrap:balance}
/* the pad's heading has a name of its own: landing.css's .hd is the site's header, and signed in to WordPress its "top: 32px" laid this heading over the first line (Z, 12 Oct) */
.nx-pad p.nx-pad-hd{color:var(--coral-ink)}
.nx-pad p .tickmark{width:22px;height:22px;margin-left:-4px}
.nx-pad p.sig{justify-content:flex-end;color:var(--coral-ink)}
.nx-pad mark{background:linear-gradient(transparent 22%,rgba(255,210,74,.8) 22%,rgba(255,210,74,.8) 88%,transparent 88%);color:inherit;padding:0 .16em;margin:0 -.16em}
.nx-pad-wrap .who-svg{position:relative;z-index:2;width:190px;height:auto;margin:0 0 -8px -46px;overflow:visible}
.nx-pad-wrap:hover .who-svg .arm{animation:nxwave 1.1s var(--ease)}
.nx-pad-stamp{position:absolute;left:-26px;bottom:-30px;width:118px;height:118px;transform:rotate(-12deg);z-index:3;filter:drop-shadow(0 8px 10px rgba(60,48,28,.2))}
.nx-pad-stamp svg{width:100%;height:100%;overflow:visible}
.nx-pad-stamp text{font-family:var(--hand);fill:var(--coral-ink);text-transform:uppercase}

/* eight cards: one promise each */
.nx-eight{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 26px;margin-top:64px}
.nx-card{position:relative;display:flex;flex-direction:column;padding:16px 18px 18px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(var(--r,0deg));transition:transform .5s var(--spring),box-shadow .45s var(--ease);text-decoration:none;color:inherit}
.nx-card:nth-child(4n+1){--r:-.9deg}.nx-card:nth-child(4n+2){--r:.7deg}.nx-card:nth-child(4n+3){--r:-.4deg}.nx-card:nth-child(4n){--r:.9deg}
.nx-card:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 1px 0 rgba(0,0,0,.04),0 36px 60px -38px rgba(60,48,28,.5),0 10px 20px -14px rgba(60,48,28,.22)}
.nx-card:hover .doo2 .pop{transform:rotate(-6deg) scale(1.1)}
.nx-card .nx-art{height:132px;margin:0 -4px 12px;display:flex;justify-content:center}
.nx-card .nx-art .doo2{height:100%;width:auto;aspect-ratio:200/124;flex:none}
.nx-card .qn{font:400 19px/1 var(--hand);color:var(--coral-deep)}
.nx-card h3{margin:7px 0 8px;font:800 20.5px/1.18 var(--sans);font-stretch:106%;letter-spacing:-.018em}
.nx-card p{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.nx-card .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:700 13.5px var(--sans);color:var(--ink)}
.nx-card .more .ico{width:14px;height:14px;transition:transform .35s var(--spring)}

/* who is behind it: a card with the company's details */
.nx-co-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(30px,5vw,84px);align-items:center}
.nx-id{position:relative;padding:34px clamp(22px,3vw,40px) 30px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(1deg)}
.nx-id::before{content:"";position:absolute;inset:12px;border-radius:3px;background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);background-size:16px 16px;pointer-events:none}
.nx-id>*{position:relative}
.nx-id .tape.t1{left:-30px;top:12px;transform:rotate(-36deg)}
.nx-id .tape.t2{right:-30px;bottom:14px;top:auto;transform:rotate(-36deg)}
.nx-id-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px}
.nx-id-hd img{height:34px;width:auto}
.nx-id-hd .note{font-size:17px}
.nx-id dl{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:0;margin:0}
.nx-id dt,.nx-id dd{margin:0;padding:11px 0;border-top:1.5px dashed var(--line-2);font-size:15.5px;line-height:1.45}
.nx-id dt{font:600 13.5px/1.6 var(--sans);color:var(--pencil)}
.nx-id dd{font-weight:700;color:var(--ink)}
.nx-id dd a{color:inherit;text-decoration-color:var(--coral);text-underline-offset:4px;text-decoration-thickness:2px}
.nx-id .seal{position:absolute;right:18px;top:64px;width:92px;height:92px;transform:rotate(10deg);pointer-events:none}

/* where your information goes: a few stops, an arrow between each */
.nx-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 30px;margin-top:60px;list-style:none;padding:0}
.nx-node{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:14px 18px 14px 12px;background:#fff;border-radius:5px;box-shadow:var(--paper-shadow)}
.nx-node:nth-child(odd){transform:rotate(-.5deg)}.nx-node:nth-child(even){transform:rotate(.5deg)}
.nx-node .nx-art{height:66px}
.nx-node h3{margin:0 0 3px;font:800 17.5px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.012em}
.nx-node h3 small{display:block;margin-bottom:3px;font:400 14.5px/1 var(--hand);color:var(--coral-deep);letter-spacing:0}
.nx-node p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.nx-node.main{background:#FFF6D6}
.nx-node:hover .doo2 .pop{transform:rotate(-6deg) scale(1.1)}

/* how long we keep a preview: a ruler of days */
.nx-keepbar{position:relative;max-width:1040px;margin:64px auto 0;padding:26px clamp(18px,3vw,36px) 26px;background:#fff;border-radius:5px;box-shadow:var(--paper-shadow);transform:rotate(-.3deg)}
.nx-keepbar .tape{left:50%;top:-15px;margin-left:-59px;transform:rotate(-2deg)}
.nx-rule{display:grid;grid-template-columns:30fr 90fr 22fr;gap:0;margin-top:8px}
.nx-rule div{position:relative;padding:44px 10px 0 0}
.nx-rule div::before{content:"";position:absolute;left:0;right:6px;top:10px;height:22px;border-radius:2px;transform:rotate(-.4deg);transform-origin:0 50%;scale:0 1;transition:scale 1.1s var(--ease) var(--d,0s)}
.nx-keepbar.in .nx-rule div::before{scale:1 1}
.nx-rule .a::before{background:repeating-linear-gradient(-52deg,var(--coral) 0 4px,rgba(241,92,62,.25) 4px 8px)}
.nx-rule .b::before{background:rgba(255,210,74,.85);--d:.7s}
.nx-rule .c::before{background:repeating-linear-gradient(90deg,var(--pencil) 0 3px,transparent 3px 10px);height:3px;top:20px;--d:1.4s}
.nx-rule div::after{content:"";position:absolute;left:0;top:2px;height:38px;border-left:2.4px solid var(--ink)}
.nx-rule b{display:block;font:800 17.5px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.01em}
.nx-rule small{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.nx-rule .note{display:block;margin-bottom:4px;font-size:16px;color:var(--coral-deep)}

/* the full text: its contents beside it, each part a sheet */
.nx-docs{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:60px}
.nx-toc{position:sticky;top:108px;padding:6px 0 0}
.nx-toc .note{display:block;margin-bottom:12px;font-size:18px}
.nx-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.nx-toc a{position:relative;display:flex;gap:10px;align-items:baseline;padding:8px 10px 8px 0;font:700 15.5px/1.3 var(--sans);color:var(--ink-2);text-decoration:none;transition:color .25s}
.nx-toc a::before{counter-increment:t;content:counter(t);width:1.3em;flex:none;font:400 16px/1 var(--hand);color:var(--coral-deep)}
.nx-toc a span{position:relative;z-index:0}
.nx-toc a span::before{content:"";position:absolute;z-index:-1;left:-5px;right:-5px;top:42%;bottom:-2px;background:rgba(255,210,74,.75);border-radius:2px;transform-origin:0 50%;scale:0 1;transition:scale .4s var(--ease)}
.nx-toc a:hover,.nx-toc a.on{color:var(--ink)}
.nx-toc a.on span::before{scale:1 1}
.nx-sheets{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;min-width:0}
.nx-doc{position:relative;min-width:0;padding:clamp(28px,4.4vw,56px) clamp(22px,4.6vw,62px) clamp(26px,4vw,50px);scroll-margin-top:110px}
.nx-doc>.tape{top:-15px;left:50%;margin-left:-59px;transform:rotate(-2deg)}
.nx-doc:nth-child(even)>.tape{transform:rotate(2.5deg)}
.nx-doc-hd{display:grid;grid-template-columns:118px minmax(0,1fr);gap:22px;align-items:center;margin-bottom:26px;padding-bottom:24px;border-bottom:1.5px dashed var(--line-2)}
.nx-doc-hd .nx-art{height:78px}
.nx-doc-hd .note{font-size:17px}
.nx-doc-hd h2{margin:4px 0 0;font:800 clamp(1.8rem,3vw,2.5rem)/1.02 var(--sans);font-stretch:108%;letter-spacing:-.03em}
.nx-doc-hd p{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.nx-doc h3{margin:30px 0 8px;font:800 19.5px/1.25 var(--sans);font-stretch:104%;letter-spacing:-.012em;scroll-margin-top:110px}
.nx-doc h3 i{font:400 19px/1 var(--hand);font-style:normal;color:var(--coral-deep);margin-right:9px}
.nx-doc p,.nx-doc li{font-size:16.5px;line-height:1.66;color:var(--ink-2)}
.nx-doc p{margin:0 0 12px}
.nx-doc ul{margin:0 0 14px;padding-left:1.2em}
.nx-doc li{margin:0 0 6px}
.nx-doc li::marker{color:var(--coral)}
.nx-doc strong{color:var(--ink)}
.nx-doc a{color:var(--coral-deep);text-underline-offset:3px}
.nx-doc a:hover{color:var(--ink)}
.nx-doc .plain{position:relative;margin:0 0 22px;padding:14px 18px 14px 50px;font:400 16.5px/1.4 var(--hand);color:var(--ink)}
.nx-doc .plain .tickmark{position:absolute;left:16px;top:14px;width:24px;height:24px}
.nx-doc table{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:15.5px}
.nx-doc th,.nx-doc td{padding:10px 12px 10px 0;text-align:left;vertical-align:top;border-top:1.5px dashed var(--line-2);line-height:1.5;color:var(--ink-2)}
.nx-doc th{font:700 13px/1.4 var(--sans);color:var(--pencil);border-top:0}
.nx-doc td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.nx-scroll{overflow-x:auto;position:relative}

/* ---------------------------------------------------------------- the index of the demo pages */
.nx-sheetline{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:60px}
.nx-sheetline .who-svg{width:min(19%,220px);height:auto;overflow:visible}

/* ---------------------------------------------------------------- smaller screens */
@media (max-width:1180px){
  .nx-tiers{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
  .nx-tier .for{min-height:0}
  .nx-people{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 22px}
  .nx-eight{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1040px){
  .nx-hero{padding-top:160px}
  .nx-hero-grid{grid-template-columns:minmax(0,1fr);gap:64px}
  .nx-hero h1{font-size:clamp(2.9rem,8vw,5.2rem)}
  .nx-hero-copy{max-width:680px}
  .nx-slips{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  .nx-gets{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto;gap:40px}
  .nx-extra,.nx-proj-grid,.nx-month-grid,.nx-co-grid{grid-template-columns:minmax(0,1fr);gap:54px}
  .nx-pay .r-note{display:none}
  .nx-docs{grid-template-columns:minmax(0,1fr)}
  .nx-toc{position:static}
  .nx-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px}
  .nx-pts{grid-template-columns:minmax(0,1fr);max-width:640px}
  /* the road moves to the left edge, and every stop sits to its right */
  .nx-road{max-width:680px}
  .roadline{left:30px}
  .nx-stop{grid-template-columns:60px minmax(0,1fr);align-items:start;column-gap:14px}
  .nx-stop .n{grid-column:1;width:50px;height:50px;font-size:23px;margin-top:8px}
  .nx-stopcard,.nx-stop:nth-child(even) .nx-stopcard{grid-column:2;--r:0deg}
  .nx-side,.nx-stop:nth-child(even) .nx-side{grid-column:2;grid-row:2;flex-direction:row;padding:14px 0 0;min-height:0}
  .nx-stop:nth-child(even) .nx-side .say{text-align:left;transform:rotate(-2deg)}
  .nx-stop:nth-child(even) .nx-side .who-svg+.who-svg{margin-right:0;margin-left:-26px}
  .nx-side .who-svg{width:92px}
}
@media (max-width:640px){
  .nx-hero{padding:124px 0 70px}
  .nx-hero h1{font-size:clamp(2.6rem,11.6vw,3.7rem)}
  .nx-tags{gap:8px;padding-top:40px}
  .nx-tag .tg{padding:50px 6px 18px}
  .nx-tag .tg::before{top:16px;width:16px;height:16px;margin-left:-8px}
  .nx-tag .tg b{font-size:clamp(1.9rem,9vw,2.5rem);margin:10px 0 4px}
  .nx-tag .tg .note{font-size:13px}
  .nx-tag .tg span.s{font-size:12px}
  .nx-tags .n-then{display:none}
  .nx-tiers{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:52px}
  .nx-people{grid-template-columns:minmax(0,1fr);gap:34px;max-width:360px;margin-inline:auto}
  .nx-eight{grid-template-columns:minmax(0,1fr);gap:28px}
  .nx-flow{grid-template-columns:minmax(0,1fr)}
  .nx-slip{grid-template-columns:84px minmax(0,1fr)}
  .nx-stopcard{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 16px 16px}
  .nx-stopcard .nx-art{min-height:0;height:110px}
  .nx-days{grid-template-columns:minmax(0,1fr);max-width:300px}
  .nx-proj-in{grid-template-columns:minmax(0,1fr)}
  .nx-pts li{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .nx-pts .nx-art{height:66px}
  .nx-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-rep .eg{right:6px}
  .nx-crew{margin:0 -4%}
  .nx-crew .tagn{font-size:12px}
  .nx-pad-wrap{grid-template-columns:minmax(0,1fr) 84px}
  .nx-pad{--lh:32px;padding:36px 14px 20px 40px;background-position:0 34px}
  .nx-pad::before{left:28px}
  .nx-pad p{font-size:13.5px;gap:6px;white-space:normal;line-height:1.15}
  .nx-pad-wrap .who-svg{width:128px;margin-left:-40px}
  .nx-pad-stamp{width:86px;height:86px;left:-8px;bottom:-34px}
  .nx-id dl{grid-template-columns:minmax(0,1fr)}
  .nx-id dt{padding-bottom:0}
  .nx-id dd{border-top:0;padding-top:2px}
  .nx-id .seal{width:70px;height:70px;top:58px;right:8px}
  .nx-rule{grid-template-columns:minmax(0,1fr);gap:18px}
  .nx-doc-hd{grid-template-columns:minmax(0,1fr);gap:14px}
  .nx-doc-hd .nx-art{width:118px}
  .nx-doc p,.nx-doc li{font-size:16px}
  .nx-doc td:first-child{white-space:normal}
  .nx-doc th,.nx-doc td{padding-right:10px;font-size:14.5px}
  .nx-doc .plain{padding:12px 14px 12px 42px;font-size:15px}
  .nx-doc .plain .tickmark{left:12px;top:12px}
  .nx-crew{margin:0 3%}
  .nx-crew .mem:first-child .tagn{left:64%}
  .nx-toc ol{grid-template-columns:minmax(0,1fr)}
  .nx-quote{padding:24px 20px 22px}
  .nx-quote .q-note{right:0}
}
@media (prefers-reduced-motion:reduce){
  .nx-hero .kick,.nx-hero h1,.nx-hero .lead,.nx-hero .nx-acts,.nx-hero-art{opacity:1;animation:none}
  .nx-hero .lead{transform:none}
  .nx-tag,.bunting .flag,.who-svg .eyes{animation:none}
  .circ .ringmark path{stroke-dashoffset:0}
  .tbox .tk{stroke-dashoffset:0}
  .nx-rule div::before{scale:1 1}
  .nx-pay .r-note{opacity:1}
}


/* ================================================================ WHY WORDPRESS ================================================================ */
/* four in ten: ten small websites on a taped sheet */
.nx-share{position:relative;margin:0;padding:30px 28px 26px;background:#fff;border-radius:5px;box-shadow:var(--paper-shadow);transform:rotate(1.2deg)}
.nx-share>.tape{left:50%;top:-15px;margin-left:-59px;transform:rotate(-3deg)}
.nx-share .webgrid{display:block;width:100%;height:auto;overflow:visible}
.nx-share .webgrid .win{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--spring)}
.nx-share .webgrid .win.on{animation:nxpop .6s var(--spring) both}
.nx-share .webgrid .win.on:nth-child(2){animation-delay:.12s}.nx-share .webgrid .win.on:nth-child(3){animation-delay:.24s}.nx-share .webgrid .win.on:nth-child(4){animation-delay:.36s}
@keyframes nxpop{0%{transform:scale(.6) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
.nx-share:hover .webgrid .win.on{transform:translateY(-4px) rotate(-2deg)}
.nx-share figcaption{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:20px;padding-right:110px}
.nx-share figcaption b{font:800 clamp(2.6rem,4.4vw,3.8rem)/1 var(--sans);font-stretch:104%;letter-spacing:-.045em;color:var(--coral-deep)}
.nx-share figcaption span{font:700 clamp(16px,1.4vw,19px)/1.3 var(--sans)}
.nx-src{display:block;margin-top:8px;font:500 12.5px/1.4 var(--mono);color:var(--pencil)}
.nx-share-who{position:absolute;right:-18px;bottom:-14px;width:118px}
.nx-share-who .who-svg{display:block;width:100%;height:auto;overflow:visible}
.nx-share:hover .who-svg .arm{animation:nxwave 1.1s var(--ease)}

/* four figures in frames ruled by hand */
.nx-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1100px;margin:0 auto}
.nx-fact{position:relative;padding:22px 20px 20px;text-align:center}
.nx-fact b{display:block;font:800 clamp(2.1rem,3.4vw,3rem)/1 var(--sans);font-stretch:104%;letter-spacing:-.04em}
.nx-fact span{display:block;margin-top:8px;font:600 14.5px/1.35 var(--sans);color:var(--ink-2);text-wrap:balance}
.nx-fact:nth-child(odd){transform:rotate(-.6deg)}.nx-fact:nth-child(even){transform:rotate(.6deg)}
.page-wordpress #facts{padding-top:0}

/* five reasons in a row */
.nx-five{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.nx-five .nx-card .nx-art{height:112px}

/* the comparison: a chart ruled on a sheet, marked by hand */
.nx-cmp{position:relative;max-width:1080px;margin:60px auto 0;padding:28px clamp(16px,3vw,40px) 24px;background:#fff;border-radius:5px;box-shadow:var(--paper-shadow);transform:rotate(-.3deg)}
.nx-cmp>.tape{left:40px;top:-14px;transform:rotate(-4deg)}
.nx-cmp>.tape.t2{left:auto;right:40px;transform:rotate(4deg)}
.nx-cmp table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0}
.nx-cmp th,.nx-cmp td{padding:14px 14px;text-align:left;vertical-align:middle;border-bottom:1.5px dashed var(--line-2)}
.nx-cmp tr:last-child th,.nx-cmp tr:last-child td{border-bottom:0}
.nx-cmp thead th{padding-top:4px;font:800 16.5px/1.25 var(--sans);font-stretch:104%;letter-spacing:-.01em;vertical-align:bottom;border-bottom:2px solid var(--ink)}
.nx-cmp thead th .note{display:block;margin-bottom:4px;font-size:16px;color:var(--coral-deep)}
.nx-cmp tbody th{width:31%;font:700 15.5px/1.4 var(--sans);color:var(--ink)}
.nx-cmp td{font:600 14.5px/1.35 var(--sans);color:var(--ink-2)}
.nx-cmp td>svg{display:inline-block;width:22px;height:22px;vertical-align:-6px;margin-right:8px;overflow:visible}
.nx-cmp .us{background:rgba(255,210,74,.28)}
.nx-cmp thead .us{border-radius:6px 6px 0 0}
.nx-cmp td.us{color:var(--ink)}
.nx-cost{font:800 15.5px/1.3 var(--sans);color:var(--ink)}
.markx{flex:none;overflow:visible}

/* the usual against ours: struck out in coral marker, then ticked */
.nx-vs{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1.15fr);gap:10px;align-items:center;max-width:1100px;margin:60px auto 0}
.nx-vs-col .note{display:block;margin-bottom:16px;font-size:19px}
.nx-vs-col.was{padding:20px 6px 20px 10px}
.nx-vs-col.was ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.nx-vs-col.was li{font:400 clamp(15px,1.35vw,18px)/1.35 var(--hand);color:var(--pencil);transform:rotate(-.6deg)}
.nx-vs-col.was li:nth-child(even){transform:rotate(.5deg)}
.nx-vs-col.was s{text-decoration:none;background:linear-gradient(var(--coral),var(--coral)) 0 58%/0 3px no-repeat;transition:background-size .7s var(--ease) var(--d,0s)}
.nx-vs.in .nx-vs-col.was s{background-size:100% 3px}
.nx-vs-col.was li:nth-child(2) s{--d:.2s}.nx-vs-col.was li:nth-child(3) s{--d:.4s}.nx-vs-col.was li:nth-child(4) s{--d:.6s}.nx-vs-col.was li:nth-child(5) s{--d:.8s}
.nx-vs-arrow .harrow{width:100%;height:auto}
.nx-vs-col.now{position:relative;padding:28px 28px 26px;transform:rotate(.6deg)}
.nx-vs-col.now .tape{left:50%;top:-15px;margin-left:-59px;transform:rotate(2deg)}

/* the editor, drawn small */
.nx-ed{position:relative;padding:12px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(-.8deg)}
.nx-ed .tape.t1{left:-30px;top:12px;transform:rotate(-36deg)}
.nx-ed-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);border:1.5px solid var(--line);border-top:0;border-radius:0 0 5px 5px;background:#FFFEFB;overflow:hidden}
.nx-ed-page{padding:22px 20px 20px;display:grid;gap:14px}
.nx-ed-h b{display:block;font:800 clamp(18px,1.7vw,23px)/1.1 var(--sans);letter-spacing:-.02em}
.nx-ed-h span{display:block;height:7px;margin-top:10px;border-radius:4px;background:var(--line-2);width:86%}
.nx-ed-h span.s{width:62%;margin-top:7px}
.nx-ed-pic{position:relative;margin-top:26px;aspect-ratio:2/1;border-radius:6px;background:#F3EEE4}
.nx-ed-pic svg{position:absolute;inset:0;width:100%;height:100%}
.nx-ed-pic path,.nx-ed-pic circle{fill:none;stroke:var(--pencil);stroke-width:1.6;vector-effect:non-scaling-stroke}
.nx-ed-pic.sel{outline:2px solid #3858E9;outline-offset:3px}
.nx-ed-pic .tb{position:absolute;left:0;top:-42px;display:flex;gap:2px;padding:5px;border-radius:4px;background:#fff;box-shadow:0 0 0 1px #1E1E1E,0 4px 10px -4px rgba(0,0,0,.25)}
.nx-ed-pic .tb i{width:18px;height:18px;border-radius:3px;background:var(--line-2)}
.nx-ed-pic .tb i:first-child{background:#1E1E1E}
.nx-ed-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nx-ed-row .m{border-radius:6px;background:repeating-linear-gradient(45deg,#EDE7DA 0 6px,#F5F1E8 6px 12px);min-height:62px}
.nx-ed-row .hrs{padding:10px 12px;border-radius:6px;background:#FFF2CC}
.nx-ed-row .hrs b{display:block;font:700 12.5px var(--sans);color:var(--pencil)}
.nx-ed-row .hrs span{display:block;margin-top:3px;font:800 16px/1.2 var(--sans)}
.nx-ed-ai{display:flex;flex-direction:column;gap:10px;padding:16px 14px;border-left:1.5px solid var(--line);background:var(--paper)}
.nx-ed-ai .ai-hd{display:flex;align-items:center;gap:7px;font:800 13.5px var(--sans)}
.nx-ed-ai .ai-hd svg{width:16px;height:16px;fill:var(--yellow);stroke:var(--ink);stroke-width:1.6}
.nx-ed-ai .me,.nx-ed-ai .it{padding:9px 11px;font:500 13px/1.45 var(--sans);border-radius:12px}
.nx-ed-ai .me{align-self:flex-end;max-width:92%;background:#FCE4DD;border-radius:12px 3px 12px 12px}
.nx-ed-ai .it{background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:3px 12px 12px 12px}
.nx-ed-ai .ask{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:9px 10px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font:500 12.5px var(--sans);color:var(--pencil)}
.nx-ed-ai .ask i{width:18px;height:18px;border-radius:50%;background:var(--ink)}

@media (max-width:1180px){
  .nx-five{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1040px){
  .nx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-vs{grid-template-columns:minmax(0,1fr);max-width:620px}
  .nx-vs-arrow{width:70px;margin:-6px auto;transform:rotate(90deg)}
  .nx-share{max-width:620px}
}
@media (max-width:640px){
  .nx-five{grid-template-columns:minmax(0,1fr)}
  .nx-facts{gap:14px}
  .nx-fact{padding:16px 10px}
  .nx-share{padding:22px 14px 20px}
  .nx-share figcaption{padding-right:70px}
  .nx-share-who{width:84px;right:-8px}
  .nx-ed-in{grid-template-columns:minmax(0,1fr)}
  .nx-ed-ai{border-left:0;border-top:1.5px solid var(--line)}
  .nx-cmp{padding:22px 12px 16px}
}
@media (prefers-reduced-motion:reduce){
  .nx-share .webgrid .win.on{animation:none}
  .nx-vs-col.was s{background-size:100% 3px}
}

/* the share figure's second line and its source */
.nx-share-more{margin:10px 0 0;padding-right:110px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.nx-share .nx-src{font-size:11px;margin-top:10px}

/* structured content: loose pages, then the same things kept in order on a small website you can try */
.nx-sc{display:grid;grid-template-columns:minmax(0,.7fr) 90px minmax(0,1.5fr);gap:14px;align-items:center;margin-top:60px}
.nx-sc-was{text-align:center}
.nx-sc-was .loose{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;overflow:visible}
.nx-sc-was .note{margin:10px 0 0;font-size:17px;color:var(--pencil)}
.nx-sc-arrow .harrow{width:100%;height:auto}
.nx-sc-now{position:relative}
.nx-sc-try{position:absolute;right:6px;bottom:-34px;margin:0;font-size:16px;transform:rotate(-2deg)}
.nx-mini{position:relative;padding:12px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(.6deg)}
.nx-mini-in{padding:16px 16px 18px;border:1.5px solid var(--line);border-top:0;border-radius:0 0 5px 5px;background:#FFFEFB;min-height:356px}
.nx-mini-tabs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;margin-bottom:14px;border-bottom:1.5px dashed var(--line-2)}
.nx-mini-tabs button{all:unset;cursor:pointer;padding:7px 12px;border-radius:9px;font:700 14px var(--sans);color:var(--ink-2);transition:background .25s,color .25s}
.nx-mini-tabs button:hover{color:var(--ink)}
.nx-mini-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.nx-mini-tabs button:focus-visible,.nx-mini .chips button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.nx-mini-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.nx-mini .chips{display:flex;flex-wrap:wrap;gap:6px}
.nx-mini .chips button{all:unset;cursor:pointer;padding:5px 11px;border-radius:99px;font:600 13px var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .25s,box-shadow .25s}
.nx-mini .chips button.on{background:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--ink)}
.nx-mini .find input{width:170px;max-width:100%;height:34px;padding:0 12px;border:0;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font:500 13.5px var(--sans);color:var(--ink);outline:0}
.nx-mini .find input:focus{box-shadow:inset 0 0 0 2px var(--coral)}
.nx-mini-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nx-mini-cards li{display:flex;flex-direction:column;gap:3px;padding:8px 8px 10px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 16px -12px rgba(60,48,28,.4);animation:nxin .35s var(--ease) both}
.nx-mini-cards li[hidden]{display:none}
@keyframes nxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nx-mini-cards .im{display:block;height:62px;margin-bottom:5px;border-radius:5px}
.nx-mini-cards .im.y{background:repeating-linear-gradient(-45deg,#FFE7A0 0 6px,#FFF2CC 6px 12px)}
.nx-mini-cards .im.p{background:repeating-linear-gradient(-45deg,#F8C6B8 0 6px,#FDE6DF 6px 12px)}
.nx-mini-cards .im.g{background:repeating-linear-gradient(-45deg,#BFE3CF 0 6px,#E2F2EA 6px 12px)}
.nx-mini-cards .im.b{background:repeating-linear-gradient(-45deg,#C7D6F7 0 6px,#E3E9FB 6px 12px)}
.nx-mini-cards .im.k{background:repeating-linear-gradient(-45deg,#E8D4AE 0 6px,#F4E6C9 6px 12px)}
.nx-mini-cards b{font:700 13.5px/1.25 var(--sans)}
.nx-mini-cards span{font:500 12px var(--sans);color:var(--pencil)}
.nx-mini-none{margin:20px 0 0;font:400 16px var(--hand);color:var(--coral-deep);text-align:center}
.nx-sc-pts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:80px 0 0;padding:0}
.nx-sc-pts li{display:flex;gap:12px;align-items:flex-start}
.nx-sc-pts .tbox{margin-top:2px}
.nx-sc-pts h3{margin:0 0 5px;font:800 18.5px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.015em}
.nx-sc-pts p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.nx-sc-more{max-width:56em;margin:36px auto 0;text-align:center;font-size:16px;line-height:1.6;color:var(--ink-2)}
@media (max-width:1180px){.nx-sc-pts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1040px){
  .nx-sc{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}
  .nx-sc-was .loose{max-width:220px}
  .nx-sc-arrow{width:70px;margin:-4px auto;transform:rotate(90deg)}
}
@media (max-width:640px){
  .nx-mini-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-mini .find input{width:100%}
  .nx-mini .find{flex:1 0 100%}
  .nx-sc-pts{grid-template-columns:minmax(0,1fr);margin-top:70px}
  .nx-share-more{padding-right:60px;font-size:14px}
  .nx-sc-try{position:static;margin-top:16px;text-align:right}
}
@media (prefers-reduced-motion:reduce){.nx-mini-cards li{animation:none}}

/* four little scenes that play by themselves: add once, fits in, filter, never out of date */
.nx-scenes{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin:60px 0 0;padding:0}
.nx-scenes li{position:relative;display:flex;flex-direction:column;padding:16px 18px 20px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow)}
.nx-scenes li:nth-child(odd){transform:rotate(-.6deg)}.nx-scenes li:nth-child(even){transform:rotate(.6deg)}
.nx-scenes .nx-art{height:150px;margin:0 -4px 16px;display:flex;justify-content:center;align-items:center;overflow:hidden}
.scene{display:block;height:100%;width:auto;aspect-ratio:200/124;overflow:hidden}
.scene g{transform-box:fill-box;transform-origin:center}
.nx-scenes h3{margin:0 0 6px;font:800 19px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.015em}
.nx-scenes p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.scene.once .drop{animation:scDrop 6s var(--ease) infinite}
.scene.once .slot{opacity:0;animation:scSlot 6s var(--ease) infinite}
.scene.once .s2{animation-delay:.12s}
@keyframes scDrop{0%{transform:translateY(-28px);opacity:0}12%{transform:none;opacity:1}30%{transform:none;opacity:1}44%{transform:translateY(60px) scale(.7);opacity:0}100%{transform:translateY(60px);opacity:0}}
@keyframes scSlot{0%,38%{opacity:0;transform:scale(.6)}48%{opacity:1;transform:scale(1.06)}54%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
.scene.same .newcard{animation:scSnap 6s var(--spring) infinite}
@keyframes scSnap{0%{transform:translate(-30px,-34px) rotate(-16deg);opacity:0}12%{transform:translate(-30px,-34px) rotate(-16deg);opacity:1}40%,86%{transform:none;opacity:1}96%,100%{transform:none;opacity:0}}
.scene.find .lit{opacity:0;animation:scLit 6s var(--ease) infinite}
.scene.find .fc.out{animation:scOut 6s var(--ease) infinite}
@keyframes scLit{0%,18%{opacity:0}26%,82%{opacity:1}90%,100%{opacity:0}}
@keyframes scOut{0%,24%{opacity:1;transform:none}36%,80%{opacity:.12;transform:scale(.92)}92%,100%{opacity:1;transform:none}}
.scene.date .e1{animation:scGone 6s var(--ease) infinite}
.scene.date .e2,.scene.date .e3,.scene.date .e4{animation:scUp 6s var(--ease) infinite}
@keyframes scGone{0%,20%{transform:none;opacity:1}36%,100%{transform:translateX(-160px) rotate(-8deg);opacity:0}}
@keyframes scUp{0%,34%{transform:none;opacity:1}50%,86%{transform:translateY(-36px);opacity:1}94%{transform:translateY(-36px);opacity:0}100%{transform:none;opacity:0}}
.scene.date{animation:scFadeIn 6s linear infinite}
@keyframes scFadeIn{0%{opacity:.2}6%,100%{opacity:1}}
.nx-scenes li:hover .scene *{animation-duration:3s}

/* the building blocks: their short drawn films, passing by slowly */
.nx-blocks .sec-hd{margin-bottom:56px}
.nx-mq{position:relative;overflow:hidden;padding:24px 0 34px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.nx-mq-track{list-style:none;display:flex;gap:30px;width:max-content;margin:0;padding:0 15px;animation:nxmq 110s linear infinite}
.nx-mq:hover .nx-mq-track,.nx-mq:focus-within .nx-mq-track{animation-play-state:paused}
@keyframes nxmq{to{transform:translateX(-50%)}}
.nx-mq-card{flex:none;width:clamp(250px,26vw,360px)}
.nx-mq-card figure{position:relative;margin:0;padding:10px 10px 14px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(var(--r,-1deg));transition:transform .5s var(--spring)}
.nx-mq-card:nth-child(3n+2) figure{--r:.8deg}.nx-mq-card:nth-child(3n) figure{--r:-.4deg}
.nx-mq-card figure:hover{transform:rotate(0deg) translateY(-6px) scale(1.03)}
.nx-mq-card video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;background:var(--paper)}
.nx-mq-card figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:12px 6px 0}
.nx-mq-card figcaption .note{font-size:19px;color:var(--coral-deep)}
.nx-mq-card figcaption span:not(.note){font:600 14px/1.35 var(--sans);color:var(--ink-2)}
@media (max-width:1180px){.nx-scenes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.nx-scenes{grid-template-columns:minmax(0,1fr)}.nx-mq-track{animation-duration:80s}}
@media (prefers-reduced-motion:reduce){
  .scene *,.scene{animation:none!important}
  .scene.once .slot,.scene.find .lit{opacity:1}
  .scene.find .fc.out{opacity:.12}
  .nx-mq{overflow-x:auto;-webkit-mask:none;mask:none}
  .nx-mq-track{animation:none}
}

/* ================================================================ 8 OCT, EVENING ================================================================ */
/* a taped paper does not move (Z): no lift when pointed at, and it fades in where it is */
.nx-tier:hover,.nx-stopcard:hover,.nx-per:hover{transform:rotate(var(--r,0deg));box-shadow:var(--paper-shadow)}
.nx .rv:has(.tape){translate:none}

/* a word underlined by hand, in a sentence */
.nx-u{position:relative;white-space:nowrap}
.nx-u b{font-weight:800;color:var(--ink)}
.nx-u .undermark{position:absolute;left:-3px;bottom:-6px;width:calc(100% + 6px);height:9px;overflow:visible}
.nx-u .undermark path{fill:none;stroke:var(--coral);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;animation:nxunder .8s var(--ease) 1.1s forwards}
@keyframes nxunder{to{stroke-dashoffset:0}}

/* what you pay for, drawn: the sketch, the built site, the site looked after */
.nx-costs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.8vw,26px);align-items:end;padding:64px 0 62px}
.nx-cost{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.nx-cost svg{display:block;width:100%;height:auto;overflow:visible}
.nx-cost figcaption{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px}
.nx-cost figcaption .note{font-size:clamp(14px,1.3vw,19px);color:var(--coral-deep)}
.nx-cost figcaption b{font:800 clamp(15px,1.5vw,21px)/1.1 var(--sans);font-stretch:106%;letter-spacing:-.01em}
.nx-costs .anote{opacity:1;transform:rotate(var(--rr,-2deg))}
.nx-costs .n-here{left:1%;bottom:0;--rr:-3deg}
.nx-costs .n-here .harrow{position:absolute;left:62%;bottom:100%;width:48px;height:32px;transform:scaleY(-1) rotate(12deg)}
.nx-costs .n-then{left:36%;right:0;top:4px;text-align:center;--rr:-1deg}
.nx-costs .n-then .undermark{display:block;width:92%;height:10px;margin:4px auto 0;overflow:visible}
.nx-costs .n-then .undermark path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.nx-costs .ca .pencil{transform-box:view-box;transform-origin:156px 104px}
.nx-costs.in .ca .pencil{animation:nxsketch 2.8s ease-in-out .9s infinite}
@keyframes nxsketch{0%,100%{transform:none}20%{transform:translate(-7px,4px) rotate(-2deg)}45%{transform:translate(-2px,-2px)}70%{transform:translate(-9px,1px) rotate(1deg)}}
.nx-costs .cb .f1,.nx-costs .cb .f2,.nx-costs .cb .f3{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.85)}
.nx-costs.in .cb .f1{animation:nxfill .6s var(--spring) 1s forwards}
.nx-costs.in .cb .f2{animation:nxfill .6s var(--spring) 1.3s forwards}
.nx-costs.in .cb .f3{animation:nxfill .6s var(--spring) 1.6s forwards}
@keyframes nxfill{to{opacity:1;transform:none}}
.nx-costs .cb .tool{transform-box:view-box;transform-origin:170px 142px}
.nx-costs.in .cb .tool{animation:nxtap 3.2s var(--ease) 2s infinite}
@keyframes nxtap{0%,64%,100%{transform:none}74%{transform:rotate(-16deg)}84%{transform:rotate(3deg)}}
.nx-costs .cc .plant{transform-box:view-box;transform-origin:161px 116px;animation:nxleaf 4.6s ease-in-out infinite}
@keyframes nxleaf{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.nx-costs .cc .can{transform-box:view-box;transform-origin:116px 18px;animation:nxpour 4.6s ease-in-out infinite}
@keyframes nxpour{0%,100%{transform:rotate(-4deg)}35%,75%{transform:rotate(6deg)}}
.nx-costs .cc .dr{opacity:0;animation:nxdrop 1.4s ease-in infinite}
.nx-costs .cc .dr1{animation-delay:.45s}.nx-costs .cc .dr2{animation-delay:.9s}
@keyframes nxdrop{0%{opacity:0;transform:translateY(-4px)}20%{opacity:1}100%{opacity:0;transform:translateY(30px)}}

/* the tiers: a small drawing for what each line is about */
.nx-tier li .tiermark{width:22px;height:22px;flex:none;margin-top:-1px;overflow:visible}

/* a quote, as a conversation */
.nx-chat{position:relative;max-width:500px;margin-inline:auto;padding:4px 0 46px}
.nx-say p{margin:0}
.nx-say .who{display:block;margin-bottom:4px;font-size:17px;color:var(--coral-deep)}
.nx-say.you{position:relative;margin-left:auto;width:min(80%,340px);padding:14px 20px 18px;background:#FFD95F;border-radius:16px 16px 4px 16px;box-shadow:var(--paper-shadow);font:600 17px/1.45 var(--sans);color:var(--ink);transform:rotate(1.2deg)}
.nx-say.you .who{color:var(--ink)}
.nx-say.you::after{content:"";position:absolute;right:-11px;bottom:0;width:14px;height:16px;background:inherit;clip-path:polygon(0 0,0 100%,100% 100%)}
.nx-say.us{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;align-items:end;margin-top:28px}
.nx-chat-p svg{display:block;width:100%;height:auto;overflow:visible}
.nx-say.us .bub{position:relative;padding:14px 20px 20px;background:#fff;border-radius:16px 16px 16px 4px;box-shadow:var(--paper-shadow);font-size:16px;line-height:1.5;color:var(--ink-2);transform:rotate(-.8deg)}
.nx-say.us .bub::before{content:"";position:absolute;left:-11px;bottom:0;width:14px;height:16px;background:inherit;clip-path:polygon(100% 0,100% 100%,0 100%)}
.nx-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--line-2)}
.nx-sum span{font:500 14px var(--mono);color:var(--pencil)}
.nx-sum b{padding:0 6px;font:400 34px/1.1 var(--hand);font-weight:400;color:var(--ink);background:linear-gradient(transparent 52%,#FFD95F 52%,#FFD95F 88%,transparent 88%)}
.nx-pickrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 34px;margin-top:18px;padding-left:12px;font:700 15.5px/1.2 var(--sans)}
.nx-pickrow .yes{position:relative;color:var(--ink)}
.nx-pickrow .pick{position:absolute;left:-16px;top:-12px;width:calc(100% + 32px);height:calc(100% + 24px);overflow:visible;pointer-events:none}
.nx-pickrow .pick path{fill:none;stroke:var(--coral);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.nx-chat.in .pick path{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) 1.7s}
.nx-pickrow .no{color:var(--pencil)}
.nx-chat .you,.nx-chat .us{opacity:0;translate:0 14px;transition:opacity .6s var(--ease),translate .7s var(--spring)}
.nx-chat.in .you{opacity:1;translate:none;transition-delay:.2s}
.nx-chat.in .us{opacity:1;translate:none;transition-delay:.8s}
.nx-chat .q-note{right:2%;bottom:0;--rr:-3deg;opacity:1}

@media (max-width:640px){
  .nx-costs{padding:58px 0 58px}
  .nx-costs .n-then{left:34%}
  .nx-cost figcaption .note{font-size:14px}
  .nx-say.us{grid-template-columns:64px minmax(0,1fr);gap:8px}
  .nx-say.you{width:88%}
  .nx-say.us .bub{padding:12px 16px 18px}
  .nx-sum b{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  .nx-costs *,.nx-u .undermark path{animation:none!important}
  .nx-u .undermark path{stroke-dashoffset:0}
  .nx-costs .cb .f1,.nx-costs .cb .f2,.nx-costs .cb .f3{opacity:1;transform:none}
  .nx-costs .cc .dr{opacity:1}
  .nx-chat .you,.nx-chat .us{opacity:1;translate:none;transition:none}
  .nx-pickrow .pick path{stroke-dashoffset:0;transition:none}
}


/* the monthly report: the project page's own example (site/plugin/neuwp/flow/finish.css, 8 Oct), a picture laid out at 880 wide and shown smaller */
.nwx-rep-mini { position: relative; min-width: 0; }
.nwx-rep-mini .nwx-rep-stack { width: 880px; zoom: var(--z, .5); }
.nwx-rep-mini .nwx-stamp { margin-bottom: 12px; }
/* 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(img/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 report's sheet, when it is itself narrow: as the project page has it (a container query since 9 Oct); laid out at 880 here, so never on this page as it stands */
@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; }
}
}

/* ================================================================ PROCESS, 8 OCT NIGHT ================================================================ */
/* the notes over the people change: any of us does any of it */
.nx-crew .tagn{transition:opacity .35s var(--ease),translate .45s var(--spring)}
.nx-crew .tagn.swap{opacity:0;translate:0 -8px}

/* the rocket of the last step takes off when pointed at, and comes back down gently */
.nx-rocket svg{overflow:visible}
.nx-rocket{overflow:visible!important;position:relative;z-index:2}
.nx-rocket .rocket{transform-box:view-box;transform-origin:100px 60px;transition:transform 1.1s var(--ease),opacity .6s var(--ease) .15s}
.nx-stopcard:hover .nx-rocket .rocket,.nx-rocket.go .rocket{transform:translate(30px,-300px) rotate(9deg);opacity:0;transition:transform 1.4s cubic-bezier(.55,0,.85,.3),opacity .45s ease .85s}
.nx-stopcard:hover .nx-rocket .doo2 .pop{transform:none}
.nx-rocket .flame{transform-box:fill-box;transform-origin:50% 0}
.nx-stopcard:hover .nx-rocket .flame,.nx-rocket.go .flame{animation:nxflame .1s linear infinite alternate}
@keyframes nxflame{to{transform:scaleY(1.7)}}
.nx-rocket .puff{opacity:0;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.4);transition:opacity .4s,transform .6s var(--ease)}
.nx-stopcard:hover .nx-rocket .puff,.nx-rocket.go .puff{opacity:1;transform:scale(1.15)}

/* how long the build takes */
.nx-days-wrap{margin-top:calc(var(--gap) * .85)}
.nx-days-h{margin:0 0 34px;text-align:center;font:800 clamp(1.5rem,2.5vw,2.1rem)/1.15 var(--sans);font-stretch:106%;letter-spacing:-.025em;text-wrap:balance}
.nx-days{max-width:1000px;gap:28px;margin:0 auto}
.nx-day{padding:26px 22px 20px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(var(--r,-.6deg))}
.nx-day:nth-child(2){--r:.5deg}.nx-day:nth-child(3){--r:-.3deg}
.nx-day .wkmark{display:block;width:100%;max-width:236px;height:auto;margin:18px auto 0;overflow:visible}


/* going live: more room under the bunting */
.nx-launch .sec-hd{margin-top:56px}

/* the report beside its words, larger now it is the project page's own */
.nx-month-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* the report, smaller (Z, 11 Oct: "way too large"): at most 460 wide, about half its own size */
#month .nwx-rep-mini{max-width:460px;margin-inline:auto}


@media (max-width:1040px){
  .nx-month-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .nx-launch .sec-hd{margin-top:40px}
}
@media (prefers-reduced-motion:reduce){
  .nx-crew .tagn{transition:opacity .2s}
  .nx-rocket .rocket{transition:opacity .3s!important}
  .nx-stopcard:hover .nx-rocket .rocket,.nx-rocket.go .rocket{transform:none;opacity:.25}
}
.doo2 .puff{opacity:0}

/* ================================================================ PRICING'S HERO, 9 OCT ================================================================ */
/* one example site three ways, laid out at 640 wide and shown smaller where there is less room (pages.js, data-fit) */
.nx-stage-wrap{position:relative;min-width:0}
.nx-stage{position:relative;width:640px;height:470px;zoom:var(--z,1)}
.nx-sk{position:absolute;left:0;top:52px;width:292px;padding:14px 12px 46px;border-radius:3px;background-color:#fff;background-image:linear-gradient(rgba(45,108,223,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(45,108,223,.07) 1px,transparent 1px);background-size:14px 14px;box-shadow:var(--paper-shadow);transform:rotate(-6deg)}
.nx-sk .tape{left:46%;top:-13px;width:78px;height:24px;margin-left:-39px;transform:rotate(-4deg)}
.nx-sk .sitesketch{display:block;width:100%;height:178px}
.nx-sk-l{position:absolute;left:14px;bottom:10px;margin:0;display:flex;align-items:baseline;gap:8px}
.nx-sk-l .note,.nx-br-l .note,.nx-care-hd .note{font-size:17px;color:var(--coral-deep)}
.nx-sk-l b,.nx-br-l b,.nx-care-hd b{font:800 15px/1 var(--sans);font-stretch:106%;color:var(--ink)}
.nx-br{position:absolute;left:142px;top:70px;width:500px;transform:scale(.93);transform-origin:0 0;border-radius:10px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 70px -40px rgba(60,48,28,.55),0 12px 26px -16px rgba(60,48,28,.3)}
.nx-br-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:10px 10px 0 0;background:#F1EEE6}
.nx-br-bar i{width:8px;height:8px;border-radius:50%;background:#D8D3C7}
.nx-br-bar i:first-child{background:var(--coral)}.nx-br-bar i:nth-child(2){background:var(--yellow)}
.nx-br-bar span{margin:0 auto;padding:3px 14px;border-radius:999px;background:#fff;font:500 10.5px/1 var(--mono);color:var(--pencil)}
.nx-br-in{position:relative;width:500px;height:332px;overflow:hidden;border-radius:0 0 10px 10px}
.nx-br-wire{position:absolute;inset:0;padding:0;background-color:#fff;background-image:linear-gradient(rgba(45,108,223,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(45,108,223,.07) 1px,transparent 1px);background-size:14px 14px;clip-path:inset(0 0 0 0);animation:nxwipe 1.9s cubic-bezier(.65,0,.35,1) 1.1s forwards}
.nx-br-wire .sitesketch{display:block;width:100%;height:100%}
.nx-br-wire::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--coral);opacity:0;animation:nxwipeedge 1.9s cubic-bezier(.65,0,.35,1) 1.1s forwards}
@keyframes nxwipe{to{clip-path:inset(0 0 0 100%)}}
@keyframes nxwipeedge{0%{opacity:0;left:0}8%{opacity:.85}92%{opacity:.85}100%{opacity:0;left:100%}}
.nx-br-l{position:absolute;left:14px;bottom:-34px;margin:0;display:flex;align-items:baseline;gap:8px}
.nx-care{position:absolute;left:458px;top:300px;width:182px;padding:14px 16px 12px;border-radius:5px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 30px 50px -30px rgba(60,48,28,.5),0 8px 18px -12px rgba(60,48,28,.25);transform:rotate(3deg);opacity:0;animation:nxcare .7s var(--spring) 2.8s forwards}
@keyframes nxcare{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
.nx-care-hd{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;padding-bottom:8px;border-bottom:1.5px dashed var(--line-2)}
.nx-care ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.nx-care li{display:flex;align-items:center;gap:7px;font:600 12.5px/1.2 var(--sans);color:var(--ink-2)}
.nx-care li b{margin-left:auto;font:800 13px/1 var(--sans);color:var(--ink)}
.nx-care .tbox{width:18px;height:18px;flex:none;overflow:visible}
.nx-care .tk{fill:none;stroke:var(--coral);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:nxtk .4s var(--ease) forwards}
.nx-care li:nth-child(1) .tk{animation-delay:3.3s}.nx-care li:nth-child(2) .tk{animation-delay:3.45s}.nx-care li:nth-child(3) .tk{animation-delay:3.6s}.nx-care li:nth-child(4) .tk{animation-delay:3.75s}
@keyframes nxtk{to{stroke-dashoffset:0}}
.nx-stage .anote{opacity:1;transform:rotate(var(--rr,-2deg));font-size:19px}
.nx-stage .n-here{left:8px;top:2px;--rr:-4deg}
.nx-stage .n-here .harrow{position:absolute;left:100%;top:10px;width:44px;height:30px;margin-left:4px}
.nx-stage .n-then{right:6px;top:14px;--rr:3deg}
@media (prefers-reduced-motion:reduce){
  .nx-br-wire{animation:none;clip-path:inset(0 0 0 100%)}
  .nx-br-wire::after{display:none}
  .nx-care{animation:none;opacity:1}
  .nx-care .tk{animation:none;stroke-dashoffset:0}
}
.nx-sk-l,.nx-care-hd{flex-direction:column;align-items:flex-start;gap:3px}
.nx-sk-l{bottom:8px}
.nx-sk{padding-bottom:58px}
.nx-care{width:190px}
.nx-stage .n-here .harrow{left:58%;top:100%;width:40px;height:32px;margin:2px 0 0}

/* the example site in Pricing's hero (9 Oct): a florist's site as a real one would look */
@font-face{font-family:'NX Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-wght.woff2) format('woff2')}
/* its Cyrillic letters, which Fraunces has none of (13 Oct): Literata, as soft and warm */
@font-face{font-family:'NX Fraunces';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/literata-cyr.woff2) format('woff2')}
.bs{--g:#21392D;--blush:#F2D9CF;--cream:#FAF6F0;--rose:#C2475B;position:absolute;inset:0;background:var(--cream);font-family:'Manrope',var(--sans);color:var(--g)}
.bs-bar{margin:0;height:18px;display:grid;place-items:center;background:var(--g);color:#F4EDE2;font:600 7.6px/1 'Manrope',sans-serif;letter-spacing:.06em}
.bs-hd{display:flex;align-items:center;height:38px;padding:0 16px;border-bottom:1px solid rgba(33,57,45,.1)}
.bs-logo{display:flex;align-items:center;gap:7px}
.bs-mark{width:22px;height:22px;flex:none}
.bs-logo span{display:flex;flex-direction:column;line-height:1}
.bs-logo b{font:600 17px/.9 'NX Fraunces',Georgia,serif;letter-spacing:-.02em;color:var(--g)}
.bs-logo small{margin-top:2px;font:700 5.6px/1 'Manrope',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#6E7F74}
.bs-hd nav{display:flex;gap:16px;margin:0 auto;padding-left:20px}
.bs-hd nav span{font:600 9.2px/1 'Manrope',sans-serif;color:var(--g)}
.bs-hd nav span:first-child{box-shadow:0 1.5px 0 var(--g)}
.bs-icons{position:relative;display:flex;gap:10px}
.bs-icons svg{width:14px;height:14px;fill:none;stroke:var(--g);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bs-icons i{position:absolute;right:-6px;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--rose);color:#fff;font:700 6.5px/11px 'Manrope',sans-serif;text-align:center;font-style:normal}
.bs-hero{position:relative;display:grid;grid-template-columns:262px 1fr;height:170px}
.bs-copy{padding:22px 0 0 18px}
.bs-copy small{display:flex;align-items:center;gap:6px;font:700 7.4px/1 'Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.bs-copy small::before{content:"";width:14px;height:1.2px;background:var(--rose)}
.bs-copy h4{margin:9px 0 7px;font:540 27px/1 'NX Fraunces',Georgia,serif;letter-spacing:-.025em;color:var(--g);text-wrap:balance;font-variation-settings:'SOFT' 60}
.bs-copy p{margin:0;max-width:220px;font:500 9.6px/1.5 'Manrope',sans-serif;color:#55665C}
.bs-acts{display:flex;align-items:center;gap:12px;margin-top:13px}
.bs-acts em{padding:7px 13px;border-radius:999px;background:var(--g);color:#F4EDE2;font:700 9px/1 'Manrope',sans-serif;font-style:normal}
.bs-acts span{font:700 9px/1 'Manrope',sans-serif;color:var(--g)}
.bs-copy .bs-open{display:flex;align-items:center;gap:5px;margin-top:11px;font:600 8px/1 'Manrope',sans-serif;color:#6E7F74}
.bs-open i{width:6px;height:6px;border-radius:50%;background:#3E9B62;box-shadow:0 0 0 2.5px rgba(62,155,98,.18)}
.bs-pic{position:relative}
.bs-blob{position:absolute;left:12px;top:26px;width:200px;height:136px;border-radius:50%;background:var(--blush)}
.bs-pic img{position:absolute;left:36px;top:10px;width:166px;height:160px;object-fit:cover;object-position:40% 30%;border-radius:84px 84px 10px 10px;display:block}
.bs-badge{position:absolute;left:180px;top:4px;width:54px;height:54px;filter:drop-shadow(0 4px 8px rgba(33,57,45,.18))}
.bs-turn{font:800 7.4px/1 'Manrope',sans-serif;letter-spacing:1px;fill:var(--g);transform-box:view-box;transform-origin:50px 50px;animation:bsturn 18s linear infinite}
@keyframes bsturn{to{transform:rotate(360deg)}}
.bs-shop{padding:10px 16px 0 18px}
.bs-shop-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.bs-shop-hd h5{margin:0;font:560 13.5px/1 'NX Fraunces',Georgia,serif;letter-spacing:-.01em;color:var(--g)}
.bs-shop-hd span{font:700 8.6px/1 'Manrope',sans-serif;color:var(--g)}
.bs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.bs-cards figure{position:relative;margin:0;height:76px;border-radius:9px;overflow:hidden}
.bs-cards img{width:100%;height:100%;object-fit:cover;display:block}
.bs-cards figcaption{position:absolute;left:6px;bottom:6px;display:flex;align-items:baseline;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(250,246,240,.94)}
.bs-cards b{font:700 8.6px/1 'Manrope',sans-serif;color:var(--g)}
.bs-cards span{font:600 7.4px/1 'Manrope',sans-serif;color:#6E7F74}
@media (prefers-reduced-motion:reduce){.bs-turn{animation:none}}
/* 9 Oct, 08:42: "100% absolutely free." in bold, with no line under it (a line reads as a link); "only if you like it" beside what it is about */
.nx-hero .lead .nx-free{font-weight:800;color:var(--ink)}
.nx-br-l{flex-wrap:wrap;row-gap:4px;width:320px;top:calc(100% + 12px);bottom:auto}
.nx-br-l .nx-only{flex-basis:100%;font-size:16px;color:var(--ink-2);transform:rotate(-1.5deg);transform-origin:0 50%}

/* WordPress hero, 9 Oct */
/* a smaller card, so there is more room between it and the words; the
   person larger and standing inside it, over the last little website */
.nx-share{container-type:inline-size}
.nx-hero-art .nx-share{width:88%;max-width:580px;margin-left:auto}
.nx-share-who{width:clamp(84px,29cqw,156px);right:2px;bottom:auto;top:calc(30px + 27cqw)}
.nx-share figcaption,.nx-share-more{padding-right:23cqw}
@media (max-width:1040px){
  .nx-hero-art .nx-share{width:auto;margin-left:0}
}
@media (max-width:640px){
  .nx-share-who{right:0;top:calc(22px + 27cqw)}
}

/* Company & legal, 9 Oct evening */
/* "large." is larger, and the only word circled */
.nx-hero h1 .circ:has(>.nx-large){font-size:1.42em;line-height:.9;margin-top:.14em;margin-left:.08em}
.nx-hero h1 .circ:has(>.nx-large) .ringmark{left:-.26em;top:-.1em;width:calc(100% + .66em);height:calc(100% + .3em)}
.nx-large{font-weight:inherit}
/* the two companies, side by side, and how to write to us at the end of the card */
#who .nx-co-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
@media (max-width:1040px){#who .nx-co-grid{grid-template-columns:minmax(0,1fr)}}
.nx-id2 .nx-id-hd{padding-bottom:8px}
.nx-cos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.nx-co{min-width:0;padding:16px 0 4px}
.nx-co+.nx-co{padding-left:26px;margin-left:26px;border-left:1.5px dashed var(--line-2)}
.nx-co h3{margin:0 0 4px;font:800 22px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.02em}
.nx-id .nx-co dl{display:block}
.nx-id .nx-co dt{padding:10px 0 0;border:0}
.nx-id .nx-co dd{padding:1px 0 0;border:0;font-variant-numeric:tabular-nums}
.nx-id-mail{display:flex;align-items:center;gap:8px;margin:26px -6px 0;padding:18px 0 18px 22px;background:var(--kraft-3);border-radius:4px;box-shadow:0 12px 20px -16px rgba(60,48,28,.55);transform:rotate(-1.2deg)}
.nx-id-mail-t{flex:1;min-width:0}
.nx-id-mail .note{display:block;font-size:19px;line-height:1.1;color:var(--coral-deep)}
.nx-id-mail a{position:relative;display:inline-block;margin:4px 0 10px;font:800 clamp(22px,2.1vw,28px)/1.15 var(--sans);font-stretch:104%;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.nx-id-mail a .undermark{position:absolute;left:-2px;bottom:-7px;width:calc(100% + 4px);height:9px;overflow:visible}
.nx-id-mail a .undermark path{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:0}
.nx-id-mail a:hover .undermark path{animation:nxdraw .5s var(--ease)}
.nx-id-mail p{margin:0;font-size:15px;line-height:1.45;color:var(--kraft-ink)}
.nx-id-mail .planemark{flex:none;width:170px;height:auto;margin:-34px -30px -22px 0;overflow:visible}
.nx-id-mail .planemark .trail path{stroke-dasharray:3 7}
.nx-id-mail .planemark .plane{animation:nxglide 3.8s ease-in-out infinite}
@keyframes nxglide{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(5px,-6px) rotate(-5deg)}}
@media (max-width:640px){
  .nx-cos{grid-template-columns:minmax(0,1fr)}
  .nx-co+.nx-co{padding-left:0;margin-left:0;margin-top:14px;border-left:0;border-top:1.5px dashed var(--line-2)}
  .nx-id-mail{padding-left:16px}
  .nx-id-mail .planemark{width:112px;margin:-26px -14px -10px 0}
}
@media (prefers-reduced-motion:reduce){.nx-id-mail .planemark .plane{animation:none}}

/* Company & legal, 11 Oct */
/* the refunds table: its first column is a sentence */
.nx-doc .nx-refunds td:first-child{white-space:normal;width:48%}
/* part seven: the two companies in columns, and how to write to us */
.nx-doc .nx-cos{margin:6px 0 4px}
.nx-doc .nx-co h3{margin:0 0 2px;font:800 21px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.02em}
.nx-doc .nx-co dl{margin:0}
.nx-doc .nx-co dt{padding-top:9px;font:600 13.5px/1.5 var(--sans);color:var(--pencil)}
.nx-doc .nx-co dd{margin:0;font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.nx-doc .nx-id-mail{margin:30px 0 24px}
.nx-doc .nx-id-mail a{color:var(--ink);text-decoration:none}
.nx-doc .nx-id-mail p{margin:0;font-size:15px;line-height:1.45;color:var(--kraft-ink)}

/* ================================================================ THE OFFICE, 11 OCT ================================================================ */
/* drawn on the page's own paper: no card, no frame, the floor fading out at both ends */
.nx-office{position:relative;margin:34px 0 0}
.nx-office-scroll{position:relative}
.nx-office-svg{display:block;width:100%;height:auto;overflow:visible}
/* the room's own size while its drawing is fetched (pages.js), so nothing below it moves when it arrives */
.nx-office-wait{display:block;width:100%;aspect-ratio:1440/660}
.nx-office-note{margin:4px 0 0;text-align:center}
.nx-office-note .note{font-size:19px;color:var(--coral-deep)}
.nx-office-note .nx-swipe{display:none}
.nx-office .hot{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.nx-office .nx-ring{display:none;pointer-events:none}
.nx-office .nx-ring.on{display:inline}
.nx-office .nx-ring rect{fill:none;vector-effect:non-scaling-stroke}
.nx-office .nx-ring .a{stroke:#fff;stroke-width:7}
.nx-office .nx-ring .b{stroke:var(--ink);stroke-width:3}
/* things lift a little when pointed at, so they look pressable */
.nx-office .coffee,.nx-office .window,.nx-office .clock,.nx-office .plant{transition:transform .4s var(--spring)}
.nx-office .coffee:hover,.nx-office .window:hover,.nx-office .clock:hover,.nx-office .plant:hover{transform:translateY(-4px)}
/* the clock and the calendar */
.nx-office .cal-d,.nx-office .cal-m{pointer-events:none}
/* the window: clouds drifting by day, stars by night */
.nx-office .clouds{animation:ofcloud 80s ease-in-out infinite alternate}
@keyframes ofcloud{to{transform:translateX(-380px)}}
.nx-office .sky{transition:fill 1s var(--ease)}
.nx-office .sun{transition:transform 1s var(--ease),opacity 1s var(--ease)}
.nx-office .moon,.nx-office .stars{opacity:0;transition:opacity 1s var(--ease)}
.nx-office .moon{transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.nx-office .clouds-wrap{transition:opacity 1s}
.nx-office .window.night .sky{fill:#2C3766}
.nx-office .window.night .sun{transform:translateY(160px);opacity:0}
.nx-office .window.night .moon{opacity:1;transform:none}
.nx-office .window.night .stars{opacity:1}
.nx-office .window.night .clouds path{opacity:.3}
.nx-office .star{animation:oftwinkle 2.6s ease-in-out infinite}
.nx-office .star.s1{animation-delay:.9s}.nx-office .star.s2{animation-delay:1.7s}
@keyframes oftwinkle{50%{opacity:.25}}
/* the shelf: the books tip over like dominoes, and stand up again */
.nx-office .books:hover .bk:first-child{transform:rotate(5deg);transition:transform .3s var(--spring)}
.nx-office .books.fall .bk{animation:oftopple 2s var(--ease) both}
.nx-office .books.fall .bk:nth-child(2){animation-delay:.1s}.nx-office .books.fall .bk:nth-child(3){animation-delay:.2s}.nx-office .books.fall .bk:nth-child(4){animation-delay:.3s}.nx-office .books.fall .bk:nth-child(5){animation-delay:.4s}
@keyframes oftopple{0%{transform:none}22%{transform:rotate(24deg)}68%{transform:rotate(24deg)}84%{transform:rotate(-3deg)}100%{transform:none}}
.nx-office .trail{animation:ofleaf 6s ease-in-out infinite}
/* the lamps */
.nx-office .glow{transition:opacity .45s var(--ease)}
.nx-office .lamp:hover .sway{animation:ofsway 1.8s ease-in-out}
@keyframes ofsway{25%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}}
/* the coffee machine: it drips, the cup fills, the light goes green */
.nx-office .coffee .drip{opacity:0}
.nx-office .coffee .fill{transform:scaleY(.15);transition:transform .5s var(--ease)}
.nx-office .coffee.full .fill{transform:scaleY(1);transition:transform 2s linear .2s}
.nx-office .coffee .led{transition:fill .3s}
.nx-office .coffee.brew .led{fill:#2F9E6B}
.nx-office .coffee .msteam path{animation:ofsteam 2.4s ease-out infinite;opacity:0}
.nx-office .coffee .msteam path+path{animation-delay:1.2s}
@keyframes ofsteam{0%{opacity:0;transform:translateY(4px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-22px)}}
.nx-office .coffee.brew .drip{opacity:1;animation:ofdrip .4s linear infinite}
.nx-office .coffee.brew .msteam path{animation-duration:1s}
@keyframes ofdrip{from{stroke-dasharray:4 10;stroke-dashoffset:14}to{stroke-dasharray:4 10;stroke-dashoffset:0}}
/* the people: everybody jumps when pressed, and each does something of their own */
.nx-office .p.hop{animation:ofhop .7s var(--spring)}
@keyframes ofhop{0%,100%{transform:none}32%{transform:translateY(-18px)}58%{transform:none}76%{transform:translateY(-5px)}}
.nx-office .p:hover .arm{animation:nxwave 1.1s var(--ease)}
.nx-office .pb .arm,.nx-office .pb:hover .arm{animation:ofdraw 1.3s ease-in-out infinite alternate}
@keyframes ofdraw{from{transform:rotate(-4deg)}to{transform:rotate(3deg)}}
.nx-office .pa .head,.nx-office .pa .face{transform-box:view-box;transform-origin:480px 436px;animation:ofbob 1.1s ease-in-out infinite}
.nx-office .pa.jam .head,.nx-office .pa.jam .face{animation-duration:.42s}
@keyframes ofbob{50%{transform:rotate(3.5deg)}}
.nx-office .notes .n{opacity:0}
.nx-office .notes .n0,.nx-office .notes .n1{animation:ofnote 3.2s ease-out infinite}
.nx-office .notes .n1{animation-delay:1.6s}
.nx-office .notes.jam .n{animation:ofnote 1.3s ease-out infinite}
.nx-office .notes.jam .n1{animation-delay:.25s}.nx-office .notes.jam .n2{animation-delay:.5s}.nx-office .notes.jam .n3{animation-delay:.75s}.nx-office .notes.jam .n4{animation-delay:1s}
@keyframes ofnote{0%{opacity:0;transform:translate(0,0)}25%{opacity:1}100%{opacity:0;transform:translate(16px,-50px)}}
.nx-office .arrow{stroke-dasharray:1;stroke-dashoffset:1;animation:ofline 5s ease-in-out infinite}
@keyframes ofline{0%{stroke-dashoffset:1;opacity:1}45%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.nx-office .bd path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:opacity .4s}
.nx-office .bd.on path{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease) .15s,opacity .1s}
.nx-office .pe .tabshow,.nx-office .pe .spark{opacity:0;transition:opacity .3s}
.nx-office .pe.show .tabshow{opacity:1}
.nx-office .pe.show .spark{animation:ofspark .7s ease-out 3}
@keyframes ofspark{0%{opacity:0;transform:translate(4px,4px)}40%{opacity:1}100%{opacity:0;transform:translate(-4px,-4px)}}
/* the plant: watered, it grows a leaf and a flower */
.nx-office .plant .leaves{animation:ofleaf 5.5s ease-in-out infinite}
@keyframes ofleaf{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.nx-office .plant .newleaf,.nx-office .plant .flower{transform:scale(0);transition:transform .9s var(--spring)}
.nx-office .plant.grown .newleaf{transform:none}
.nx-office .plant.grown .flower{transform:none;transition-delay:.5s}
.nx-office .plant .wd{opacity:0}
.nx-office .plant.watering .wd{animation:ofwd .7s ease-in 3}
.nx-office .plant .wd1{animation-delay:.2s!important}.nx-office .plant .wd2{animation-delay:.4s!important}
@keyframes ofwd{0%{opacity:0;transform:translateY(-40px)}30%{opacity:1}100%{opacity:0;transform:translateY(20px)}}
/* the dog walks the length of the room and back; pressed, it sits, wags and loves you */
.nx-office .dogwalk{animation:ofdogx 38s linear infinite}
@keyframes ofdogx{0%{transform:translate(130px,622px)}46%{transform:translate(1330px,622px)}50%{transform:translate(1330px,622px)}96%{transform:translate(130px,622px)}100%{transform:translate(130px,622px)}}
.nx-office .dogflip{animation:ofdogf 38s linear infinite}
@keyframes ofdogf{0%,46%{transform:scaleX(1)}48%,96%{transform:scaleX(-1)}98%,100%{transform:scaleX(1)}}
.nx-office .dog .lg.a{animation:ofleg .45s ease-in-out infinite alternate}
.nx-office .dog .lg.b{animation:ofleg .45s ease-in-out infinite alternate-reverse}
@keyframes ofleg{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.nx-office .dog .tail{animation:oftail .55s ease-in-out infinite alternate}
@keyframes oftail{from{transform:rotate(-12deg)}to{transform:rotate(16deg)}}
.nx-office .dog .dhead{transition:transform .4s var(--spring)}
.nx-office .dogwalk.sit,.nx-office .dogwalk.sit .dogflip,.nx-office .dogwalk.sit .lg{animation-play-state:paused}
.nx-office .dogwalk.sit .tail{animation-duration:.14s}
.nx-office .dogwalk.sit .dhead{transform:rotate(-10deg)}
.nx-office .ht{opacity:0}
.nx-office .dogwalk.sit .ht{animation:ofheart 1.8s ease-out both}
.nx-office .dogwalk.sit .ht1{animation-delay:.25s}.nx-office .dogwalk.sit .ht2{animation-delay:.5s}
@keyframes ofheart{0%{opacity:0;transform:translateY(10px) scale(.6)}25%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-34px)}}
@media (max-width:760px){
  .nx-office-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:-16px}
  .nx-office-scroll::-webkit-scrollbar{display:none}
  .nx-office-svg,.nx-office-wait{width:940px;max-width:none}
  .nx-office-note .nx-swipe{display:block;margin-top:4px;font-size:16px;color:var(--pencil)}
}
@media (prefers-reduced-motion:reduce){
  .nx-office *{animation:none!important}
  .nx-office .notes .n0,.nx-office .notes .n1{opacity:1}
  .nx-office .dogwalk{transform:translate(640px,622px)}
  .nx-office .arrow{stroke-dashoffset:0}
  .nx-office .bd.on path{transition:none}
  .nx-office .dogwalk.sit .ht,.nx-office .pe.show .spark{opacity:1}
  .nx-office .coffee.full .fill{transition:none}
}
.nx-office .flag{animation:offlag 3.4s ease-in-out infinite}
.nx-office .flag.f1{animation-delay:-1.1s}.nx-office .flag.f2{animation-delay:-2.2s}
@keyframes offlag{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
/* she throws: her arm goes forward each time a plane sets off (every 12 seconds, from 2 s) */
.nx-office .pd .arm{animation:ofthrow 12s var(--ease) 1.55s infinite}
@keyframes ofthrow{0%,12%,100%{transform:none}3%{transform:rotate(-28deg)}6.5%{transform:rotate(14deg)}}

/* Pricing, 11 Oct: what a price is, under the tiers */
.nx-vat{display:flex;gap:10px;align-items:flex-start;justify-content:center;max-width:760px;margin:30px auto 0;font-size:15px;line-height:1.55;color:var(--ink-2);text-align:left;text-wrap:pretty}
.nx-vat .ico{flex:none;width:19px;height:19px;margin-top:2px;color:var(--coral-deep)}

/* ---- "This page isn't here" (not-here.html, inc/pages.php's neuwp_not_here): the signpost of drawings/lost.mjs ----
 * The scene is one drawing; each board is a link of its own laid over the post, placed in the scene's proportions
 * (build-pages.py, lost()), its words the page's text in the marker face, sized by the signpost's own width. A board
 * pressed or pointed at leans the way it points. The sign of the page that was asked for hangs by one nail and swings. */
.nx-lost{padding-bottom:calc(var(--gap) * .3)}
.nx-lost-at{margin:20px 0 0}
.nx-lost-at[hidden]{display:none}
.nx-lost-at code{display:inline-block;max-width:100%;padding:4px 12px;border:1.5px dashed rgba(23,23,28,.16);border-radius:8px;background:#fff;color:var(--ink-2);font:500 14.5px/1.5 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;overflow-wrap:anywhere}
.nx-sign{position:relative;width:100%;max-width:620px;margin:0 0 0 auto;container-type:inline-size}
.nx-sign>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nx-sign ul{margin:0;padding:0;list-style:none}
.nx-board{position:absolute;display:flex;align-items:center;justify-content:center;padding:0 var(--tip) 0 0;color:var(--ink);font:400 clamp(13px,3.5cqw,22px)/1 var(--hand);letter-spacing:.01em;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--spring)}
.nx-board-l{padding:0 0 0 var(--tip)}
.nx-board svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nx-board span{position:relative;padding-top:.1em}
.nx-board-r:hover{transform:translateX(7px) rotate(-1deg)}
.nx-board-l:hover{transform:translateX(-7px) rotate(1deg)}
.nx-board:active{transform:none}
.nx-board:focus-visible{border-radius:4px}
.nx-sign .lost-sign{transform:rotate(9deg);animation:lost-hang 5.5s ease-in-out infinite}
.nx-sign .lost-q{transform-box:fill-box;transform-origin:center;animation:lost-float 3.6s ease-in-out infinite}
.nx-sign .lost-q2{animation-delay:1.2s}
.nx-sign .eyes{transform-box:fill-box;transform-origin:center;animation:lost-blink 4.8s infinite}
.nx-sign .arm{animation:lost-point 6s ease-in-out infinite}
@keyframes lost-hang{0%,100%{transform:rotate(7deg)}50%{transform:rotate(12deg)}}
@keyframes lost-float{0%,100%{transform:translateY(0) rotate(-4deg);opacity:.6}50%{transform:translateY(-7px) rotate(5deg);opacity:1}}
@keyframes lost-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes lost-point{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}62%{transform:rotate(5deg)}}
@media (max-width:1040px){.nx-sign{margin:0 auto}}
@media (prefers-reduced-motion:reduce){
  .nx-sign .lost-sign{animation:none}
  .nx-sign .lost-q,.nx-sign .eyes,.nx-sign .arm{animation:none}
  .nx-board{transition:none}
}

/* ---- the trade pages, the guides and the comparison (14 Oct: "the pages only we can write") ---- */
/* the landing page's drawn example websites, on paper with tape (scaled to their frames by pages.js) */
.nx-ex{position:relative;margin:0;min-width:0}
.nx-ex .paper{padding:10px;transform:rotate(var(--r,1deg));transition:transform .55s var(--spring)}
.nx-ex .tape{left:50%;top:-14px;width:92px;height:28px;margin-left:-46px;transform:rotate(-3deg)}
.nx-ex figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:18px 6px 0}
.nx-ex figcaption .note{font-size:19px;color:var(--coral-deep)}
.nx-ex figcaption span:not(.note){font:600 14.5px/1.4 var(--sans);color:var(--ink-2)}
.nx-hero-art .nx-ex{width:94%;max-width:640px;margin-left:auto}
/* a few of the building blocks' films, side by side */
.nx-films{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
.nx-films .nx-mq-card{width:auto}
.nx-tiers.nx-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-inline:auto}
.nx-also{max-width:62ch;margin:40px auto 0;text-align:center;font-size:16px;line-height:1.6;color:var(--ink-2)}
.nx-also a{color:var(--ink);font-weight:700;text-decoration-color:var(--coral);text-underline-offset:3px}
@media (max-width:900px){
  .nx-films{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-hero-art .nx-ex{width:100%;margin:10px auto 0}
}
@media (max-width:600px){
  .nx-films{grid-template-columns:minmax(0,1fr)}
  .nx-tiers.nx-two{grid-template-columns:minmax(0,1fr)}
}
/* a hero without a picture beside it: the start pages of the trades and the guides */
.nx-hero.nx-solo{padding-bottom:calc(var(--gap) * .3)}
.nx-solo .nx-hero-copy{max-width:860px;margin-inline:auto;text-align:center}
.nx-solo .lead{margin-inline:auto;max-width:40em}
.nx-solo .nx-acts{justify-content:center}
/* the trades, each with its drawn example */
.nx-trades{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:52px 28px}
.nx-trades>li{display:flex}
.nx-trade{display:flex;flex-direction:column;width:100%;color:inherit;text-decoration:none;border-radius:6px}
.nx-trade .nx-ex .paper{--r:-.8deg}
.nx-trades>li:nth-child(even) .nx-trade .nx-ex .paper{--r:.7deg}
.nx-trade:hover .nx-ex .paper{transform:rotate(0) translateY(-6px)}
.nx-trade>.note{margin:20px 0 0;font-size:17px}
.nx-trade h2{margin:4px 0 6px;font:800 23px/1.15 var(--sans);font-stretch:106%;letter-spacing:-.02em}
.nx-trade p{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.nx-trade .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:700 14px var(--sans);color:var(--ink)}
.nx-trade .more .ico{width:15px;height:15px;transition:transform .35s var(--spring)}
.nx-trade:hover .more .ico{transform:translateX(3px)}
.nx-trade-any>.nx-art{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.nx-trade-any>.nx-art .doo2{width:62%;height:auto}
/* thirteen trades and "any other business" (22 Oct): the last card takes the rest of its row, so no row ends short */
.nx-trades>li:has(.nx-trade-any){grid-column:span 3}
.nx-trades>li>.nx-trade-any{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:32px;align-content:start}
.nx-trades>li>.nx-trade-any>.nx-art{grid-row:1/span 4}
.nx-trades>li>.nx-trade-any>.note{margin-top:6px}.nx-trades>li>.nx-trade-any>.more{justify-self:start;margin-top:0}
@media (max-width:1100px){.nx-trades{grid-template-columns:repeat(3,minmax(0,1fr))}.nx-trades>li:has(.nx-trade-any){grid-column:span 2}.nx-trades>li>.nx-trade-any{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){.nx-trades>li:has(.nx-trade-any){grid-column:auto}.nx-trades>li>.nx-trade-any{display:flex}}
@media (max-width:900px){.nx-trades{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}}
@media (max-width:560px){.nx-trades{grid-template-columns:minmax(0,1fr)}}
.nx-trade-any>.nx-art{background-color:#fff;box-shadow:var(--paper-shadow);transform:rotate(.7deg)}
/* the guides: who wrote it, when, how long it takes to read */
.nx-byline{margin:20px 0 0;font:600 14px/1.5 var(--sans);color:var(--pencil)}
.nx-byline b{color:var(--ink);font-weight:700}
.nx-doc .nx-src-list{padding-left:1.2em}
.nx-doc .nx-src-list li{font-size:15px;line-height:1.55}
.nx-doc .nx-src-list a{word-break:break-word}
.nx-doc td small{display:block;margin-top:3px;font-size:13px;color:var(--pencil)}
.nx-doc .nx-wide td:first-child{white-space:normal;width:30%}
.nx-doc .nx-note{margin:-4px 0 18px;font-size:14.5px;line-height:1.55;color:var(--pencil)}
.nx-doc .nx-next{display:flex;flex-wrap:wrap;gap:12px 28px;margin:18px 0 0}
.nx-card h2{margin:7px 0 8px;font:800 20.5px/1.18 var(--sans);font-stretch:106%;letter-spacing:-.018em}
.nx-eight.nx-three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px}
@media (max-width:900px){.nx-eight.nx-three{grid-template-columns:minmax(0,1fr);max-width:520px}}
/* the comparison: the six side by side, then a sheet for each */
.nx-compare table{min-width:900px}
.nx-compare tbody th{padding:10px 16px 10px 0;font:800 15.5px/1.3 var(--sans);color:var(--ink);text-align:left;vertical-align:top;border-top:1.5px dashed var(--line-2);white-space:nowrap}
.nx-compare tbody tr:first-child th{color:var(--coral-ink)}
.nx-compare tbody td:first-child{font-weight:400;color:var(--ink-2);white-space:normal}
.nx-compare-sheets{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 34px;margin-top:44px}
@media (max-width:900px){.nx-compare-sheets{grid-template-columns:minmax(0,1fr)}}
.nx-doc table.nx-wide{min-width:560px}
/* the free website check (/check/; flow/check.js draws the report): the landing page's address box in the hero, and
   a report of paper cards. No coloured border on a rounded box: a status is a drawn mark and its words */
.nx-ck-hero .urlf{margin:34px auto 0;text-align:left}
.nx-ck-hero .urlf-under{justify-content:center}
.nx-ck-hero .nw-ts{display:flex;justify-content:center}
.nx-ck{padding:8px 0 calc(var(--gap) * .5);scroll-margin-top:96px}
.nx-ck[hidden]{display:none}
.nx-ck-out{max-width:1120px;margin:0 auto;display:grid;gap:30px}
.nx-ck h3{margin:0;font:800 21px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.018em}
.nx-ck .ck-a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.nx-ck .ck-a:hover{color:var(--coral-ink)}
.ck-wait{justify-self:center;width:min(100%,620px);padding:28px 30px 30px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(-.4deg)}
.ck-wait-h{margin:0 0 16px;font:800 21px/1.3 var(--sans);overflow-wrap:anywhere}
.ck-steps{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.ck-steps li{position:relative;padding-left:28px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.ck-steps li::before{content:"";position:absolute;left:4px;top:.45em;width:11px;height:11px;border-radius:50%;background:var(--coral);opacity:.25;animation:ck-dot 1.6s var(--ease) calc(var(--i) * .45s) infinite}
@keyframes ck-dot{0%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.15)}}
.ck-no .ck-wait-h{margin-bottom:18px}
.btn.ck-line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ck-line:hover{transform:none;background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ck-line:focus-visible,.ck-go .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* the top: the address, the tally and Google's score; the phone beside it */
.ck-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center}
.ck-sum{padding:26px 30px 28px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(-.3deg);min-width:0}
.ck-sum .kick{font-size:19px}
.ck-host{margin:6px 0 0;font:800 clamp(28px,3.6vw,42px)/1.05 var(--sans);font-stretch:106%;letter-spacing:-.03em;overflow-wrap:anywhere}
.ck-tally{display:flex;flex-wrap:wrap;gap:4px 18px;margin:14px 0 0;font:700 16.5px/1.4 var(--sans)}
.ck-tally .t-good{color:var(--green-deep)}
.ck-tally .t-improve{color:var(--ink-2)}
.ck-tally .t-fix{color:var(--coral-ink)}
.ck-gauge{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:20px;border-top:1.5px dashed var(--line-2);min-height:96px}
.ck-ring{position:relative;width:92px;height:92px;flex:none}
.ck-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ck-gauge circle{fill:none;stroke-width:11}
.ck-gauge .bg{stroke:var(--paper-2)}
.ck-gauge .fg{stroke:var(--green);stroke-linecap:round;stroke-dasharray:var(--v) 100;animation:ck-ring 1.1s var(--ease)}
.ck-gauge.s-improve .fg{stroke:#E8A200}
.ck-gauge.s-fix .fg{stroke:var(--coral)}
@keyframes ck-ring{from{stroke-dasharray:0 100}}
.ck-ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 30px/1 var(--sans);letter-spacing:-.03em}
.ck-gauge span{font-size:15px;line-height:1.45;color:var(--ink-2)}
.ck-gauge.none,.ck-gauge.busy{flex-wrap:wrap}
.ck-gauge.none span{flex:1 0 100%}
.ck-pen{width:34px;height:34px;flex:none;border-radius:50%;background:conic-gradient(var(--coral) 0 28%,var(--paper-2) 0);-webkit-mask:radial-gradient(circle,transparent 9px,#000 10px);mask:radial-gradient(circle,transparent 9px,#000 10px);animation:ck-spin 1s linear infinite}
.ck-gauge.busy span{flex:1;min-width:12em}
@keyframes ck-spin{to{transform:rotate(1turn)}}
.ck-built{margin:18px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.ck-phone{margin:0;display:grid;justify-items:center;gap:12px;transform:rotate(1.2deg)}
.ck-screen{width:230px;aspect-ratio:9/17;padding:10px;border-radius:30px;background:var(--ink);box-shadow:var(--paper-shadow);overflow:hidden}
.ck-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:21px;background:#fff}
.ck-screen.empty{display:grid;place-items:center}
.ck-screen.empty span{display:grid;place-items:center;width:100%;height:100%;padding:22px;border-radius:21px;background:var(--paper-2);font-size:14px;line-height:1.45;color:var(--pencil);text-align:center}
.ck-phone figcaption{font:400 17px/1.2 var(--hand);color:var(--pencil);text-align:center}
/* how Google may show it */
.ck-serp{position:relative;padding:22px 26px 24px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(.25deg)}
.ck-serp .note{display:block;margin-bottom:10px;font-size:18px;color:var(--coral-ink)}
.ck-serp-card{max-width:620px;font-family:Arial,system-ui,sans-serif}
.ck-serp-card cite{display:block;font-style:normal;font-size:14px;line-height:1.4;color:#4d5156;overflow-wrap:anywhere}
.ck-serp-card b{display:block;margin:4px 0 4px;font-weight:400;font-size:20px;line-height:1.3;color:#1a0dab;overflow-wrap:anywhere}
.ck-serp-card p{margin:0;font-size:14.5px;line-height:1.58;color:#4d5156;overflow-wrap:anywhere}
.ck-serp-card p.none{color:var(--pencil);font-style:italic}
/* what to fix first */
.ck-first{padding:24px 30px 26px;background:var(--paper-2);border-radius:6px}
.ck-first ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:ck;display:grid;gap:14px}
.ck-first li{position:relative;padding-left:44px;counter-increment:ck}
.ck-first li::before{content:counter(ck);position:absolute;left:0;top:-4px;font:400 30px/1 var(--hand);color:var(--coral-ink)}
.ck-first li b{display:block;font:700 16.5px/1.35 var(--sans)}
.ck-first li span{display:block;margin-top:2px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
/* every group */
.ck-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.ck-g{padding:22px 26px 24px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);min-width:0}
.ck-g:nth-child(4n+1){transform:rotate(-.35deg)}.ck-g:nth-child(4n+2){transform:rotate(.3deg)}.ck-g:nth-child(4n+3){transform:rotate(.25deg)}.ck-g:nth-child(4n){transform:rotate(-.3deg)}
.ck-g h3{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding-bottom:12px;border-bottom:1.5px dashed var(--line-2)}
.ck-g h3 small{font:600 14px var(--sans);color:var(--pencil);letter-spacing:0}
.ck-g ul{margin:0;padding:0;list-style:none}
.ck-i{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:14px 0 0}
.ck-mk{width:26px;height:26px;margin-top:-1px}
.ck-mk svg{width:26px;height:26px;display:block;overflow:visible}
.ck-mk.ck-info{display:grid;place-items:center;width:22px;height:22px;margin:1px 0 0 2px;border-radius:50%;background:var(--pencil);color:#fff;font:italic 700 13px/1 Georgia,serif}
.s-wait .ck-mk{display:block;width:12px;height:12px;margin:5px 0 0 7px;border-radius:50%;background:var(--coral);opacity:.3;animation:ck-dot 1.6s var(--ease) infinite}
.s-none .ck-mk{display:block;width:14px;height:0;margin:10px 0 0 6px;border-top:2.5px solid var(--line-2)}
.ck-top.solo{grid-template-columns:minmax(0,1fr)}
.ck-t b{display:block;font:700 16px/1.35 var(--sans)}
.ck-t>span{display:block;margin-top:2px;font-size:15px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.ck-t .ck-sub-h{margin-top:8px;font-weight:700;color:var(--ink)}
.ck-sub{margin:4px 0 0;padding-left:1.1em;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.ck-sub li{margin-top:2px}
.ck-t .ck-field{margin-top:8px;font-size:14px;color:var(--pencil)}
.s-good .ck-t b,.s-info .ck-t b{color:var(--ink)}
.s-fix .ck-t b{color:var(--coral-ink)}
/* the next step */
.ck-next{padding:30px 32px 30px;background:var(--kraft-3);border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(-.3deg)}
.ck-next h3{font-size:clamp(24px,2.6vw,30px)}
.ck-next .kick{display:block;margin-bottom:6px;color:#A8301A}
.ck-next p{margin:10px 0 0;max-width:40em;font-size:16.5px;line-height:1.55;color:var(--kraft-ink)}
.ck-next .ck-small{margin-top:12px;font-size:14px;color:var(--kraft-ink)}
.ck-acts{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:20px}
.ck-go{margin:0}
.ck-go .btn{background:var(--coral-btn);color:#fff;box-shadow:5px 5px 0 var(--ink)}
.ck-go .btn:hover{background:var(--coral-btn-hover)}
.ck-foot{margin:0;font-size:14px;line-height:1.55;color:var(--pencil)}
@media (max-width:900px){
  .ck-groups{grid-template-columns:minmax(0,1fr)}
  .ck-top{grid-template-columns:minmax(0,1fr)}
  .ck-phone{transform:none}
}
@media (max-width:560px){
  .ck-sum,.ck-serp,.ck-first,.ck-g,.ck-next,.ck-wait{padding-left:20px;padding-right:20px}
  .ck-screen{width:200px}
  .ck-acts .btn{width:100%}
  .ck-go{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ck-steps li::before,.s-wait .ck-mk,.ck-pen,.ck-gauge .fg{animation:none}
  .ck-steps li::before{opacity:.6}
}
.nx-ck h3,.ck-t b,.ck-first li b,.ck-wait-h{text-wrap:balance}
.ck-t>span,.ck-first li span,.ck-sub li,.ck-foot,.ck-next p,.ck-gauge span,.ck-built{text-wrap:pretty}
/* what a new website would cost (/cost/; flow/cost.js draws the card): the check's hero and address box, then the five
   questions beside a price card that stays in sight (sticky where there is room, a strip at the foot of a phone). The
   choices are the questions screen's own (flow.css, .nwf-opt): a pencil line, ink and the coral shadow when chosen */
.nx-cc-or{margin:22px 0 0;text-align:center}
.nx-cc{padding:calc(var(--gap) * .5) 0;scroll-margin-top:84px}
.nx-cc .sec-hd h2:focus{outline:none}
.nx-cc-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"found card" "qs card";gap:26px clamp(26px,4vw,56px);align-items:start;max-width:1180px;margin:56px auto 0}
.nx-cc-found{grid-area:found;padding:22px 26px 22px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(-.3deg);min-width:0}
.nx-cc-found[hidden]{display:none}
.nx-cc-found .kick{font-size:18px}
.nx-cc-found h3{margin:4px 0 10px;font:800 22px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.018em;overflow-wrap:anywhere}
.cc-found{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.cc-found li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.cc-found li::before{content:"";position:absolute;left:3px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.cc-found li.top{color:var(--ink);font-weight:600}
.cc-found li.top::before{background:var(--coral)}
.cc-found li em{display:inline-block;margin-left:10px;font:400 16px/1 var(--hand);font-style:normal;color:var(--coral-ink);white-space:nowrap}
.cc-note{margin:14px 0 0;padding-top:12px;border-top:1.5px dashed var(--line-2);font-size:14.5px;line-height:1.5;color:var(--pencil)}
.nx-cc-qs{grid-area:qs;min-width:0}
.cc-q{margin:0 0 30px;padding:0;border:0;min-width:0}
.cc-q legend{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;padding:0;font:800 20.5px/1.25 var(--sans);font-stretch:106%;letter-spacing:-.018em}
.cc-q legend .qn{flex:none;font:400 20px/1 var(--hand);color:var(--coral-deep)}
.cc-hint{margin:-6px 0 12px;font-size:14.5px;color:var(--pencil)}
.cc-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cc-opts.cc-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cc-opts.cc-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.cc-opt{position:relative;display:block;padding:13px 14px 14px 46px;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s;min-width:0}
.cc-opt:hover{border-color:var(--ink-3)}
.cc-opt:has(input:checked){border-color:var(--ink);box-shadow:4px 4px 0 var(--coral)}
.cc-opt input{appearance:none;-webkit-appearance:none;position:absolute;left:15px;top:14px;width:21px;height:21px;margin:0;border:2px solid var(--ink);border-radius:50%;background:#fff;cursor:inherit;display:grid;place-items:center}
.cc-opt input:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral)}
.cc-box input{border-radius:6px}
.cc-box input:checked::after{width:13px;height:13px;border-radius:0;background:url(img/doodle-tick.svg) center/contain no-repeat}
.cc-opt input:focus-visible{outline:none}
.cc-opt:has(input:focus-visible){outline:3px solid var(--focus,var(--ink));outline-offset:3px}
.cc-opt b{display:block;font:700 16px/1.3 var(--sans);color:var(--ink);overflow-wrap:break-word}
.cc-opt small{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--pencil)}
.cc-row .cc-opt{padding-right:10px}
/* the card */
.nx-cc-card{grid-area:card;position:sticky;top:96px;min-width:0;padding:26px 28px 26px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);transform:rotate(.35deg)}
.nx-cc-card[tabindex]:focus{outline:none}
.cc-in .kick{font-size:19px}
.cc-for{margin:6px 0 0;font:700 16.5px/1.35 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.cc-tier{margin:6px 0 0;font:800 clamp(34px,3.4vw,44px)/1.02 var(--sans);font-stretch:106%;letter-spacing:-.03em;color:var(--ink)}
.cc-line{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.cc-money{margin-top:18px;padding-top:16px;border-top:1.5px dashed var(--line-2)}
.cc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0}
.cc-price b{font:800 clamp(36px,3.6vw,46px)/1 var(--sans);font-stretch:106%;letter-spacing:-.03em}
.cc-price span{font-size:15.5px;color:var(--ink-2)}
.cc-plus{margin:8px 0 0;font:700 17px/1.4 var(--sans)}
.cc-year,.cc-when{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.cc-in h4{margin:18px 0 8px;font:800 16px/1.3 var(--sans)}
.cc-has{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cc-has li{position:relative;padding-left:24px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.cc-has li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;background:url(img/doodle-tick.svg) center/contain no-repeat}
.cc-why{margin:16px 0 0;padding:12px 14px;background:var(--paper-2);border-radius:6px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.cc-acts{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:20px}
.cc-go{margin:0}
.cc-go .btn,.cc-idea{background:var(--coral-btn);color:#fff;box-shadow:5px 5px 0 var(--ink)}
.cc-go .btn:hover,.cc-idea:hover{background:var(--coral-btn-hover);color:#fff}
.btn.cc-line-btn{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.cc-line-btn:hover{transform:none;background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.cc-line-btn:focus-visible,.cc-go .btn:focus-visible,.cc-idea:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cc-free{margin:10px 0 0;font-size:14px;color:var(--pencil)}
.cc-small{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--pencil)}
/* "Email me this price" under the price (21 Oct, the list of ideas' 39) */
.cc-mail{margin-top:16px;padding-top:14px;border-top:1.5px dashed var(--line-2)}
.cc-mail-open{all:unset;cursor:pointer;color:var(--ink);font:700 15.5px/1.4 var(--sans);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.cc-mail-open:hover{color:var(--coral-ink)}
.cc-mail-open:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.cc-mail-f[hidden],.cc-mail [hidden]{display:none}
.cc-mail-l{display:block;margin:0 0 8px;font:700 15.5px/1.35 var(--sans)}
.cc-mail-row{display:flex;flex-wrap:wrap;gap:10px}
.cc-mail-row input{flex:1 1 200px;min-width:0;height:48px;padding:0 14px;border:2px solid var(--ink);border-radius:10px;background:#fff;font:500 16px var(--sans);color:var(--ink)}
.cc-mail-row input:focus{outline:none;box-shadow:0 0 0 2px var(--ink),5px 5px 0 2px var(--coral)}
.cc-mail-row .btn{flex:0 0 auto}
.cc-mail-w{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.cc-mail-w input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink)}
.cc-mail-m{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.cc-mail-m:empty{display:none}
.cc-mail-m.is-bad{color:var(--ink);font-weight:700}
.cc-mail-m.is-bad::before{content:"!";display:inline-block;margin-right:8px;font:400 22px/1 var(--hand);color:var(--coral-ink);transform:rotate(6deg)}
@media (max-width:640px){.cc-mail-row .btn{width:100%}}
.cc-none{margin:0;font-size:15.5px;line-height:1.5}
.cc-none a{color:var(--ink);font-weight:700}
/* a count under way */
.cc-steps{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.cc-steps li{position:relative;padding-left:28px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.cc-steps li::before{content:"";position:absolute;left:4px;top:.45em;width:11px;height:11px;border-radius:50%;background:var(--coral);opacity:.25;animation:ck-dot 1.6s var(--ease) calc(var(--i) * .45s) infinite}
.cc-steps li.done{color:var(--ink)}
.cc-steps li.done::before{left:0;top:.2em;width:18px;height:18px;border-radius:0;opacity:1;background:url(img/doodle-tick.svg) center/contain no-repeat;animation:none}
.cc-no .cc-for{color:var(--ink);font-size:17px}
/* the strip at the foot of a phone's screen */
.cc-dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:2px 10px;padding:11px 16px;border:0;border-radius:12px;background:var(--ink);color:#fff;font:600 15px/1.35 var(--sans);text-align:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);cursor:pointer}
.cc-dock[hidden]{display:none}
.cc-dock b{font-weight:800}
.cc-dock:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
/* the prices at a glance */
.nx-cc-glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1120px;margin:52px auto 0}
.cc-g{padding:18px 20px 20px;background:#fff;border-radius:6px;box-shadow:var(--paper-shadow);min-width:0}
.cc-g:nth-child(odd){transform:rotate(-.5deg)}.cc-g:nth-child(even){transform:rotate(.45deg)}
.cc-g.kraft{background:var(--kraft-3)}
.cc-g .size{font:400 17px/1 var(--hand);color:var(--coral-deep)}
.cc-g h3{margin:6px 0 8px;font:800 23px/1.15 var(--sans);font-stretch:106%;letter-spacing:-.02em}
.cc-g p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.cc-g.kraft p,.cc-g.kraft .size{color:var(--kraft-ink)}
.cc-g b{color:var(--ink);font-weight:800}
.nx-cc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 34px;margin:30px 0 0}
@media (max-width:1100px){
  .nx-cc-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"found" "card" "qs";max-width:720px}
  .nx-cc-card{position:relative;top:0}
  .nx-cc-glance{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cc-opts,.cc-opts.cc-two{grid-template-columns:minmax(0,1fr)}
  .cc-opts.cc-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-cc-card,.nx-cc-found{padding-left:20px;padding-right:20px}
  .cc-acts .btn,.cc-go{width:100%}
  .nx-cc-glance{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .cc-steps li::before{animation:none;opacity:.6}
  .cc-opt{transition:none}
}
.cc-tier,.cc-for,.cc-q legend,.nx-cc-found h3,.cc-g h3{text-wrap:balance}
.cc-line,.cc-why,.cc-small,.cc-note,.cc-has li,.cc-found li,.cc-opt small,.cc-g p{text-wrap:pretty}
/* the free move check (/move/; flow/move.js draws the report): the check's hero, its waiting card and its cards of
   findings (.ck-*), with the figures side by side, the four answers as tiles, and every address in a table that
   scrolls sideways inside its own box on a phone (position: relative, so a hidden heading inside cannot widen the page) */
.nx-mv .ck-steps li.done{color:var(--ink)}
.nx-mv .ck-steps li.done::before{left:0;top:.2em;width:18px;height:18px;border-radius:0;opacity:1;background:url(img/doodle-tick.svg) center/contain no-repeat;animation:none}
.mv-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:stretch}
.mv-top .ck-sum:nth-child(2){transform:rotate(.3deg)}
.mv-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:14px 0 0}
.mv-big b{font:800 clamp(44px,5vw,60px)/1 var(--sans);font-stretch:106%;letter-spacing:-.04em}
.mv-big span{font:700 17px/1.3 var(--sans);color:var(--ink-2)}
.mv-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.mv-kinds li{padding:4px 11px 5px;border-radius:999px;background:var(--paper-2);font-size:14.5px;line-height:1.3;color:var(--ink-2);overflow-wrap:anywhere}
.mv-kinds b{color:var(--ink);font-weight:800}
.mv-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 0;padding:0;list-style:none}
.mv-tiles li{padding:12px 14px 13px;border-radius:6px;background:var(--paper-2)}
.mv-tiles b{display:block;font:800 30px/1 var(--sans);letter-spacing:-.03em}
.mv-tiles span{display:block;margin-top:4px;font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.mv-tiles .mv-t-ok b{color:var(--green-deep)}
.mv-tiles .mv-t-missing b,.mv-tiles .mv-t-errors b{color:var(--coral-ink)}
.mv-tiles li.none b{color:var(--pencil)}
.mv-eg{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.mv-eg li{font:500 13.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink-2);overflow-wrap:anywhere}
.mv-find .ck-i:first-child{padding-top:16px}
.mv-list h3{margin-bottom:0}
.mv-scroll{position:relative;margin-top:14px;max-height:520px;overflow:auto;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.mv-scroll:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mv-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;line-height:1.4}
.mv-table th{position:sticky;top:0;z-index:1;padding:9px 12px;background:#fff;box-shadow:inset 0 -1.5px 0 var(--line-2);font:700 13px/1.3 var(--sans);text-align:left;color:var(--ink)}
.mv-table td{padding:7px 12px;border-top:1px solid var(--paper-2);vertical-align:top;color:var(--ink-2)}
.mv-table td.mv-p,.mv-table td.mv-new{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--ink);overflow-wrap:break-word}
.mv-table td.mv-p{min-width:190px;max-width:320px}
.mv-table td.mv-new{min-width:150px}
.mv-table th{white-space:nowrap}
.mv-table th:last-child{white-space:normal;min-width:150px}
.mv-table td.mv-same{color:var(--pencil)}
.mv-table .mv-a-missing,.mv-table .mv-a-errors{color:var(--coral-ink);font-weight:700}
.mv-table .mv-a-ok{color:var(--green-deep)}
.mv-more{margin-top:10px}
.mv-files{margin-top:18px}
.nx-mv .ck-g > .ck-foot{margin-top:12px}
@media (max-width:900px){
  .mv-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .mv-files .btn{width:100%}
  .mv-tiles b{font-size:26px}
}
.mv-tiles span,.mv-big span,.mv-eg li{text-wrap:pretty}
.mv-table th{text-wrap:balance}

/* ================================================================ WHERE NOTHING CAN POINT, 19 OCT ================================================================ */
/* Z: "lots of creative graphics and icons need to animate on their own (they are triggered on hover on desktop, not usable
   on mobile and the creativity gets missed)". On a screen that cannot point pages.js gives each drawing the class .hov for a
   moment as it comes into view (and the office's things in turns while the room is on the screen): it plays as pointing at
   it does. Only the drawings move: a taped paper does not (8 Oct). */
.nx-slip.hov .doo2 .pop,.nx-stopcard.hov .doo2 .pop,.nx-pts li.hov .doo2 .pop,.nx-card.hov .doo2 .pop,.nx-node.hov .doo2 .pop{transform:rotate(-6deg) scale(1.1)}
.nx .qcard.hov .doo2 .pop{transform:rotate(-6deg) scale(1.08)}
.nx-get.keep.hov .doo2 .pop{transform:translateY(-8px) rotate(-3deg)}
.nx-stopcard.hov .nx-rocket .doo2 .pop{transform:none}
.mem.hov .who-svg .arm,.nx-side.hov .who-svg .arm,.nx-pad-wrap.hov .who-svg .arm,.nx-share.hov .who-svg .arm{animation:nxwave 1.1s var(--ease)}
.nx-share.hov .webgrid .win.on{transform:translateY(-4px) rotate(-2deg)}
.nx-board-r.hov{transform:translateX(7px) rotate(-1deg)}
.nx-board-l.hov{transform:translateX(-7px) rotate(1deg)}
.nx-office .coffee.hov,.nx-office .window.hov,.nx-office .clock.hov,.nx-office .plant.hov{transform:translateY(-4px)}
.nx-office .books.hov .bk:first-child{transform:rotate(5deg);transition:transform .3s var(--spring)}
.nx-office .lamp.hov .sway{animation:ofsway 1.8s ease-in-out}
.nx-office .p.hov .arm{animation:nxwave 1.1s var(--ease)}

/* /social/: a website from a Facebook page or an Instagram profile (20 Oct). The ways in are buttons, each where it is
   set up (the server takes out what is not); the opening is a phone with a page on it, an arrow, and the same café as a
   website, laid over each other. A second button is drawn in ink on white, as the project page's are (.nwx-line). */
.nx-so-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin:32px 0 0;padding:0;list-style:none}
.nx-so-go:empty{display:none}
.nx-so-go li{display:flex;min-width:0}
.btn.nx-so-line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.nx-so-line:hover{transform:translate(-2px,-2px);box-shadow:inset 0 0 0 2px var(--ink),6px 6px 0 var(--yellow)}
.nx-so-soon{font-size:20px;color:var(--coral-ink)}
.nx-so-idea{margin-top:22px}
.nx-hero .nx-so-go,.nx-hero .nx-so-idea{opacity:0;animation:fade .9s var(--ease) .44s forwards}
.nx-so-art{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:center;min-height:420px}
.nx-so-phone{position:relative;z-index:2;grid-row:1;grid-column:1;width:100%;max-width:230px;justify-self:end;margin-right:-34px;transform:rotate(-4deg)}
.nx-so-phone .doo2{display:block;width:100%;height:auto;aspect-ratio:240/400;filter:drop-shadow(0 22px 26px rgba(60,48,28,.22))}
.nx-so-phone .pop1,.nx-so-phone .pop2{transform-box:fill-box;transform-origin:20% 60%;animation:nx-so-beat 2.4s var(--ease) infinite}
.nx-so-phone .pop2{animation-delay:1.2s}
@keyframes nx-so-beat{0%,70%,100%{transform:none}80%{transform:scale(1.18)}}
.nx-so-arrow{position:absolute;z-index:3;left:31%;top:6%;width:96px;transform:rotate(-14deg);color:var(--coral-line)}
.nx-so-arrow .harrow{width:100%;height:auto}
.nx-so-site{grid-row:1;grid-column:2;--r:1.4deg}
.nx-so-site .tview{position:relative;overflow:hidden;aspect-ratio:1200/750}
/* the caption keeps clear of the phone, which overlaps the site's left edge */
.nx-so-site figcaption{justify-content:flex-end;text-align:right}
.nx-so-six{grid-template-columns:repeat(3,minmax(0,1fr))}
.nx-so-steps{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px;margin-left:auto;margin-right:auto}
.nx-so-keep .nx-rule{grid-template-columns:22fr 60fr 22fr}
.nx-so-keep .nx-rule a{color:inherit;text-decoration-color:var(--coral);text-underline-offset:3px}
.nx-so-band .nx-so-go{margin:0}
.nx-so-act{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:center;min-width:0}
.nx-so-act .idea-or{margin:0}
.nx-so-note{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink);text-wrap:pretty}
@media (max-width:1100px){
  .nx-so-art{min-height:0;margin-top:20px}
  .nx-so-six{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nx-so-art{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
  .nx-so-phone{max-width:150px;margin-right:-22px}
  .nx-so-arrow{width:64px;left:26%;top:-4%}
  .nx-so-steps{grid-template-columns:minmax(0,1fr)}
  .nx-so-keep .nx-rule{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .nx-so-six{grid-template-columns:minmax(0,1fr)}
  .nx-so-go{flex-direction:column;align-items:stretch}
  /* a button's words take two lines where one does not hold them (the Bulgarian band's, 0.5 px past a phone's edge) */
  .nx-so-go .btn{width:100%;height:auto;min-height:52px;padding:13px 20px;white-space:normal;text-align:center;line-height:1.25;text-wrap:balance}
}
@media (prefers-reduced-motion:reduce){
  .nx-hero .nx-so-go,.nx-hero .nx-so-idea{opacity:1;animation:none}
  .nx-so-phone .pop1,.nx-so-phone .pop2{animation:none}
}

/* ===================================================================== The trades of our markets: their drawn examples
   (examples.html; 22 Oct): six made-up businesses, each 1200 by 750 as the landing page's are (.ds in landing.css), drawn
   in faces the site already has, their photographs Pixabay's (img/ex-*.webp) */
.ds .stars{display:inline-flex;gap:2px;color:#E9A93C}.ds .stars svg{width:16px;height:16px}
.ds .ph .im{position:absolute;inset:0}
.ds .ph .cap{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 14px;border-radius:13px;background:rgba(255,255,255,.95)}
.ds .ph .cap b{display:block;font-weight:800;font-size:16px;letter-spacing:-.01em}
.ds .ph .cap p{font-size:13px;opacity:.8}
/* their photographs, Pixabay's (free license), picked by eye from what the server fetched (22 Oct) */
.im-gh-1{background-image:url(img/ex-gh-1.webp)}.im-gh-2{background-image:url(img/ex-gh-2.webp)}.im-gh-3{background-image:url(img/ex-gh-3.webp)}.im-ga-1{background-image:url(img/ex-ga-1.webp)}.im-ga-2{background-image:url(img/ex-ga-2.webp)}.im-ga-3{background-image:url(img/ex-ga-3.webp)}.im-dp-1{background-image:url(img/ex-dp-1.webp)}.im-dp-2{background-image:url(img/ex-dp-2.webp)}.im-dp-3{background-image:url(img/ex-dp-3.webp)}.im-dp-4{background-image:url(img/ex-dp-4.webp)}.im-sa-1{background-image:url(img/ex-sa-1.webp)}.im-sa-2{background-image:url(img/ex-sa-2.webp)}.im-sa-3{background-image:url(img/ex-sa-3.webp)}.im-sa-4{background-image:url(img/ex-sa-4.webp)}.im-tp-1{background-image:url(img/ex-tp-1.webp)}.im-tp-2{background-image:url(img/ex-tp-2.webp)}.im-tp-3{background-image:url(img/ex-tp-3.webp)}.im-ac-1{background-image:url(img/ex-ac-1.webp)}.im-ac-2{background-image:url(img/ex-ac-2.webp)}

/* Stone Bridge House, a guest house */
.ds-gh{--bg:#F3EEE6;--ink:#23271F;--ink2:#575C50;--green:#2F5D46;--clay:#B5533C;--honey:#E3B04B;--line:rgba(35,39,31,.12);background:var(--bg);color:var(--ink);font-family:'Manrope',system-ui,sans-serif}
/* (Z, 22 Oct: "make a better demo - full screen hero with a background image") the photograph is the whole site's ground,
   the words on a shade drawn from the left and from the foot, the booking bar along the foot */
.gh-hero{position:absolute;inset:0;background-position:50% 50%}
.gh-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,24,17,.78) 0,rgba(18,24,17,.5) 42%,rgba(18,24,17,.05) 72%),linear-gradient(0deg,rgba(18,24,17,.6) 0,transparent 34%),linear-gradient(180deg,rgba(18,24,17,.45) 0,transparent 20%)}
.gh-hd{position:relative;height:96px;display:flex;align-items:center;gap:30px;padding:0 56px;color:#fff}
.gh-logo{display:flex;align-items:center;gap:12px;margin-right:auto}
.gh-logo b{display:block;font:600 24px/1 'NX Fraunces',Georgia,serif;letter-spacing:-.01em}
.gh-logo small{display:block;margin-top:5px;font:600 11.5px 'Manrope';letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.gh-mark{width:44px;height:44px;flex:none;border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.gh-nav{display:flex;gap:30px;font:600 15.5px 'Manrope';color:rgba(255,255,255,.9)}
.gh-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:12px;background:var(--honey);color:var(--ink);font:700 15px 'Manrope'}
.gh-btn.lg{height:56px;padding:0 28px;font-size:16px}
.gh-btn.o{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.gh-btn .ico{width:17px;height:17px;stroke-width:2.4}
.gh-copy{position:absolute;left:56px;top:168px;width:620px;color:#fff}
.gh-k{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 12px;border-radius:99px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);font:700 13.5px 'Manrope'}
.gh-k .ico{width:16px;height:16px;color:var(--honey)}
.gh-h{margin-top:22px!important;font:600 88px/.95 'NX Fraunces',Georgia,serif;letter-spacing:-.03em;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.gh-h em{font-style:italic;color:var(--honey)}
.gh-l{margin-top:22px!important;max-width:470px;font-size:19px;line-height:1.5;color:rgba(255,255,255,.88)}
.gh-bs{display:flex;gap:12px;margin-top:30px}
.gh-book{position:absolute;left:56px;width:700px;bottom:44px;height:84px;padding:0 12px 0 20px;display:flex;align-items:center;gap:6px;border-radius:18px;background:#fff;box-shadow:0 30px 60px -26px rgba(0,0,0,.6)}
.gh-f{flex:1;padding:0 10px;white-space:nowrap;border-right:1px solid var(--line)}
.gh-f:nth-child(3){border-right:0}
.gh-f small{display:block;font:700 11.5px 'Manrope';letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.gh-f b{display:block;margin-top:3px;font:800 15px 'Manrope'}
.gh-book .gh-btn{height:56px;background:var(--clay);color:#fff}
.gh-price{position:absolute;right:56px;bottom:44px;width:300px;height:116px;display:flex;align-items:center;gap:16px;padding:12px;border-radius:18px;background:var(--bg);box-shadow:0 30px 60px -26px rgba(0,0,0,.6)}
.gh-price .im{width:92px;height:92px;flex:none;border-radius:12px}
.gh-price small{display:block;font:700 12.5px 'Manrope';color:var(--ink2)}
.gh-price b{display:block;margin:4px 0 3px;font:600 36px/1 'NX Fraunces',Georgia,serif;color:var(--green)}
.gh-price p{font:600 13px/1.3 'Manrope';color:var(--ink2)}
.gh-stk{position:absolute;right:92px;top:150px;width:124px;height:124px;border-radius:50%;background:var(--honey);color:var(--ink);display:grid;place-items:center;text-align:center;font:800 15px/1.12 'Manrope';transform:rotate(10deg);box-shadow:0 18px 30px -16px rgba(0,0,0,.6)}
.gh-pin{position:absolute;right:56px;bottom:178px;display:flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:99px;background:rgba(18,24,17,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff;font:700 14px 'Manrope'}
.gh-pin .ico{width:17px;height:17px;color:var(--honey)}

/* Brandt, a garage */
.ds-ga{--bg:#F2F3F1;--ink:#16202B;--ink2:#56616D;--orange:#F26B1D;--line:rgba(22,32,43,.12);background:var(--bg) repeating-linear-gradient(135deg,rgba(22,32,43,.045) 0 1.5px,transparent 1.5px 13px);color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif}
/* a workshop floor's faint hatch under everything (Z, 22 Oct: "add some subtle pattern on the background"), plain under the words */
.ga-copy::before{content:"";position:absolute;inset:-28px -40px -24px -48px;z-index:-1;background:radial-gradient(closest-side,var(--bg) 62%,transparent)}
.ga-top{height:36px;display:flex;justify-content:space-between;align-items:center;padding:0 48px;background:var(--ink);color:#C8D0D8;font:500 13px 'Inter Tight'}
.ga-top span{display:flex;align-items:center;gap:8px}.ga-top .ico{width:14px;height:14px;color:var(--orange)}
.ga-hd{height:84px;display:flex;align-items:center;gap:30px;padding:0 48px;background:#fff;box-shadow:0 1px 0 var(--line)}
.ga-logo{display:flex;align-items:center;gap:12px;margin-right:auto}
.ga-logo b{display:block;font:800 30px/.9 'Archivo',sans-serif;font-stretch:72%;letter-spacing:.01em;text-transform:uppercase}
.ga-logo small{display:block;margin-top:4px;font:600 12px 'Inter Tight';color:var(--ink2)}
.ga-mark{width:44px;height:44px;flex:none}
.ga-nav{display:flex;gap:28px;font:600 15.5px 'Inter Tight';color:var(--ink2)}
.ga-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:6px;background:var(--orange);color:#fff;font:700 15px 'Inter Tight'}
.ga-btn.lg{height:54px;padding:0 26px;font-size:16px}
.ga-btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.ga-btn .ico{width:17px;height:17px;stroke-width:2.4}
.ga-copy{position:absolute;left:48px;top:150px;width:540px;z-index:1}
.ga-k{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 14px;border-radius:4px;background:var(--ink);color:#fff;font:700 12.5px 'Inter Tight';letter-spacing:.06em;text-transform:uppercase}
.ga-k i{width:9px;height:9px;border-radius:50%;background:var(--orange)}
.ga-h{margin-top:18px!important;font:800 76px/.9 'Archivo',sans-serif;font-stretch:70%;letter-spacing:-.005em;text-transform:uppercase}
.ga-h span{display:block;color:var(--orange)}
.ga-l{margin-top:18px!important;max-width:460px;font-size:17.5px;line-height:1.5;color:var(--ink2)}
.ga-bs{display:flex;gap:12px;margin-top:24px}
.ga-hero{position:absolute;left:620px;right:0;top:120px;height:404px;clip-path:polygon(70px 0,100% 0,100% 100%,0 100%);background-position:50% 50%}
.ga-price{position:absolute;left:586px;top:396px;width:220px;padding:16px 18px;border-radius:8px;background:#fff;box-shadow:0 26px 50px -24px rgba(22,32,43,.6)}
.ga-price small{display:block;font:700 12.5px 'Inter Tight';letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.ga-price b{display:block;margin:4px 0 3px;font:800 44px/1 'Archivo',sans-serif;font-stretch:72%}
.ga-price p{font:500 13.5px 'Inter Tight';color:var(--ink2)}
.ga-stk{position:absolute;right:40px;top:140px;width:116px;height:116px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;text-align:center;font:800 16px/1.08 'Inter Tight';transform:rotate(-8deg);box-shadow:0 14px 26px -14px rgba(22,32,43,.6)}
.ga-row{position:absolute;left:48px;right:48px;top:584px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.ga-card{position:relative;height:134px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ga-card .cap{border-radius:6px!important}
.ga-card.dk{padding:20px 24px;background:var(--ink);color:#fff;box-shadow:none}
.ga-card.dk small{font:700 12px 'Inter Tight';letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.ga-card.dk b{display:block;margin:8px 0 12px;font:800 34px/1 'Archivo',sans-serif;font-stretch:72%;text-transform:uppercase}
.ga-card.dk p{display:flex;align-items:center;gap:8px;font:500 14.5px 'Inter Tight';color:#C8D0D8}
.ga-card.dk .ico{width:16px;height:16px;color:var(--orange)}

/* Bayside Dental, a dental clinic */
.ds-dp{--bg:#FBFDFC;--ink:#102A30;--ink2:#4C6368;--teal:#0F5E6B;--mint:#DDF0EC;--sand:#F2D7A6;--line:rgba(16,42,48,.1);background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif}
.dp-top{position:relative;z-index:2;height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 48px;background:var(--teal);color:#E3F3F0;font:500 13px 'Hanken Grotesk'}
.dp-top span{display:flex;align-items:center;gap:8px}.dp-top .ico{width:14px;height:14px}
.dp-hd{position:relative;z-index:2;height:82px;display:flex;align-items:center;gap:30px;padding:0 48px}
.dp-logo{display:flex;align-items:center;gap:11px;margin-right:auto;font:400 26px/1 'Outfit',sans-serif;color:var(--teal)}
.dp-logo b{font-weight:700;color:var(--ink)}
.dp-mark{width:42px;height:42px;flex:none}
.dp-nav{display:flex;gap:28px;font:500 15.5px 'Hanken Grotesk';color:var(--ink2)}
.dp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:99px;background:var(--teal);color:#fff;font:700 15px 'Hanken Grotesk'}
.dp-btn.lg{height:54px;padding:0 26px;font-size:16px}
.dp-btn.o{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.dp-btn .ico{width:17px;height:17px;stroke-width:2.4}
.dp-wave{position:absolute;left:520px;top:80px;width:760px;height:540px;border-radius:52% 48% 40% 60%/50% 44% 56% 50%;background:var(--mint);transform:rotate(6deg)}
.dp-copy{position:absolute;left:48px;top:150px;width:520px}
.dp-k{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px 0 12px;border-radius:99px;background:var(--sand);font:700 13px 'Hanken Grotesk'}
.dp-k i{width:9px;height:9px;border-radius:50%;background:var(--teal)}
.dp-h{margin-top:20px!important;font:700 64px/.98 'Outfit',sans-serif;letter-spacing:-.03em}
.dp-h em{font-style:normal;color:var(--teal)}
.dp-l{margin-top:20px!important;max-width:430px;font-size:17.5px;line-height:1.5;color:var(--ink2)}
.dp-bs{display:flex;gap:12px;margin-top:26px}
.dp-rate{display:flex;align-items:center;gap:8px;margin-top:22px;font:500 14.5px 'Hanken Grotesk';color:var(--ink2)}
.dp-rate b{color:var(--ink);font-weight:800}
.dp-hero{position:absolute;left:640px;right:48px;top:136px;height:380px;border-radius:200px 200px 28px 28px;background-position:50% 40%;box-shadow:0 40px 70px -44px rgba(16,42,48,.6)}
.dp-round{position:absolute;left:574px;top:394px;width:150px;height:150px;border-radius:50%;background-position:50% 30%;box-shadow:0 0 0 8px var(--bg),0 24px 40px -18px rgba(16,42,48,.5)}
.dp-stk{position:absolute;left:1068px;top:118px;width:112px;height:112px;border-radius:50%;background:var(--sand);display:grid;place-items:center;text-align:center;font:800 15px/1.1 'Hanken Grotesk';transform:rotate(10deg);box-shadow:0 14px 26px -14px rgba(16,42,48,.5)}
.dp-prices{position:absolute;right:28px;top:378px;width:300px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:0 34px 60px -30px rgba(16,42,48,.55),0 0 0 1px var(--line)}
.dp-prices h5{font:700 17px 'Outfit',sans-serif;margin-bottom:6px}
.dp-prices p{display:flex;align-items:baseline;gap:8px;margin-top:7px!important;font:500 13.5px 'Hanken Grotesk'}
.dp-prices p i{flex:1;border-bottom:2px dotted #B8CFCB}
.dp-prices p b{font-weight:800;color:var(--teal)}
.dp-row{position:absolute;left:48px;right:48px;top:584px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.dp-card{position:relative;height:136px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.dp-card .im-dp-4{background-position:50% 25%}.dp-card .im-dp-3{background-position:50% 30%}
.dp-card.mint{padding:18px 22px;background:var(--mint);box-shadow:none}
.dp-card.mint small{font:700 11.5px 'Hanken Grotesk';letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.dp-card.mint b{display:block;margin:7px 0 10px;font:700 22px/1.1 'Outfit',sans-serif}
.dp-card.mint p{display:flex;align-items:center;gap:8px;font:500 14px 'Hanken Grotesk';color:var(--ink2)}
.dp-card.mint .ico{width:15px;height:15px;color:var(--teal)}

/* Saga, a hair and beauty salon */
.ds-sa{--bg:#F3E1DA;--ink:#3B1F2B;--ink2:#6E5560;--rose:#B5714F;--cream:#FBF7F4;--sage:#A7B59E;--line:rgba(59,31,43,.12);background:var(--bg);color:var(--ink);font-family:'Familjen Grotesk',system-ui,sans-serif}
.sa-hd{height:94px;display:flex;align-items:center;gap:30px;padding:0 48px}
.sa-logo{margin-right:auto}
.sa-logo b{display:block;font:500 40px/.9 'NX Fraunces',Georgia,serif;letter-spacing:-.02em}
.sa-logo small{display:block;margin-top:4px;font:600 11px 'Familjen Grotesk';letter-spacing:.32em;text-transform:uppercase;color:var(--ink2)}
.sa-nav{display:flex;gap:28px;font:500 15.5px 'Familjen Grotesk';color:var(--ink2)}
.sa-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 24px;border-radius:99px;background:var(--ink);color:#fff;font:600 15px 'Familjen Grotesk'}
.sa-btn.lg{height:54px;padding:0 28px;font-size:16px}
.sa-btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sa-btn .ico{width:17px;height:17px;stroke-width:2.2}
/* (Z, 22 Oct: "make a better demo") a page of a magazine: the photograph down the whole right side with a curved corner,
   the words and the price list on the left, a few things laid on the photograph's edge */
.sa-copy{position:absolute;left:48px;top:140px;width:560px}
.sa-k{display:inline-flex;align-items:center;gap:12px;font:600 13px 'Familjen Grotesk';letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.sa-k::before{content:"";width:34px;height:1.5px;background:currentColor}
.sa-h{margin-top:20px!important;font:500 76px/.96 'NX Fraunces',Georgia,serif;letter-spacing:-.03em}
.sa-h em{font-style:italic;color:var(--rose)}
.sa-l{margin-top:22px!important;max-width:430px;font-size:18px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.sa-bs{display:flex;gap:12px;margin-top:30px}
.sa-hero{position:absolute;left:660px;right:0;top:94px;bottom:0;border-radius:220px 0 0 0;background-position:50% 30%}
.sa-prices{position:absolute;left:48px;width:460px;bottom:46px;padding-top:16px;border-top:1.5px solid var(--ink)}
.sa-prices h5{font:600 12px 'Familjen Grotesk';letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-bottom:6px}
.sa-prices p{display:flex;align-items:baseline;gap:10px;margin-top:9px!important;font:500 19px 'NX Fraunces',Georgia,serif}
.sa-prices i{flex:1;border-bottom:2px dotted rgba(59,31,43,.35);transform:translateY(-4px)}
.sa-prices b{font:700 16px 'Familjen Grotesk'}
.sa-free{position:absolute;left:600px;top:418px;width:250px;padding:16px 18px;border-radius:18px;background:var(--cream);box-shadow:0 28px 54px -24px rgba(59,31,43,.55)}
.sa-free b{display:block;font:500 19px/1.1 'NX Fraunces',Georgia,serif}
.sa-free p{display:flex;gap:7px;margin-top:12px!important}
.sa-free span{flex:1;height:36px;display:grid;place-items:center;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--line);font:700 14px 'Familjen Grotesk'}
.sa-free span.on{background:var(--ink);color:#fff;box-shadow:none}
.sa-gift{position:absolute;right:48px;bottom:56px;width:200px;height:124px;padding:16px 18px;border-radius:14px;background:var(--sage);color:#1F2A1C;transform:rotate(-6deg);box-shadow:0 22px 40px -22px rgba(0,0,0,.6)}
.sa-gift .ico{width:22px;height:22px}
.sa-gift b{display:block;margin-top:14px;font:500 22px/1 'NX Fraunces',Georgia,serif}
.sa-gift p{margin-top:5px!important;font:500 13.5px 'Familjen Grotesk'}
.sa-ig{position:absolute;right:48px;top:122px;display:flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:99px;background:rgba(251,247,244,.92);font:500 14.5px 'Familjen Grotesk'}
.sa-ig .ico{width:18px;height:18px;color:var(--rose)}
/* the languages whose words take more room set the large headlines smaller, so that they keep the English lines
   (a word never broken, the buttons clear of what lies under them) */
html[lang="bg"] .gh-h{font-size:74px}
html[lang="da"] .gh-h{font-size:70px}
html[lang="de"] .sa-h,html[lang="bg"] .sa-h{font-size:66px}
.ga-l,.gh-l,.tp-l,.ac-l{text-wrap:pretty}

/* Kranz & Sohn, electricians and plumbers */
.ds-tp{--bg:#EEF0F3;--ink:#1C2A44;--ink2:#56627A;--yellow:#FFC531;--red:#D63B2F;--line:rgba(28,42,68,.12);background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif}
.tp-top{height:36px;display:flex;justify-content:space-between;align-items:center;padding:0 48px;background:var(--red);color:#fff;font:600 13.5px 'Hanken Grotesk'}
.tp-top span{display:flex;align-items:center;gap:8px}.tp-top .ico{width:15px;height:15px}
.tp-hd{height:84px;display:flex;align-items:center;gap:30px;padding:0 48px;background:var(--ink);color:#fff}
.tp-logo{display:flex;align-items:center;gap:12px;margin-right:auto}
.tp-logo b{display:block;font:800 24px/1 'Archivo',sans-serif;letter-spacing:-.01em}
.tp-logo small{display:block;margin-top:4px;font:600 12px 'Hanken Grotesk';color:#B9C3D6}
.tp-mark{width:44px;height:44px;flex:none;box-shadow:0 0 0 2px #fff;border-radius:9px}
.tp-nav{display:flex;gap:28px;font:600 15.5px 'Hanken Grotesk';color:#C9D2E3}
.tp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:10px;background:var(--yellow);color:var(--ink);font:800 15px 'Hanken Grotesk'}
.tp-btn.lg{height:54px;padding:0 26px;font-size:16px}
.tp-btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.tp-btn .ico{width:17px;height:17px;stroke-width:2.4}
.tp-copy{position:absolute;left:48px;top:160px;width:520px}
.tp-k{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--line);font:700 13px 'Hanken Grotesk'}
.tp-h{margin-top:18px!important;font:800 66px/.98 'Archivo',sans-serif;letter-spacing:-.035em}
.tp-h span{background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%)}
.tp-l{margin-top:20px!important;max-width:430px;font-size:18px;line-height:1.5;color:var(--ink2)}
.tp-bs{display:flex;gap:12px;margin-top:28px}
/* (Z, 22 Oct: "better design, real styled map") the area they work in is the opening's picture: a street map of Bremen and
   30 km round it, drawn by pages-source/drawings/tp-map.py with a fixed seed (rivers, towns, roads, the motorways, today's jobs) */
.tp-mapc{position:absolute;left:604px;right:48px;top:150px;height:372px;border-radius:20px;overflow:hidden;background:#EEF0EC;box-shadow:0 34px 60px -30px rgba(28,42,68,.55),0 0 0 1px var(--line)}
.tp-map{position:absolute;inset:0;width:100%;height:100%}
.tp-area{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;background:var(--ink);color:#fff;font-size:15px}
.tp-area::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(255,197,49,.3)}
.tp-stk{position:absolute;left:556px;top:116px;width:112px;height:112px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;text-align:center;font:800 14.5px/1.1 'Hanken Grotesk';transform:rotate(-8deg);box-shadow:0 14px 26px -14px rgba(28,42,68,.6)}
.tp-row{position:absolute;left:48px;right:48px;top:556px;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}
.tp-form{height:154px;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.tp-form h5{font:800 17px 'Archivo',sans-serif;margin-bottom:8px}
.tp-in{padding:7px 12px;border-radius:9px;background:var(--bg);font:600 14px 'Hanken Grotesk'}
.tp-in small{display:block;font:600 11px 'Hanken Grotesk';color:var(--ink2)}
.tp-two{display:flex;gap:8px;margin-top:8px}.tp-two .tp-in{flex:1}.tp-two .tp-btn{height:auto;padding:0 26px}
.tp-card{position:relative;height:154px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.tp-card.rvw{padding:18px 20px}
.tp-card.rvw .q{margin-top:10px!important;font:600 17px/1.3 'Hanken Grotesk';text-wrap:balance}
.tp-card.rvw .who{margin-top:10px!important;font:500 13.5px 'Hanken Grotesk';color:var(--ink2)}

/* Two Columns, an accounting firm */
.ds-ac{--bg:#F7F5EF;--ink:#18201D;--ink2:#56605B;--green:#1F3B33;--brass:#B08A3E;--soft:#DCE8E1;--line:rgba(24,32,29,.12);background:var(--bg);color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif}
.ac-hd{height:90px;display:flex;align-items:center;gap:30px;padding:0 48px;box-shadow:0 1px 0 var(--line)}
.ac-logo{display:flex;align-items:center;gap:12px;margin-right:auto}
.ac-logo b{display:block;font:700 24px/1 'NX Fraunces',Georgia,serif;letter-spacing:-.01em;color:var(--green)}
.ac-logo small{display:block;margin-top:4px;font:600 12px 'Inter Tight';letter-spacing:.06em;color:var(--ink2)}
.ac-mark{width:44px;height:44px;flex:none}
.ac-nav{display:flex;gap:28px;font:500 15.5px 'Inter Tight';color:var(--ink2)}
.ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:8px;background:var(--green);color:#fff;font:600 15px 'Inter Tight'}
.ac-btn.lg{height:54px;padding:0 26px;font-size:16px}
.ac-btn.o{background:transparent;color:var(--green);box-shadow:inset 0 0 0 2px var(--green)}
.ac-btn .ico{width:17px;height:17px;stroke-width:2.4}
.ac-copy{position:absolute;left:48px;top:128px;width:540px}
.ac-k{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:6px;background:var(--soft);color:var(--green);font:600 13px 'Inter Tight'}
.ac-h{margin-top:18px!important;font:700 58px/1 'NX Fraunces',Georgia,serif;letter-spacing:-.025em;color:var(--green)}
.ac-h em{font-style:italic;color:var(--brass)}
.ac-l{margin-top:16px!important;max-width:470px;font-size:16.5px;line-height:1.5;color:var(--ink2)}
.ac-bs{display:flex;gap:12px;margin-top:24px}
.ac-hero{position:absolute;left:640px;right:48px;top:126px;height:330px;border-radius:14px;background-position:50% 45%}
.ac-pk{position:absolute;left:600px;top:372px;width:300px;padding:16px 18px;border-radius:12px;background:#fff;box-shadow:0 30px 56px -28px rgba(24,32,29,.55),0 0 0 1px var(--line)}
.ac-pk h5{font:700 17px 'NX Fraunces',Georgia,serif;color:var(--green);margin-bottom:4px}
.ac-pk p{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:6px!important;padding:8px 10px;border-radius:8px;background:var(--soft);font:500 13.5px 'Inter Tight'}
.ac-pk b{font-weight:700;color:var(--green)}
.ac-pk b small{font-weight:500;color:var(--ink2)}
.ac-stk{position:absolute;right:40px;top:384px;width:116px;height:116px;border-radius:50%;background:var(--brass);color:#fff;display:grid;place-items:center;text-align:center;font:700 15.5px/1.1 'Inter Tight';transform:rotate(-8deg);box-shadow:0 14px 26px -14px rgba(24,32,29,.6)}
.ac-row{position:absolute;left:48px;right:48px;top:592px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.ac-card{position:relative;height:134px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ac-card.list{padding:16px 20px}
.ac-card.list small,.ac-card.dk small{font:700 11.5px 'Inter Tight';letter-spacing:.09em;text-transform:uppercase;color:var(--brass)}
.ac-card.list p{display:flex;align-items:center;gap:9px;margin-top:7px!important;font:600 14px 'Inter Tight'}
.ac-card.list p i{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--brass);color:#fff}
.ac-card.list p i .ico{width:12px;height:12px;stroke-width:3.2}
.ac-card.list p.todo{color:var(--ink2)}.ac-card.list p.todo i{background:none;box-shadow:inset 0 0 0 2px #D8CDB4}
.ac-card.dk{padding:18px 22px;background:var(--green);color:#fff;box-shadow:none}
.ac-card.dk b{display:block;margin:8px 0 12px;font:700 25px/1.08 'NX Fraunces',Georgia,serif}
.ac-card.dk p{display:flex;align-items:center;gap:8px;font:500 14.5px 'Inter Tight';color:#D5E2DA}
.ac-card.dk .ico{width:16px;height:16px;color:#E3C887}