/* Urgent help page, built on the Workflow Automation page: its shell, base, buttons, reveal and send states are carried
   over unchanged. The header is the homepage draft's strip without its Book a call button. Header and footer are the site's
   own (page-seo-1/2.css); everything here scopes to .v9 or body.v9-page. Page-specific rules (uh-*) 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:transparent;background-image:none}
/* the page's light ground: a blush wash at the top right and bone at the left, over a white that warms towards the footer */
body.v9-page .main-wrap{background-color:#fff;background-image:radial-gradient(1100px 720px at 100% -140px,#FDE0E6 0%,rgba(253,224,230,0) 70%),radial-gradient(960px 680px at -12% 380px,#F1EEEA 0%,rgba(241,238,234,0) 72%),linear-gradient(180deg,#fff 0px,#FAF8F6 900px,#F6F3EF 100%);background-repeat:no-repeat}
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 strip, as on the homepage draft: the quiet links (Sign in, Urgent help?) then the menu. This page leaves
   out the draft's Book a call button, so nothing in the header competes with Request urgent help, and marks Urgent help? as
   the current page: ink, without its underline. The links go under 700px, as on the homepage ---------- */
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}
body.v9-page .hp-hd-l[aria-current="page"]{color:#232834;text-decoration:none}
body.v9-page .header .wbm_search{display:none}
body.v9-page .menu_trigger{order:3;float:none;height:38px;margin:0 0 0 8px}
body.v9-page .menu_trigger .slicknav_icon{transform-origin:100% 19px;scale:.82}
body.v9-page .hp-hd-l: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}}

/* ---------- 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 as wide as the homepage draft (1360px): from 1280px its side space is 56px, as the header's is */
.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}

/* ---------- reveal: sections ease in once as they reach the viewport (never the form) ---------- */
.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 base ---------- */
.v9-hero{background:#fff;color:#232834;padding:24px 0 64px}
.v9-hero h1{font-weight:700;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}
/* 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}}

/* ---------- 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}
@media (prefers-reduced-motion:reduce){.v9-btn,.v9 .v9-btn svg.arr{transition:none}.v9-btn:hover,.v9-btn:active{translate:none}}

/* ---------- the family's send states: on send the button quietens to a spinner (#FCA3B6); the thank-you's coral check disc;
   the error line ---------- */
.v9 .v9-btn .em-spin{display:none;width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;animation:emSpin .8s linear infinite}
@keyframes emSpin{to{transform:rotate(360deg)}}
.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){.v9 .v9-btn .em-spin{animation-duration:2.4s}}

@media (max-width:820px){
.v9-wrap{padding:0 22px}
.v9-sec{padding:64px 0}
.v9-hero{padding:20px 0 48px}
}

/* ================= URGENT HELP (this page's own) ================= */

/* ---------- hero: the copy, and the form card beside it from 1100px, where both have room (the copy column is at least
   400px and the card up to 640px). Below 1100px the card follows the copy; on phones (to 767px) Request urgent help sits
   under the lead and jumps to the form. The headline holds two lines at every width: "software incident?" is the longer
   line (8.59em in Sailec Bold at -.03em), so the size is set from the copy column's own width with room to spare ---------- */
.v9.uh-hero{padding:24px 0 96px}
/* one centred column: the copy above, the form card below it */
.v9.uh-hero{padding-top:40px;background:transparent}
.uh-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:44px}
.uh-copy{container-type:inline-size;width:100%;max-width:760px;text-align:center}
.v9 .uh-copy h1,.v9 .uh-copy .v9-lead{text-align:center}
.v9-hero.uh-hero .v9-lead{max-width:620px;margin:0 auto}
/* "Experiencing an incident?" is 11.92em in Sailec Bold at -.03em: one line wherever it fits at 42px or more, otherwise two
   balanced lines ("Experiencing" is 6.08em) */
