/* Shopify Development, built from Python Development (page-python-development.css?v=5, October 13, 2026), itself built from Node.js,
   React & Next.js and WordPress Development and Pricing, which carry Web & App Development v2's shared part with the fixes from both
   audits: its shell, header strip, hero base, buttons, email form, reveal, hover icons, client wall and responsive rules are carried
   over unchanged, prefix renamed pyd- to shp-. The page's own sections follow the stack template
   (prompts/stack-service-page-template-prompt.md) */


@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec-webfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_medium-webfont.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_bold-webfont.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- page shell: white header strip, then the page ---------- */
body.v9-page .top-wrap{background-color:#fff;background-image:none}
body.v9-page .top-wrap-inner{background:none;min-height:0;padding-bottom:0}
body.v9-page .top-wrap::after,body.v9-page .top-wrap::before{display:none}
body.v9-page .content-area{padding:0}
body.v9-page .logo-white{display:none}
body.v9-page .logo-dark{display:block}
body.v9-page .menu_trigger{color:#232834}
body.v9-page .slicknav_icon-bar{background-color:#232834}
body.v9-page .header-wide{margin-bottom:0;padding-bottom:0}
body.v9-page .header{margin-bottom:0;padding-top:14px;padding-bottom:14px}
/* the site's menu button is 33px wide: its tap area is widened to 44px towards the page, with nothing moving */
body.v9-page .menu_trigger::after{content:"";position:absolute;top:-3px;bottom:-3px;left:-11px;right:0}
/* header, right side, as the reference reads: a quiet help link, then the icons (the menu's search and the menu), then the
   call button last, at the edge. The logo side is the site's own, set smaller. The row runs the full width of the window,
   and is a flex line centred on the logo; the menu's injected search button (.wbm_search) and the menu button drop their
   float offsets here. The link goes under 700px and the button under 521px, where the hero's form sits just below */
body.v9-page .header .logo{width:118px;max-width:none}
@media (max-width:765px){body.v9-page .header .logo{width:108px}}
body.v9-page .header{display:flex;align-items:center;max-width:none}
@media (min-width:1025px){body.v9-page .header{padding-left:40px!important;padding-right:40px!important}}
@media (min-width:1280px){body.v9-page .header{padding-left:56px!important;padding-right:56px!important}}
body.v9-page .header::after,body.v9-page .header-right::after{display:none}
body.v9-page .header-right{float:none;display:flex;align-items:center;gap:6px;margin-left:auto;padding:0}
body.v9-page .hp-hd{order:1;display:flex;align-items:center;gap:14px;margin-right:14px}
body.v9-page .hp-hd-sep{display:block;width:1px;height:14px;background:#C2C5CC}
body.v9-page .hp-hd-l{display:inline-flex;align-items:center;min-height:44px;font-family:'Sailec',sans-serif;font-weight:500;font-size:13.5px;line-height:1.2;color:#4f5565;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s cubic-bezier(.65,0,.35,1),text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .hp-hd-l:hover,body.v9-page .hp-hd-l:focus-visible{color:#232834;text-decoration-color:#232834}
/* the menu's injected search is not shown in this header: search stays inside the menu itself */
body.v9-page .header .wbm_search{display:none}
body.v9-page .wbm_search{order:2;float:none;width:44px;height:44px;margin:0;color:#4f5565;transition:color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .wbm_search svg{top:50%;width:20px;height:20px;transform:translate(-50%,-50%);stroke-width:1.9}
body.v9-page .wbm_search:hover{color:#232834}
body.v9-page .hp-hd-cta{order:4;height:40px;margin-left:18px;padding:0 16px 0 20px;gap:4px;font-family:'Sailec',sans-serif;font-size:14.5px}
body.v9-page a.hp-hd-cta,body.v9-page a.hp-hd-cta:hover,body.v9-page a.hp-hd-cta:visited{color:#fff;text-decoration:none}
body.v9-page .hp-hd-cta::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
body.v9-page .hp-hd-cta svg.arr{display:block;flex:none;width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){body.v9-page .hp-hd-cta:hover svg.arr{transform:translateX(2px)}}
body.v9-page .menu_trigger{order:3;float:none;height:38px;margin:0 0 0 8px}
/* the menu's three bars are drawn a little smaller here, scaled about their own centre so they stay level with the row */
body.v9-page .menu_trigger .slicknav_icon{transform-origin:100% 19px;scale:.82}
body.v9-page .hp-hd-l:focus-visible,body.v9-page .wbm_search:focus-visible,body.v9-page .hp-hd-cta:focus-visible,body.v9-page .menu_trigger:focus-visible{outline:2px solid #232834;outline-offset:3px}
@media (max-width:699px){body.v9-page .hp-hd{display:none}}
@media (max-width:520px){body.v9-page .hp-hd-cta{display:none}}
@media (prefers-reduced-motion:reduce){body.v9-page .hp-hd-cta svg.arr{transition:none}}
/* the dark menu marks the current page by file name only in its page list, which doesn't include this page. The menu stays
   as it is for now, and this page has no route or tile in it, so markMenu() marks nothing; these rules stay with the shared call */
body.v9-page #wb_menu .rt[aria-current="page"] b,body.v9-page #wb_menu .tile[aria-current="page"] b{color:#FA5478}
body.v9-page #wb_menu .rt[aria-current="page"] b::after,body.v9-page #wb_menu .tile[aria-current="page"] b::after{content:'';display:inline-block;width:7px;height:7px;margin-left:12px;border-radius:50%;background:#FA5478;vertical-align:middle}

/* ---------- base ---------- */
.v9{font-family:Sailec,Helvetica,Arial,sans-serif;font-weight:500;color:#232834;-webkit-font-smoothing:antialiased;text-wrap:pretty}
.v9 *{box-sizing:border-box}
.v9 :where(h1,h2,h3,p,ul,ol,li){margin:0;padding:0;background:none;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;text-align:left;font-weight:inherit}
.v9 :where(ul,ol,li){list-style:none}
.v9 :where(li)::marker{content:""}
.v9 a{color:inherit;text-decoration:none}
.v9 a:hover{color:#d33d5c}
.v9 svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the page runs a little wider than the sister pages (1360px, not 1240px), but narrower than the header, which spans the
   window: from 1280px the side space is 56px, so on wider screens the content sits inset from the logo and the call button */
.v9-wrap{max-width:1360px;margin:0 auto;padding:0 40px;position:relative}
@media (min-width:1280px){.v9-wrap{padding:0 56px}}
.v9-eyebrow{display:block;font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c;margin:0 0 14px}
.v9-h2{font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.03em}
.v9-sec{padding:88px 0}
.v9-bone{background:#F1EEEA}
.v9-head{margin-bottom:48px}
.v9-head .v9-sub{margin:18px 0 0;max-width:640px;font-size:18px;line-height:1.6;color:#4f5565}

/* ---------- reveal: sections ease in once as they reach the viewport ---------- */
.v9-rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.v9-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v9-rv{opacity:1;transform:none;transition:none}}

/* ---------- hero: copy on the left, the animation on the right ---------- */
.v9-hero{background:#fff;color:#232834;padding:24px 0 64px}
.v9-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.v9-hero h1{font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1.1;letter-spacing:-.03em;margin:0 0 24px}
.v9-hero .v9-lead{font-size:18px;line-height:1.65;color:#3a3f4b;max-width:520px;margin:0 0 36px}
.v9-hero .v9-lead b{font-weight:700;color:#232834}
/* the one marked word: coral type on a blush marker that sweeps in once */
.v9-hl{position:relative;z-index:0;color:#d33d5c;white-space:nowrap}
.v9-hl::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.09em;top:.32em;bottom:.12em;background:#FDE0E6;border-radius:.06em .18em .08em .2em;transform:rotate(-1deg);transform-origin:left center;animation:v9Hl .9s cubic-bezier(.65,0,.35,1) .35s both}
@keyframes v9Hl{from{transform:rotate(-1deg) scaleX(0)}to{transform:rotate(-1deg) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.v9-hl::before{animation:none}}
.v9-hero-form{display:flex;flex-wrap:nowrap;gap:10px}
.v9-hero-email{flex:0 1 262px;width:262px;min-width:0;height:48px;padding:0 22px;border:1.5px solid #CFC9C1;border-radius:24px;background:#fff;font:inherit;font-size:16px;color:#232834;outline:0;transition:border-color .2s,box-shadow .2s}
.v9-hero-email::placeholder{color:#6b7180}
.v9-hero-email:focus{border-color:#232834;box-shadow:none}
.v9-hero-go{flex:none;width:178px;height:48px;padding:0;border-radius:24px;font-family:inherit;font-size:16px}
@media (max-width:480px){.v9-hero-form{flex-wrap:wrap}.v9-hero-email,.v9-hero-go,.em-email{flex:1 1 100%;width:100%}}
.v9-illo{position:relative;width:100%;max-width:720px;margin:0 auto;aspect-ratio:1920/1805;pointer-events:none}
.v9-illo-art{position:absolute;inset:0}
.v9-illo-art svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
/* the hero swaps files by laying the next over the last: each pass has its own box, stacked in one place */
.shp-hero .v9-illo-art > div{position:absolute;inset:0}
@media (min-width:1101px){
.v9-illo{max-width:none;width:112%;margin:-24px -6% -4% -6%;transform:translateY(-7%)}
.v9-hero .v9-hero-grid{grid-template-columns:minmax(452px,5.2fr) minmax(0,6.8fr);gap:48px}
.v9-hero h1{font-size:clamp(44px,4.2vw,60px);margin-bottom:24px}
.v9-hero .v9-lead{max-width:480px}
}

/* ---------- buttons: a coral pill that lifts on hover onto a soft blush step ---------- */
.v9-btn{--btn-step:#FBC0CC;--btn-ease:cubic-bezier(.5,2.5,.7,.7);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 26px;border:1px solid transparent;border-radius:9999px;background:#FA5478;color:#fff;font-family:inherit;font-weight:700;font-size:15px;line-height:20px;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 0 0 0 var(--btn-step);transition-property:transform,translate,box-shadow;transition-duration:150ms;transition-timing-function:var(--btn-ease)}
.v9 a.v9-btn,.v9 a.v9-btn:hover,.v9 a.v9-btn:visited,.v9 button.v9-btn{color:#fff}
.v9-btn::before{content:"";position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;background:transparent}
.v9 .v9-btn svg.arr{display:block;flex-shrink:0;width:14px;height:14px;margin-left:6px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){
.v9-btn:hover{translate:0 -5px;box-shadow:0 5px 0 0 var(--btn-step)}
.v9-btn:hover::before{transform:scaleY(1.4)}
.v9 .v9-btn:hover svg.arr{transform:translateX(2px)}
}
.v9-btn:active{translate:0 -3px;box-shadow:0 3px 0 0 var(--btn-step)}
.v9-btn:focus-visible{outline:2px solid #232834;outline-offset:2px}
.v9-btn:disabled{pointer-events:none;opacity:.5}
.v9-btn.v9-btn-ghost{--btn-step:#E4DFD9;background:#fff;border-color:#232834}
.v9 a.v9-btn.v9-btn-ghost,.v9 a.v9-btn.v9-btn-ghost:hover,.v9 a.v9-btn.v9-btn-ghost:visited{color:#232834}
.v9-hero-go{padding:0;font-size:16px}
@media (prefers-reduced-motion:reduce){.v9-btn,.v9 .v9-btn svg.arr{transition:none}.v9-btn:hover,.v9-btn:active{translate:none}}
.em-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.em-center .v9-h2{text-align:center;max-width:760px}
.em-center .v9-sub{text-align:center;max-width:560px;margin:18px auto 34px;font-size:18px;line-height:1.6;color:#4f5565}
/* ---------- closing: the hero's email and call button, centred ---------- */
.em-cta{border-top:1px solid #E4DFD9;padding-bottom:104px}
.em-cta .v9-sub{margin-bottom:30px}
.em-cta .v9-hero-form{justify-content:center}
.em-cta .em-talk{justify-items:center}
.em-cta .em-status{align-self:stretch;width:100%;max-width:534px;margin-left:auto;margin-right:auto;text-align:left}
@media (max-width:820px){.em-cta .em-status{max-width:560px}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- email and call: a valid email shows a check in the field; on send the button narrows to a spinner,
   then the form fades away and a thank-you settles in its place ---------- */
.em-talk{display:grid}
.em-talk>*{grid-area:1/1}
.em-email{position:relative;flex:0 1 262px;width:262px;min-width:0}
.em-email .v9-hero-email{width:100%;padding-right:52px;transition:border-color .35s cubic-bezier(.65,0,.35,1)}
.em-email-check{position:absolute;top:50%;right:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#FDE0E6;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.v9 .em-email-check svg{width:15px;height:15px;stroke:#d33d5c;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.em-demo.sending .em-email-check,.em-talk.done .em-email-check{transform:scale(1)}
.em-demo.sending .v9-hero-email,.em-talk.done .v9-hero-email{border-color:#FA5478}
.em-email .v9-hero-email:not(:placeholder-shown):valid{border-color:#FA5478}
.em-email .v9-hero-email:not(:placeholder-shown):valid ~ .em-email-check{transform:scale(1)}
.em-email .v9-hero-email.bad{border-color:#d33d5c}
.v9 .v9-btn .em-spin{display:none;width:20px;height:20px;margin-right:10px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;animation:emSpin .8s linear infinite}
.em-demo .v9-btn{transition-property:transform,translate,box-shadow,background-color,width;transition-duration:150ms,150ms,150ms,.35s,.5s;transition-timing-function:var(--btn-ease),var(--btn-ease),var(--btn-ease),cubic-bezier(.65,0,.35,1),cubic-bezier(.65,0,.35,1)}
.em-demo.sending .v9-btn,.em-talk.done .v9-btn{width:100px;background:#FCA3B6}
.em-demo.sending .em-btn-lbl,.em-talk.done .em-btn-lbl{display:none}
.v9 .em-demo.sending .em-spin,.v9 .em-talk.done .em-spin{display:block}
.em-demo.sending .v9-btn:disabled{opacity:1}
.em-demo.sending .v9-btn:hover{translate:none;box-shadow:none}
@keyframes emSpin{to{transform:rotate(360deg)}}
.em-demo{transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1)}
.em-talk.done .em-demo{opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1),visibility 0s linear .55s}
.em-talk-done{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;font-size:16px;line-height:1.5;color:#232834;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1),visibility 0s linear .6s}
.em-talk.done .em-talk-done{opacity:1;visibility:visible;transform:none;transition:opacity .55s cubic-bezier(.65,0,.35,1) .3s,transform .65s cubic-bezier(.65,0,.35,1) .3s,visibility 0s}
.em-talk-ic{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#FA5478}
.v9 .em-talk-ic svg{width:14px;height:14px;stroke:#fff;stroke-width:2.6;fill:none}
.em-status{min-height:22px;margin:12px 0 0;font-size:14px;line-height:1.5;color:#c62d4f}
@media (prefers-reduced-motion:reduce){.em-email-check,.em-demo,.em-talk.done .em-demo,.em-talk-done,.em-talk.done .em-talk-done{transition:none}.v9 .v9-btn .em-spin{animation-duration:2.4s}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
.v9-hero-grid{grid-template-columns:minmax(0,1fr)}
.v9-hero .v9-lead{max-width:620px}
}
@media (max-width:820px){
.v9-wrap{padding:0 22px}
.v9-sec{padding:64px 0}
.v9-hero{padding:20px 0 48px}
}

/* ---------- text links (the prompt's section 8): #d33d5c (4.6:1 on white), underlined on hover and focus, with an arrow that
   steps forward; inside a paragraph they're underlined at all times. Never on the bone band, where #d33d5c is 4.0:1 ---------- */
.v9 .shp-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;font-weight:700;font-size:17px;line-height:1.3;color:#d33d5c;text-decoration:none}
.shp-go-l{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
.shp-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.v9 .shp-go:hover,.v9 .shp-go:focus-visible{color:#d33d5c}
.shp-go:hover .shp-go-l,.shp-go:focus-visible .shp-go-l{text-decoration-color:currentColor}
@media (hover:hover){.shp-go:hover .shp-go-a{transform:translateX(3px)}}
.v9 .shp-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.shp-go-l,.shp-go-a{transition:none}}

/* ---------- hover icons, as on the AI Chatbots page: ink outline over a white body, warm shade for depth, and one coral part
   that arrives once, in one direction, with its section. A hover Lottie sits exactly over each icon; its first frame is the
   icon, so the swap on first hover is invisible ---------- */
.cb-ic-box{grid-row:1/3;position:relative;display:block;width:72px;height:72px;margin:-6px 0 0 -4px}
.v9 svg.cb-ic{width:100%;height:100%;overflow:visible;fill:none;stroke:#232834;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}
.cb-ic-lt{position:absolute;inset:0;display:block;pointer-events:none;visibility:hidden}
.cb-ic-lt svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.cb-ic-box.lt-on .cb-ic-lt{visibility:visible}
.cb-ic-box.lt-on svg.cb-ic{visibility:hidden}
.cb-ic *{vector-effect:non-scaling-stroke}
.cb-ic .w{fill:#fff}
.cb-ic .s{fill:#E4DFD9;stroke:none}
.cb-ic .so{fill:#E4DFD9}
.cb-ic .tn{fill:#C2C5CC;stroke:none}
.cb-ic .wn{fill:#fff;stroke:none}
.cb-ic .c{fill:#FA5478;stroke:#C43A5C}
.cb-ic .dc{stroke:#C43A5C}
.cb-ic .ik{fill:#232834;stroke:none}
.cb-ic .tk{stroke:#C2C5CC}
.cb-ic .a{transform-box:fill-box;opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1) var(--d),opacity .5s cubic-bezier(.65,0,.35,1) var(--d)}
.v9-rv.in .cb-ic .a{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cb-ic .a{opacity:1;transform:none;transition:none}}

/* ---------- clients: a wall of twelve cells; one cell swaps its logo at a time (out, then in), the rest hold still ---------- */
.ai-clients{border-top:1px solid #E4DFD9}
.ai-clients-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 56px;flex-wrap:wrap;margin-bottom:44px}
.ai-clients-head .v9-sub{margin:0;max-width:420px;font-size:17px;line-height:1.6;color:#4f5565}
.ai-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid #E4DFD9;border-left:1px solid #E4DFD9}
.ai-lg{position:relative;height:120px;border-right:1px solid #E4DFD9;border-bottom:1px solid #E4DFD9;overflow:hidden}
.ai-lg img{position:absolute;inset:0;margin:auto;display:block;width:min(170px,90%);height:auto;filter:grayscale(1) opacity(.62);opacity:0;transition:opacity .9s cubic-bezier(.65,0,.35,1),filter .3s ease}
.ai-lg img.on{opacity:1}
@media (hover:hover){.ai-lg:hover img{filter:none}}
@media (max-width:820px){.ai-wall{grid-template-columns:repeat(3,minmax(0,1fr))}.ai-lg{height:96px}.ai-clients-head{margin-bottom:32px}}
@media (prefers-reduced-motion:reduce){.ai-lg img{transition:none}}
/* this page's heading and line sit centred over the wall; the heading is balanced so no line holds one word alone */
.shp-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.shp-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.shp-clients-head .v9-sub{margin:0;max-width:520px;font-size:18px;line-height:1.6;color:#4f5565;text-align:center;text-wrap:balance}
@media (max-width:820px){.shp-clients-head{margin-bottom:32px}}
@media (max-width:560px){.shp-clients-head .v9-sub{font-size:17px}}

/* ---------- the email form from 821px up: the field and the button share one row at the same width and height, 262px
   each ("Book a 20-minute call" needs 255px). The button keeps that width while sending, so nothing shifts; a closing
   form centres the pair ---------- */
@media (min-width:821px){
.v9 .em-talk .v9-hero-form{display:grid;grid-template-columns:repeat(2,262px);gap:10px;justify-content:start}
.v9.em-cta .em-talk .v9-hero-form{justify-content:center}
.v9 .em-talk .v9-hero-form .em-email,.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{width:100%;min-width:0}
.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{padding:0 16px}
}
/* ---------- the email form on phones and small tablets: the field and the button are always the same size. Up to 560px
   they stack at the full width; from 561px to 820px they share one row in equal halves, 560px at most. The button keeps
   its size while sending, so the pair never shifts, and the closing form stays centred ---------- */
@media (max-width:820px){
.v9 .em-talk{justify-items:stretch}
.v9.em-cta .em-talk{width:100%;max-width:560px}
.v9.em-cta .em-talk-done{justify-content:center}
.v9 .em-talk .v9-hero-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:560px}
.v9 .em-talk .v9-hero-form .em-email,.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{width:100%;min-width:0}
.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{padding:0 16px}
}
@media (max-width:560px){
.v9 .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr)}
}

/* ================= SHOPIFY DEVELOPMENT (this page's own) ================= */

/* ---------- the hero: the eyebrow, then a headline that holds two lines at every width. Each option sets --shp-em on its own h1:
   its longer line's width in em, in Sailec Bold at -.03em, measured on the woff2 with FontFace on a canvas (October 13, 2026; the
   method gives Python Development's 10.698 and 8.698 to the third decimal). A "around how you sell" 9.099 ("Shopify stores built"
   8.937), B "Shopify stores that grow" 11.262 ("without the rework" 8.694), C "every part in its place" 9.692 ("Shopify stores with"
   8.88). Up to 1100px the size follows the viewport, so that line takes 91%
   of the column at most, 56px at the largest; from 1101px, in the 560px copy column, it is 510px at most. The form is sized as
   CLAUDE.md sets it for heroes: "Book a call" at 172px beside a 262px field, stacked at full width on phones ---------- */
/* fixed line heights keep the hero still as Sailec swaps in (1.48 is Sailec's own normal) */
.v9-hero.shp-hero .v9-eyebrow{line-height:1.48}
.v9-hero.shp-hero .v9-lead :is(b,strong){line-height:1}
.v9-hero.shp-hero h1{font-size:min(56px,calc((100vw - 44px) / (var(--shp-em,9.099) * 1.094)))}
@media (min-width:821px){.v9.shp-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.shp-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.shp-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.shp-hero .v9-lead{font-size:17px}}
/* the trademark notice on the name's first appearance (Shopify® is a registered trademark of Shopify Inc.; the family's ® on the first appearance), raised and a little
   smaller, so the eyebrow keeps its line height */
.shp-reg{display:inline-block;margin-left:.08em;font-size:.82em;line-height:0;letter-spacing:0;vertical-align:.32em}
@media (min-width:1101px){
.v9-hero.shp-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.shp-hero h1{font-size:min(56px,calc(510px / var(--shp-em,9.099)))}
.v9-hero.shp-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.shp-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's box keeps its shape reserved from the first paint (1600 x 1320, the hero scene), below the form up to 1100px and
   beside it from 1101px; at 560px and below it runs to the window's edges and shows the phone version (1100 x 1680): the titles
   at the top, the tablet below, drawn larger, the hand resting under the tablet's lower right */
.shp-hero .v9-illo{aspect-ratio:1600/1320}
@media (max-width:560px){.shp-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px;aspect-ratio:1100/1680}}
/* the landing view: on desktop the hero's top space follows the window's height, so the headline, form and drawing hold the
   middle of the first view and the client wall still shows below */
.v9-hero.shp-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.shp-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.shp-hero{padding:28px 0 48px}}

/* ---------- tap areas and the legacy menu, as CLAUDE.md sets them. The logos in the header and footer are widened to 44px tap
   areas with padding cancelled by margin, so nothing moves. The site's old hidden menu sits off to the side until its script
   marks it loaded; until then it is held to no width, so it can't cause sideways scroll ---------- */
body.v9-page .header-wide.wb-hd .header .logo{padding:7px 0;margin:-7px 0}
body.v9-page .wb-ft .wb-ft-logo{padding:8px 0;margin:-8px 0}
body.v9-page #main_menu:not(.loaded){left:0;right:auto;width:0;max-width:0;overflow:hidden}

/* ---------- the closing: the email form, centred, sized and behaving as the hero's at every width. Nothing follows it: urgent
   help is reached from the header, the menu and the footer ---------- */
.shp-cta .v9-h2{text-wrap:balance}
.shp-cta .v9-sub{text-wrap:pretty}

/* text for screen readers only */
.shp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- the trademark notice's one link to shopify.com, as Shopify's guidelines ask, underlined as every link inside a paragraph
   is (the held-link rule went when Hire Shopify Developers went live, October 14, 2026) ---------- */
.v9 .shp-faq-tm a{color:#d33d5c;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.v9 .shp-faq-tm a:hover,.v9 .shp-faq-tm a:focus-visible{text-decoration-thickness:2px}

/* ---------- Accessibility's own audit (October 10, 2026): its fixes, carried here as on that page; on every page at go-live ---------- */
/* the coral button stays the site's coral, as on every other page (your call, October 10, 2026). The audit's finding stands:
   white on #FA5478 is 3.2:1, under the 4.5:1 its 14 to 16px label needs; to be decided for every page at once */
/* the focus rings the header logo and the footer's Cookie Preferences were missing */
body.v9-page .header-wide.wb-hd .header .logo:focus-visible{outline:2px solid #232834;outline-offset:3px;border-radius:4px}
body.v9-page .wb-ft .wb-ft-cc:focus-visible{outline:2px solid #F1EEEA;outline-offset:3px;border-radius:3px}
/* the footer's links: 44px tap areas on touch widths, from an invisible band above and below, so nothing moves */
@media (max-width:1024px){body.v9-page .wb-ft .wb-ft-cols a,body.v9-page .wb-ft .wb-ft-bar a,body.v9-page .wb-ft .wb-ft-bar .wb-ft-cc{position:relative}body.v9-page .wb-ft .wb-ft-cols a::after,body.v9-page .wb-ft .wb-ft-bar a::after,body.v9-page .wb-ft .wb-ft-bar .wb-ft-cc::after{content:"";position:absolute;left:0;right:0;top:-10.5px;bottom:-10.5px}}
/* the thank-you takes focus when it replaces the form, so it's read out; it isn't a control, so it shows no ring */
.em-talk-done:focus{outline:none}
/* the hand-over audit (October 11, 2026). The header logo has no size of its own until its image loads, so the strip grew from
   14px to 45px and moved the hero (layout shift 0.008 at 390px, 0.016 at 1280px): its box is reserved from its file's shape,
   4393 x 1501. A shared part: the same rule belongs on every page at go-live */
body.v9-page .header-wide.wb-hd .logo img{aspect-ratio:4393/1501;height:auto}
/* and the cookie notice's mount: until Cookie Consent.dc.html arrives, the runtime holds its place with a 0 x 0 placeholder whose
   1px borders still make it 2px tall, above the header; when the notice mounts (fixed, out of the flow) the whole page moves up
   2px. Its borders are dropped, so it holds no height at all. A shared part too, for every page at go-live */
body.v9-page .sc-placeholder[title="Cookie Consent"]{border:0;background:none}
/* and the type: until Sailec arrives the fallback sets each line's text box from its own height, 115% of the size against Sailec's
   148% (ascent 108% and descent 40% in Bold, 107% and 36% in Medium, measured on the woff2 files), and runs narrower, so the hero's
   lines moved up to 6px, and the words after a change of weight sideways, when the font swapped. The fallback is Arial (on Mac and
   Windows alike) scaled to Sailec's average width (Bold 101.65%, Medium against Arial's regular 107.64%, measured on this page's
   own headings and lead) and given Sailec's heights (the overrides are scaled with it). With both weights preloaded in the page,
   the swap usually comes before the first paint anyway */
@font-face{font-family:'Sailec Fallback';font-weight:100 600;src:local('Arial'),local('ArialMT');size-adjust:107.64%;ascent-override:99.41%;descent-override:33.44%;line-gap-override:0%;
font-display: swap;
}
@font-face{font-family:'Sailec Fallback';font-weight:700 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:101.65%;ascent-override:106.25%;descent-override:39.35%;line-gap-override:0%;
font-display: swap;
}
.v9{font-family:Sailec,'Sailec Fallback',Helvetica,Arial,sans-serif}
/* links inside a paragraph keep their place in the sentence; on touch widths each gets a 44px tap band from an invisible strip
   above and below, as the footer's links do, so nothing moves */
@media (max-width:1024px){.v9 a.shp-in{position:relative}.v9 a.shp-in::after{content:"";position:absolute;left:0;right:0;top:-10.5px;bottom:-10.5px}}


/* ---------- When every new need adds another app (#problem): the copy, and the family's quiet device carried over from WordPress
   Development with this stack's words: one white page of the app in the family's line (a header with its logo and menu, its title as two ink
   bars, a picture and its lines), with a small bone note taped to its corner, "Don’t uninstall that app". The tape is the
   view's one coral part. Static; the figure is one image named with its words. Not UI/UX's pile of research notes: one note, a
   warning, on the page itself. Side by side from 1024px, the drawing on the right; stacked below ---------- */
.shp-prob{border-top:1px solid #E4DFD9}
.shp-prob-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.shp-prob-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .shp-prob-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.shp-note{position:relative;box-sizing:border-box;max-width:540px;margin:0 0 0 auto;padding:30px 26px 0 0;pointer-events:none;-webkit-user-select:none;user-select:none}
.shp-note-page{box-sizing:border-box;padding:22px 26px 30px;border:1.75px solid #232834;border-radius:20px;background:#fff;box-shadow:8px 8px 0 #E4DFD9}
.shp-np-hd{display:flex;align-items:center;justify-content:space-between;padding:0 0 16px;border-bottom:1.5px solid #C2C5CC}
.shp-np-logo{display:block;width:24px;height:24px;box-sizing:border-box;border:1.5px solid #232834;border-radius:7px;background:#E4DFD9}
.shp-np-nav{display:flex;gap:10px}
.shp-np-nav i{display:block;width:32px;height:8px;border-radius:4px;background:#C2C5CC}
.shp-np-t{display:grid;gap:10px;margin:24px 0 20px}
.shp-np-t i{display:block;height:14px;border-radius:7px;background:#232834}
.shp-np-t i:nth-child(1){width:68%}
.shp-np-t i:nth-child(2){width:40%}
.shp-np-pic{aspect-ratio:16/7;box-sizing:border-box;border:1.5px solid #232834;border-radius:12px;background:#E4DFD9}
.shp-np-lines{display:grid;gap:11px;margin-top:20px}
.shp-np-lines i{display:block;height:9px;border-radius:5px;background:#C2C5CC}
.shp-np-lines i:nth-child(1){width:94%}
.shp-np-lines i:nth-child(3){width:58%}
/* the note: bone, an ink edge, set a little askew over the page's top right corner, held by a strip of blush tape with a coral edge */
.v9 .shp-note-tag{position:absolute;top:0;right:0;box-sizing:border-box;width:210px;margin:0;padding:22px 20px 18px;border:1.5px solid #232834;border-radius:6px;background:#F1EEEA;box-shadow:4px 4px 0 #E4DFD9;transform:rotate(3deg);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-.005em;color:#232834;text-wrap:balance}
.shp-note-tag::before{content:"";position:absolute;top:-11px;left:50%;width:70px;height:20px;margin-left:-35px;box-sizing:border-box;border:1.5px solid #FA5478;border-radius:3px;background:#FDE0E6;transform:rotate(-5deg)}
@media (max-width:1023px){.shp-prob-grid{grid-template-columns:minmax(0,1fr)}.shp-note{margin:0;max-width:560px}}
@media (max-width:560px){.shp-note{padding:26px 14px 0 0}.shp-note-page{padding:18px 18px 24px;box-shadow:6px 6px 0 #E4DFD9}.v9 .shp-note-tag{width:176px;padding:18px 16px 14px}.shp-np-t{margin:20px 0 16px}}


/* ---------- what we build (#build): the heading and its line above the grid, then the nine kinds of work in three rows of three
   (two columns from 1024px down, one below 640px), each item topped by a tint hairline that runs on across the gap to the next,
   so each row reads as one line. Each item: its icon at the left of its title, its line beneath, across the item. Not the hire
   page's grid (four across, its heading in the first cell, the icon above the title) or Support & Maintenance's rows (named in
   the left margin, the icon above the title). The icons are drawn for this page (tools/shp-icons-scene.js) and play their hover
   Lottie (art/nodejs/shp-ic-*.json, under 10 KB each) as the pointer rests on the item, from 821px with a mouse or trackpad,
   never with reduced motion; the items aren't links, so there is nothing to focus. Beneath, under one more hairline, the three
   hand-off lines: from 1025px one under each column, its label above its link; below, one per line. Static ---------- */
.shp-build{border-top:1px solid #E4DFD9}
.shp-build-head{max-width:720px}
.shp-build-head .v9-h2{margin:0;text-wrap:balance}
.shp-build-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;margin:0;padding:0;list-style:none}
.v9 .shp-bi{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:14px;align-items:center;align-content:start;margin:0;padding:30px 0 40px;min-width:0}
.shp-bi::before{content:"";position:absolute;top:0;left:0;right:-48px;height:1px;background:#C2C5CC}
.shp-bi:nth-child(3n)::before,.shp-bi:last-child::before{right:0}
.shp-bi .cb-ic-box{grid-row:auto;width:64px;height:64px;margin:0 -4px 0 -6px}
.v9 .shp-bi h3{margin:0;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .shp-bi p{grid-column:1/-1;max-width:40ch;margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.shp-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;margin:0;padding:22px 0 0;border-top:1px solid #C2C5CC;list-style:none}
.v9 .shp-more li{display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:0;font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
@media (max-width:1024px){
.shp-build-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.shp-bi:nth-child(3n)::before{right:-48px}
.shp-bi:nth-child(2n)::before,.shp-bi:last-child::before{right:0}
.shp-more{grid-template-columns:minmax(0,1fr)}
.v9 .shp-more li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:8px}
}
@media (max-width:639px){
.shp-build-list{grid-template-columns:minmax(0,1fr)}
.shp-bi::before,.shp-bi:nth-child(3n)::before{right:0}
.v9 .shp-bi{padding:24px 0 30px}
.shp-bi .cb-ic-box{width:56px;height:56px;margin:0 -4px 0 -5px}
}
@media (max-width:560px){.v9 .shp-more li{display:block;padding:6px 0 0}.v9 .shp-more li > span{display:block}}

/* ---------- changing the checkout, the supported way (#checkout): the heading at the left, the copy at the right, stacked below
   1025px; under them the bone checkout card the sheet asks for, on a white section (so the card reads as one plain shape), and
   the quiet custom rules strip. The card: the checkout's steps as rows (Contact, Delivery, Payment, Thank you), each with its
   plan as a label, and its set places drawn as small dashed slots between drawn parts. Each slot is a real button (aria-pressed,
   one at a time, the first at load); the readout under the rows says what can go there and which plans have it, all seven held
   in one grid cell so the card keeps its height. The rows run left to right from 821px and stack into a phone checkout at 560px
   and below. Labels, never status colors. Not React's page-kind picker, Node.js's main thread switch, Python's checker or MCP's
   request switch: the buttons are places inside the drawing, not a row of choices beside it ---------- */
.shp-co{border-top:1px solid #E4DFD9}
.shp-co-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px 80px;align-items:start;margin-bottom:48px}
.shp-co-head .v9-h2{margin:0;text-wrap:balance}
.v9 .shp-co-copy p{max-width:620px;margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .shp-co-copy p + p{margin-top:16px}
.shp-co-card{box-sizing:border-box;padding:28px 32px 30px;border-radius:24px;background:#F1EEEA}
.v9 .shp-co-pick-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 18px;font-weight:700;font-size:20px;line-height:1.3;color:#232834}
.shp-co-pick-title span{font-weight:500;font-size:16px;color:#4f5565}
.v9 .shp-co-steps{margin:0;padding:0;list-style:none}
.shp-co-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px 24px;align-items:center;padding:16px 0;border-top:1px solid #DCD6CE}
.v9 .shp-co-rh{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0}
.shp-co-name{font-weight:700;font-size:18px;line-height:1.25;color:#232834}
.shp-co-plan{display:inline-block;padding:3px 10px;border:1px solid #767b88;border-radius:999px;font-weight:500;font-size:14px;line-height:1.4;color:#4f5565;white-space:nowrap}
.shp-co-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.shp-co-d{display:flex;flex:none;align-items:center;gap:8px;box-sizing:border-box;height:44px;padding:0 14px;border:1.5px solid #CFC8BF;border-radius:10px;background:#fff;pointer-events:none}
.shp-co-d i{display:block;flex:none;height:6px;border-radius:3px;background:#DCD6CE}
.shp-co-df{width:136px}.shp-co-df i{width:70px}
.shp-co-do{width:112px}.shp-co-do i{width:52px}
.shp-co-do b{flex:none;width:12px;height:12px;box-sizing:border-box;border:1.5px solid #A9A296;border-radius:50%}
.shp-co-dk{width:120px}.shp-co-dk i{width:56px}
.shp-co-dk b{position:relative;flex:none;width:20px;height:20px;box-sizing:border-box;border:1.5px solid #232834;border-radius:50%}
.shp-co-dk b::after{content:"";position:absolute;left:5.5px;top:3px;width:4px;height:8px;border:solid #232834;border-width:0 1.75px 1.75px 0;transform:rotate(45deg)}
.shp-co-dt{width:112px;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px}.shp-co-dt i{width:64px}.shp-co-dt i + i{width:40px}
.shp-co-dp{width:104px;justify-content:center;border-color:#CFC8BF;background:#E4DFD9;font-weight:700;font-size:15px;color:#232834}
.v9 .shp-co-slot{position:relative;box-sizing:border-box;min-height:44px;margin:0;padding:8px 14px;border:1.5px dashed #767b88;border-radius:10px;background:rgba(255,255,255,.6);font:inherit;font-weight:500;font-size:16px;line-height:1.3;color:#232834;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.v9 .shp-co-slot:hover{border-color:#232834;background:#fff}
.v9 .shp-co-slot:focus-visible{outline:2px solid #232834;outline-offset:3px}
.v9 .shp-co-slot[aria-pressed="true"]{border-style:solid;border-color:#232834;background:#232834;color:#fff}
.shp-co-out{display:grid;padding-top:22px;border-top:1px solid #DCD6CE}
.shp-co-say{grid-area:1/1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:10px 32px;align-items:start;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s}
.shp-co-say[data-on="true"],.shp-co-out:not(:has([data-on="true"])) .shp-co-say:first-child{visibility:visible;opacity:1}
.v9 .shp-co-say p{margin:0;font-weight:500;font-size:17px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.v9 .shp-co-say p b{display:block;margin-bottom:4px;font-weight:700;font-size:15px;line-height:1.3;color:#232834}
.v9 .shp-co-say .shp-co-title{font-weight:700;font-size:20px;line-height:1.3;color:#232834}
.shp-co-rules{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px;padding:18px 24px;border:1px solid #E4DFD9;border-radius:16px}
.v9 .shp-co-rt{margin:0;font-weight:700;font-size:18px;line-height:1.3;color:#232834}
.v9 .shp-co-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.v9 .shp-co-tags li{margin:0;padding:5px 12px;border:1px solid #767b88;border-radius:999px;font-weight:500;font-size:15px;line-height:1.3;color:#232834}
.v9 .shp-co-rl{flex:1 1 320px;margin:0;font-weight:500;font-size:16px;line-height:1.55;color:#4f5565;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.v9 .shp-co-slot,.shp-co-say{transition:none}}
@media (max-width:1024px){.shp-co-head{grid-template-columns:minmax(0,1fr)}.shp-co-say{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.v9 .shp-co-say .shp-co-title{grid-column:1/-1}}
@media (max-width:820px){.shp-co-row{grid-template-columns:minmax(0,1fr)}.v9 .shp-co-rh{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px}}
@media (max-width:560px){
.shp-co-head{margin-bottom:32px}
.shp-co-plan,.v9 .shp-co-say p b,.v9 .shp-co-tags li{font-size:16px}
.v9 .shp-co-copy p{font-size:16px}
.shp-co-card{padding:22px 18px 24px;border-radius:20px}
.shp-co-flow{flex-direction:column;align-items:stretch;gap:8px}
.shp-co-d{width:auto}
.shp-co-say{grid-template-columns:minmax(0,1fr)}
.v9 .shp-co-say p{font-size:16px}
.shp-co-rules{padding:16px 18px}
}

/* ---------- easy to keep up to date (#care): the copy at the right, the drawing at the left (the mirror of #problem), stacked
   below 1025px with the drawing under the copy. Carried over as it is (no word in it names WordPress). Two white page cards, "Copy" and "Live", the same page on both, joined by a
   dashed tint track. Plays once as it comes into view, then holds: an "Update" tag settles onto the copy's corner, its three
   blocks take a quiet ink tick one by one, a short soft coral line runs along the track (the page's one flowing line), and the
   tag settles onto the live page. The last frame is the still: with reduced motion everything shows at once and the line never
   runs. One image named with its words; the drawing inside is hidden from screen readers. Not Support & Maintenance's hero
   (an update card feeding the tablet, its status turning "Up to date") or its support windows ---------- */
.shp-care-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"fig copy";gap:48px 80px;align-items:center}
.shp-care-copy{grid-area:copy}
.shp-care-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .shp-care-copy p{max-width:560px;margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .shp-care-copy p + p{margin-top:16px}
.shp-care-fig{grid-area:fig;margin:0}
.shp-cf-row{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);align-items:start;max-width:620px}
.v9 .shp-cf-tag{margin:0 0 14px;font-weight:700;font-size:17px;line-height:1.2;color:#232834}
.shp-cf-page{position:relative;display:grid;gap:14px;padding:18px 18px 22px;border:1.5px solid #232834;border-radius:12px;background:#fff;box-shadow:6px 6px 0 #E4DFD9}
.v9 .shp-cf-up{position:absolute;top:-15px;right:-12px;padding:7px 12px;border:1.5px solid #232834;border-radius:16px;background:#fff;font-weight:700;font-size:16px;line-height:1;color:#232834}
.shp-cf-hd{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1.5px solid #E4DFD9}
.shp-cf-hd i{display:block;height:8px;border-radius:4px;background:#C2C5CC}
.shp-cf-hd i:first-child{flex:none;width:14px;height:14px;border-radius:50%;background:#232834}
.shp-cf-hd i + i{width:44%}
.shp-cf-b{display:flex;align-items:center;gap:10px;min-height:18px}
.shp-cf-b > i,.shp-cf-b > span{display:block;flex:1;min-width:0}
.shp-cf-b .t{height:12px;max-width:78%;border-radius:6px;background:#232834}
.shp-cf-b .p{height:56px;border-radius:8px;background:#E4DFD9}
.shp-cf-b span i{display:block;height:8px;border-radius:4px;background:#C2C5CC}
.shp-cf-b span i + i{width:70%;margin-top:8px}
.shp-cf-b b{position:relative;flex:none;display:block;width:18px;height:18px}
.shp-cf-b b::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #232834;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.shp-cf-live .shp-cf-b{padding-right:28px}
.shp-cf-track{position:relative;height:6px;margin:150px 14px 0;overflow:hidden;background:repeating-linear-gradient(90deg,#C2C5CC 0 6px,transparent 6px 12px) 0 2px/100% 2px no-repeat}
.shp-cf-flow{position:absolute;top:1px;left:0;display:block;width:45%;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(250,84,120,0),#FA5478 70%);opacity:0}
@keyframes njsFlow{0%{transform:translateX(-100%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(222%);opacity:0}}
@media (prefers-reduced-motion:no-preference){
.shp-care-fig .shp-cf-up,.shp-care-fig .shp-cf-copy .shp-cf-b b{transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.shp-care-fig:not(.in) .shp-cf-up{opacity:0;transform:translateY(-10px)}
.shp-care-fig:not(.in) .shp-cf-copy .shp-cf-b b{opacity:0;transform:scale(.6)}
.shp-care-fig .shp-cf-copy .shp-cf-up{transition-delay:.5s}
.shp-care-fig .shp-cf-copy .shp-cf-b1 b{transition-delay:1.1s}
.shp-care-fig .shp-cf-copy .shp-cf-b2 b{transition-delay:1.5s}
.shp-care-fig .shp-cf-copy .shp-cf-b3 b{transition-delay:1.9s}
.shp-care-fig.in .shp-cf-flow{animation:njsFlow .9s cubic-bezier(.45,0,.35,1) 2.4s 1 both}
.shp-care-fig .shp-cf-live .shp-cf-up{transition-delay:3.25s}
}
@media (max-width:1024px){.shp-care-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "fig"}}
@media (max-width:560px){
.shp-cf-row{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr)}
.v9 .shp-cf-tag{font-size:16px;margin-bottom:12px}
.shp-cf-page{gap:11px;padding:13px 12px 16px;box-shadow:5px 5px 0 #E4DFD9}
.v9 .shp-cf-up{top:-13px;right:-9px;padding:5px 9px}
.shp-cf-b{gap:6px}
.shp-cf-b .p{height:40px}
.shp-cf-live .shp-cf-b{padding-right:24px}
.shp-cf-track{margin:118px 6px 0}
}

/* ---------- start with a review of your store (#start): the copy at the left, the written review at the right, stacked below
   1025px with the review under the copy. The review is one plain white page (ink outline, shade offset, like the page's other
   drawings) titled "Store review", under three ruled headings, Keep, Fix and Rebuild, the app's parts beneath each as short
   lines. One line carries a small "First step" tag in blush with a coral edge, ink type: the view's one coral part, the
   proposal for the first step. Static. One image named with its words; the page inside is hidden from screen readers. Not
   Support & Maintenance's bound health check: no cover, no binding, nothing lifts ---------- */
.shp-start{border-top:1px solid #E4DFD9}
.shp-start-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.shp-start-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .shp-start-copy p{max-width:560px;margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .shp-start-copy p + p{margin-top:16px}
.shp-rv{margin:0;display:flex;justify-content:center}
.shp-rv-page{box-sizing:border-box;width:100%;max-width:440px;padding:32px 34px 36px;border:1.5px solid #232834;border-radius:12px;background:#fff;box-shadow:8px 8px 0 #E4DFD9}
.v9 .shp-rv-t{margin:0 0 26px;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.02em;color:#232834}
.shp-rv-sec + .shp-rv-sec{margin-top:24px}
.v9 .shp-rv-h{margin:0 0 10px;padding-bottom:8px;border-bottom:1.5px solid #232834;font-weight:700;font-size:17px;line-height:1.3;color:#232834}
.v9 .shp-rv-li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:6px 0;font-weight:500;font-size:17px;line-height:1.45;color:#4f5565}
.v9 .shp-rv-tag{display:inline-block;padding:3px 9px;border:1.5px solid #FA5478;border-radius:5px;background:#FDE0E6;font-weight:700;font-size:14px;line-height:1.3;color:#232834}
@media (max-width:1024px){.shp-start-grid{grid-template-columns:minmax(0,1fr)}.shp-rv{justify-content:flex-start}}
@media (max-width:560px){.shp-rv-page{padding:24px 22px 26px;box-shadow:6px 6px 0 #E4DFD9}.v9 .shp-rv-t{margin-bottom:20px}}

/* ---------- questions worth asking (#questions): the heading with the ten questions beside it as a numbered contents list
   (two columns from 821px, each a link to its answer, 44px to tap), then every answer, open, under its question, numbered to
   match: the number in a margin, the question, the answer and its link on a line of its own (so it isn't underlined at rest).
   Tint hairlines between the answers. Every answer is in the page's text. Vercel's attribution line for Next.js closes the section, as its
   brand guidelines ask (vercel.com/geist/brands, read October 12, 2026). Not the hire page's rows, Pricing's newspaper columns, AI-Assisted Engineering's answer first, Discovery &
   MVP's run-in, Accessibility's set-in answers, MCP's cards, Support & Maintenance's reading column or AI Security &
   Governance's groups ---------- */
.shp-faq{border-top:1px solid #E4DFD9}
.shp-faq-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px 80px;align-items:start;margin-bottom:56px}
.shp-faq-top .v9-h2{margin:0;text-wrap:balance}
.shp-faq-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin:0;padding:0;list-style:none}
.shp-faq-toc li{margin:0;padding:0;border-top:1px solid #E4DFD9}
.v9 .shp-faq-toc a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:10px 0;font-weight:500;font-size:17px;line-height:1.4;color:#d33d5c;text-decoration:none}
.shp-faq-toc a .shp-faq-tq{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
.v9 .shp-faq-toc a:hover,.v9 .shp-faq-toc a:focus-visible{color:#d33d5c}
.shp-faq-toc a:hover .shp-faq-tq,.shp-faq-toc a:focus-visible .shp-faq-tq{text-decoration-color:currentColor}
.v9 .shp-faq-toc a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.shp-faq-toc a .shp-faq-tq{transition:none}}
.v9 .shp-faq-n{flex:none;min-width:24px;font-weight:700;font-size:14px;line-height:1.4;letter-spacing:.04em;color:#6b7080}
.shp-faq-list{margin:0;padding:0;list-style:none}
.v9 .shp-faq-i{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:80px;margin:0;padding:30px 0 34px;border-top:1px solid #C2C5CC;scroll-margin-top:110px}
.v9 .shp-faq-i .shp-faq-n{justify-self:end;padding-top:4px;font-size:16px}
.shp-faq-a{max-width:680px}
.v9 .shp-faq-a h3{margin:0 0 10px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .shp-faq-a p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .shp-faq-a .shp-go{margin-top:6px}
.v9 .shp-faq-tm{margin:8px 0 0;padding-top:24px;border-top:1px solid #C2C5CC;font-weight:500;font-size:16px;line-height:1.6;color:#4f5565}
@media (max-width:1024px){.shp-faq-top{grid-template-columns:minmax(0,1fr)}.v9 .shp-faq-i{grid-template-columns:56px minmax(0,1fr);column-gap:20px}.v9 .shp-faq-i .shp-faq-n{justify-self:start}}
@media (max-width:820px){.shp-faq-toc ol{grid-template-columns:minmax(0,1fr)}.shp-faq-top{margin-bottom:40px}}
@media (max-width:560px){.v9 .shp-faq-i{grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:24px 0 28px}}


/* ================= THE PHONE TYPE SCALE: written October 13, 2026 by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.v9 .shp-go,.ai-clients-head .v9-sub,.shp-clients-head .v9-sub,.v9 .shp-prob-copy p,.v9 .shp-note-tag,.v9 .shp-bi p,.shp-co-name,.v9 .shp-co-rt,.v9 .shp-care-copy p,.v9 .shp-start-copy p,.v9 .shp-rv-li,.v9 .shp-faq-toc a,.v9 .shp-faq-a p{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead{font-size:17px}
.v9-hero.shp-hero h1{font-size:min(34px,min(56px,calc((100vw - 44px) / (var(--shp-em,9.099) * 1.094))));line-height:1.12}
.v9 .shp-bi h3,.v9 .shp-co-pick-title,.v9 .shp-co-say .shp-co-title,.v9 .shp-faq-a h3{font-size:18px}
.v9 .shp-rv-t{font-size:20px}
}