/* ===== v4 TRIALS: tried here first, kept out of v3 until he says. =====
   28 Oct: the hero catchphrase on the right margin, like the section heads ("can we trial the hero catchphrase on the
   right side same as headers"). Taken out the same minute at his word: "revert it back to left side". Nothing on trial now. */
/* 28 Oct: the wordmark's letters bevelled and lit by a light that follows the pointer ("any other way to help 3d
   animation the hero large logo text ... i wanna try something else"). Switched on by data-wm="bevel" (build.mjs). Taken off the same night: "3d was better before i think revert and i will
   try find inspo before asking again". The code stays in site.js, unused, for when he brings a reference. */
/* 28 Oct: the hero catchphrase on one line ("can we try the catchphrase across one line?"), on laptops and tablets;
   a phone is too narrow for it at a readable size, so it keeps two lines there */
@media(min-width:761px){.hero-cp .cp-x{display:inline}.hero-cp{white-space:nowrap}}
/* 28 Oct: hero balance, option C from compare.html ("lets try C"): the name, the line and See Pricing on the middle line.
   Laptops and tablets; phones keep the stacked hero. */
@media(min-width:761px){
  .wm-t{text-align:center}.wm .wm-t.wm-dl{width:100%}.wm{margin-left:0}
  .hero-mid{justify-items:center;text-align:center}
}
/* C keeps the hero's original height (his note, 29 Oct: "i think hero C dosnet need to move down for salience but version
   A does"); v3's hero A takes the lower place */
@media(min-width:761px){.hero{grid-template-rows:minmax(0,1fr) auto auto minmax(0,1.15fr) auto}}


/* "Your business is good." in near white with a little life (his note, 30 Oct: "just harsh white can we add anything to give
   it some character but keep it subtle because its meant to be pretty much white"): lit from above, white at the top of
   the letters easing to a soft silver at their feet, and once every nine seconds a faint sheen passes along it, the
   name's chrome in a whisper */
.hero-cp .cp-a{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 58%),linear-gradient(180deg,#fff 20%,#e6e8ec 62%,#c3c7ce 100%);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:160% 0,0 0;animation:cpSheen 9s cubic-bezier(.45,0,.25,1) 2.4s infinite}
@keyframes cpSheen{0%{background-position:160% 0,0 0}16%,100%{background-position:-60% 0,0 0}}
@media(prefers-reduced-motion:reduce){.hero-cp .cp-a{animation:none}}

/* the landing (motion.js 6d): the header's mark and menu wait, hidden, until "Your website isn't." has lit */
/* a slow fade in (his note, 30 Oct: "the fade on the four corners is too fast") */
.hd{transition:opacity 1.8s cubic-bezier(.4,0,.2,1)}
.hero-foot{transition:opacity 1.8s cubic-bezier(.4,0,.2,1)}
html.landing .hd,html.landing .hero-foot{opacity:0;pointer-events:none}
/* the name centred on its letters: the last letter's tracking (-.045em) hung off the right of the line and pushed the
   letters about 7px right of the middle (his note, 30 Oct: "in full screen mode it shows its not correctly position
   centrally") */
.wm-t{padding-right:.045em}

/* the line under a section's heading shows once the heading has fully risen (motion.js 3); the [0x] label keeps its own
   arrival, with the heading (his note, 30 Oct: "[01] services should have the same animation as before and load with heading") */
/* the line under a heading (his notes, 30 Oct: "better transition for sub heading", "different anitmation on subheading
   below header", then "make subheadings scroll dependant aswell and slow them down so our scroll reveals them, same as
   headings"): its words rise .6em into place and fade in as the page scrolls, one after another, once the heading is up
   (motion.js 3 sets each word; the short transition only smooths a jump on a fast scroll) */
.mo .row > .rv > h2.big ~ p .ld-w,.mo .faq-h > h2 ~ p .ld-w{display:inline-block;opacity:0;transform:translate3d(0,.6em,0);
  transition:opacity .15s linear,transform .15s linear}

/* the space the trust strip used to hold between the hero and Services, kept now the strip is gone (his note, 30 Oct: "we
   lost seperation between hero and the first section"): the strip's own height, 74px on a laptop, 68px on a phone */
#pricing{margin-top:4.625rem}
@media(max-width:760px){#pricing{margin-top:4.25rem}}

/* a heading's [0x] label waits for its heading (motion.js 3 brings it up with the first word) */
.mo .row:has(> .rv > h2.big) > .lab{opacity:0}

/* What Every Build Includes plays out over a longer scroll, so the mark forms, spins and throws its five more slowly (his
   note, 30 Oct: "our every build includes scroll, needs to slow down so its overall creation is slowed"): 260vh to 420vh,
   220vh to 360vh on a phone */
.crowd{height:420vh}
@media(max-width:760px){.crowd{height:360vh}}

/* the section headings in the main index's two tones (his note, 30 Oct: "the headers are not synced to main index ... it
   should be as main index"): the first phrase in its snow, #F8FAFC, the second at half of it, as rebwand-site renders them */
h2.big,.faq-h h2{color:#f8fafc}
h2.big .g{color:rgba(248,250,252,.5)}

/* the landing's ask on the hero button (motion.js 6d): "Interact" sits where "See Pricing" is, then turns into it */
.hero-go{position:relative}
.hero-go .go-hint{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:pre;pointer-events:none}
/* the arrow stays beside "Draw": it points up at the line to draw on (his note, 30 Oct: "you also removed arrow from draw button which was point at where to draw") */
.hero-go.hinting{color:transparent}
.hero-go.hinting .go-hint,.hero-go.hinting svg{color:#fff}
html.landing{overscroll-behavior:none}

/* Process: the four cards across the full width now the notes beside them are gone */
.pr-grid{grid-template-columns:minmax(0,1fr)}

/* ---------- Who It's For: the main index's full-screen sequence, in v4's dress (30 Oct) ---------- */
.wseq{display:grid;margin-top:6rem;padding-inline:var(--gut)}
.wseq-list,.wseq-media{grid-area:1/1}
.wseq-list{position:sticky;top:0;height:100svh;align-self:start;display:flex;flex-direction:column;justify-content:center;padding:0 3vw;z-index:2;pointer-events:none}
.wseq-names{list-style:none;margin:0;padding:0}
.wseq-names button{pointer-events:auto;background:none;border:0;padding:.06em 0;cursor:pointer;text-align:left;font-family:var(--head);font-weight:770;letter-spacing:-.04em;
  line-height:1.08;font-size:clamp(1.9rem,3.4vw,3.6rem);color:rgba(248,250,252,.38);transition:color .4s ease}
.wseq-names li.on button{color:#f8fafc}
@media(hover:hover){.wseq-names li:not(.on) button:hover{color:rgba(248,250,252,.72)}}
.wseq-names button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:.25rem}
.wseq-subs{display:grid;margin-top:1.5rem}
.wseq-sub{grid-area:1/1;margin:0;opacity:0;transition:opacity .45s ease;font-size:.95rem;line-height:1.45;color:rgba(248,250,252,.72);white-space:nowrap}
.wseq-sub.on{opacity:1}
.wseq-media{display:flex;flex-direction:column}
.wseq-ph{margin:0;height:85svh;position:relative;overflow:hidden;background:var(--bg2)}
.wseq-ph picture{display:block;width:100%;height:100%}
.wseq-ph img{width:100%;height:100%;object-fit:cover;display:block}
.wseq-ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,5,5,.85) 0%,rgba(5,5,5,.5) 38%,rgba(5,5,5,.08) 100%)}
.wseq-ph:first-child{border-radius:.5rem .5rem 0 0}
.wseq-ph:last-child{border-radius:0 0 .5rem .5rem}
@media(max-width:760px){.wseq{margin-top:3rem}.wseq-ph{height:72svh}.wseq-list{padding:0 1.25rem}.wseq-sub{font-size:.82rem}
  .wseq-ph::after{background:linear-gradient(90deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.62) 70%,rgba(5,5,5,.4) 100%)}}

/* Process: the line that fills as you scroll runs the full width, under the cards that now do (his note, 30 Oct: "the
   health bar on the process should be full width?") */
html.pin-on .how-prog{margin:1.5rem var(--gut) 0}

/* the footer: the name on one line in the brand's own two weights, "rebwand" heavy and ".io" light in the same colour, as in the logo */
.ft-wm{white-space:nowrap;margin-top:1rem}.ft-wm span{display:inline-block}
.ft-wm .l2{padding-left:0;color:inherit;font-weight:400;letter-spacing:-.04em;opacity:.88}
.ft canvas{opacity:1}

/* the opening mark with a whisper of chrome (his note, 30 Oct: "add some 3d chrome (very small minute) to the logo"): a slow
   sheen of light passes over it, and a one-pixel edge underneath gives it the faintest thickness */
.intro-w{display:block;position:relative;filter:drop-shadow(0 1px 0 #6d6f73) drop-shadow(0 2px 0 #2e2f31) drop-shadow(0 .5rem .75rem rgba(0,0,0,.7))}
.intro-w::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;animation:markIn .9s cubic-bezier(.22,1,.36,1) .15s forwards,introSheen 2.1s ease-in-out .55s 1 both;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.0) 38%,rgba(205,207,212,.6) 46%,rgba(255,255,255,.9) 50%,rgba(205,207,212,.6) 54%,transparent 62%) 0 0/260% 100% no-repeat;
  -webkit-mask:var(--mkUrl) center/contain no-repeat;mask:var(--mkUrl) center/contain no-repeat;mix-blend-mode:multiply}
/* while the R opens, the mark itself steps back so the cut is what you see */
html.intro-out .intro{opacity:1!important;background:transparent!important}html.intro-out .intro-w{opacity:0;transition:opacity .15s}

/* ---------- PHONES (his note, 30 Oct: "open the mobile site, use it ... fit and fix everything to optimise it for mobile and
   small devices while at the same time keep it as close to the desktop as possible") ---------- */