.v9-hero.uh-hero h1{font-size:40px;text-wrap:balance}
.uh-hw{color:#d33d5c}
/* the tagline, a size up from the family's eyebrow */
.v9 .uh-tag{font-size:14px;letter-spacing:.2em;margin:0 0 18px}
@media (max-width:400px){.v9 .uh-tag{font-size:13px;letter-spacing:.18em}}
.v9 .uh-jump{display:none;height:52px;margin-top:28px;padding:0 28px;font-size:16px}
.v9 .uh-jump svg.arr{margin-left:2px}
@media (hover:hover){.v9 .uh-jump:hover svg.arr{transform:translateY(2px)}}
@media (max-width:767px){.v9 .uh-jump{display:inline-flex}}
@media (max-width:480px){.v9 .uh-jump{display:flex;width:100%}}
@media (max-width:820px){.v9.uh-hero{padding:24px 0 72px}.uh-hero-grid{gap:32px}}
@media (max-width:560px){.v9-hero.uh-hero .v9-lead{font-size:17px}}

/* ---------- the form card: a white card with a shade outline, never hidden by the reveal. Fields sit in pairs from 561px
   (first and last name, email and phone, company and job title, country and address), each pair's inputs level with each
   other even when one has a hint; one column on phones. A field shows its message only after a send attempt, or once it
   has been filled in and left ---------- */
.uh-card{position:relative;width:100%;max-width:720px;margin:0 auto;padding:40px 40px 36px;border:1.5px solid #FA5478;border-radius:20px;background:#fff;outline:0;box-shadow:10px 10px 0 0 #FBC0CC}
.uh-card.uh-sizing{overflow:hidden;transition:height .55s cubic-bezier(.65,0,.35,1)}
@media (max-width:1279px){.uh-card{padding:36px 32px 32px}}
@media (max-width:560px){.uh-card{padding:28px 20px 24px;border-radius:16px;box-shadow:8px 8px 0 0 #FBC0CC}}
.v9 .uh-card-h{font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.02em;color:#232834;text-wrap:balance}
.v9 .uh-card-p{margin:12px 0 0;max-width:560px;font-size:16.5px;line-height:1.6;color:#4f5565}
.v9 .uh-card-p a,.v9 .uh-priv a{color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .uh-card-p a:hover,.v9 .uh-priv a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .uh-card-p a:focus-visible,.v9 .uh-priv a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (max-width:560px){.v9 .uh-card-h{font-size:24px}.v9 .uh-card-p{font-size:16px}}

.uh-form{display:grid;gap:22px;margin:28px 0 0}
.uh-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
@supports (grid-template-rows:subgrid){
.uh-row{grid-template-rows:repeat(3,auto);row-gap:0}
.uh-row>.uh-f{grid-row:span 3;display:grid;grid-template-rows:subgrid}
.uh-row>.uh-f>label{grid-row:1}.uh-row>.uh-f>.uh-in{grid-row:2}.uh-row>.uh-f>.uh-err{grid-row:3}
}
@media (max-width:560px){.uh-row{grid-template-columns:minmax(0,1fr);row-gap:22px}.uh-row{grid-template-rows:none}.uh-row>.uh-f{grid-row:auto;display:block}.uh-row>.uh-f.uh-pair{display:grid;grid-template-rows:auto auto auto}}
.uh-f{min-width:0}
.v9 .uh-f>label{display:block;margin:0 0 8px;font-weight:500;font-size:15px;line-height:1.35;color:#232834}
/* required fields carry a dark coral asterisk, as on Contact (the inputs say so to screen readers with aria-required) */
.uh-req{color:#d33d5c}
.uh-opt{color:#4f5565}
.v9 .uh-hint{margin:-2px 0 10px;font-size:14.5px;line-height:1.45;color:#4f5565}
.v9 .uh-hint+.uh-hint{margin-top:-4px}
.uh-in{position:relative}
.uh-in input,.uh-in select,.uh-in textarea{display:block;width:100%;margin:0;border:1px solid #8E939E;border-radius:12px;background:#fff;font-family:inherit;font-weight:500;font-size:16px;line-height:1.4;color:#232834;-webkit-appearance:none;appearance:none;outline:0;transition:border-color .2s cubic-bezier(.65,0,.35,1),box-shadow .2s cubic-bezier(.65,0,.35,1),color .2s cubic-bezier(.65,0,.35,1)}
.uh-in input,.uh-in select{height:52px;padding:0 16px}
.uh-in select{padding-right:46px;cursor:pointer;text-overflow:ellipsis}
.uh-in textarea{min-height:142px;padding:14px 16px;resize:none;overflow-y:auto}
.v9 .uh-chev{position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;color:#232834}
.uh-in input:focus,.uh-in select:focus,.uh-in textarea:focus{border-color:#232834;box-shadow:0 0 0 1px #232834}
.uh-f.bad .uh-in input,.uh-f.bad .uh-in textarea{border-color:#d33d5c}
.uh-f.bad .uh-in input:focus,.uh-f.bad .uh-in textarea:focus{border-color:#d33d5c;box-shadow:0 0 0 1px #d33d5c}
.v9 .uh-err{display:none;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:14.5px;line-height:1.4;color:#d33d5c}
.v9 .uh-err.on{display:flex}
.uh-err::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23d33d5c' stroke-width='1.5'/%3E%3Cpath d='M8 4.7v4' fill='none' stroke='%23d33d5c' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.1' r='.95' fill='%23d33d5c'/%3E%3C/svg%3E") no-repeat center/16px 16px}
/* while sending, the fields lock and quieten; nothing else moves */
.uh-form.sending .uh-in input,.uh-form.sending .uh-in select,.uh-form.sending .uh-in textarea{color:#4f5565}
/* the honeypot: off screen, out of the tab order and hidden from screen readers */
.uh-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- sending: the button keeps its size, its label gives way to the family's spinner and it quietens to #FCA3B6 ---------- */
.uh-send{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:4px}
.v9 .uh-go{height:52px;padding:0 30px;font-size:16px;transition-property:transform,translate,box-shadow,background-color;transition-duration:150ms,150ms,150ms,.35s;transition-timing-function:var(--btn-ease),var(--btn-ease),var(--btn-ease),cubic-bezier(.65,0,.35,1)}
.uh-form.sending .uh-go{background:#FCA3B6}
.uh-form.sending .uh-go:disabled{opacity:1}
.uh-form.sending .uh-go .em-btn-lbl,.uh-form.sending .uh-go svg.arr{visibility:hidden}
.v9 .uh-form.sending .uh-go .em-spin{display:block;position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px}
.v9 .uh-priv{font-size:14.5px;line-height:1.5;color:#4f5565}
.v9 .uh-send .em-status{margin:0;min-height:0}
@media (max-width:560px){.v9 .uh-go{width:100%}}

/* ---------- after sending: the form fades out, the card settles to the confirmation's height (the view moves up to it first
   if it is above the screen), and the confirmation fades in beside the coral check disc ---------- */
.uh-stack{display:grid}
.uh-stack>*{grid-area:1/1;min-width:0}
.uh-main{transition:opacity .4s cubic-bezier(.65,0,.35,1)}
.uh-stack.out .uh-main{opacity:0;pointer-events:none}
.uh-stack.done .uh-main{display:none}
.uh-done{align-self:start;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1)}
.uh-stack.shown .uh-done{opacity:1;transform:none;pointer-events:auto}
.uh-done-in{display:flex;align-items:flex-start;gap:16px}
.uh-done .em-talk-ic{width:44px;height:44px}
.v9 .uh-done .em-talk-ic svg{width:18px;height:18px}
.v9 .uh-done-h{padding-top:8px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .uh-done-p{margin:6px 0 0;font-size:17px;line-height:1.6;color:#4f5565}
@media (max-width:560px){.v9 .uh-done-h{font-size:20px;padding-top:9px}.v9 .uh-done-p{font-size:16px}}
@media (prefers-reduced-motion:reduce){.uh-in input,.uh-in select,.uh-in textarea,.uh-main,.uh-done,.v9 .uh-go{transition:none}}


/* the two links are set bold, as in the approved copy */
.v9 .uh-card-p a,.v9 .uh-priv a{font-weight:700}

/* ---------- country and phone number share one field: a compact country picker (the chosen flag, or a globe until one is
   chosen) beside the phone number, which takes the rest of the width. The picker opens a small list with a search box over
   the fields below ---------- */
.uh-f.uh-pair{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px}
.uh-row>.uh-f.uh-pair>*,.uh-f.uh-pair>*{grid-column:auto}
.uh-pair>.uh-l-cc{grid-row:1;grid-column:1}.uh-pair>.uh-l-ph{grid-row:1;grid-column:2}
.uh-pair>.uh-cc-wrap{grid-row:2;grid-column:1}.uh-pair>.uh-in{grid-row:2;grid-column:2}
.uh-row>.uh-f.uh-pair>.uh-err,.uh-pair>.uh-err{grid-row:3;grid-column:2}
.uh-row>.uh-f.uh-pair>label{grid-row:1}
.uh-row>.uh-f.uh-pair>.uh-l-cc{grid-column:1}.uh-row>.uh-f.uh-pair>.uh-l-ph{grid-column:2}
.uh-row>.uh-f.uh-pair>.uh-in{grid-row:2;grid-column:2}
.uh-cc-wrap{position:relative}
.v9 .uh-cc{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:space-between;gap:8px;width:88px;height:52px;margin:0;padding:0 14px 0 16px;border:1px solid #8E939E;border-radius:12px;background:#fff;color:#232834;font:inherit;cursor:pointer;outline:0;transition:border-color .2s cubic-bezier(.65,0,.35,1),box-shadow .2s cubic-bezier(.65,0,.35,1)}
.v9 .uh-cc:focus-visible,.v9 .uh-cc[aria-expanded="true"]{border-color:#232834;box-shadow:0 0 0 1px #232834}
.v9 .uh-cc:disabled{cursor:default;opacity:1}
/* the flag: a solid rectangle with slightly rounded corners and a hairline edge, so white flags still read */
.v9 .uh-cc-flag.fi{display:block;flex:none;width:24px;height:24px;line-height:24px;border-radius:2px;overflow:hidden;background-color:#E4DFD9;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(35,40,52,.14)}
.v9 .uh-cc-flag.fi::before{content:none}
.v9 .uh-cc-globe{flex:none;width:24px;height:22px;color:#4f5565;stroke-width:1.5}
.v9 .uh-cc .uh-chev{position:static;flex:none;width:16px;height:16px;margin:0 0 0 auto}
.uh-cc-dial{font-size:16px;line-height:1;color:#232834;white-space:nowrap}
.uh-cc-dial:empty{display:none}
.uh-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.uh-f.uh-pair{position:relative}
.uh-f.uh-pair>.uh-cc-pop{grid-row:3;grid-column:1/-1}
.uh-cc-pop{position:absolute;left:0;top:6px;z-index:30;width:min(320px,100%);padding:8px;border:1px solid #C2C5CC;border-radius:14px;background:#fff;box-shadow:0 10px 28px rgba(35,40,52,.12)}
.v9 .uh-cc-q{display:block;width:100%;height:48px;margin:0;padding:0 14px;border:1px solid #8E939E;border-radius:10px;background:#fff;font:inherit;font-size:16px;color:#232834;outline:0;-webkit-appearance:none;appearance:none}
.v9 .uh-cc-q::placeholder{color:#6b7180}
.v9 .uh-cc-q:focus{border-color:#232834;box-shadow:0 0 0 1px #232834}
.v9 .uh-cc-list{position:relative;max-height:264px;margin:8px 0 0;padding:0;overflow-y:auto;overscroll-behavior:contain}
.v9 .uh-cc-o{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 10px;border-radius:8px;font-size:15.5px;line-height:1.3;color:#232834;cursor:pointer}
.uh-cc-o.act{background:#F1EEEA}
.uh-cc-o[aria-selected="true"]{font-weight:700}
.uh-cc-n{flex:1 1 auto;min-width:0}
.v9 .uh-cc-d{flex:none;margin-left:8px;font-size:14.5px;color:#4f5565;font-weight:500}
.v9 .uh-cc-none{margin:0;padding:12px 10px 6px;font-size:15px;line-height:1.4;color:#4f5565}
@media (prefers-reduced-motion:reduce){.v9 .uh-cc{transition:none}}


/* ---------- above the tagline: your team, and Webair's engineers joining it. A white pill holds the incident's status and
   your team's three avatars; two engineers (coral shirts) join, the pill extends to take them in, and the status turns from
   one quiet coral light to the coral check disc. Sized in em from one base, so it scales down on phones ---------- */
.uh-team{display:flex;justify-content:center;margin:0 0 20px;overflow:hidden;font-size:clamp(9.5px,2.8vw,10.5px);transition:opacity .5s cubic-bezier(.65,0,.35,1)}
.uh-team.fade{opacity:0}
.uh-team-in{display:inline-flex;align-items:center;gap:.875em;padding:.625em .625em .625em 1em;border:1.5px solid #E4DFD9;border-radius:999px;background:#fff}
.uh-st{display:flex;align-items:center;gap:.625em}
.uh-st-ic{position:relative;flex:none;width:1.5em;height:1.5em}
.uh-st-dot{position:absolute;left:50%;top:50%;width:.625em;height:.625em;border:1.25px solid #C43A5C;border-radius:50%;background:#FA5478;transform:translate(-50%,-50%);transition:width .45s cubic-bezier(.65,0,.35,1),height .45s cubic-bezier(.65,0,.35,1)}
.uh-team.fix2 .uh-st-dot{width:1.5em;height:1.5em}
.v9 .uh-st-ck{position:absolute;left:0;top:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.uh-st-ck path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s cubic-bezier(.65,0,.35,1)}
.uh-team.fix2 .uh-st-ck path{stroke-dashoffset:0;transition-delay:.25s}
.uh-st-t{display:grid;font-weight:500;font-size:.9375em;line-height:1;color:#232834;white-space:nowrap}
.uh-st-t>span{grid-area:1/1;transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.uh-st-t .t2{opacity:0}
.uh-team.fix1 .t1{opacity:0}
.uh-team.fix3 .t2{opacity:1}
.uh-team-sep{flex:none;width:1px;height:1.75em;background:#E4DFD9}
.uh-avs{display:flex;align-items:center}
.uh-av{flex:none;display:block;width:3em;height:3em;border-radius:50%;background:#fff;box-shadow:0 0 0 .1875em #fff}
.uh-av+.uh-av,.uh-ours .uh-av{margin-left:-.625em}
.uh-ours{display:flex;width:0;transition:width .8s cubic-bezier(.65,0,.35,1)}
.uh-team.join .uh-ours{width:4.75em}
.uh-ours .uh-av{opacity:0;transform:translateX(.5em);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .7s cubic-bezier(.65,0,.35,1)}
.uh-team.join .uh-ours .uh-av{opacity:1;transform:none}
.uh-team.join .uh-ours .uh-av:nth-child(1){transition-delay:.15s}
.uh-team.join .uh-ours .uh-av:nth-child(2){transition-delay:.3s}
.v9 .uh-av svg{display:block;width:100%;height:100%;stroke:none}
.uh-av .bd{fill:#fff}
.uh-av .hd,.uh-av .sh{fill:#E4DFD9;stroke:#232834;stroke-width:1.75;vector-effect:non-scaling-stroke}
.uh-av.w .sh{fill:#FA5478;stroke:#C43A5C;stroke-width:1.25}
.uh-av .ol{fill:none;stroke:#232834;stroke-width:1.75;vector-effect:non-scaling-stroke}
.uh-team.snap *{transition:none !important}
@media (prefers-reduced-motion:reduce){.uh-team,.uh-team *{transition:none !important}}

/* ---------- hover icons, as on the sister pages: ink outline over a white body, warm shade for depth, and one coral part
   that arrives once with its card. 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{position:relative;display:block;flex:none;width:72px;height:72px}
.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}
.v9 .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 .dcf{fill:#C43A5C;stroke:#C43A5C}
.cb-ic .a{opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1) var(--d,.35s)}
.v9-rv.in .cb-ic .a{opacity:1}
@media (prefers-reduced-motion:reduce){.cb-ic .a{opacity:1;transition:none}}

/* ---------- incident support from a software team: the heading, its short line and the intro on the page's centred axis,
   then the three points as three equal white cards in a row, each led by its icon. Pointing at a card plays its icon once;
   the border darkens a step. One card a row below 900px ---------- */
.v9.uh-sup{padding:32px 0 120px}
.uh-sup-head{max-width:960px;margin:0 auto 52px;text-align:center}
.v9 .uh-sup-head .v9-h2{text-align:center;text-wrap:balance}
.v9 .uh-sup-sub{margin:14px 0 0;font-weight:700;font-size:21px;line-height:1.35;letter-spacing:-.01em;color:#232834;text-align:center}
/* the intro runs 1487px in Sailec Medium at 18px, so it sets as two balanced lines under the short line */
.v9 .uh-sup-p{max-width:900px;margin:14px auto 0;font-size:18px;line-height:1.65;color:#3a3f4b;text-align:center;text-wrap:balance}
@media (max-width:899px){.v9 .uh-sup-p{font-size:17px}}
.uh-sup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1200px;margin:0 auto}
.uh-pt{min-width:0;padding:36px 32px 40px;border:1.5px solid #E4DFD9;border-radius:20px;background:#fff}
.uh-pt.v9-rv{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),border-color .25s cubic-bezier(.65,0,.35,1)}
.uh-pt.v9-rv:nth-child(2){transition-delay:.08s,.08s,0s}
.uh-pt.v9-rv:nth-child(3){transition-delay:.16s,.16s,0s}
@media (hover:hover){.uh-pt:hover{border-color:#C2C5CC}}
.v9 .uh-pt-h{margin:24px 0 0;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .uh-pt-p{margin:10px 0 0;font-size:16.5px;line-height:1.65;color:#4f5565}
@media (max-width:1099px){.uh-pt{padding:32px 26px 36px}.v9 .uh-pt-h{font-size:21px}}
@media (max-width:899px){.uh-sup-grid{grid-template-columns:minmax(0,1fr);max-width:680px;gap:16px}}
@media (max-width:820px){
.v9.uh-sup{padding:16px 0 88px}
.uh-sup-head{margin-bottom:36px}
.v9 .uh-sup-sub{font-size:19px}
.v9 .uh-sup-p{font-size:17px}
.uh-pt{padding:28px 24px 32px}
}
@media (prefers-reduced-motion:reduce){.uh-pt.v9-rv{transition-delay:0s}}

/* ---------- the close: one full-width band in dark coral (white type holds 5.1:1 on it). The words on the left, the button a
   blush pill that takes the reader back up to the form (or to the confirmation, once sent). On the right, an engineer's grid
   in coral with a few deep tiles; over it, one white app window with the grid running across it and a coral target on the
   spot that needs attention. Stacked below 900px ---------- */
.v9.uh-talk{margin:0 0 96px;background:#C43A5C;color:#fff}
.uh-talk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px 96px;align-items:center;max-width:1180px;padding-top:128px;padding-bottom:128px}
.v9 .uh-talk-h{max-width:560px;font-weight:700;font-size:clamp(34px,3.3vw,48px);line-height:1.15;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.v9 .uh-talk-p{max-width:540px;margin:26px 0 0;font-size:19px;line-height:1.6;color:#fff}
.v9 a.uh-talk-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;margin-top:40px;padding:0 30px;border-radius:9999px;background:#FDE0E6;color:#C43A5C;font-weight:700;font-size:17px;line-height:1;text-decoration:none;box-shadow:0 0 0 0 #FBC0CC;transition:translate 150ms cubic-bezier(.5,2.5,.7,.7),box-shadow 150ms cubic-bezier(.5,2.5,.7,.7)}
@media (hover:hover){.v9 a.uh-talk-btn:hover{color:#C43A5C;translate:0 -4px;box-shadow:0 4px 0 0 #86314B}}
.v9 a.uh-talk-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.uh-talk-art{margin:0;width:100%;max-width:624px;justify-self:end}
.v9 .uh-talk-art svg{display:block;width:100%;height:auto;stroke:none}
.uh-talk-art .pn{fill:#FA5478}
.uh-talk-art .tl{fill:#86314B}
.uh-talk-art .wd{fill:#fff}
.uh-talk-art .dt{fill:#FBC0CC}
.v9 .uh-talk-art .gl{fill:none;stroke:#FBC0CC;stroke-width:2.5;stroke-linecap:butt}
.v9 .uh-talk-art .pb{fill:none;stroke:#FDE0E6;stroke-width:4}
.uh-talk-art .tg-f{fill:#FDE0E6;fill-opacity:.55}
.v9 .uh-talk-art .tg-l{fill:none;stroke:#FA5478;stroke-width:3;stroke-linecap:round}
@media (max-width:899px){.uh-talk-grid{grid-template-columns:minmax(0,1fr);padding-top:88px;padding-bottom:88px}.uh-talk-art{justify-self:start;max-width:560px}}
@media (max-width:820px){.v9.uh-talk{margin-bottom:72px}.v9 .uh-talk-p{font-size:17px}}
@media (max-width:480px){.v9 a.uh-talk-btn{display:flex;width:100%}.uh-talk-grid{padding-top:72px;padding-bottom:72px}}
@media (prefers-reduced-motion:reduce){.v9 a.uh-talk-btn{transition:none}.v9 a.uh-talk-btn:hover{translate:none}}

/* ---------- incident resources (hidden until the articles exist): the heading on the left, the three articles on the right as a
   short numbered reading list, each number white on a coral disc, each row a whole link with an arrow that steps forward ---------- */
.v9.uh-res{padding:8px 0 112px}
.uh-res-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px 72px;align-items:start;max-width:1180px}
.v9 .uh-res-h{padding-top:6px}
.uh-res-list{display:grid;border-top:1.5px solid #E4DFD9}
.uh-res-list li{border-bottom:1.5px solid #E4DFD9}
.v9 a.uh-res-a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:20px;align-items:center;min-height:76px;padding:18px 4px;color:#232834;text-decoration:none}
.uh-res-n{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#FA5478;color:#fff;font-weight:700;font-size:15px;line-height:1}
.uh-res-t{font-weight:700;font-size:19px;line-height:1.4;letter-spacing:-.01em;text-wrap:balance}
.uh-res-go{font-weight:700;font-size:18px;transition:transform .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 a.uh-res-a:hover{color:#232834}.v9 a.uh-res-a:hover .uh-res-go{transform:translateX(4px)}}
.v9 a.uh-res-a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:6px}
@media (max-width:899px){.uh-res-grid{grid-template-columns:minmax(0,1fr)}.v9.uh-res{padding-bottom:88px}}
@media (max-width:560px){.v9 a.uh-res-a{gap:14px}.uh-res-t{font-size:17px}}
@media (prefers-reduced-motion:reduce){.uh-res-go{transition:none}}