/* Mobile Apps, built from Web & App Development v2 (page-web-development-v2.css), the starting point CLAUDE.md names: its
   shell, header strip, hero base, buttons, email form, reveal, hover icons, client wall and responsive rules are carried over
   unchanged, with its page classes renamed ma-*. It runs at 1360px, as Performance & Optimisation does. Header and footer are
   the site's own (page-seo-1/2.css, site-header.css, site-footer.css); everything here scopes to .v9 or body.v9-page.
   Page-specific rules (ma-*) follow the shared ones. */


@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: markMenu() marks
   its Build something new route in coral with the menu's own small dot (Mobile Apps has no tile in that route yet) */
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:0 0 0 4px rgba(250,84,120,.22)}
.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 */
.ma-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{text-align:center}
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)}
.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: ink with a tint underline that darkens on hover, and an arrow that steps forward ---------- */
.v9 .ma-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;font-weight:700;font-size:17px;line-height:1.3;color:#232834;text-decoration:none}
.ma-go-l{text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
.ma-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .ma-go:hover{color:#232834}.ma-go:hover .ma-go-l{text-decoration-color:#232834}.ma-go:hover .ma-go-a{transform:translateX(3px)}}
.v9 .ma-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.ma-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 */
.ma-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.ma-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.ma-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){.ma-clients-head{margin-bottom:32px}}
@media (max-width:560px){.ma-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)}
}

/* ================= MOBILE APPS (this page's own) ================= */

/* ---------- this page's hero, as on Performance & Optimisation: the eyebrow, then a headline that holds two lines at every
   width. Each option is sized from its longer line, measured in Sailec Bold at -.03em: A "Mobile apps that" 7.77em, B "feel
   right at home" 8.08em, C "worth keeping" 6.67em, D "on web and mobile" 8.73em, E "work where you do" 8.70em. Up to 1100px
   the size follows the viewport, so that line takes 92% of the column at most, 56px at the largest; from 1101px, where the
   copy column is 560px, every option runs from 52px to 58px, which keeps its longer line within 507px (91%). 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 ---------- */