@media(max-width:760px){
  /* the hero on the middle line, as on a laptop */
  .wm-t{text-align:center}.wm .wm-t.wm-dl{width:100%}.wm{margin-left:0}
  .hero-mid{justify-items:center;align-items:center;text-align:center}
  /* every section heading: its second phrase on its own line, as the main index does, and the lines balanced so no word is
     left on its own */
  h2.big .g{display:block}
  h2.big{text-wrap:balance}
}
/* the footer quote's opening mark sat outside the page's edge; it now sits in the line's own indent */

@media(max-width:760px){
  /* the header as on a laptop: the mark and the menu only. The email beside the mark ran over whatever scrolled under it */
  .hd-mail{display:none!important}
  /* footer links big enough for a thumb */
  .ft-nav a{display:inline-block;padding-block:.5rem}
  .ft-nav ul li{line-height:1.1}
}
/* a phone on its side: the menu's shade dark enough to read over the hero */
@media(max-height:500px){.mn-sh{background:rgba(5,5,5,.9)}}

/* ---------- PHONES, ROUND 3 (his note, 30 Oct: "phone spacing is not using full screen, yes i say keep it as close to website as
   possible but freedom to make phone look good, the hero being squeezed dosent look good") ---------- */
@media(max-width:760px){
  /* the hero fills the screen: the line large on four lines, the name across the top of it, the corners at the foot */
  .hero{grid-template-rows:minmax(0,.5fr) auto auto minmax(0,1fr) auto}
  .hero-mid{margin-top:clamp(1.5rem,4.5svh,3rem);row-gap:clamp(1.5rem,4svh,2.75rem)}
  .hero-cp{font-size:min(13.2vw,7.4svh)!important;line-height:.98!important;text-wrap:balance}
  .hero-cp .cp-a,.hero-cp .cp-x{display:block}
  .hero-go{font-size:1.125rem}
  /* headings and lines at a size that holds the screen */
  h2.big,.faq-h h2{font-size:clamp(2.2rem,10.2vw,3.6rem)!important}
  .mp-lead,.pf-lead,.row > .rv > h2.big + p{font-size:clamp(1.0625rem,4.6vw,1.375rem)}
  /* the two statements each take a whole screen, in type to match */
  #intro,#why{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .stmt,.why p.say{font-size:clamp(1.5rem,7.8vw,2.75rem)!important;line-height:1.16;text-indent:0;margin-right:0;max-width:none}
  /* What Every Build Includes: right down the screen */
  .crowd{height:400vh}
  .crowd-pin{padding-bottom:.75rem}
  /* Why It Works: big numbers, as on a laptop */
  .bx .n{font-size:clamp(2.75rem,14vw,4.5rem)}
  .bx p{font-size:.9375rem;max-width:none}
  .bx{min-height:15rem}
  /* the industries edge to edge, each photo near a full screen */
  .wseq{padding-inline:0}
  .wseq-ph{height:88svh}
  .wseq-ph:first-child,.wseq-ph:last-child{border-radius:0}
  .wseq-list{padding:0 var(--gut)}
  .wseq-names button{font-size:clamp(2.1rem,11vw,3.4rem)}
  .wseq-sub{font-size:clamp(.82rem,4vw,1.05rem)}
  /* Process: readable cards */
  .pc-b b{font-size:1.5rem}
  .pc-b p{font-size:.9375rem}
}
@media(max-width:760px) and (max-height:700px){.dl-c p{display:none}}
@media(max-width:760px){
  /* each half of the line breaks where it reads: "Your business / is good." and "Your website / isn't." */
  .hero-cp{text-wrap:wrap}
  /* the header's shade stronger on a phone, so text passing under the mark and the menu never clashes with them */
  .hd::before{inset:0 0 -2.5rem;background:linear-gradient(180deg,rgba(5,5,5,.97) 0%,rgba(5,5,5,.9) 55%,rgba(5,5,5,.45) 80%,rgba(5,5,5,0) 100%);
    -webkit-mask-image:none;mask-image:none}
}

/* the arrow beside "Draw to Explore" (motion.js 6d), easing back in beside "See Pricing" as the words change */
.hero-go.hinting svg{margin-left:var(--hx,0px);transition:margin-left .5s ease,transform .35s var(--e)}
.hero-go.hinting.morph svg{margin-left:0}

/* ---------- PHONES, ROUND 4 (his note, 30 Oct: "phone sizing is by no means optimised to look good?"). Measured: the page's root
   size sat on its 15px floor, which made body text 13-14px and labels 11px on a phone. The root now scales with the phone, so
   every size and space on the page grows together and keeps its proportions. ---------- */
@media(max-width:760px){
  html{font-size:clamp(15.5px,4.5vw,19px)}
  .faq-h p{font-size:clamp(1.0625rem,4.6vw,1.375rem)}
  .faq-h .ld-w{font-size:inherit}
  /* Process: pinned and filling the screen, the cards sharing the height below the heading */
  html.pin-on #how{height:340vh}
  html.pin-on .how-pin{height:100svh;justify-content:flex-start;padding:4.5rem 0 1.25rem}
  html.pin-on .how-pin .pr-grid{margin-top:1.5rem;flex:1 1 0;min-height:0;display:flex}
  html.pin-on .cols{height:auto;flex:1 1 auto;min-width:0}
  html.pin-on .pc{flex:1 1 auto!important}
  html.pin-on .how-prog{margin:1rem var(--gut) 0;height:2px}
  .pc-n{font-size:1.0625rem}
  .pc-b b{font-size:1.5rem}
  .pc-b p{font-size:.9375rem}
  .pc-b small{font-size:.8125rem}
}
@media(max-width:760px){
  /* pinned Process: closed steps are one slim row (number beside title), the open one takes the rest of the height */
  html.pin-on .pc{flex:0 0 auto!important}
  html.pin-on .pc.on{flex:1 1 auto!important}
  html.pin-on .pc-n{position:absolute;top:.8rem;left:1.1rem;padding:0;line-height:1.5}
  html.pin-on .pc-b{padding:.72rem 1.1rem .72rem}
  html.pin-on .pc-b b{padding-left:2.1rem;font-size:1.3rem}
  html.pin-on .pc-b p{margin-top:.6rem}
  html.pin-on .pc-b small{margin-top:.75rem;padding-top:.55rem}
}
/* Safari's bars leave a real iPhone about 660px of height: the line under the heading gives way so the steps fit */
@media(max-width:760px) and (max-height:760px){html.pin-on #how .row > .rv > h2 ~ p{display:none}}
@media(max-width:760px){
  /* the pinned Process heading on two lines, so the open step is never cut */
  html.pin-on #how h2.big{font-size:8.5vw!important}
  html.pin-on #how .row{row-gap:.75rem}
  html.pin-on .how-pin{padding-top:4rem}
  html.pin-on .how-pin .pr-grid{margin-top:1rem}
}
@media(max-width:760px) and (max-height:760px){html.pin-on .pc-b p{font-size:.875rem;line-height:1.45}}

/* ---------- the footer, tidied (his note, 30 Oct: "footer overall is quite messy"): what to say on the left, where to go on the right,
   the small print on one line, the name across the foot ---------- */
.ft{padding-top:clamp(4rem,9vh,7rem);border-top:0}
.ft-mid{margin-top:0;align-items:start;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.ft-mail{font-size:clamp(2.2rem,3.6vw,3.6rem);letter-spacing:-.04em}
.ft-mail::after{content:none}
.ft-q{margin-top:1.5rem;font-size:clamp(1.0625rem,1.2vw,1.25rem);font-weight:600;line-height:1.35;text-indent:0;color:var(--mute2);max-width:30rem}
.ft-q::before{content:none}
.ft-low{padding-top:3rem;border-top:0}
.ft-low .clock{color:var(--mute)}
@media(max-width:760px){
  .ft{padding-top:4.5rem}
  .ft-mid{grid-template-columns:minmax(0,1fr);row-gap:3rem}
  .ft-mail{font-size:9.6vw}
  .ft-nav ul a{font-size:1.5rem}
  .ft-low{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:.4rem;padding-top:3rem;font-size:.8125rem}
  .ft-low > :nth-child(4){order:1}.ft-low > :nth-child(3){order:2;justify-self:end}.ft-low > :nth-child(2){order:3;grid-column:1/-1}.ft-low > :nth-child(1){order:4;grid-column:1/-1}
  .ft-low a{min-height:0}
}

/* ---------- Ready for the upgrade, on v4's own parts (his note, 30 Oct: "make the ready for upgrade completely suit v4"): the section's
   label and right-hand heading as every other section; the form in the right-hand column, on the same panel as the pricing bar;
   fields in Inter on v4's hairline; the same button as Take The Bundle ---------- */
.up-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);column-gap:2rem;padding-inline:var(--gut);margin-top:5rem}
.up-f.cb{grid-column:2;justify-self:stretch;width:100%;padding:1.5rem;background:var(--bg2);border:1px solid var(--line);border-radius:.5rem .5rem 2.75rem .5rem;text-align:left}
.up-f .cb-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1rem}
.up-w{grid-column:1/-1}
.up-f .cb-r > *{order:0}
.up-f label{display:block;font-size:.75rem;font-weight:600;color:var(--mute2);margin-bottom:.5rem}
.up-f input[type=text],.up-f input[type=email],.up-f select{display:block;width:100%;min-width:0;height:2.75rem;padding:0 .875rem;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:.375rem;font:inherit;font-size:.875rem;font-weight:600;color:var(--fg);letter-spacing:-.01em;transition:border-color .25s ease}
.up-f select{-webkit-appearance:none;appearance:none;padding-right:2.25rem;background-image:linear-gradient(45deg,transparent 50%,var(--fg) 50%),linear-gradient(135deg,var(--fg) 50%,transparent 50%);background-position:calc(100% - 1.15rem) 50%,calc(100% - .85rem) 50%;background-size:.3rem .3rem;background-repeat:no-repeat}
.up-f select option{color:#111}
.up-f input::placeholder{color:var(--mute);font-weight:600}
.up-f input:focus,.up-f select:focus{outline:none;border-color:var(--accent)}
.up-f button.up-go{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;height:3rem;padding-inline:1.5rem;background:var(--accent);color:var(--accent-ink);border-radius:1.375rem;font-size:1rem;font-weight:600}
.up-go svg,.ft-em svg{position:static;width:.9rem;height:.9rem}
@media(hover:hover){.up-f button.up-go:hover{background:#fff;color:#050505}}
.up-f .cb-ok{margin:0;padding-block:1.5rem}
.up-f .cb-ok h3{font-size:clamp(1.4rem,1.9vw,1.9rem);font-family:var(--head);font-weight:770;letter-spacing:-.04em;color:var(--fg)}
.up-f .cb-ok p{margin-top:.5rem;font-size:.9375rem;color:var(--mute2)}
/* the footer: the email button beside the big hello */
.ft-hi{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.ft-em{justify-content:center;gap:.6rem;height:2.75rem;padding-inline:1.25rem;font-size:.9375rem;white-space:nowrap}
@media(max-width:1099px){.up-g{grid-template-columns:minmax(0,1fr)}.up-f.cb{grid-column:1}}
@media(max-width:760px){.up-g{margin-top:3rem}.up-f.cb{padding:1.25rem}.up-f .cb-r{grid-template-columns:minmax(0,1fr)}
  .up-f input[type=text],.up-f input[type=email],.up-f select{font-size:16px}}   /* 16px or Safari zooms the page on a tap */

/* the hero's line on a phone: "Your business / is good. / Your website / isn't." */
.pb{display:none}
@media(max-width:760px){.pb{display:inline}.hero-cp .cp-x .cp-w:last-child{display:block}}

/* Process on a phone: an open step reads from its top, the number beside the title as when closed, its time at the foot */
@media(max-width:760px){
  html.pin-on .pc{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
  html.pin-on .pc-b{flex:1 1 auto;display:flex;flex-direction:column}
  html.pin-on .pc-b small{margin-top:auto}
  html.pin-on .pc-b p{margin-bottom:.75rem}
}

/* the catchphrase on two lines on a phone, as large as fits gutter to gutter (his note, 30 Oct: "catchphrase across 4 lines really?") */
@media(max-width:760px){
  .pb{display:none}
  .hero-cp{font-size:9.1vw!important;line-height:1.02!important;text-wrap:nowrap;white-space:nowrap}
  .hero-cp .cp-x .cp-w:last-child{display:inline}
}

/* the page keeps its scrollbar's room from the first frame, so nothing is nudged left when the opening ends and the bar appears
   (his note, 30 Oct: "why does the splash sccreen load and then pull to the left?"); the sheen now travels left to right */
html{scrollbar-gutter:stable}
/* phones: every section heading on the same lines as a laptop's, its second phrase on one line, sized so the longest fits
   gutter to gutter (his notes, 30 Oct: "mobile dosent match at all?", "catchphrase across 4 lines really?") */
@media(max-width:760px){
  h2.big,.faq-h h2,html.pin-on #how h2.big{font-size:7.2vw!important;line-height:1.04!important}
  h2.big{text-wrap:wrap}
  h2.big,h2.big .g{white-space:nowrap}
}

/* ---------- PHONES, ROUND 5, from his own iPhone's screenshots ---------- */
@media(max-width:760px){
  /* the hero back to its earlier balance: on the middle of the screen, the sizes as they were */
  .hero{grid-template-rows:minmax(0,1fr) auto auto minmax(0,1.15fr) auto}
  .hero-mid{margin-top:clamp(1.25rem,2.4vw,2.5rem);row-gap:clamp(1.5rem,2.6vw,2.5rem)}
  .hero-cp{font-size:8.4vw!important}
  .hero-go{font-size:.9375rem}
  .hero-foot{font-size:.75rem}
  /* the line under a heading clearly smaller than the heading */
  .mp-lead,.pf-lead,.row > .rv > h2.big + p,.up-l,.faq-h p{font-size:.9375rem;line-height:1.5}
  /* the header's shade: dark only, no blur, fading out, so nothing passing under it blurs or meets a hard line */
  .hd::before{inset:0 0 -1.5rem;background:linear-gradient(180deg,rgba(5,5,5,.96) 0%,rgba(5,5,5,.85) 65%,rgba(5,5,5,0) 100%);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* labels sit below that shade */
  .crowd-pin{padding-top:5.75rem}
  html.pin-on .how-pin{padding-top:5.5rem}
  /* What Every Build Includes: slim titles, so the risen R has its own space above them */
  .dl-c p{display:none}
  .dl-c{padding:.7rem 1rem}
  /* the embed: a real phone-tall preview, not a short strip of the site */
  html:not(.pv-full) #proof .pv[data-service="website"] .pv-screen{height:calc(100svh - 8.5rem)!important}
}

/* Questions: one centred column, as the main index's */
.faq-c{max-width:51.25rem;margin-inline:auto;padding-inline:var(--gut);text-align:center}
.faq-c .lab{margin-bottom:1.25rem}
.faq-c .faq-h h2{font-size:clamp(2.2rem,3.6vw,3.6rem)}
.faq-c .qs{text-align:left}
@media(max-width:760px){.faq-c .qs{margin-top:2.25rem!important}}
/* the form's button stays last on a phone (the old footer form's rule put it first) */
.up-f .cb-r button{grid-row:auto;grid-column:1/-1}
.up-f .cb-r input[type=email]{grid-row:auto;grid-column:auto}

/* Ready for the upgrade: centred like Questions (his note, 30 Oct: "same for ready for the upgrade") */
.up-c .up-f.cb{margin-top:2.5rem;justify-self:auto}
.up-c .faq-h p{text-wrap:balance;line-height:1.5}
@media(min-width:761px){.up-c .faq-h p{font-size:1.0625rem}}
@media(max-width:760px){.up-c .up-f.cb{margin-top:2rem}}

/* ---------- ONE SIZE PER ROLE (his notes, 30 Oct: "i mean font sizes seem mismatched, not fonts", then "do all five"). Sizes only. ---------- */
/* big numbers: the price's size everywhere */
.mp-total b,.bx .n{font-size:clamp(2.4rem,3.2vw,3.2rem)}
/* the two statements at Introduction's size */
.why p.say{font-size:clamp(1.6rem,2.35vw,2.4rem);max-width:none;margin-right:0}
/* card titles: Process at the pricing cards' size */
.pc-b b,html.pin-on .pc-b b{font-size:clamp(1.5rem,1.9vw,1.9rem)}
/* text inside cards, one size */
.mp-list span,.mp-note,.dl-c p,.bx p:not(.n),.pc-b p,.q-a p,.wseq-sub{font-size:.875rem}
/* buttons, one size */
.ft-em,.mp-more,.mp-more .go{font-size:1rem}
@media(max-width:760px){
  /* numbers at the price's size, the industry list at the main index's, each below the screen's width of a statement */
  .bx .n{font-size:clamp(2.4rem,3.2vw,3.2rem)}
  .wseq-names button{font-size:7.7vw}
  .wseq-sub{font-size:.875rem;white-space:normal}
  .mp-list span,.mp-note,.dl-c p,.bx p:not(.n),.pc-b p,html.pin-on .pc-b p,.q-a p{font-size:.875rem}
  .stmt,.why p.say{font-size:clamp(1.5rem,7.8vw,2.75rem)!important}
  /* headings on the laptop's lines: See the difference. Live. is one line there, and fits one here */
  #proof h2.big .g{display:inline}
}

/* "See Pricing" never shows on load (his note, 30 Oct: "see pricing is first thing we see on refresh on load?"): the button's own words
   are in the page before the script swaps in "Draw to Explore", and its colour took .25s to fade away. Hidden from the first
   paint while the hero waits, and the swap is instant. */
html.landing .hero-go:not(.hinting){visibility:hidden}
.hero-go.hinting{transition:none}

/* "Draw to Explore" turns blue under the pointer as "See Pricing" does, so the colour holds through the click and the change of words
   (his note, 30 Oct: "when hovering over the white text and clicking draw to explore there is a few sections where see pricing is white") */
.hero-go .go-hint{transition:color .25s ease}
.hero-go.hinting svg{transition:margin-left .5s ease,transform .35s var(--e),color .25s ease}
@media(hover:hover){.hero-go.hinting:hover .go-hint,.hero-go.hinting:hover svg{color:var(--accent)}}
.hero-go.hinting:focus-visible .go-hint,.hero-go.hinting:focus-visible svg{color:var(--accent)}

/* the words and arrow while it reads "Draw to Explore": kept centred by moving each sideways, with no change to the button's width, and
   gliding home together as the words change (motion.js 6d) */
.hero-go.hinting svg{margin-left:0!important;translate:calc(var(--hx,0px)/2) 0;transition:translate .8s cubic-bezier(.45,0,.2,1),transform .35s var(--e),color .25s ease}
.hero-go.hinting .go-hint{translate:calc(var(--hx,0px)/-2) 0;transition:translate .8s cubic-bezier(.45,0,.2,1),color .25s ease}
.hero-go.hinting.morph svg,.hero-go.hinting.morph .go-hint{translate:0 0}

/* the words line up with the button's own to the pixel at the change */
.hero-go .go-hint{line-height:1.25}
/* Questions at the main index's measure (his note, 30 Oct: "why is new faq font so different"): the question in Bricolage as a card title, the
   answer at the size of the line under a heading, where the one-size rule for card text had made it too small */
.q button{font-family:var(--head);font-weight:770;letter-spacing:-.04em;font-size:1.0625rem}
.q-a p{font-size:1.0625rem}
@media(max-width:760px){.q button{font-size:1rem}.q-a p{font-size:.9375rem}}
/* the form's last question on the middle line (his note: "what needs the upgrade in form should be central") */
.up-w{text-align:center}
.up-f .up-w select{text-align:center;text-align-last:center;padding-inline:2.25rem}

/* the footer's top edge melts into the page (his note, 30 Oct: "something to smooth out this harsh edge to the footer"): the footer's black
   comes in over its first stretch instead of starting on a line, and the strands fade in with it */
.ft{background:none}
.ft::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,3,3,0) 0,rgba(3,3,3,.55) clamp(5rem,14vh,9rem),#030303 clamp(11rem,30vh,20rem))}
/* socials and where we are under the big hello; the foot of the footer is the legal line only */
.ft-where{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:1.25rem;font-size:.875rem;font-weight:600;color:var(--mute2)}
.ft-where a{display:inline-flex;align-items:center;gap:.4rem;min-height:2rem;transition:color .25s ease}
.ft-where svg{width:1.1rem;height:1.1rem}
.ft-where .clock{color:var(--mute)}
@media(hover:hover){.ft-where a:hover{color:var(--fg)}}
@media(max-width:760px){.ft-low{display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}.ft-low > *{order:0!important;grid-column:auto!important}
  /* cards in flight on a phone: no glass behind them, so each frame costs only a move */
  .dl-c{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0e0e0f}}

/* "Your website isn't." waits a touch fainter, with a soft faded edge (his notes, 31 Oct: "slightly lower opacity with outline", then "ever so soft, basically how it was before"): a glow, not a stroke, which would trace the font's overlapping shapes */
.hero-cp .cp-x{color:rgba(255,255,255,.38);text-shadow:0 0 1px rgba(255,255,255,.2)}
/* a phone's hero: room between the line and the button, so the button sits clear of the words it asks you to draw (31 Oct) */
@media(max-width:760px){.hero-mid{row-gap:clamp(3.5rem,11svh,6.5rem)}}

/* ---------- Process: a small moving picture inside the open card, one per step (his note, 31 Oct: "the process cards need some animations within
   the cards themselves"). Plain line drawings in the Why It Works cards' manner; they only run while their card is open ---------- */
.pc-art{position:absolute;right:1.5rem;top:1.25rem;width:clamp(7rem,11vw,11rem);height:clamp(7rem,11vw,11rem);opacity:0;transform:translateY(.5rem);transition:opacity .45s ease,transform .6s var(--e);pointer-events:none}
.pc.on .pc-art{opacity:1;transform:none;transition-delay:.3s}
.pc-art svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pc-art .ac{stroke:var(--accent)}
.pc-art .fl{fill:rgba(56,182,255,.16);stroke:var(--accent)}
.pc-art *{transform-box:fill-box;transform-origin:center}
.pc:not(.on) .pc-art *{animation-play-state:paused}
@keyframes pcDrop{0%{transform:translateY(-34px);opacity:0}18%{opacity:1}42%,78%{transform:none;opacity:1}100%{transform:translateY(0) scale(.92);opacity:0}}
.pa-f{animation:pcDrop 3.6s cubic-bezier(.3,.7,.2,1) infinite both}.pa-f.b{animation-delay:.32s}.pa-f.c{animation-delay:.64s}
@keyframes pcGrow{0%,8%{transform:scaleX(0)}42%,84%{transform:none}100%{transform:none;opacity:0}}
.pa-b{transform-origin:left center;animation:pcGrow 3.6s cubic-bezier(.3,.7,.2,1) infinite both}.pa-b.b{animation-delay:.2s}.pa-b.c{animation-delay:.4s}.pa-b.d{animation-delay:.6s}
@keyframes pcScan{0%{transform:translateY(0);opacity:0}8%{opacity:1}60%{opacity:1}72%,100%{transform:translateY(112px);opacity:0}}
.pa-s{animation:pcScan 3.6s linear infinite both}
@keyframes pcTick{0%,14%{stroke-dashoffset:60}46%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.pa-t{stroke-dasharray:60;animation:pcTick 3.6s cubic-bezier(.3,.7,.2,1) infinite both}
@keyframes pcRing{0%,40%{transform:scale(.7);opacity:0}52%{opacity:.9}84%,100%{transform:scale(1.35);opacity:0}}
.pa-r{animation:pcRing 3.6s ease-out infinite both}
@keyframes pcKey{0%,10%{transform:translateX(-46px);opacity:0}24%{opacity:1}52%,86%{transform:none;opacity:1}100%{transform:none;opacity:0}}
.pa-k{animation:pcKey 3.6s cubic-bezier(.3,.7,.2,1) infinite both}
@media(prefers-reduced-motion:reduce){.pc-art *{animation:none!important}}
/* the words of the open card arrive one after another */
.pc.on .pc-b b{animation:pcUp .6s var(--e) .2s both}.pc.on .pc-b p{animation:pcUp .6s var(--e) .3s both}.pc.on .pc-b small{animation:pcUp .6s var(--e) .4s both}
@keyframes pcUp{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
@media(max-width:760px){.pc-art{width:3.75rem;height:3.75rem;right:.9rem;top:.75rem}html:not(.pin-on) .pc-art{display:none}}

/* the corners come in slowly and softly once the line is drawn (his note, 31 Oct: "slow down the appearance of the 4 corner icons and text when we draw it in, its too quick and abrupt") */
.hd,.hero-foot{transition:opacity 3.4s cubic-bezier(.3,0,.2,1) .35s}
html.landing .hd,html.landing .hero-foot{transition:none}

/* Process pictures: larger and clearer on a laptop; on a phone they sit in the title's row, clear of the words */
.pc-art{width:clamp(9rem,13vw,14rem);height:clamp(9rem,13vw,14rem)}
.pc-art svg{stroke:rgba(255,255,255,.46)}
@media(max-width:760px){.pc-art{width:2.5rem;height:2.5rem;right:.9rem;top:.35rem}.pc-art svg{stroke-width:5}}

/* section headings stagger on a laptop, left then right down the page, instead of every one locking right (his notes, 31 Oct: "2 services 2 prices - left / intro - right (text) / why us - left / so on", then "swap the stagger": Services right, Introduction left, Why Us right, Proof left, Why It Works right, Process left, Who It's For right); the [0x] label takes the opposite side */
@media(min-width:1100px){
  #intro > .row,#proof > .row,#how > .how-pin > .row{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
  #intro > .row > .lab,#proof > .row > .lab,#how > .how-pin > .row > .lab{order:2;text-align:right}
  #proof > .row > .rv,#how > .how-pin > .row > .rv{order:1;text-align:left;align-items:unsafe flex-start}
  #intro > .row > .stmt{order:1}
}

/* ---------- Who It's For: cards that hold, tip back and are pulled under the next (motion.js 6f) ---------- */
.wseq-pin{display:contents}
.ws-c,.ws-d{display:none}
.mo .wseq{display:block;padding-inline:0}
.mo .wseq-pin{display:block}
.mo .wseq-list{display:none}
.mo .wseq-media{display:block}
.mo .wseq-ph{position:sticky;top:0;width:100%;height:100svh;border-radius:1.75rem 1.75rem 0 0!important;transform-origin:50% 100%;overflow:hidden;background:var(--bg2)}
.mo .wseq-ph:first-child{border-radius:0!important}
.mo .wseq-ph::after{background:linear-gradient(180deg,rgba(5,5,5,.6) 0%,rgba(5,5,5,.12) 40%,rgba(5,5,5,.12) 60%,rgba(5,5,5,.7) 100%)}
.mo .ws-d{display:block;position:absolute;inset:0;z-index:3;background:#030303;opacity:0;pointer-events:none;text-decoration:none}
.mo .ws-c{display:grid;grid-template-columns:1fr auto;position:absolute;inset:0;z-index:2;padding:clamp(5rem,12vh,7rem) var(--gut) clamp(2rem,6vh,3.5rem);align-content:space-between;color:#f8fafc}
.mo .ws-c b{font-family:var(--head);font-weight:770;letter-spacing:-.045em;line-height:1;font-size:clamp(3rem,7vw,7rem)}
.mo .ws-c i{font-style:normal;font-family:var(--head);font-weight:770;letter-spacing:-.04em;line-height:1;font-size:clamp(3rem,7vw,7rem)}
.mo .ws-c span{grid-column:1/-1;font-size:clamp(1.0625rem,1.4vw,1.5rem);font-weight:600;letter-spacing:-.02em;color:rgba(248,250,252,.82);align-self:end}
@media(max-width:760px){.mo .wseq-ph{border-radius:1.25rem 1.25rem 0 0!important}.mo .ws-c b,.mo .ws-c i{font-size:11vw}.mo .ws-c span{font-size:1rem}}

/* the opening (his notes, 31 Oct: "a vertical 3d isnt ideal, the diagonal chrome sheen + blue, make it look special, have a look at averlo's load splash", "dont have the scanner visible"): as on Averlo the mark comes out of a blur with a slight turn in space and settles; one diagonal band of chrome crosses it, cut to the letter, a blue edge trailing behind */
.intro-w{animation:introLean 1.15s cubic-bezier(.22,1,.36,1) both}
@keyframes introLean{from{transform:perspective(600px) rotateY(-24deg) rotateX(6deg)}to{transform:none}}
.intro-w::after{mix-blend-mode:normal;background:linear-gradient(115deg,rgba(56,182,255,0) 32%,rgba(56,182,255,.9) 40%,#1b1d21 45%,#d3d6db 48%,#fff 50%,#55585d 53%,#c4c7cc 57%,rgba(255,255,255,0) 63%) 100% 0/320% 100% no-repeat;
  animation:markIn .9s cubic-bezier(.22,1,.36,1) .15s forwards,introSheen 1s cubic-bezier(.45,0,.25,1) 1.05s 1 both}
@keyframes introSheen{from{background-position:85% 0}to{background-position:-22% 0}}
@media(prefers-reduced-motion:reduce){.intro-w,.intro-w::after{animation:none}}

/* the cards' words at the page's own sizes (his notes, 31 Oct: "text on whose it for cards way to big, we lost font size cohesion", "numbered industries no need"): the name as a section heading, its line as the line under a heading */
.mo .ws-c{grid-template-columns:1fr}
.mo .ws-c b{font-size:clamp(2.2rem,3.6vw,3.6rem);letter-spacing:-.04em}
.mo .ws-c span{font-size:1.0625rem}
@media(max-width:760px){.mo .ws-c b{font-size:7.2vw}.mo .ws-c span{font-size:.9375rem}}

/* the form: every field on its own line, in a column the width of the main index's (his note, 31 Oct: "all items on own line as our main index") */
.up-f .cb-r{grid-template-columns:minmax(0,1fr)}
.up-c .up-f.cb{width:min(40rem,100%);margin-inline:auto}

/* (then "the loading screen was good before with the blue glitch like embed, but it needs that + sheen and its too quick now"): first the embed's blue rebuild wake runs down inside the letter, nothing outside it; then the diagonal chrome band crosses, and only then the zoom */
/* (then "the vertical glitch is ugly", "dont make that internal", "youve added 2 a vertical then diagnoal"): ONE diagonal pass. Soft blue light, not cut to the letter, crosses behind the mark and past its edges, and the chrome band crosses the letter with it, on the same line at the same speed */
.intro-w::before{content:"";position:absolute;inset:-55%;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgba(56,182,255,.34),rgba(56,182,255,.12) 55%,rgba(56,182,255,0));animation:introBeam 1.4s ease-in-out .5s 1 both}
/* the light is a glow round the whole mark that swells as the band crosses it and dies away, never a shape of its own */
@keyframes introBeam{0%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
.intro-w::after{z-index:2;animation:markIn .9s cubic-bezier(.22,1,.36,1) .15s forwards,introSheen 1.4s cubic-bezier(.45,0,.25,1) .5s 1 both}
@media(prefers-reduced-motion:reduce){.intro-w::before{animation:none}}

/* a phone's hero: the name and the line together on the middle of the screen, Draw to Explore lower down on its own (his note, 31 Oct: "iphone screen too pushed up rebwand + catchphrase should be central draw to explore can be lower") */
@media(max-width:760px){
  .hero{grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr) auto}
  .hero-mid{position:relative}
  .hero-go{position:absolute;left:0;right:0;top:100%;width:max-content;margin:clamp(3.5rem,11svh,6rem) auto 0}
}

/* (his note, 31 Oct: "now it looks like wordart"): what read as word art was the bevel under the mark, the glow round it and the hard dark stripes in the band. All gone: a flat clean mark, and one soft pass of cool shade and blue light across it */
.intro-w{filter:none}
.intro-w::before{content:none}
.intro-w::after{background:linear-gradient(115deg,rgba(150,162,178,0) 30%,rgba(150,162,178,.38) 41%,rgba(56,182,255,.72) 47%,rgba(190,228,255,.25) 50%,rgba(120,132,148,.34) 54%,rgba(120,132,148,0) 64%) 85% 0/320% 100% no-repeat}

/* the band is gone: the opening's chrome is drawn live on a canvas (site.js, the opening) */
.intro-w::after{content:none}
.intro-w{position:relative}

/* Who It's For: every card square-cornered (his note, 31 Oct: "first is square others rounded, i prefer square") */
.mo .wseq-ph,.mo .wseq-ph:first-child{border-radius:0!important}
@media(max-width:760px){.mo .wseq-ph{border-radius:0!important}}

/* Who It's For: the cards inside the page's column lines, like everything else (his note, 31 Oct: "they our going outside our new v4 column lines") */
.mo .wseq{padding-inline:var(--gut)}
.mo .ws-c{padding-inline:clamp(1.25rem,2.4vw,2.25rem)}

/* Who It's For ends on one more card, with Salons pulled under it like the rest (his note, 31 Oct: "after salon ... make that card also disspear, and then the last card, should have something along the lines of dont see yours, we work with any business") */
.ws-end{display:none}
.mo .ws-end{display:grid;place-items:center;text-align:center;background:var(--bg2);border:1px solid var(--line)}
.mo .ws-end::after{content:none}
.mo .ws-end p{position:relative;z-index:2;padding-inline:var(--gut);font-family:var(--head);font-weight:770;letter-spacing:-.04em;line-height:1.04;color:#f8fafc;font-size:clamp(2.2rem,3.6vw,3.6rem)}
.mo .ws-end span{display:block;color:rgba(248,250,252,.5)}
@media(max-width:760px){.mo .ws-end p{font-size:7.2vw}}
/* Ready for the upgrade: everything central, the form's labels and fields too (his note, 31 Oct: "ready for upgrade needs to be central include the form fill") */
.up-c .up-f.cb{text-align:center}
.up-f input[type=text],.up-f input[type=email]{text-align:center}
.up-f .cb-ok{text-align:center}

/* ---------- the header's move: coming back it starts slowly, and the logo and buttons fade in behind the move (his note, 31 Oct: "menu nav appears too quickly, specifically the logo when scrolling up") ---------- */
.hd{transition:opacity 3.4s cubic-bezier(.3,0,.2,1) .35s,transform 1.1s cubic-bezier(.3,.1,.2,1)}   /* the same fade as the bottom corners, so all four arrive together (his note, 31 Oct: "the 4 corners appearing are out of sync") */
.hd-mk,.hd-burger{transition:opacity .9s ease .25s}
html.hd-away .hd{transform:translate3d(0,-100%,0);pointer-events:none;transition:opacity 3.4s cubic-bezier(.3,0,.2,1) .35s,transform .7s cubic-bezier(.4,0,.6,1)}
html.hd-away .hd::before{opacity:0}
html.hd-away .hd-mk,html.hd-away .hd-burger{opacity:0;transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){.hd{transition:opacity .2s linear}}
/* the pinned sections kept a band at the top for a header that is now away: their words rise into it when it goes, and make room again as it returns (his note, 31 Oct: "ensure all sections are optimised") */
html.pin-on .how-pin > *{transition:transform 1.1s cubic-bezier(.3,.1,.2,1)}
html.pin-on.hd-away .how-pin > *{transform:translate3d(0,-1.5rem,0);transition:transform .7s cubic-bezier(.4,0,.6,1)}
@media(max-width:760px){html.pin-on.hd-away .how-pin > *{transform:translate3d(0,-1.75rem,0)}}
@media(prefers-reduced-motion:reduce){html.pin-on .how-pin > *{transition:none}}
.mo .hd-burger{transition:transform .6s cubic-bezier(.2,1.4,.4,1),background .3s ease,color .3s ease,border-color .3s ease,opacity .9s ease .25s}
html.hd-away.mo .hd-burger{opacity:0;transition:opacity .3s ease}
/* the header logo's hover flip, slower: between v4's .9s and v5's 1.8s (his note, 31 Oct: "somewhere between v5 and v6 in speed") */
/* it turns once and never back: the turn is played in site.js and always finishes (his note, 31 Oct: "it dosent need to flip back when we move off") */
.hd-mk img{transition:filter .3s ease}
@media(hover:hover){.hd-mk:hover img{transform:none}}



/* the section opens straight on the R, with no heading above it (his note, 31 Oct: "the text above the entire section aka the heading and subheading") */
#crowd .crowd-pin{grid-template-rows:minmax(0,1fr);padding-top:4rem}

/* every section's [0x] waits for its heading, [08] and [09] too, and what sits below a heading stays hidden until the heading is rising (his note, 31 Oct: "the [08] is out of sync with its heading ... nothing below this should be visible until the header has completely loaded or is loading") */
.mo .faq-c > .lab,.mo .faq-c > div > .lab{opacity:0}
.mo .h-wait{opacity:0!important;pointer-events:none}
.mo .h-body{transition:opacity .55s ease}

/* ---------- PAY MONTHLY / PAY ONCE, below all the cards and centred, clear of the side lines (his notes, 31 Oct: "the price switcher should be below all cards", "the button is touching the line"), in the Proof viewer's switcher look with equal halves and centred labels ("pay once button is not even shapped correctly"). "2 Months Free" shows only on Pay Once, beside it, without moving it. ---------- */
.mp-plan{position:relative;width:max-content;margin:1.75rem auto 0}
.mp-plan-s{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:.25rem;border:1px solid var(--line);border-radius:1.182rem;background:rgba(127,127,127,.06)}
.mp-plan-s::before{content:"";position:absolute;top:.25rem;bottom:.25rem;left:.25rem;width:calc(50% - .25rem);border-radius:.9375rem;background:rgba(56,182,255,.16);box-shadow:inset 0 0 0 1px rgba(56,182,255,.42),0 .25rem .625rem -.25rem rgba(0,0,0,.5);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.mp-plan[data-plan=once] .mp-plan-s::before{transform:translateX(100%)}
.mp-plan-s button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;min-width:9.5em;min-height:2.4rem;padding:0 1rem;text-align:center;white-space:nowrap;font-family:var(--mark);font-weight:600;font-size:.9rem;letter-spacing:-.005em;color:rgb(157,176,192);transition:color .25s ease}
.mp-plan-s button[aria-pressed=true]{color:var(--fg)}
@media(hover:hover){.mp-plan-s button[aria-pressed=false]:hover{color:var(--fg)}}
.mp-plan-s button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:.9375rem}
[data-theme=light] .mp-plan-s button{color:#4b5563}
[data-theme=light] .mp-plan-s button[aria-pressed=true]{color:#0a0a0a}
[data-theme=light] .mp-plan-s::before{box-shadow:inset 0 0 0 1px rgba(14,139,224,.55),0 .25rem .625rem -.25rem rgba(10,20,30,.25)}
.mp-plan-n{position:absolute;left:100%;top:50%;margin:0 0 0 1rem;transform:translateY(-50%);font-size:.9rem;font-weight:600;white-space:nowrap;color:var(--acc-t,var(--accent));opacity:0;transition:opacity .3s ease}
.mp-plan[data-plan=once] .mp-plan-n{opacity:1}
@media(prefers-reduced-motion:reduce){.mp-plan-s::before{transition:none}}
@media(max-width:760px){.mp-plan{width:auto;margin:1rem calc(var(--gut) + .75rem)}.mp-plan-s button{min-width:0;padding-inline:.25rem}.mp-plan-n{display:none;position:static;transform:none;margin:.6rem 0 0;text-align:center}.mp-plan[data-plan=once] .mp-plan-n{display:block}}

/* on Pay Once the switcher and "2 Months Free" slide together so all three sit centred as one group, and back again (his note, 31 Oct: "it pushes the 3 items ... to center with a clean transition and then back again"); --pw is the words' width, measured in site.js. The words fade in once the slide is under way, and out first on the way back. */
.mo .mp-plan.h-body,.mp-plan{transition:opacity .55s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.mp-plan[data-plan=once]{transform:translate3d(calc(var(--pw,0px) / -2),0,0)}
@media(max-width:760px){.mp-plan[data-plan=once]{transform:none}}
@media(prefers-reduced-motion:reduce){.mo .mp-plan.h-body,.mp-plan{transition:none}}

/* ---------- the two service cards sized to their prices: Website Rebuild on the left at two thirds ($150), Social Media Rework on the right at a third ($75), the same picture height so one reads as a phone and the other as a desktop (his note, 31 Oct: "75/225 is the social media rework size and 150 is the website ... reflect mobile vs desktop") ---------- */
@media(min-width:1000px){
  .mp-pick{grid-template-columns:minmax(0,2fr) minmax(0,1fr);container-type:inline-size}
  .mp-seam{left:calc((100% - .75rem) * 2 / 3 + .375rem)}
  .mp-pick[data-both] .mp-seam{left:66.6667%}
  .mp-pick .mp-media{aspect-ratio:auto;height:calc((66.6667cqw - 3.5rem) * .5)}
  .mp-pick .mp-ig{padding:5.5cqw 6cqw 0}
  .mp-pick .ig-hd{gap:5cqw}
  .mp-pick .ig-av{width:20cqw;height:20cqw}
  .mp-price{flex-wrap:wrap}
}

/* the monthly price reads "/ month", with the term under it (his note, 31 Oct: "/ month - is better . and find place to put 12 month term") */
.mp-price,.mp-total{align-items:baseline}
.mp-price i,.mp-total i{white-space:nowrap}
/* the term sits on the same line, lighter (his note, 31 Oct: "12 month term should be more greyed out or lighter, also on the same line") */
.mp-price i small,.mp-total i small{display:inline;margin-left:.5em;font-size:inherit;font-weight:inherit;color:var(--mute)}

/* ---------- ONE MOVE FOR EVERY SWITCHER (his note, 31 Oct: "the transition of the actual button moving ... is not clean, improve it and apply that fix to any other switchers"): the highlight and everything moving with it share one length and one curve, and the labels change colour inside that same move, so nothing arrives before anything else ---------- */
.mp-plan-s::before,#proof .pv-seg-service::before,#proof .pv-seg-state::before,#proof .pv-seg-device::before{will-change:transform;transition:transform .5s cubic-bezier(.32,.72,0,1),background .3s ease,box-shadow .3s ease}
.mo .mp-plan.h-body,.mp-plan{transition:opacity .55s ease,transform .5s cubic-bezier(.32,.72,0,1)}
.mp-plan-s button,#proof .pv-seg-service button,#proof .pv-seg-state button,#proof .pv-seg-device button{transition:color .3s ease .05s}
@media(prefers-reduced-motion:reduce){.mp-plan-s::before,#proof .pv-seg-service::before,#proof .pv-seg-state::before,#proof .pv-seg-device::before,.mo .mp-plan.h-body,.mp-plan{transition:none}}
/* room for "$25 / month" on one line in the order bar */
.mp-sv b{white-space:nowrap}
@media(min-width:1001px){.mp-bar{grid-template-columns:minmax(0,1fr) 6.5rem 7.5rem max-content 13rem}}

/* the Social card is as wide as its longest dot point, so no point folds and the two lists' rows line up (his note, 31 Oct: "increase the width of the social media rework card until the lines match up and theres no folding of the dot points"); the seam sits on the join whatever that width is; both pictures share one height and Instagram fills its box */
@media(min-width:1000px){
  .mp-pick{grid-template-columns:minmax(0,1fr) max-content}
  .mp-pick .mp-list span{white-space:nowrap}
  .mp-pick > .mp-tile:first-of-type{grid-area:1/1}
  .mp-pick > .mp-tile:last-of-type{grid-area:1/2}
  .mp-seam,.mp-pick[data-both] .mp-seam{position:relative;left:auto;top:auto;grid-area:1/2;justify-self:start;align-self:center;margin:0 0 0 -1.75rem}
  .mp-pick[data-both] .mp-seam{margin-left:-1.375rem}
  .mp-pick .mp-media{height:30cqw}
  .mp-pick .mp-ig{width:100%;min-width:0}
  .mp-pick .mp-ig .ig-grid{flex:1 1 auto;min-height:0}
}

/* Instagram's inset is set in its own terms: a page-wide unit here had left a black border round it */
@media(min-width:1000px){
  .mp-pick .mp-ig{padding:1.1rem 1.1rem 0}
  .mp-pick .mp-ig .ig-grid{margin:0 -1.1rem}
}

/* "2 Months Free" comes out from under the switcher and goes back the same way, in the switcher's own move: the words are masked at the switcher's edge, so they only exist once they have cleared it (his note, 31 Oct: "2 month free should appear from underneath the switcher ... its the only transition that makes sense"). On a phone they drop from under it. */
.mp-plan-n,.mp-plan[data-plan=once] .mp-plan-n{opacity:1;transition:none;margin:0;padding:.1em 0 .1em 1rem;overflow:hidden}
.mp-plan-n span{display:block;transform:translate3d(calc(-100% - 1rem),0,0);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.mp-plan[data-plan=once] .mp-plan-n span{transform:none}
@media(max-width:760px){
  .mp-plan-n,.mp-plan[data-plan=once] .mp-plan-n{display:block;padding:0;max-height:0;transition:max-height .5s cubic-bezier(.32,.72,0,1),margin-top .5s cubic-bezier(.32,.72,0,1)}
  .mp-plan[data-plan=once] .mp-plan-n{max-height:2rem;margin-top:.6rem}
  .mp-plan-n span{transform:translate3d(0,-110%,0)}
}
@media(prefers-reduced-motion:reduce){.mp-plan-n,.mp-plan[data-plan=once] .mp-plan-n,.mp-plan-n span{transition:none}}

/* the Proof pieces travel in from the sides without widening the page */
#proof{overflow-x:clip}


/* "2 Months Free" comes out slower, and the group's slide to centre with it (his note, 31 Oct: "slow down 2 months free transition"); "12 month term" steps back (his note: "more greyed out less focus") */
.mo .mp-plan.h-body,.mp-plan{transition:opacity .55s ease,transform .95s cubic-bezier(.32,.72,0,1)}
.mp-plan-n span{transition:transform .95s cubic-bezier(.32,.72,0,1)}
@media(max-width:760px){.mp-plan-n,.mp-plan[data-plan=once] .mp-plan-n{transition:max-height .95s cubic-bezier(.32,.72,0,1),margin-top .95s cubic-bezier(.32,.72,0,1)}}
@media(prefers-reduced-motion:reduce){.mo .mp-plan.h-body,.mp-plan,.mp-plan-n,.mp-plan[data-plan=once] .mp-plan-n,.mp-plan-n span{transition:none}}
.mp-price i small,.mp-total i small{font-size:.92em;color:rgba(255,255,255,.3)}

/* the slide itself eases in, rather than doing most of its travel at once */
.mo .mp-plan.h-body,.mp-plan{transition:opacity .55s ease,transform .9s cubic-bezier(.5,0,.15,1)}
.mp-plan-n span{transition:transform .9s cubic-bezier(.5,0,.15,1)}
@media(max-width:760px){.mp-plan-n,.mp-plan[data-plan=once] .mp-plan-n{transition:max-height .9s cubic-bezier(.5,0,.15,1),margin-top .9s cubic-bezier(.5,0,.15,1)}}
@media(prefers-reduced-motion:reduce){.mo .mp-plan.h-body,.mp-plan,.mp-plan-n,.mp-plan[data-plan=once] .mp-plan-n,.mp-plan-n span{transition:none}}

/* ---------- Pay Once, one smooth move (his notes, 1 Nov: "2 months free is a bit jumpy still its not smooth", "120hz not completely smooth on phone"): the highlight, the group and the words share one length and one curve, each on its own layer so the phone's compositor runs them; the group lands on a whole pixel; nothing changes layout, so the phone keeps the words' space reserved and the order bar's price column holds its width in both modes ---------- */
.mp-plan,.mp-plan-s::before,.mp-plan-n span{will-change:transform;backface-visibility:hidden}
.mo .mp-plan.h-body,.mp-plan{transition:opacity .55s ease,transform .8s cubic-bezier(.45,0,.2,1)}
.mp-plan-s::before{transition:transform .8s cubic-bezier(.45,0,.2,1)}
.mp-plan-n span{transition:transform .8s cubic-bezier(.45,0,.2,1)}
@media(max-width:760px){
  .mp-plan-n,.mp-plan[data-plan=once] .mp-plan-n{display:block;max-height:none;margin-top:.6rem;padding:0;transition:none}
  .mp-plan-n span{transform:translate3d(0,-110%,0)}
  .mp-plan[data-plan=once] .mp-plan-n span{transform:none}
}
@media(min-width:1001px){.mp-sum{min-width:14.5rem}}
@media(prefers-reduced-motion:reduce){.mo .mp-plan.h-body,.mp-plan,.mp-plan-s::before,.mp-plan-n span{transition:none}}

/* the order bar's price column holds the width of its longer monthly line, so the columns don't shift on the toggle */
@media(min-width:1200px){.mp-sum{min-width:15.7rem}}

/* on land "Your business is good." sits just under full white, clearly brighter than the faint line beside it; once the line is drawn it flickers like an old light and comes up full (his notes, 1 Nov: "it still needs to look different on land", "straight white ... still looks a little off") */
html.landing .hero-cp .cp-a{opacity:.72}
html.cp-flick .hero-cp .cp-a{animation:cpSheen 9s cubic-bezier(.45,0,.25,1) 2.4s infinite,cpFlick 1s linear 1 both}
@keyframes cpFlick{0%{opacity:.72}7%{opacity:1}11%{opacity:.5}19%{opacity:.5}23%{opacity:.95}30%{opacity:.58}44%{opacity:.58}48%{opacity:1}53%{opacity:.78}58%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){html.cp-flick .hero-cp .cp-a{animation:none}}

/* "Your website isn't." fainter on land, the same white at less strength (his note, 1 Nov: "less opacity more so, not neccessarily darker") */
.hero-cp .cp-x{color:rgba(255,255,255,.21);text-shadow:0 0 1px rgba(255,255,255,.13)}

.mp-price b,.mp-sv b{font-variant-numeric:tabular-nums lining-nums}

/* "/ month" and "AUD once" come out from under the figure and tuck back the same way, on the switcher's own move, as "2 Months Free" does (his note, 1 Nov: "/ month has to have the same animation as 2 months free") */
.u-s{display:inline-grid;justify-items:start;clip-path:inset(-.4em -2em -.5em 0)}
.u-s > span{grid-area:1/1;white-space:nowrap;will-change:transform;backface-visibility:hidden;transition:transform .8s cubic-bezier(.45,0,.2,1)}
.u-o,html.mp-once .u-m{transform:translate3d(calc(-100% - .6em),0,0)}
html.mp-once .u-o{transform:none}
.mp-sv b{display:inline-flex;align-items:baseline}
.u-w{display:inline-block;clip-path:inset(-.4em -2em -.5em 0);margin-left:.25em}
.u-w > span{display:inline-block;white-space:nowrap;will-change:transform;backface-visibility:hidden;transition:transform .8s cubic-bezier(.45,0,.2,1)}
html.mp-once .u-w > span{transform:translate3d(calc(-100% - .6em),0,0)}
@media(prefers-reduced-motion:reduce){.u-s > span,.u-w > span{transition:none}}

/* the two labels never cross: one tucks away in the first half of the move and the other comes out in the second; the price column holds room for the longest figure and label together */
.u-s > span{transition:transform .4s cubic-bezier(.55,0,.8,.4)}
html:not(.mp-once) .u-m,html.mp-once .u-o{transition:transform .44s cubic-bezier(.15,.6,.25,1) .36s}
@media(prefers-reduced-motion:reduce){.u-s > span,html:not(.mp-once) .u-m,html.mp-once .u-o{transition:none}}
@media(min-width:1001px){.mp-sum{min-width:17.5rem}}

/* the price column's held room, by layout: the row layout needs the longest figure and label; the two-row layout has its own column */
@media(min-width:1001px){.mp-sum{min-width:18rem}}
@media(min-width:761px) and (max-width:1099px){.mp-sum{min-width:16rem}}
@media(min-width:1001px) and (max-width:1099px){.mp-bar{grid-template-columns:auto auto minmax(0,1fr) auto}}

/* ---------- the whole toggle slowed to 1.2s (his notes, 1 Nov: "smoother smoother smoother", "slow them both down till you can get them seamless"). The figure's box takes its final room once at the start and the words beside it ride on a transform, so nothing re-lays out while they move. The old words tuck away in the first third; the new ones come out in the last part, once the figure has settled its digits ---------- */
.mo .mp-plan.h-body,.mp-plan{transition:opacity .55s ease,transform 1.2s cubic-bezier(.45,0,.2,1)}
.mp-plan-s::before,.mp-plan-n span,.u-w > span{transition:transform 1.2s cubic-bezier(.45,0,.2,1)}
.mp-price i,.mp-total i,.u-w{will-change:transform;backface-visibility:hidden}
.u-s > span{transition:transform .42s cubic-bezier(.37,0,.63,1)}
html:not(.mp-once) .u-m,html.mp-once .u-o{transition:transform .72s cubic-bezier(.22,.7,.3,1) .48s}
.mp-plan-s button{transition:color .6s ease .15s}
@media(prefers-reduced-motion:reduce){.mo .mp-plan.h-body,.mp-plan,.mp-plan-s::before,.mp-plan-n span,.u-w > span,.u-s > span,html:not(.mp-once) .u-m,html.mp-once .u-o{transition:none}}

/* Process as folding cards with the dot scene, and Who It's For as opening columns, brought from v4 (his note, 1 Nov: "process and whose it for is old on v6 and v7 what happened to our update?") */
/* ---------- PROCESS, THE FOLDING CARDS (motion.js 10b). Sizes are the page's: card titles and card text, nothing larger ---------- */
html.pin-on #how,#how{height:auto!important;padding-block:9rem 0}
.hs{position:relative;margin:5rem var(--gut) 0}
.hs-sp{height:60svh}
.hs-dots{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:5;pointer-events:none}
.hs-dots canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hs .how-prog,html.pin-on .hs .how-prog{display:block;position:absolute;left:0;right:0;bottom:1.25rem;margin:0;height:2px;background:var(--line);overflow:hidden}
.hc{position:sticky;top:0;height:100svh;display:flex;align-items:flex-end;background:var(--bg2);border:1px solid var(--line);transform-origin:50% 100%;overflow:hidden}
.hc-d{position:absolute;inset:0;z-index:3;background:#030303;opacity:0;pointer-events:none;text-decoration:none}
.hc-b{position:relative;z-index:2;width:min(30rem,100%);padding:clamp(1.25rem,2.4vw,2.25rem);padding-bottom:clamp(3rem,7svh,4rem)}
.hc-n{display:block;font-size:1rem;font-weight:600;color:var(--mute2);margin-bottom:.75rem}
.hc-b b{display:block;font-family:var(--head);font-weight:770;letter-spacing:-.04em;line-height:1.2;font-size:clamp(1.5rem,1.9vw,1.9rem)}
.hc-b p{font-size:.875rem;color:var(--mute2);margin-top:.75rem;line-height:1.55}
.hc-b small{display:flex;justify-content:space-between;margin-top:1.1rem;padding-top:.75rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--mute2)}
.hc-b small em{font-style:normal;color:var(--accent);font-weight:600}
@media(min-width:1100px){#how > .row{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}#how > .row > .lab{order:2;text-align:right}#how > .row > .rv{order:1;text-align:left;align-items:unsafe flex-start}}
@media(max-width:760px){html.pin-on #how,#how{padding-block:5.5rem 0}.hs{margin-top:3rem}.hc-b{width:100%}#how .row > .rv > h2 ~ p{display:block!important}}
/* ---------- WHO IT'S FOR, THE COLUMNS THAT OPEN (motion.js 6f) ---------- */
.wc{display:flex;gap:.6rem;height:clamp(22rem,52svh,34rem);margin:4rem var(--gut) 0}
.wc-c{position:relative;flex:1 1 0;min-width:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:.375rem;background:var(--bg2);text-align:left;color:var(--fg);transition:flex-grow .8s var(--e),border-color .4s ease;display:block}
.wc-c.on{flex-grow:7;border-color:rgba(255,255,255,.22)}
.wc-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:grayscale(1);transition:opacity .6s ease,filter .6s ease}
.wc-c.on img{opacity:1;filter:none}
.wc-c::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,5,.82),rgba(5,5,5,0) 55%);opacity:0;transition:opacity .5s ease;pointer-events:none}
.wc-c.on::after{opacity:1}
.wc-n{position:absolute;top:1rem;left:50%;z-index:1;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-size:.9375rem;font-weight:600;white-space:nowrap;color:var(--mute2);transition:opacity .3s ease}
.wc-c.on .wc-n{opacity:0}
.wc-b{position:absolute;left:1.5rem;bottom:1.5rem;z-index:2;width:max-content;max-width:min(26rem,70vw);opacity:0;transform:translateY(.75rem);transition:opacity .45s ease,transform .6s var(--e)}
.wc-c.on .wc-b{opacity:1;transform:none;transition-delay:.25s}
.wc-b b{display:block;font-family:var(--head);font-weight:770;letter-spacing:-.04em;line-height:1.2;font-size:clamp(1.5rem,1.9vw,1.9rem);color:#f8fafc}
.wc-b > span{display:block;margin-top:.4rem;font-size:.875rem;line-height:1.45;color:rgba(248,250,252,.82)}
.wc-any .wc-b{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);text-align:center;max-width:90%}
.wc-any.on .wc-b{transform:translate(-50%,-50%)}
.who-prog,html.pin-on .who-prog{display:block;margin:1.25rem var(--gut) 0;height:2px;background:var(--line);overflow:hidden}
html.pin-on #services{height:calc(8 * 48vh + 100svh);padding:0}
html.pin-on .who-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:5rem 0 2rem}
@media(max-width:760px){
  html.pin-on .who-pin{justify-content:flex-start;padding:5rem 0 1rem}
  html.pin-on #services{height:calc(8 * 42vh + 100svh)}
  .who-prog,html.pin-on .who-prog{margin-top:.75rem}
}

.hc-d{display:none}

/* the cards hold below the nav bar, never under it (his note, 31 Oct: "cards are also touching past the nav bar?") */
.hc{top:4.5rem;height:calc(100svh - 5.5rem)}
.hs .how-prog,html.pin-on .hs .how-prog{bottom:1.75rem;left:1px;right:1px}
.hc-b{padding-bottom:clamp(3rem,7svh,4rem)}


/* ---------- PROCESS, cleaned up (his notes, 1 Nov: "blur at bottom", "the information in bottom left isnt ideal", "the background for the card needs some texture maybe the grids from background ... and static", "the spillover between cards is quite evident"). The words sit on the card's middle, level with the drawing; each card carries the page's grid and static; cards don't tilt or shrink, and each new card's top edge melts into the one under it, so there is no seam to spill over ---------- */
.hc{align-items:center;background-color:var(--bg2);background-image:var(--grainUrl,none),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M48 43v10M43 48h10' stroke='%23fff' stroke-opacity='.12' stroke-width='1'/%3E%3C/svg%3E"),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:256px 256px,6rem 6rem,6rem 6rem,6rem 6rem,1.5rem 1.5rem,1.5rem 1.5rem;background-position:0 0,-3rem -3rem,0 0,0 0,0 0,0 0}
.hc:not(:first-of-type){border-top-color:transparent;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7rem);mask-image:linear-gradient(180deg,transparent 0,#000 7rem)}
.hc-b{padding-block:clamp(1.25rem,2.4vw,2.25rem)}
@media(max-width:760px){.hc{align-items:flex-end;background-size:256px 256px,4rem 4rem,4rem 4rem,4rem 4rem,1rem 1rem,1rem 1rem;background-position:0 0,-2rem -2rem,0 0,0 0,0 0,0 0}.hc-b{padding-bottom:3.5rem}}
/* Who It's For: the open card bigger, the others narrower (his note, 1 Nov: "can we make the active card bigger and other cards smaller") */
@media(min-width:761px){.wc-c.on{flex-grow:14}}

/* Who It's For, last card: the same line as "Something more complex? Let's Talk" (his note, 1 Nov) */
.wc-more{display:block;white-space:nowrap;font-size:.9375rem;font-weight:600;color:var(--mute)}
.wc-more .go{margin-left:.5rem;color:var(--fg);font-style:normal;font-size:.9375rem}
@media(min-width:761px){a.wc-any{display:block}}
a.wc-any{text-decoration:none;color:inherit}
@media(hover:hover){a.wc-any:hover .go{color:var(--accent);background-size:100% 1px}}
/* FAQ: the open question's marker in the brand blue, with a fine blue line under it (his note, 1 Nov: "FAQ needs element of brand blue") */
.q button i{font-size:1.35rem;line-height:1;transition:transform .4s var(--e),color .3s ease}
.q.on button i{color:var(--accent)}
@media(hover:hover){.q button:hover i{color:var(--accent)}}
.q{position:relative}
.q::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e);pointer-events:none}
.q.on::after{transform:none}
/* ---------- READY FOR THE UPGRADE: the page's one form, made the thing you can't miss (his note, 1 Nov: "its a CTA and lead capture form the most important on the site"): a point of blue light runs round its edge like the planets on the rings, the panel carries the grid and static, a blue glow lifts it off the page, "upgrade?" takes the blue, and the button is bigger ---------- */
@property --ob{syntax:'<angle>';inherits:false;initial-value:0deg}
.up-f.cb{position:relative;padding:clamp(1.5rem,2.6vw,2.5rem);border-color:rgba(56,182,255,.38);background-color:var(--bg2);background-image:var(--grainUrl,none),linear-gradient(rgba(56,182,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(56,182,255,.05) 1px,transparent 1px);background-size:256px 256px,1.5rem 1.5rem,1.5rem 1.5rem;box-shadow:0 2.5rem 7rem -2rem rgba(56,182,255,.3),0 0 0 .5rem rgba(56,182,255,.045)}
.up-f.cb::before{content:"";position:absolute;inset:-1px;z-index:1;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--ob),transparent 0 66%,rgba(56,182,255,.15) 76%,#38B6FF 93%,#fff 97.5%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:obRun 7s linear infinite}
@keyframes obRun{to{--ob:360deg}}
.up-f .cb-r{position:relative;z-index:2}
.up-f button.up-go{height:3.6rem;font-size:1.0625rem;box-shadow:0 .75rem 2.25rem -.5rem rgba(56,182,255,.6)}
.up-blue{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.up-f.cb::before{animation:none}}

/* the blur stays on; these sections' words and lines sit clear above it instead */
.hs .how-prog,html.pin-on .hs .how-prog{bottom:auto;top:4.5rem;left:1px;right:1px}
html.pin-on .who-pin{padding:4.5rem 0 clamp(5.5rem,14svh,9rem)}
.wc{height:clamp(22rem,50svh,34rem)}
@media(max-width:760px){.hc-b{padding-bottom:clamp(5.5rem,13svh,7rem)}html.pin-on .who-pin{padding:5rem 0 1rem}.hs .how-prog,html.pin-on .hs .how-prog{top:4.5rem}}

/* ---------- PROCESS (his note, 1 Nov: "the process cards grids are way to prominent", "i want the folding cards still there"): the grid down to a whisper, the cards fold back again with crisp edges, and the last card holds long enough for the R ---------- */
.hc{background-image:var(--grainUrl,none),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M48 43v10M43 48h10' stroke='%23fff' stroke-opacity='.045' stroke-width='1'/%3E%3C/svg%3E"),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.006) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.006) 1px,transparent 1px);transform-origin:50% 100%}
.hc:not(:first-of-type){border-top-color:var(--line);-webkit-mask-image:none;mask-image:none}
.hs-sp{height:95svh}

/* the last card leaves softly: its foot melts into the page, with no hard line and no section rule across the screen (his note, 1 Nov: "on the 4th card it dosent need to be this harsh") */
.hc:last-of-type{border-bottom-color:transparent;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 9rem),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 9rem),transparent)}
#services{border-top-color:transparent}
/* Who It's For: each photo keeps one size and the column opens over it like a window, so nothing zooms as you scroll (his note, 1 Nov: "each photo zooms and its quite harsh") */
@media(min-width:761px){
  .wc{container-type:inline-size}
  .wc-c{transition:flex-grow 1.1s cubic-bezier(.45,0,.2,1),border-color .6s ease}
  .wc-c img{left:50%;right:auto;width:calc((100cqw - 4.8rem) * 14 / 22);max-width:none;transform:translateX(-50%);transition:opacity .9s ease,filter .9s ease;will-change:opacity}
}

/* Ready for the upgrade: just the glowing border (his note, 1 Nov: "too much on ready for the upgrade, the glow border is probably enough") */
.up-f.cb{padding:1.5rem;background-image:none;box-shadow:0 2rem 6rem -2.5rem rgba(56,182,255,.32)}
.up-f button.up-go{height:3rem;font-size:inherit;box-shadow:none}
.up-blue{color:inherit}

/* the top edge of the card is the progress line itself: no track of its own, just the blue running along the edge (his note, 1 Nov: "use top edge of card 1 for the same thing") */
.hs .how-prog,html.pin-on .hs .how-prog{left:0;right:0;height:1px;margin:0;background:transparent;overflow:visible}
.hs .how-prog i{height:1px}

/* the progress is part of each card, on its own top edge, so it goes wherever that card goes: rising, tipping back, covered by the next. The old separate line is gone (his note, 1 Nov: "the progress line isnt solved yet") */
.hs .how-prog,html.pin-on .hs .how-prog{display:none}
.hc-pl{position:absolute;left:0;right:0;top:0;height:1px;z-index:4;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* card 1 holds once it has landed, long enough to form its drawing the same way the others change (his note, 1 Nov: "on card 1 it dosent really form the same way it disappears, it just slides up") */
.hs > article.hc:nth-of-type(2){margin-top:60svh}

/* the light round the form rests while it is being filled in (his note, 1 Nov) */
.up-f.cb:focus-within::before{animation-play-state:paused}
/* FAQ: the blue line above the open question (his note, 1 Nov: "should be above not below") */
.q::after{top:-1px;bottom:auto}
/* Who It's For: the last closed column is just a + (his note, 1 Nov: "just have + here") */
.wc-any .wc-n{font-size:1.5rem;font-weight:400;line-height:1}

/* filling in the form: the light fades out rather than freezing in one spot, and fades back and carries on when you leave (his note, 1 Nov) */
.up-f.cb::before{transition:opacity .7s ease}
.up-f.cb:focus-within::before{opacity:0;transition:opacity .45s ease,animation-play-state 0s .45s}

/* FAQ: every question is underlined once, with nothing along the top, and the open one's underline runs blue (his note, 1 Nov: "maybe underline bottom of faq instead of both top and bottom") */
.q,.q:first-child,.qs{border-top:0}
.q{border-bottom:1px solid var(--line)}
.q::after{top:auto;bottom:-1px}

/* Who It's For: the last card holds for longer, so a scroll can't run straight past it (his note, 1 Nov: "the didnt see yours card needs to have an extended scroll") */
html.pin-on #services{height:calc(8 * 48vh + 80vh + 100svh)}
@media(max-width:760px){html.pin-on #services{height:calc(8 * 42vh + 70vh + 100svh)}}
/* What Every Build Includes: five matching cards, two even lines each on a laptop (his note, 2 Nov: "test different box sizes ... and match"; sizes tried 17.5, 21, 23, 26rem); site.js sets the one height */
@media(min-width:761px){.dl-c{width:min(26rem,30vw)}.dl-c p{text-wrap:balance}}
@media(min-width:761px) and (max-width:1200px){.dl-c{width:28vw}}

/* Who It's For on a phone: the same columns as the laptop, the open one holding its photo and the rest slim with their names running up them (his note, 2 Nov: "not a good version of the laptop version i dont like a grid of 9 industries") */
@media(max-width:760px){
  .wc{--cw:1.375rem;--gp:.1875rem;--op:calc(100cqw - 8 * (var(--cw) + var(--gp)));container-type:inline-size;gap:var(--gp);height:24rem;margin-top:1.25rem}
  html.pin-on .who-pin .wc{flex:1 1 0;min-height:0;height:auto}
  html.pin-on .who-pin{height:100svh}
  .wc-c{flex:0 0 var(--cw);transition:flex-grow .9s cubic-bezier(.45,0,.2,1),border-color .6s ease;border-radius:.25rem}
  .wc-c.on{flex:1 0 var(--cw)}
  .wc-c img{left:50%;right:auto;width:var(--op);max-width:none;transform:translateX(-50%);transition:opacity .7s ease,filter .7s ease}
  /* the narrow column looks at the people in the photo: the linemen, the pour, the face */
  .wc-c:nth-child(1) img{object-position:29% 50%}.wc-c:nth-child(4) img{object-position:7% 50%}.wc-c:nth-child(6) img{object-position:84% 50%}
  .wc-n{top:.625rem;font-size:.75rem}
  .wc-b{left:.75rem;bottom:.75rem;width:calc(var(--op) - 1.5rem);max-width:none}
  .wc-b b{font-size:1.25rem}
  .wc-b > span{font-size:.8125rem;line-height:1.35}
  .wc-any .wc-n{font-size:1.25rem;top:.5rem}
  .wc-any .wc-b,.wc-any.on .wc-b{left:50%;top:50%;bottom:auto;width:calc(var(--op) - 1.5rem);max-width:none;transform:translate(-50%,-50%)}
  .wc-more{white-space:normal;text-align:center;font-size:.875rem}
  .wc-more .go{display:block;margin:.375rem 0 0;font-size:.875rem}
}
/* a phone on its side: words on the left and the drawing on the right, as on a laptop, because there is no room to stack them */
@media(max-width:760px) and (max-height:499px){.hc{align-items:center}.hc-b{width:52%;padding-block:1rem}}