.v9-hero.ma-hero h1.ma-h-a{font-size:min(56px,calc((100vw - 44px) / 8.5))}
.v9-hero.ma-hero h1.ma-h-b{font-size:min(56px,calc((100vw - 44px) / 8.8))}
.v9-hero.ma-hero h1.ma-h-c{font-size:min(56px,calc((100vw - 44px) / 7.3))}
.v9-hero.ma-hero h1.ma-h-d,.v9-hero.ma-hero h1.ma-h-e{font-size:min(56px,calc((100vw - 44px) / 9.5))}
@media (min-width:821px){.v9.ma-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.ma-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.ma-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.ma-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.ma-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.ma-hero h1.ma-h-a,.v9-hero.ma-hero h1.ma-h-b,.v9-hero.ma-hero h1.ma-h-c,.v9-hero.ma-hero h1.ma-h-d,.v9-hero.ma-hero h1.ma-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.ma-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.ma-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1920 x 1600 (the card, the track and the phone at its tallest, with the hand), and the box keeps
   that shape reserved from the first paint */
.ma-hero .v9-illo{aspect-ratio:1920/1600}
/* the landing view, as on the sister pages: 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.ma-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.ma-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.ma-hero{padding:28px 0 48px}}

/* ---------- tap areas and the legacy menu, as on the sister pages. 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 is held to no width until its
   script marks it loaded, 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}

/* ---------- let's build it better: the closing email form, centred, sized and behaving as the hero's at every width, with
   nothing after it ---------- */
.ma-cta .v9-h2{text-wrap:balance}
.ma-cta .v9-sub{text-wrap:pretty}

/* ---------- native, cross-platform or the web: what each approach shares, drawn as layers. Under each option, the iOS and
   Android apps side by side, each a stack of its screens, its app logic and the phone's features, over the back end. What both
   share is coral (ink type on coral, 4.6:1), so the coral grows from one option to the next: native shares only the back end,
   cross-platform shares the screens and the logic too, with the phone's features native on each side, and a web app is one
   stack in the phone's browser. The blocks settle once, from the back end up, as each drawing comes well into view; it reads
   with no interaction. Three columns from 1024px, then each option as a row with its drawing beside it, and on phones the
   drawing above its words. Each option has its own anchor (#native, #cross-platform, #web-app) ---------- */
.ma-ways{border-top:1px solid #E4DFD9}
.ma-ways-head{max-width:720px}
.ma-ways-head .v9-h2{text-wrap:balance}
.v9 .ma-ly-key{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:16px;line-height:1.5;color:#4f5565}
.ma-ly-sw{flex:none;width:22px;height:14px;border:1.5px solid #C43A5C;border-radius:4px;background:#FA5478}
.v9 .ma-ways-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:0;padding:0}
.v9 .ma-way{margin:0;padding:0;scroll-margin-top:32px}
.ma-ly{margin:0 0 28px}
.ma-ly-d{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:20px repeat(4,40px);gap:8px 10px;max-width:340px}
.ma-ly-os{display:flex;align-items:flex-end;justify-content:center;font-size:13px;line-height:1;color:#4f5565;white-space:nowrap}
.ma-ly-b{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 8px;border:1.5px solid #232834;border-radius:10px;background:#fff;font-weight:700;font-size:13px;line-height:1.1;color:#232834;text-align:center;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.65,0,.35,1) calc(var(--c,0s) + var(--k,0s)),transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--c,0s) + var(--k,0s))}
.ma-ly-b.sh{border-color:#C43A5C;background:#FA5478}
.ma-ly-b.w2,.ma-ly-os.w2{grid-column:1/3}
.ma-ly-b.be{grid-row:5}
.ma-ly-b.k1{--k:.14s}
.ma-ly-b.k2{--k:.28s}
.ma-ly-b.k3{--k:.42s}
.ma-ly.go .ma-ly-b{opacity:1;transform:none}
/* the web app: one stack inside the phone's browser, a quiet window with a bone bar */
.ma-ly-win{grid-column:1/3;grid-row:2/5;position:relative;border:1.5px solid #232834;border-radius:12px;background:#fff;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1) calc(var(--c,0s) + .14s)}
.ma-ly-win::before{content:"";position:absolute;left:12px;top:14px;width:7px;height:7px;border-radius:50%;background:#C2C5CC;box-shadow:12px 0 0 #C2C5CC,24px 0 0 #C2C5CC}
.ma-ly-win::after{content:"";position:absolute;left:0;right:0;top:34px;border-top:1.5px solid #E4DFD9}
.ma-ly.go .ma-ly-win{opacity:1}
.k-web .ma-ly-os{grid-row:1}
.ma-ly-b.in{grid-column:1/3;align-self:start;height:36px;margin:0 12px}
.ma-ly-b.r3{grid-row:3;margin-top:-2px}
.ma-ly-b.r4{grid-row:4;margin-top:-4px}
.v9 .ma-way h3{margin:0 0 8px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.v9 .ma-way p{margin:0;font-size:17px;line-height:1.6;color:#4f5565}
.ma-ways-more{margin-top:40px}
@media (min-width:1024px){
.ma-way:nth-child(2) .ma-ly{--c:.3s}
.ma-way:nth-child(3) .ma-ly{--c:.6s}
}
@media (max-width:1023px){
.v9 .ma-ways-list{grid-template-columns:minmax(0,1fr);gap:48px}
.v9 .ma-way{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:44px;align-items:start}
.ma-way .ma-ly{grid-row:1/3;margin:0}
.v9 .ma-way h3{margin-top:2px}
}
@media (max-width:640px){
.v9 .ma-way{display:block}
.ma-way .ma-ly{margin:0 0 22px}
}
@media (prefers-reduced-motion:reduce){.ma-ly-b,.ma-ly-win{opacity:1;transform:none;transition:none}}
.ma-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- one back end for web and mobile: the copy, and one record shown in both places. A booking in the family's coral
   browser frame and the same booking on a coral phone, their rows level, with a tint hairline joining each matching pair; the
   bone back end card sits between them, below the rows. When the drawing is well in view the day changes once on the web, a
   short soft coral line (the page's second and last) carries it through the back end, whose light warms, and the app shows
   it; each changed value keeps its blush marker. The lines are measured from the drawing (recDraw), so they follow it at every
   width. From 1101px the copy and the drawing share the row; below that the drawing follows the copy; on phones the browser sits
   above the back end and the phone ---------- */
.ma-one{border-top:1px solid #E4DFD9}
.ma-one-grid{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:56px 72px;align-items:center}
.ma-one-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .ma-one-copy p{margin:0 0 16px;max-width:540px;font-size:18px;line-height:1.65;color:#4f5565}
.v9 .ma-one-copy .ma-go{margin-top:6px}
@media (max-width:1100px){.ma-one-grid{grid-template-columns:minmax(0,1fr)}}
.ma-rec{margin:0}
.ma-rec-d{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 170px 176px;grid-template-rows:auto auto;align-items:start;max-width:760px}
.ma-rec-lines{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
.v9 svg.ma-rec-lines{width:100%;height:100%}
.v9 .ma-rec-lines path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.v9 .ma-rec-lines .j{stroke:#C2C5CC;stroke-width:1.25}
.v9 .ma-rec-lines .f{stroke:#FA5478;stroke-width:3.5;stroke-dasharray:16 100;stroke-dashoffset:16;opacity:0}
.ma-rec.go .ma-rec-lines .f{animation:maRecFlow 2s cubic-bezier(.65,0,.35,1) .75s 1 both}
@keyframes maRecFlow{0%{stroke-dashoffset:16;opacity:0}12%{opacity:.75}88%{opacity:.75}100%{stroke-dashoffset:-100;opacity:0}}
.ma-rec-web,.ma-rec-app{position:relative;z-index:1;display:flex;flex-direction:column;border:1.5px solid #C43A5C;background:linear-gradient(90deg,#EE4A6E,#FA5478 34%)}
.ma-rec-web{grid-column:1;grid-row:1;border-radius:16px;padding:0 10px 10px}
.ma-rec-app{grid-column:3;grid-row:1/3;border-radius:28px;padding:0 9px 12px}
.ma-rec-bar,.ma-rec-spk{display:flex;align-items:center;gap:6px;height:32px}
.ma-rec-bar i{display:block;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.85}
.ma-rec-spk::before{content:"";display:block;width:44px;height:7px;margin:0 auto;border-radius:4px;background:#FBC0CC}
.ma-rec-pg{display:flex;flex-direction:column;padding:16px 16px 14px;border-radius:9px;background:#fff}
.ma-rec-app .ma-rec-pg{min-height:280px;padding:16px 12px 14px;border-radius:20px}
.ma-rec-t{display:block;margin:0 0 10px;font-weight:700;font-size:16px;line-height:24px;color:#232834;white-space:nowrap}
.ma-rec-r{display:flex;align-items:center;justify-content:space-between;gap:10px;height:44px;border-top:1px solid #E4DFD9}
.ma-rec-l{font-size:14px;line-height:1.2;color:#4f5565}
.ma-rec-v{position:relative;display:grid;justify-items:end;font-weight:700;font-size:15px;line-height:1.2;color:#232834}
.ma-rec-app .ma-rec-l{font-size:13px}
.ma-rec-app .ma-rec-v{font-size:14px}
.ma-rec-v>span{grid-area:1/1;position:relative;z-index:1;white-space:nowrap;transition:opacity .4s cubic-bezier(.65,0,.35,1)}
.ma-rec-v .now{opacity:0}
.ma-rec-v.ch::before{content:"";position:absolute;z-index:0;left:-7px;right:-7px;top:-4px;bottom:-4px;border-radius:7px;background:#FDE0E6;transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.ma-rec.go .ma-rec-web .ch::before{transform:scaleX(1);transition-delay:.15s}
.ma-rec.go .ma-rec-web .ch .was{opacity:0;transition-delay:.35s}
.ma-rec.go .ma-rec-web .ch .now{opacity:1;transition-delay:.5s}
.ma-rec.go .ma-rec-app .ch::before{transform:scaleX(1);transition-delay:2.6s}
.ma-rec.go .ma-rec-app .ch .was{opacity:0;transition-delay:2.75s}
.ma-rec.go .ma-rec-app .ch .now{opacity:1;transition-delay:2.9s}
.ma-rec-tabs{display:flex;justify-content:space-around;margin-top:auto;padding-top:14px;border-top:1px solid #E4DFD9}
.ma-rec-tabs i{display:block;width:22px;height:6px;border-radius:3px;background:#C2C5CC}
.ma-rec-be{position:relative;z-index:2;grid-column:2;grid-row:2;justify-self:center;display:grid;gap:3px;width:150px;margin-top:28px;padding:12px 14px;border:1.5px solid #232834;border-radius:16px;background:#F1EEEA}
.ma-rec-be b{font-weight:700;font-size:15px;line-height:1.3;color:#232834}
.ma-rec-be span{font-size:13px;line-height:1.35;color:#4f5565}
.ma-rec-light{position:absolute;top:12px;right:12px;width:12px;height:12px;border:1.5px solid #232834;border-radius:50%;background:#fff;transition:background-color .4s cubic-bezier(.65,0,.35,1),border-color .4s cubic-bezier(.65,0,.35,1)}
.ma-rec.go .ma-rec-light{border-color:#C43A5C;background:#FA5478;transition-delay:1.6s}
@media (max-width:640px){
.ma-rec-d{grid-template-columns:minmax(0,1fr);justify-items:center;padding:0 26px}
.ma-rec-web{grid-column:1;grid-row:1;width:100%;max-width:400px}
.ma-rec-be{grid-column:1;grid-row:2;margin-top:28px}
.ma-rec-app{grid-column:1;grid-row:3;width:210px;margin-top:28px}
.ma-rec-app .ma-rec-pg{min-height:220px}
}
@media (prefers-reduced-motion:reduce){
.v9 .ma-rec-lines .f{display:none}
.ma-rec .ch .was{opacity:0;transition:none}
.ma-rec .ch .now{opacity:1;transition:none}
.ma-rec .ch::before{transform:none;transition:none}
.ma-rec .ma-rec-light{border-color:#C43A5C;background:#FA5478;transition:none}
}

/* ---------- built for life on a phone: a two-column list that reads across, each item under a hairline with its icon at the
   left of its words (not Web & App Development's contents page, whose icons hang in the margin of columns that read down).
   Each icon's coral part fits its meaning, and pointing at an item, or focusing it, plays its hover Lottie (tools/ma-icons-
   lottie-v1.js; the phone is the homepage's). One column below 821px. Each item has its own anchor ---------- */
.ma-life{border-top:1px solid #E4DFD9}
.ma-life-head{max-width:720px}
.ma-life-head .v9-h2{text-wrap:balance}
.v9 .ma-life-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px;margin:0;padding:0}
.v9 .ma-life-list li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:24px;align-content:start;margin:0;padding:28px 0 34px;border-top:1px solid #E4DFD9;scroll-margin-top:32px}
.v9 .ma-life-list .hp-oic.cb-ic-box{grid-row:1/3;width:64px;height:64px;margin:-6px 0 0}
.v9 .ma-life-list h3{grid-column:2;margin:0 0 8px;font-weight:700;font-size:21px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .ma-life-list p{grid-column:2;margin:0;font-size:17px;line-height:1.6;color:#4f5565}
.ma-life-more{margin-top:28px}
@media (max-width:820px){.v9 .ma-life-list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.v9 .ma-life-list li{column-gap:18px}}

/* ---------- our work: each project as its web product and its app together. Its desktop crop beside its three phone screens
   (the Our Work page's design visuals, copied near the size shown into art/mobile-apps/), then its sector, its name linked to
   its place on Our Work, its line and the sentence of "What we built" that says what the app carries. The images take their
   sources as the section comes near the screen (startShots) and each keeps its 16:9 space from the first paint. From 1101px
   the pair and the words share a row; below that the words follow the pair; on phones the desktop crop sits above the phones.
   Skerra Wind, a concept, is left out until it is confirmed ---------- */
.ma-work{border-top:1px solid #E4DFD9}
.v9 .ma-work-list{margin:0;padding:0}
.v9 .ma-case{display:grid;grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr);gap:24px 48px;align-items:center;margin:0;padding:36px 0;border-top:1px solid #E4DFD9}
.v9 .ma-case:first-child{border-top:0;padding-top:0}
.ma-case-pair{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}
.ma-shot{position:relative;aspect-ratio:16/9;border:1px solid #E4DFD9;border-radius:14px;overflow:hidden;background:#F1EEEA}
.ma-shot img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1)}
.ma-shot img.on{opacity:1}
.v9 .ma-case-copy p.ma-case-sec{margin:0 0 6px;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#d33d5c}
.v9 .ma-case h3{margin:0 0 10px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.v9 .ma-case h3 a{display:inline-block;padding:10px 0;margin:-10px 0;color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .ma-case h3 a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .ma-case h3 a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.v9 .ma-case-copy p{margin:0 0 10px;font-size:17px;line-height:1.6;color:#4f5565}
.v9 .ma-case-copy p.ma-case-app{margin:0;color:#232834}
.ma-work-more{margin-top:36px}
@media (max-width:1100px){.v9 .ma-case{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ma-case-pair{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ma-shot img{transition:none}}

/* ---------- from first build to the stores: the copy, and one release's status, one bone card. Its chip changes once per
   word as the card comes well into view (On your phone, In review, Rolling out), one word at a time with a 4px drift and
   never two at once; then its light warms and Pause shows, since a release in stages can be paused. No phone, no track and
   no store names, so it repeats neither the hero nor the sister pages. Copy and card share the row from 1101px ---------- */
.ma-ship{border-top:1px solid #E4DFD9}
.ma-ship-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.ma-ship-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .ma-ship-copy p{margin:0 0 16px;max-width:560px;font-size:18px;line-height:1.65;color:#4f5565}
.ma-st{margin:0;justify-self:center;width:100%;max-width:460px}
.ma-st-card{display:grid;gap:18px;padding:28px 30px 30px;border:1.5px solid #232834;border-radius:20px;background:#F1EEEA}
.v9 .ma-st-k{font-size:15px;line-height:1.4;color:#4f5565}
.ma-st-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ma-st-chip{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 18px;border:1.5px solid #232834;border-radius:26px;background:#fff}
.ma-st-chip i{flex:none;width:12px;height:12px;border:1.5px solid #232834;border-radius:50%;background:#fff;transition:background-color .4s cubic-bezier(.65,0,.35,1),border-color .4s cubic-bezier(.65,0,.35,1)}
.ma-st-w{display:grid}
.ma-st-w>span{grid-area:1/1;font-weight:700;font-size:19px;line-height:1.2;color:#232834;white-space:nowrap}
.ma-st-w .s2,.ma-st-w .s3{opacity:0}
.ma-st-pause{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 16px 0 14px;border:1.5px solid #C2C5CC;border-radius:20px;font-size:15px;line-height:1;color:#4f5565;opacity:0;transform:translateY(4px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.ma-st-pause b{display:block;width:3px;height:12px;border-radius:2px;background:#4f5565}
.ma-st-pause b+b{margin-right:6px}
.ma-st.go .s1{animation:maStOut .35s cubic-bezier(.65,0,.35,1) 1.2s both}
.ma-st.go .s2{animation:maStInOut 1.75s cubic-bezier(.65,0,.35,1) 1.6s both}
.ma-st.go .s3{animation:maStIn .4s cubic-bezier(.65,0,.35,1) 3.4s both}
.ma-st.go .ma-st-chip i{border-color:#C43A5C;background:#FA5478;transition-delay:3.5s}
.ma-st.go .ma-st-pause{opacity:1;transform:none;transition-delay:3.8s}
@keyframes maStOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}
@keyframes maStIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes maStInOut{0%{opacity:0;transform:translateY(4px)}20%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@media (max-width:1100px){.ma-ship-grid{grid-template-columns:minmax(0,1fr)}.ma-st{justify-self:start}}
@media (prefers-reduced-motion:reduce){
.ma-st .s1,.ma-st .s2{opacity:0;animation:none}
.ma-st .s3{opacity:1;animation:none}
.ma-st .ma-st-chip i{border-color:#C43A5C;background:#FA5478;transition:none}
.ma-st .ma-st-pause{opacity:1;transform:none;transition:none}
}

/* ---------- kept current, year after year: the page's one bone band and its quietest section. The copy and its link, and
   one pulled-out line from its own words, set large under a tint hairline: no calendar, countdown or warning. The store
   sentence was checked on 2 October 2026 against Google's Play Console Help (existing apps that fall behind the target API
   level are not offered to new users on newer Android versions) and Apple's Upcoming Requirements (since 28 April 2026, uploads
   must be built with Xcode 26 and an iOS 26 SDK or later). The line about taking over an existing app is hidden until it is
   confirmed ---------- */
.ma-keep-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 88px;align-items:start}
.ma-keep-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .ma-keep-copy p{margin:0 0 16px;max-width:620px;font-size:18px;line-height:1.65;color:#4f5565}
.v9 p.ma-keep-pull{display:grid;gap:14px;margin:8px 0 0;padding-top:22px;border-top:1.5px solid #C2C5CC;font-weight:700;font-size:clamp(24px,2.3vw,30px);line-height:1.3;letter-spacing:-.02em;color:#232834;text-wrap:balance}
.ma-keep-k{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c}
@media (max-width:1100px){.ma-keep-grid{grid-template-columns:minmax(0,1fr)}.v9 p.ma-keep-pull{max-width:560px}}

/* ================= THE PHONE TYPE SCALE: written 2 October 2026 by tools/phone-type.js. Up to 560px: h1 34px (or its fit formula when smaller), section headings 26px, titles 18 to 20px, the hero lead 17px, 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 .ma-go,.ai-clients-head .v9-sub,.ma-clients-head .v9-sub,.v9 .ma-way p,.v9 .ma-one-copy p,.v9 .ma-life-list p,.v9 .ma-case-copy p,.v9 .ma-ship-copy p,.v9 .ma-keep-copy p{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.ma-st-w>span{font-size:17px}
.v9-hero.ma-hero h1.ma-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.5)));line-height:1.12}
.v9-hero.ma-hero h1.ma-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.8)));line-height:1.12}
.v9-hero.ma-hero h1.ma-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.3)));line-height:1.12}
.v9-hero.ma-hero h1.ma-h-d,.v9-hero.ma-hero h1.ma-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.5)));line-height:1.12}
.v9 .ma-way h3,.v9 .ma-case h3,.v9 p.ma-keep-pull{font-size:20px}
.v9 .ma-life-list h3{font-size:18px}
}