/* ==========================================================================
   AI WORKFORCE · V8, new design (12 Oct 2026)
   Every section here is drawn fresh in the homepage's language (white,
   grey and deep grounds, pastel colour cards, the LED character, dotted
   wires). None of the old inner-page section styles are loaded.

     hero       the new hire's staff badge on a lanyard
     levels     a staircase: one hard question, three answers, three steps
     standards  three layers stacked one on another
   ========================================================================== */

/* --- Shared ----------------------------------------------------------------- */
.awx-head { max-width: 900px; margin-inline: auto; text-align: center; }
.awx-head .lede { margin: 18px auto 0; max-width: 40em; text-wrap: balance; }
.page-awx main .h2 { text-wrap: balance; }

/* ==========================================================================
   HERO · the new hire
   ========================================================================== */
.awx-hero { position: relative; overflow: hidden; padding-block: clamp(28px, 4vw, 56px) clamp(64px, 7vw, 104px); background: var(--white); }
.awx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.awx-hero__title { font-size: 48px; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.awx-hero__lede { margin: 22px 0 0; max-width: 31em; font: 500 clamp(17px, 1.4vw, 20px)/1.55 var(--font); color: var(--ink-2); }
.awx-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* The badge hangs in the right column; its strap runs up under the header. */
.awx-hang { position: relative; display: grid; justify-items: center; padding: 34px 0 8px; }
.awx-hang::before { content: ''; position: absolute; left: 50%; top: 52%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(142, 155, 255, .22), rgba(142, 155, 255, 0)); pointer-events: none; }
.awx-hang__swing { position: relative; width: min(340px, 100%); transform-origin: 50% -420px; }
.awx-strap { position: absolute; left: 50%; bottom: calc(100% + 4px); width: 24px; height: 640px; margin-left: -12px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #3A47A8 0, #4857C2 22%, #5B6AD8 50%, #4857C2 78%, #3A47A8 100%); box-shadow: 0 10px 18px -12px rgba(42, 36, 100, .6); }
.awx-strap::after { content: ''; position: absolute; inset: 0 5px; border-left: 1.5px dashed rgba(255, 255, 255, .28); border-right: 1.5px dashed rgba(255, 255, 255, .28); }

.awx-badge { border-radius: 26px; background: #fff; }
.awx-badge--main { position: relative; z-index: 3; padding-bottom: 14px; box-shadow: 0 0 0 1px rgba(23, 23, 43, .06), 0 44px 80px -38px rgba(21, 20, 43, .5); }
.awx-badge__clip { position: absolute; z-index: 4; left: 50%; top: -16px; width: 46px; height: 30px; margin-left: -23px; border-radius: 10px; background: linear-gradient(180deg, #F1F2F7, #C7CBD8); box-shadow: inset 0 -2px 0 rgba(23, 23, 43, .1), 0 6px 10px -6px rgba(21, 20, 43, .5); }
.awx-badge__clip i { position: absolute; left: 50%; top: 9px; width: 24px; height: 6px; margin-left: -12px; border-radius: 3px; background: #9DA2B5; }
.awx-badge__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 22px 18px; border-radius: 26px 26px 0 0; background: #4857C2; color: #fff; }
.awx-badge__top img { width: 78px; height: auto; }
.awx-badge__top span { font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.awx-badge__photo { position: relative; height: 172px; margin: 16px 18px 0; border-radius: 20px; overflow: hidden; display: grid; place-items: end center; background: radial-gradient(120% 90% at 28% 8%, #FFF8DF 0%, transparent 58%), linear-gradient(160deg, #FFEAB0 0%, #FFD36A 100%); }
.awx-badge__bot { width: 172px; height: 172px; margin-bottom: -18px; }
.awx-badge__id { padding: 16px 22px 0; }
.awx-badge__id b { display: block; font: 700 22px/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); }
.awx-badge__id small { display: block; margin-top: 4px; font: 500 13px/1.3 var(--font); color: var(--muted); }
.awx-creds { list-style: none; margin: 14px 14px 0; padding: 0; display: grid; gap: 6px; }
.awx-creds li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px; background: var(--paper); }
.awx-creds li > div { min-width: 0; }
.awx-creds__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 13%, #fff); color: var(--cc); font-size: 18px; }
.awx-creds small { display: block; font: 600 11px/1.2 var(--font); color: var(--muted); }
.awx-creds b { display: block; margin-top: 2px; font: 700 13.5px/1.3 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awx-creds__ch { display: flex !important; align-items: center; gap: 7px; }
.awx-creds__ch .icon { font-size: 18px; color: #4857C2; }
.awx-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #22C08F; color: #fff; font-size: 12px; font-style: normal; }

/* Two teammates' badges, fanned out behind. */
.awx-badge--back { position: absolute; z-index: 1; left: 9%; top: 26px; width: 82%; height: 86%; overflow: hidden; transform-origin: 50% 0; box-shadow: 0 0 0 1px rgba(23, 23, 43, .06), 0 24px 48px -30px rgba(21, 20, 43, .45); }
.awx-badge--back::after { content: ''; position: absolute; left: 16px; right: 16px; top: 82px; bottom: 16px; border-radius: 16px; background: var(--paper); }
.awx-badge--l { transform: translateX(-40%) rotate(-9deg); }
.awx-badge--r { transform: translateX(40%) rotate(9deg); }
.awx-badge--back .awx-badge__top { padding: 22px 18px; background: var(--bc); }
.awx-badge__role { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); color: #fff; font-size: 18px; }
.awx-badge--r .awx-badge__top { justify-content: flex-end; }

/* ==========================================================================
   THE THREE LEVELS · a staircase
   ========================================================================== */
.awx-stairs { margin-top: clamp(40px, 5vw, 64px); }
.awx-ask { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 0 auto clamp(30px, 4vw, 52px); padding: 10px 22px 10px 10px; border-radius: 26px 26px 26px 8px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05), 0 24px 48px -30px rgba(23, 23, 43, .35); }
.awx-ask__av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #F2659A; color: #fff; font: 800 15px/1 var(--font); }
.awx-ask__q { margin: 0; font: 600 clamp(16px, 1.4vw, 19px)/1.35 var(--font); letter-spacing: -.01em; color: var(--ink); }

.awx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.awx-step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.awx-reply { position: relative; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); font: 500 14.5px/1.45 var(--font); color: var(--ink-2); }
.awx-reply p { margin: 0; }
.awx-reply__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.awx-reply__opts span { padding: 6px 11px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 12.5px/1 var(--font); color: var(--muted); }
.awx-step--2 .awx-reply { color: var(--body); }
.awx-reply--us { border-radius: 20px 20px 6px 20px; background: #4857C2; color: #fff; box-shadow: 0 22px 40px -22px rgba(72, 87, 194, .8); }
.awx-reply__by { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; font: 700 12px/1 var(--font); color: rgba(255, 255, 255, .85); }
.awx-reply__mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.awx-reply__mark svg { width: 13px; height: 9px; color: #4857C2; }

.awx-step__block { position: relative; overflow: hidden; padding: 24px 24px 28px; border-radius: 28px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); }
.awx-step--1 .awx-step__block { min-height: 372px; }
.awx-step--2 .awx-step__block { min-height: 432px; }
.awx-step--3 .awx-step__block { min-height: 492px; background: radial-gradient(120% 80% at 20% 0%, #4A43A0 0%, transparent 60%), linear-gradient(165deg, #3B3484 0%, #2A2464 55%, #1B1742 100%); box-shadow: 0 44px 80px -40px rgba(42, 36, 100, .75); }
.awx-step__n { position: relative; font: 700 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.awx-step__t { position: relative; margin: 10px 0 0; font: 700 clamp(20px, 1.7vw, 24px)/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); }
.awx-step__dl { position: relative; margin: 18px 0 0; }
.awx-step__dl > div { padding: 13px 0; border-top: 1px solid var(--line); }
.awx-step__dl dt { font: 700 11.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.awx-step__dl dd { margin: 5px 0 0; font: 500 15.5px/1.5 var(--font); color: var(--ink-2); }
.awx-step__big { position: absolute; right: 14px; bottom: -34px; font: 800 168px/1 var(--font); letter-spacing: -.06em; color: rgba(23, 23, 43, .045); pointer-events: none; }
.awx-step--3 .awx-step__n { color: #B9C0FF; }
.awx-step--3 .awx-step__t, .awx-step--3 .awx-step__dl dd { color: #fff; }
.awx-step--3 .awx-step__dl dt { color: rgba(255, 255, 255, .6); }
.awx-step--3 .awx-step__dl > div { border-top-color: rgba(255, 255, 255, .14); }
.awx-step--3 .awx-step__big { color: rgba(255, 255, 255, .07); }

/* ==========================================================================
   BUILT ON INDUSTRY STANDARDS · the stack
   ========================================================================== */
.awx-std__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.awx-stack { --ps: 280px; position: relative; height: calc(var(--ps) * 1.62); }
.awx-slot { position: absolute; left: 50%; width: var(--ps); height: var(--ps); margin-left: calc(var(--ps) / -2); }
.awx-plate { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 36px; background: linear-gradient(135deg, var(--p1) 0%, var(--p2) 100%); transform: rotateX(60deg) rotateZ(-45deg);
  box-shadow: 1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge), 5px 5px 0 var(--edge), 6px 6px 0 var(--edge), 7px 7px 0 var(--edge), 8px 8px 0 var(--edge), 9px 9px 0 var(--edge), 10px 10px 0 var(--edge), 30px 30px 50px rgba(21, 20, 43, .16); }
.awx-slot--1 { top: calc(var(--ps) * .62); }
.awx-slot--2 { top: calc(var(--ps) * .31); }
.awx-slot--3 { top: calc(var(--ps) * -.12); }
.awx-stack { margin-top: calc(var(--ps) * .12); }
.awx-plate__n { position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; font: 800 18px/1 var(--font); color: var(--edge); }
.awx-plate__grid { display: grid; grid-template-columns: repeat(4, 46px); gap: 12px; }
.awx-plate__grid i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #B47A00; font-size: 22px; }
.awx-plate__tiles { display: flex; gap: 14px; }
.awx-plate__tiles i { width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; background: #fff; color: #14A578; font-size: 30px; box-shadow: 4px 4px 0 rgba(20, 165, 120, .25); }
.awx-plate__chat { display: grid; gap: 10px; width: 170px; }
.awx-plate__chat i { height: 30px; border-radius: 15px; background: #fff; }
.awx-plate__chat i:nth-child(1) { width: 72%; }
.awx-plate__chat i:nth-child(2) { width: 86%; justify-self: end; background: #4857C2; }
.awx-plate__chat i:nth-child(3) { width: 56%; }

.awx-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.awx-layer { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 24px; border-radius: 24px; background: var(--ct); transition: background-color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.awx-layer__n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); color: #fff; font: 800 18px/1 var(--font); transition: background-color .5s, color .5s; }
.awx-layer h3 { margin: 0; padding-top: 2px; font: 700 var(--fs-h3)/1.25 var(--font); letter-spacing: -.02em; color: var(--ink); }
.awx-layer p { margin: 6px 0 0; font: 400 var(--fs-p)/1.55 var(--font); color: var(--ink-2); }
/* Before its layer lands (set by the script): quiet. */
.awx-layer.is-dim { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.awx-layer.is-dim .awx-layer__n { background: var(--sand-2); color: var(--muted); }

/* Coloured title words on the deep bands. */
.page-awx .section--deep .w.em, .page-awx .section--deep .h2 em { color: var(--accent-lift); }

/* ==========================================================================
   ONE ROLE. ONE JOB. · the roles carousel
   ========================================================================== */
.awx-car { --step: 300px; position: relative; margin-top: clamp(32px, 4vw, 52px); }
.awx-car__list { list-style: none; margin: 0; padding: 0; position: relative; height: 430px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.awx-role { position: absolute; left: 50%; top: 0; width: 360px; margin-left: -180px; display: grid; justify-items: center; text-align: center; transform-origin: 50% 250px; transform: translateX(calc(var(--o, 0) * var(--step))) scale(var(--s, 1)); opacity: var(--a, 1); transition: transform .75s var(--ease-out), opacity .5s; cursor: pointer; }
.awx-role.is-on { cursor: default; }
.awx-role.is-gone { pointer-events: none; }
.awx-role__fig { position: relative; width: 250px; height: 256px; display: grid; place-items: end center; }
.awx-role__bot { position: relative; z-index: 2; width: 220px; height: 220px; margin-bottom: 22px; }
.awx-role.is-on.is-hop .awx-role__bot { animation: mHop .7s var(--ease-out); }
.awx-role__base { position: absolute; left: 50%; bottom: 6px; width: 206px; height: 50px; margin-left: -103px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #fff 0%, #fff 52%, #E6E8EF 100%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 24%, transparent), 0 22px 34px -18px rgba(23, 23, 43, .35); }
.awx-role__txt { max-width: 360px; margin-top: 18px; transition: opacity .45s; }
.awx-role:not(.is-on) .awx-role__txt { opacity: 0; }
.awx-role h3 { margin: 0; font: 700 clamp(22px, 2vw, 28px)/1.2 var(--font); letter-spacing: -.025em; color: var(--ink); }
.awx-role p { margin: 8px 0 0; font: 400 var(--fs-p)/1.55 var(--font); color: var(--body); }
.awx-car__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.awx-car__btn { width: 50px; height: 50px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); font-size: 20px; cursor: pointer; box-shadow: 0 0 0 1px var(--line), 0 12px 24px -16px rgba(23, 23, 43, .45); transition: transform .3s var(--ease-soft), box-shadow .3s; }
.awx-car__btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--accent-soft), 0 16px 28px -16px rgba(72, 87, 194, .55); }
.awx-car__btn:not(.awx-car__btn--next) .icon { transform: rotate(180deg); }
.awx-car__dots { display: flex; gap: 14px; }
.awx-dot { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 5px; background: #C9CCD6; cursor: pointer; transition: width .4s var(--ease-out), background-color .4s; }
/* a finger-sized hit area around each dot (QA 22 Oct) */
.awx-dot::before { content: ""; position: absolute; inset: -7px; }
.awx-dot[aria-current="true"] { width: 30px; background: var(--rc, var(--accent)); }
/* Without the script: every role, in a wrapping row. */
.awx-car:not(.is-ready) .awx-car__list { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; -webkit-mask-image: none; mask-image: none; }
.awx-car:not(.is-ready) .awx-role { position: static; margin: 0; transform: none; }
.awx-car:not(.is-ready) .awx-role__txt { opacity: 1; }
.awx-car:not(.is-ready) .awx-car__nav { display: none; }

/* ==========================================================================
   READY FOR EVERY INDUSTRY · the directory
   ========================================================================== */
.awx-dir { margin-top: clamp(36px, 4.5vw, 56px); }
.awx-seg { position: relative; display: flex; width: fit-content; max-width: 100%; margin: 0 auto; padding: 6px; border-radius: var(--r-pill); background: var(--sand); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.awx-seg::-webkit-scrollbar { display: none; }
.awx-seg__pill { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: var(--r-pill); background: var(--ink); box-shadow: 0 10px 20px -12px rgba(23, 23, 43, .6); transition: transform .5s var(--ease-out), width .5s var(--ease-out); }
.awx-seg__tab { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 16px 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; font: 600 15px/1 var(--font); color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: color .35s; }
.awx-seg__tab .icon { font-size: 19px; color: var(--cc); transition: color .35s; }
.awx-seg__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.awx-seg__tab[aria-selected="true"] { color: #fff; }
.awx-seg__tab[aria-selected="true"] .icon { color: color-mix(in srgb, var(--cc) 45%, #fff); }
.awx-seg__n { min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); display: grid; place-items: center; background: rgba(23, 23, 43, .06); font: 700 12px/1 var(--font); transition: background-color .35s; }
.awx-seg__tab[aria-selected="true"] .awx-seg__n { background: rgba(255, 255, 255, .16); }
/* Without the script the pill isn't placed: the chosen tab carries the ink. */
.awx-dir:not(.is-ready) .awx-seg__tab[aria-selected="true"] { background: var(--ink); }
.awx-dir__panels { margin-top: 28px; }
.awx-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.awx-tile { position: relative; display: grid; align-content: space-between; gap: 26px; min-height: 132px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(23, 23, 43, .04); transition: transform .35s var(--ease-out), box-shadow .35s; }
.awx-tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--cc), 0 22px 40px -26px color-mix(in srgb, var(--cc) 70%, transparent); }
.awx-tile__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 12%, #fff); color: var(--cc); font-size: 23px; }
.awx-tile__n { position: absolute; top: 20px; right: 20px; font: 700 12px/1 var(--font); letter-spacing: .04em; color: #A5A9B8; }
.awx-tile b { font: 700 16px/1.3 var(--font); letter-spacing: -.01em; color: var(--ink); }

/* ==========================================================================
   THE JOURNEY · one phone, four moments
   ========================================================================== */
.awx-jr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(24px, 3vw, 40px); }
.awx-jr__steps { list-style: none; margin: 0; padding: 0; }
.awx-jr__step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .32; transition: opacity .5s; }
.awx-jr__step.is-on { opacity: 1; }
.awx-jr__n { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 24%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc) 70%, transparent); font: 800 16px/1 var(--font); color: #fff; }
.awx-jr__step h3 { margin: 22px 0 0; font: 600 clamp(30px, 3.2vw, 44px)/1.1 var(--font); letter-spacing: -.035em; color: #fff; }
.awx-jr__step > p { margin: 14px 0 0; max-width: 26em; font: 400 var(--fs-p)/1.6 var(--font); color: var(--on-deep-2); }
.awx-jr__mini { display: none; }
.awx-jr__col { position: relative; }
.awx-phone { position: sticky; top: calc(50vh - 260px); width: 330px; height: 560px; margin: 0 auto; padding: 14px 14px 10px; border-radius: 46px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 0 0 10px #24224A, 0 0 0 11px rgba(255, 255, 255, .12), 0 60px 120px -40px rgba(0, 0, 0, .8); }
.awx-phone__notch { width: 96px; height: 22px; margin: -14px auto 6px; border-radius: 0 0 14px 14px; background: #24224A; }
.awx-phone__head { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; border-bottom: 1px solid var(--line); }
.awx-phone__av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #F2659A; color: #fff; font: 800 14px/1 var(--font); }
.awx-phone__head b { display: block; font: 700 15px/1.2 var(--font); color: var(--ink); }
.awx-phone__head small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font); color: var(--muted); }
.awx-phone__trail { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0 6px; }
.awx-phone__trail > span { width: 18px; height: 2px; background: repeating-linear-gradient(90deg, #C9CCD6 0 3px, transparent 3px 6px); }
.awx-phone__trail i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--cc); font-size: 15px; font-style: normal; filter: grayscale(1); opacity: .45; transition: opacity .4s, filter .4s, box-shadow .4s, background-color .4s; }
.awx-phone__trail i img { width: 15px; height: 15px; }
.awx-phone__trail i.is-on { filter: none; opacity: 1; background: color-mix(in srgb, var(--cc) 12%, #fff); box-shadow: 0 0 0 2px var(--cc); }
.awx-phone__screen { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px); }
.awx-phone__feed { display: grid; gap: 14px; padding: 4px 4px 8px; }
.awx-phone .awx-chunk { display: none; }
.awx-phone .awx-chunk.is-shown { display: grid; }
.awx-phone .awx-chunk.is-new > * { animation: awxIn .45s var(--ease-out) both; }
.awx-phone .awx-chunk.is-new > *:nth-child(2) { animation-delay: .25s; }
.awx-phone .awx-chunk.is-new > *:nth-child(3) { animation-delay: .7s; }
.awx-phone .awx-chunk.is-new > *:nth-child(4) { animation-delay: 1.1s; }
.awx-jr:not(.is-ready) .awx-phone .awx-chunk { display: grid; }
@keyframes awxIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.awx-chunk { display: grid; gap: 8px; }
.awx-jchip { justify-self: center; display: inline-flex; align-items: center; gap: 7px; margin: 0 0 2px; padding: 4px 11px 4px 4px; border-radius: var(--r-pill); background: var(--paper); font: 700 11.5px/1 var(--font); color: var(--ink-2); }
.awx-jchip span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--cc); font-size: 13px; }
.awx-jchip img { width: 13px; height: 13px; }

/* Chat bubbles, used in the phone and in the rules console. */
.awx-b { margin: 0; max-width: 86%; padding: 10px 13px; border-radius: 16px; font: 500 14px/1.42 var(--font); }
.awx-b--in { justify-self: start; background: var(--paper); color: var(--ink); border-bottom-left-radius: 5px; }
.awx-b--out { justify-self: end; background: #4857C2; color: #fff; border-bottom-right-radius: 5px; }
.awx-b--done { justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green-ink); font: 700 12.5px/1 var(--font); }
.awx-b--done i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #22C08F; color: #fff; font-size: 11px; font-style: normal; }
.awx-prod { justify-self: end; width: min(230px, 86%); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 12px 7px 7px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); background: #fff; }
.awx-prod img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.awx-prod b { display: block; font: 700 13.5px/1.25 var(--font); color: var(--ink); }
.awx-prod small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font); color: var(--muted); }

/* ==========================================================================
   COVER EVERY SHIFT · the demand chart
   ========================================================================== */
.awx-st { max-width: 1120px; margin: clamp(36px, 4.5vw, 56px) auto 0; }
.awx-st__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.awx-st__tab { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 15px/1 var(--font); color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.awx-st__tab .icon { font-size: 18px; color: var(--accent); transition: color .3s; }
.awx-st__tab:hover { box-shadow: inset 0 0 0 1.5px var(--accent-soft); }
.awx-st__tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.awx-st__tab[aria-selected="true"] .icon { color: #AEB7FF; }
.awx-st__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.awx-st__panel[hidden] { display: none; }
.awx-st__card { display: flex; flex-direction: column; padding: 26px 26px 22px; border-radius: 28px; background: var(--sand); }
.awx-st__card--us { background: linear-gradient(165deg, #F4F5FF 0%, #E7EAFF 100%); box-shadow: inset 0 0 0 1.5px #D3D8F6; }
.awx-st__k { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 14px/1.2 var(--font); color: var(--muted); }
.awx-st__k > .icon { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: #fff; color: var(--muted); }
.awx-st__card--us .awx-st__k { color: var(--accent); }
.awx-st__mark { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #4857C2; }
.awx-st__mark svg { width: 16px; height: 10px; color: #fff; }
.awx-st__v { margin: 14px 0 18px; font: 600 clamp(20px, 1.9vw, 25px)/1.3 var(--font); letter-spacing: -.02em; color: var(--ink); }
.awx-st__fig { margin-top: auto; padding-top: 16px; padding: 16px 16px 10px; border-radius: 20px; background: #fff; }
.awx-chart { display: block; width: 100%; height: auto; clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-out); }
.awx-st__panel.is-pre .awx-chart { clip-path: inset(0 100% 0 0); transition: none; }
.awx-axis { display: flex; justify-content: space-between; padding: 8px 4px 0; font: 700 11px/1 var(--font); color: #A5A9B8; }
.awx-axis .icon { font-size: 16px; }
.awx-axis--bars i { flex: 1; display: grid; place-items: center; font-style: normal; }
.awx-axis--bars i img { width: 15px; height: 15px; }
.awx-st__key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; font: 600 12.5px/1 var(--font); color: var(--muted); }
.awx-st__key i { width: 12px; height: 12px; border-radius: 4px; }
.awx-st__key i + i, .awx-st__key i:not(:first-child) { margin-left: 10px; }
.awx-st__key .is-cov { background: #C9CCD6; }
.awx-st__key .is-miss { background: repeating-linear-gradient(45deg, #FF9A6B 0 2px, #FFF1E8 2px 4px); box-shadow: inset 0 0 0 1px #FF9A6B; }
.awx-st__key .is-us { background: #4857C2; }

/* ==========================================================================
   PROOF · the dark band
   ========================================================================== */
.awx-proof__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.awx-proof__top .h2 { max-width: 14em; }
.awx-proof__top .lede { max-width: 40em; margin-top: 20px; color: var(--on-deep-2); }
.awx-proof__logo { width: 92px; height: auto; padding: 8px; border-radius: 18px; background: #fff; }
.awx-proof__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(40px, 5vw, 64px) 0 0; border-block: 1px solid var(--line-deep); }
.awx-proof__stats > div { padding: 32px 0 30px; }
.awx-proof__stats > div + div { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--line-deep); }
.awx-proof__stats dd { margin: 0; }
.awx-proof__stats b { display: block; font: 700 clamp(56px, 7vw, 104px)/1 var(--font); letter-spacing: -.05em; color: #fff; font-variant-numeric: tabular-nums; }
.awx-proof__stats span { display: block; margin-top: 12px; font: 500 16px/1.4 var(--font); color: var(--on-deep-2); }
.awx-proof__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.awx-proof__photo { position: relative; margin: 0; min-height: 380px; border-radius: 28px; overflow: hidden; background: var(--deep-2); }
.awx-proof__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.awx-proof__on { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; padding: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.awx-proof__on i { --cc: var(--accent); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--cc); font-size: 19px; font-style: normal; }
.awx-proof__on img { width: 20px; height: 20px; }
.awx-quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(28px, 3.5vw, 44px); border-radius: 28px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.awx-quote__k { margin: 0; font: 700 14px/1.2 var(--font); color: var(--accent-lift); }
.awx-quote blockquote { margin: 16px 0 0; }
.awx-quote blockquote p { margin: 0; font: 500 clamp(20px, 1.9vw, 26px)/1.45 var(--font); letter-spacing: -.015em; color: #fff; text-wrap: pretty; }
.awx-quote figcaption b { display: block; font: 700 16px/1.3 var(--font); color: #fff; }
.awx-quote figcaption span { display: block; margin-top: 3px; font: 500 14px/1.4 var(--font); color: var(--on-deep-3); }

/* ==========================================================================
   THE TEAM STAYS IN CHARGE · the rules console
   ========================================================================== */
.awx-console { max-width: 1100px; margin: clamp(40px, 5vw, 64px) auto 0; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -48px rgba(23, 23, 43, .45); }
.awx-console__bar { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #FAFBFC; font: 600 12.5px/1 var(--font); color: var(--muted); }
.awx-console__bar i { width: 10px; height: 10px; border-radius: 50%; background: #E2E4EA; }
.awx-console__bar span { margin-left: 10px; }
.awx-console__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.awx-rules { display: grid; align-content: start; gap: 4px; padding: 12px; border-right: 1px solid var(--line); }
.awx-rule { --cc: var(--accent); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 14px; border: 0; border-radius: 18px; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; transition: background-color .3s, box-shadow .3s; }
.awx-rule:hover { background: var(--paper); }
.awx-rule:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.awx-rule[aria-selected="true"] { background: color-mix(in srgb, var(--cc) 7%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc) 35%, #fff); }
.awx-rule__ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 13%, #fff); color: var(--cc); font-size: 21px; }
.awx-rule__txt b { display: block; font: 700 16.5px/1.25 var(--font); color: var(--ink); }
.awx-rule__txt span { display: block; margin-top: 4px; font: 500 14.5px/1.45 var(--font); color: var(--body); }
.awx-sw { position: relative; width: 44px; height: 26px; border-radius: var(--r-pill); background: #22C08F; transition: background-color .35s; }
.awx-sw i { position: absolute; top: 3px; left: 21px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(23, 23, 43, .2); transition: left .4s var(--ease-soft); }
.awx-rule.is-off .awx-sw { background: #D9DCE5; }
.awx-rule.is-off .awx-sw i { left: 3px; }
.awx-views { display: grid; place-items: center; min-height: 440px; padding: 28px; background: radial-gradient(120% 90% at 28% 8%, #EAF6FF 0%, transparent 58%), linear-gradient(160deg, #BFE3FF 0%, #7CC3F5 100%); }
.awx-view { width: min(420px, 100%); padding: 16px; border-radius: 22px; background: #fff; box-shadow: var(--card-shadow); animation: awxIn .45s var(--ease-out); }
.awx-view[hidden] { display: none; }
.awx-view:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.awx-chat { display: grid; gap: 10px; }
.awx-b--staff { justify-self: start; background: #FFF4D6; color: var(--ink); border-bottom-left-radius: 5px; }
.awx-b--staff small { display: block; margin-bottom: 3px; font: 700 11px/1.2 var(--font); color: #9A6200; }
.awx-join { justify-self: center; display: inline-flex; align-items: center; gap: 7px; margin: 2px 0; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); background: var(--paper); font: 700 12px/1 var(--font); color: var(--ink-2); }
.awx-join__av { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #FFB547; color: #fff; font: 800 11px/1 var(--font); }
.awx-appr { display: grid; gap: 12px; }
.awx-appr__k { justify-self: start; margin: 0; padding: 6px 11px; border-radius: var(--r-pill); background: #FFF1E6; font: 700 12px/1 var(--font); color: #B4561F; }
.awx-appr__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--paper); }
.awx-appr__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: #E06A2B; font-size: 21px; }
.awx-appr__item b { display: block; font: 700 15px/1.25 var(--font); color: var(--ink); }
.awx-appr__item small { display: block; margin-top: 3px; font: 500 12.5px/1.35 var(--font); color: var(--muted); }
.awx-appr__btns { display: flex; gap: 8px; }
.awx-appr__btns > span { flex: 1; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 14px/1 var(--font); }
.awx-appr__no { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.awx-appr__yes { background: #22C08F; color: #fff; }
.awx-appr__done { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); background: var(--green-tint); font: 700 12px/1 var(--font); color: var(--green-ink); }
.awx-view:not([hidden]) .awx-appr__yes { animation: awxPress .5s .6s; }
.awx-view:not([hidden]) .awx-appr__done { animation: awxIn .45s 1.05s var(--ease-out) both; }
@keyframes awxPress { 40% { transform: scale(.94); } }
.awx-perm__k { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 14px/1.2 var(--font); color: var(--ink); }
.awx-perm__who { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 13%, #fff); color: var(--cc); font-size: 16px; }
.awx-perm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.awx-perm li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 24px; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 13px; background: var(--paper); }
.awx-perm li span { font: 600 12.5px/1.2 var(--font); color: var(--muted); }
.awx-perm li b { min-width: 0; font: 600 13.5px/1.3 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awx-perm li.is-locked b { color: #B0B4C2; letter-spacing: .04em; }
.awx-perm__ok, .awx-perm__lock { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-style: normal; }
.awx-perm__ok { background: #22C08F; color: #fff; }
.awx-perm__lock { background: #E6E8EE; color: var(--muted); font-size: 13px; }
.awx-rev { display: grid; gap: 10px; }
.awx-rev__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 8px; border-bottom: 1px solid var(--line); }
.awx-rev__head b { font: 700 14px/1.2 var(--font); color: var(--ink); }
.awx-rev__stars { font-size: 16px; letter-spacing: 2px; color: #FFB547; }
.awx-rev s { opacity: .62; text-decoration-color: #FFB3C9; text-decoration-thickness: 2px; }
.awx-rev ins { text-decoration: none; padding: 0 3px; border-radius: 4px; background: rgba(142, 240, 196, .26); }
.awx-rev__note { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 0; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); background: #F1ECFF; font: 700 12px/1 var(--font); color: #57369F; }

/* The ask after the console: an indigo band. */
.awx-band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: clamp(56px, 7vw, 96px); padding: clamp(32px, 4vw, 52px) clamp(28px, 4.5vw, 64px); border-radius: 32px; background: radial-gradient(80% 160% at 100% 0%, #6070E0 0%, transparent 60%), #4857C2; }
.awx-band::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.6px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000 100%); mask-image: linear-gradient(100deg, transparent 45%, #000 100%); pointer-events: none; }
.awx-band__t { position: relative; z-index: 1; margin: 0; max-width: 18em; font: 600 clamp(26px, 2.8vw, 40px)/1.15 var(--font); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.awx-band__t em { font-style: normal; color: #C9CEFF; }
.awx-band__btn { position: relative; z-index: 1; flex: none; background: #fff; color: #4857C2; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .5); }
.awx-band__btn:hover { background: #F4F5FF; color: #3A47A8; }

/* ==========================================================================
   THE CLOSING
   ========================================================================== */
.awx-final { position: relative; overflow: hidden; padding-top: clamp(80px, 10vw, 140px); background: #fff; }
.awx-final__sky { position: absolute; inset: 0; background: radial-gradient(60% 75% at 50% 100%, #DCE1FF 0%, rgba(220, 225, 255, 0) 70%), linear-gradient(180deg, #fff 0%, #F3F5FF 100%); }
.awx-final__in { position: relative; display: grid; justify-items: center; text-align: center; }
.awx-final__copy .h2 { max-width: 15em; }
.awx-final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.awx-final__bot { position: relative; width: 280px; height: 262px; margin-top: 40px; }
.awx-final__m { position: absolute; z-index: 2; left: 50%; bottom: 22px; width: 240px; height: 240px; margin-left: -120px; }
.awx-final__base { position: absolute; left: 50%; bottom: 0; width: 230px; height: 54px; margin-left: -115px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #fff 0%, #fff 52%, #E2E6F5 100%); box-shadow: 0 22px 34px -18px rgba(42, 36, 100, .45); }

/* ==========================================================================
   12 OCT, SECOND DOC · the new sections
   ========================================================================== */
/* The top layer of the stack: a step taken. */
.awx-plate__go { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 10px 12px; align-items: center; width: 190px; }
.awx-plate__go i { grid-row: span 2; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #4857C2; font-size: 30px; font-style: normal; box-shadow: 4px 4px 0 rgba(72, 87, 194, .25); }
.awx-plate__go i svg { width: 30px; height: 30px; }
.awx-plate__go b { height: 16px; border-radius: 8px; background: #fff; }
.awx-plate__go b + b { width: 70%; background: rgba(255, 255, 255, .7); }

/* --- The live demo ------------------------------------------------------------ */
.awx-demo__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; max-width: 1060px; margin: clamp(40px, 5vw, 64px) auto 0; align-items: stretch; }
.awx-demo__win { display: flex; flex-direction: column; height: 560px; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--card-shadow); }
.awx-demo__bar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: #FAFBFC; }
.awx-demo__av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #4857C2; }
.awx-demo__av svg { width: 20px; height: 13px; color: #fff; }
.awx-demo__bar b { display: block; font: 700 15.5px/1.2 var(--font); color: var(--ink); }
.awx-demo__bar small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font: 600 12.5px/1 var(--font); color: var(--green-ink); }
.awx-demo__bar small i { width: 7px; height: 7px; border-radius: 50%; background: #22C08F; }
.awx-demo__feed { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 20px; scrollbar-width: thin; }
.awx-demo__feed > * { flex: none; }
.awx-demo__feed > .awx-b, .awx-demo__feed > .awx-prod, .awx-demo__feed > .awx-track { animation: awxIn .4s var(--ease-out) both; }
.awx-demo__feed .awx-b--in { align-self: flex-end; justify-self: auto; background: #4857C2; color: #fff; border-radius: 16px 16px 5px 16px; }
.awx-demo__feed .awx-b--out { align-self: flex-start; justify-self: auto; background: var(--paper); color: var(--ink); border-radius: 16px 16px 16px 5px; }
.awx-demo__feed .awx-b--done, .awx-demo__feed .awx-join { align-self: flex-start; }
.awx-demo__feed .awx-prod { align-self: flex-start; justify-self: auto; width: min(300px, 90%); grid-template-columns: 52px minmax(0, 1fr); }
.awx-prod__img { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #FFF8E8, #FFEBC2); }
.awx-prod__img svg { width: auto; height: 86%; }
.awx-dots { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: var(--paper); }
.awx-dots i { width: 6px; height: 6px; border-radius: 50%; background: #9DA2B5; animation: pDot 1s ease-in-out infinite; }
.awx-dots i:nth-child(2) { animation-delay: .15s; }
.awx-dots i:nth-child(3) { animation-delay: .3s; }
.awx-track { align-self: flex-start; width: min(300px, 90%); padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); }
.awx-track b { display: block; font: 700 13.5px/1.2 var(--font); color: var(--ink); }
.awx-track__bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.awx-track__bar i { height: 6px; border-radius: 3px; background: #22C08F; }
.awx-track__bar i:last-child { background: linear-gradient(90deg, #22C08F 60%, #E6E8EE 60%); }
.awx-track__k { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; font: 600 11px/1.2 var(--font); color: var(--muted); }
.awx-demo__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--line); background: #FAFBFC; min-height: 72px; align-content: flex-start; }
.awx-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent-soft); font: 600 14px/1 var(--font); color: var(--accent-ink); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s, transform .3s var(--ease-soft); animation: awxIn .35s var(--ease-out) both; }
.awx-chip:hover { transform: translateY(-2px); background: var(--accent); color: #fff; box-shadow: none; }
.awx-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.awx-chip--quiet { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.awx-chip:disabled { opacity: .5; cursor: default; transform: none; }
.awx-demo__why { display: grid; align-content: center; gap: 12px; padding: 24px; border-radius: 28px; background: radial-gradient(120% 90% at 28% 8%, #F3EFFF 0%, transparent 58%), linear-gradient(160deg, #DCD2FF 0%, #A98FFF 100%); }
.awx-why { --cc: var(--accent); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .72); transition: background-color .4s, box-shadow .4s, transform .4s var(--ease-out); }
.awx-why.is-on { background: #fff; transform: translateX(-4px); box-shadow: 0 0 0 2px var(--cc), 0 20px 40px -24px rgba(21, 20, 43, .5); }
.awx-why__ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 13%, #fff); color: var(--cc); font-size: 21px; }
.awx-why b { display: block; font: 700 15.5px/1.25 var(--font); color: var(--ink); }
.awx-why small { display: block; margin-top: 4px; font: 500 13.5px/1.35 var(--font); color: var(--muted); }
.awx-why.is-on small { color: var(--ink-2); }
.awx-demo__cta { display: flex; justify-content: center; margin-top: 32px; }

/* --- Industries ------------------------------------------------------------------ */
.awx-ix { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; align-items: stretch; }
.awx-ix__list { display: grid; gap: 6px; align-content: start; }
.awx-ix__tab { --cc: var(--accent); display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border: 0; border-radius: 18px; background: transparent; font: 600 16.5px/1.25 var(--font); color: var(--ink-2); text-align: left; cursor: pointer; transition: background-color .3s, box-shadow .3s, color .3s; }
.awx-ix__tab:hover { background: rgba(255, 255, 255, .7); }
.awx-ix__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.awx-ix__tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(23, 23, 43, .05), 0 16px 34px -24px rgba(23, 23, 43, .4); }
.awx-ix__ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 13%, #fff); color: var(--cc); font-size: 22px; }
.awx-ix__go { font-size: 18px; color: var(--cc); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.awx-ix__tab[aria-selected="true"] .awx-ix__go { opacity: 1; transform: none; }
.awx-ix__stage { position: relative; }
.awx-ix__panel { height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 28px; padding: clamp(28px, 3.5vw, 44px); border-radius: 32px; background: radial-gradient(120% 90% at 28% 8%, var(--g0) 0%, transparent 58%), linear-gradient(160deg, var(--g1) 0%, var(--g2) 100%); animation: awxIn .45s var(--ease-out); }
.awx-ix__panel[hidden] { display: none; }
.awx-ix__big { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #fff; color: var(--cc); font-size: 28px; box-shadow: 0 14px 28px -16px rgba(21, 20, 43, .4); }
.awx-ix__txt h3 { margin: 0; font: 600 clamp(26px, 2.6vw, 36px)/1.15 var(--font); letter-spacing: -.03em; color: var(--ink); }
.awx-ix__txt p { margin: 12px 0 0; max-width: 32em; font: 500 var(--fs-p)/1.55 var(--font); color: rgba(23, 23, 43, .78); }
.awx-ix__chat { align-self: end; display: grid; gap: 10px; padding: 16px; border-radius: 22px; background: rgba(255, 255, 255, .96); box-shadow: 0 30px 60px -32px rgba(21, 20, 43, .5); }
.awx-ix__chat .awx-b--out { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; }
.awx-b__by { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); }
.awx-b__by svg { width: 13px; height: 9px; color: #fff; }

/* --- Agents' note -------------------------------------------------------------------- */
.awx-note { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 760px; margin: 36px auto 0; padding: 14px 22px 14px 14px; border-radius: 22px; background: var(--sand); font: 500 var(--fs-p)/1.45 var(--font); color: var(--ink-2); text-align: left; }
.awx-note__ic { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--accent); font-size: 18px; }
.awx-roles { background: radial-gradient(60% 50% at 50% 62%, #EEF0FF 0%, rgba(238, 240, 255, 0) 100%), #fff; }

/* --- Channels ------------------------------------------------------------------------- */
.awx-chan__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.awx-chan__copy .h2 { font-size: clamp(32px, 3.5vw, 50px); }
.awx-chan__copy .lede { margin-top: 18px; max-width: 30em; }
.awx-chan__list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.awx-chan__tab { --cc: var(--accent); display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 6px; border: 0; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 15px/1 var(--font); color: var(--ink-2); cursor: pointer; transition: box-shadow .3s, color .3s, transform .3s var(--ease-soft); }
.awx-chan__tab:hover { transform: translateY(-2px); }
.awx-chan__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.awx-chan__tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 0 0 2px var(--cc), 0 14px 28px -18px var(--cc); }
.awx-chan__ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 12%, #fff); color: var(--cc); font-size: 18px; }
.awx-chan__ic img { width: 20px; height: 20px; }
.awx-chan__more { margin: 26px 0 0; max-width: 30em; font: 500 var(--fs-p)/1.55 var(--font); color: var(--ink-2); }
.awx-chan__copy .btn { margin-top: 28px; }
.awx-chan__stage { display: grid; place-items: center; padding: 30px 0; border-radius: 36px; background: radial-gradient(120% 90% at 28% 8%, #EAF6FF 0%, transparent 58%), linear-gradient(160deg, #BFE3FF 0%, #7CC3F5 100%); }
.awx-phone--chan { position: relative; top: auto; height: 520px; width: 300px; }
.awx-phone__skins { position: relative; flex: 1; border-radius: 30px; overflow: hidden; }
.awx-sk { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.awx-sk.is-on { opacity: 1; visibility: visible; }
.awx-chan:not(.is-ready) .awx-sk[data-sk="web"] { opacity: 1; visibility: visible; }
.awx-sk__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.awx-sk__bar b { font: 700 14px/1.2 var(--font); }
.awx-sk__bar small { margin-left: auto; font: 600 11.5px/1 var(--font); opacity: .75; }
.awx-sk__av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #4857C2; }
.awx-sk__av svg { width: 17px; height: 11px; color: #fff; }
.awx-sk__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px 12px 18px; }
.awx-sk__body .awx-b { max-width: 84%; }
.awx-sk__body .awx-b--in { align-self: flex-start; }
.awx-sk__body .awx-b--out { align-self: flex-end; }
.awx-sk.is-on .awx-b--in { animation: awxIn .4s .2s var(--ease-out) both; }
.awx-sk.is-on .awx-b--out { animation: awxIn .4s .9s var(--ease-out) both; }
.awx-sk--web { background: #F7F8FC; }
.awx-sk--web .awx-sk__bar { background: #4857C2; color: #fff; }
.awx-sk--web .awx-sk__av { background: #fff; }
.awx-sk--web .awx-sk__av svg { color: #4857C2; }
.awx-sk--web .awx-b--in { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(23, 23, 43, .08); }
.awx-sk--wa { background: #EFE7DD; }
.awx-sk--wa .awx-sk__bar { background: #0F6E5C; color: #fff; }
.awx-sk--wa .awx-b--in { background: #fff; color: var(--ink); }
.awx-sk--wa .awx-b--out { background: #D9FDD3; color: var(--ink); }
.awx-sk--ig { background: #fff; }
.awx-sk--ig .awx-sk__bar { border-bottom: 1px solid var(--line); color: var(--ink); }
.awx-sk--ig .awx-sk__av { background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E1306C; }
.awx-sk--ig .awx-sk__av svg { color: #4857C2; }
.awx-sk--ig .awx-b--in { background: #EFEFF3; color: var(--ink); }
.awx-sk--ig .awx-b--out { background: linear-gradient(135deg, #6A5CFF, #C13584); color: #fff; }
.awx-sk--fb { background: #fff; }
.awx-sk--fb .awx-sk__bar { border-bottom: 1px solid var(--line); color: var(--ink); }
.awx-sk--fb .awx-b--in { background: #F0F2F5; color: var(--ink); }
.awx-sk--fb .awx-b--out { background: #0A7CFF; color: #fff; }
.awx-sk--voice { background: linear-gradient(180deg, #2A2464 0%, #15142B 100%); color: #fff; }
.awx-sk__call { display: grid; justify-items: center; gap: 6px; padding: 34px 14px 10px; text-align: center; }
.awx-sk__ring { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #9B7BFF; box-shadow: 0 0 0 10px rgba(155, 123, 255, .18), 0 0 0 20px rgba(155, 123, 255, .08); margin-bottom: 14px; }
.awx-sk__ring svg { width: 34px; height: 22px; color: #fff; }
.awx-sk__call b { font: 700 17px/1.2 var(--font); }
.awx-sk__call small { font: 600 12.5px/1 var(--font); color: rgba(255, 255, 255, .7); }
.awx-sk__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; margin: 10px 20px; }
.awx-sk__wave i { width: 4px; height: 100%; border-radius: 2px; background: #B9A6FF; transform: scaleY(.25); }
.awx-sk--voice.is-on .awx-sk__wave i { animation: awxWave .9s var(--d) ease-in-out 3 alternate; }
@keyframes awxWave { to { transform: scaleY(1); } }
.awx-sk__line { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); font: 500 13.5px/1.4 var(--font); color: #fff; }
.awx-sk__line small { display: block; margin-bottom: 3px; font: 700 11px/1 var(--font); color: rgba(255, 255, 255, .6); }
.awx-sk__line--ai { background: rgba(155, 123, 255, .22); }
.awx-sk.is-on .awx-sk__line { animation: awxIn .4s .3s var(--ease-out) both; }
.awx-sk.is-on .awx-sk__line--ai { animation-delay: 1s; }

/* --- Proof: the case, the quote, the group ------------------------------------------------ */
.awx-head--deep .lede { color: var(--on-deep-2); }
.awx-case { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.awx-case .awx-proof__photo { min-height: 0; aspect-ratio: 16 / 10; }
.awx-case__copy .awx-proof__logo { width: 76px; }
.awx-case__t { margin: 22px 0 0; font: 600 clamp(24px, 2.4vw, 32px)/1.2 var(--font); letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.awx-case__copy p { margin: 12px 0 0; font: 400 var(--fs-p)/1.6 var(--font); color: var(--on-deep-2); }
.awx-quote--wide { margin-top: 16px; }
.awx-quote--wide blockquote { margin: 0; }
.awx-quote--wide blockquote p { max-width: 46em; font-size: clamp(20px, 2vw, 28px); }
.awx-quote__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.awx-btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.awx-btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.awx-fine { margin: 14px 0 0; font: 500 13px/1.5 var(--font); color: var(--on-deep-3); }
.awx-fine--light { color: var(--muted); }
.awx-group { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 4vw, 52px); border-radius: 32px; background: #fff; }
.awx-group__t { margin: 0; font: 600 clamp(26px, 2.8vw, 38px)/1.15 var(--font); letter-spacing: -.03em; color: var(--ink); }
.awx-group__copy p { margin: 12px 0 0; font: 400 var(--fs-p)/1.6 var(--font); color: var(--body); }
.awx-group__copy .awx-group__ask { color: var(--ink-2); font-weight: 600; }
.awx-group__copy .btn { margin-top: 24px; }
.awx-group__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.awx-group__logos li { height: 96px; display: grid; place-items: center; padding: 18px; border-radius: 18px; background: var(--sand); }
.awx-group__logos img { max-width: 100%; max-height: 52px; width: auto; height: auto; }

/* --- Deployment ------------------------------------------------------------------------- */
.awx-dep__track { position: relative; margin-top: clamp(44px, 5.5vw, 72px); }
.awx-dep__line { position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 4px; border-radius: 2px; background: var(--sand-2); }
.awx-dep__line i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #D9467F, #14A578, #E06A2B, #4857C2); transform: scaleX(1); transform-origin: 0 50%; }
.awx-dep__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.awx-dep__step { --cc: var(--accent); display: flex; flex-direction: column; align-items: center; text-align: center; }
.awx-dep__n { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); color: #fff; font: 800 20px/1 var(--font); box-shadow: 0 0 0 7px #fff, 0 14px 26px -12px var(--cc); transition: background-color .4s, color .4s, transform .5s var(--ease-soft); }
.awx-dep__step.is-wait .awx-dep__n { background: #fff; color: var(--muted); box-shadow: 0 0 0 7px #fff, inset 0 0 0 2px var(--sand-2); }
.awx-dep__step h3 { margin: 22px 0 0; font: 700 var(--fs-h3)/1.25 var(--font); letter-spacing: -.02em; color: var(--ink); }
.awx-dep__step p { margin: 8px 0 0; max-width: 17em; font: 400 15.5px/1.55 var(--font); color: var(--body); }
.awx-dep__vis { width: 100%; min-height: 152px; align-content: start; display: grid; gap: 6px; margin-top: auto; padding: 14px; border-radius: 20px; background: var(--sand); text-align: left; transition: opacity .5s, transform .5s var(--ease-out); }
.awx-dep__step > p { margin-bottom: 20px; }
.awx-dep__step.is-wait .awx-dep__vis { opacity: .35; transform: translateY(8px); }
.awx-pick { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; background: #fff; font: 600 13px/1 var(--font); color: var(--muted); }
.awx-pick.is-on { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cc); }
.awx-pick i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); color: #fff; font-size: 11px; font-style: normal; }
.awx-src { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; gap: 9px; align-items: center; height: 38px; padding: 0 10px; border-radius: 12px; background: #fff; font: 600 13px/1 var(--font); color: var(--ink); }
.awx-src > .icon, .awx-src > .ilogo { font-size: 18px; width: 18px; height: 18px; color: var(--cc); }
.awx-src__ok { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #22C08F; color: #fff; font-size: 11px; font-style: normal; }
.awx-cfg { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 8px 0 12px; border-radius: 12px; background: #fff; font: 600 12.5px/1.2 var(--font); color: var(--ink); }
.awx-cfg .awx-sw { width: 36px; height: 22px; flex: none; }
.awx-cfg .awx-sw i { top: 3px; left: 17px; width: 16px; height: 16px; }
.awx-live { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; background: var(--green-tint); font: 700 13px/1 var(--font); color: var(--green-ink); }
.awx-live i { width: 8px; height: 8px; border-radius: 50%; background: #22C08F; box-shadow: 0 0 0 3px rgba(34, 192, 143, .25); }
.awx-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; padding: 8px 10px 0; border-radius: 12px; background: #fff; }
.awx-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #8E9BFF, #4857C2); }
.awx-dep__foot { display: grid; justify-items: center; text-align: center; margin-top: clamp(40px, 5vw, 64px); }
.awx-dep__big { margin: 0; max-width: 26em; font: 600 clamp(20px, 2vw, 26px)/1.35 var(--font); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.awx-dep__foot .awx-fine { max-width: 40em; }
.awx-dep__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* --- ROI ------------------------------------------------------------------------------- */
.awx-roi__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; align-items: start; }
.awx-calc { display: grid; gap: 20px; padding: clamp(24px, 3vw, 36px); border-radius: 30px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05), 0 30px 60px -44px rgba(23, 23, 43, .45); }
.awx-calc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; }
.awx-calc__row label { font: 600 14.5px/1.35 var(--font); color: var(--ink-2); }
.awx-calc__row output { font: 800 16px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.awx-calc__row input { grid-column: 1 / -1; width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.awx-calc__row input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #4857C2 var(--p, 50%), #E6E8EE var(--p, 50%)); }
.awx-calc__row input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #4857C2 var(--p, 50%), #E6E8EE var(--p, 50%)); }
.awx-calc__row input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #4857C2, 0 6px 12px -4px rgba(72, 87, 194, .6); }
.awx-calc__row input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #4857C2, 0 6px 12px -4px rgba(72, 87, 194, .6); }
.awx-calc__row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.awx-calc__res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.awx-calc__res > div { padding: 18px; border-radius: 20px; background: linear-gradient(165deg, #F4F5FF, #E7EAFF); }
.awx-calc__res > div + div { background: linear-gradient(165deg, #EDFBF4, #D6F5E7); }
.awx-calc__res small { display: block; font: 700 12.5px/1.2 var(--font); color: var(--accent); }
.awx-calc__res > div + div small { color: var(--green-ink); }
.awx-calc__res b { display: block; margin-top: 10px; font: 800 clamp(28px, 2.8vw, 38px)/1 var(--font); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.awx-calc__res span { display: block; margin-top: 6px; font: 500 13px/1.3 var(--font); color: var(--muted); }
.awx-calc__note { margin: 0; font: 500 13px/1.5 var(--font); color: var(--muted); }
.awx-outs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.awx-out { --cc: var(--accent); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: var(--card-r); background: #fff; box-shadow: var(--card-shadow); }
.awx-out__ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 12%, #fff); color: var(--cc); font-size: 23px; }
.awx-out h3 { margin: 0; padding-top: 2px; font: 700 17px/1.3 var(--font); color: var(--ink); }
.awx-out p { margin: 5px 0 0; font: 400 15.5px/1.5 var(--font); color: var(--body); }

/* --- The fifth rule: security ------------------------------------------------------------- */
.awx-sec { display: grid; gap: 12px; }
.awx-sec__shield { justify-self: center; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(160deg, #EAF6FF, #BFE3FF); color: #1E88D0; font-size: 30px; }
.awx-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.awx-sec li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 24px; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 13px; background: var(--paper); }
.awx-sec li span { font: 600 12.5px/1.2 var(--font); color: var(--muted); }
.awx-sec li b { font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #9AA0B4; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awx-sec__ok { justify-self: center; display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 0; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: #E6F3F9; font: 700 12.5px/1 var(--font); color: #095E83; }
.awx-sec__ok i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1E88D0; color: #fff; font-size: 11px; font-style: normal; }
.awx-final__copy .lede { max-width: 34em; margin: 18px auto 0; }


/* The problem stack, dark: night-blue plates, each with its own coloured
   edge and glow, light content on top. */
.awx-stack--dark .awx-plate { background: radial-gradient(120% 100% at 20% 0%, #353070 0%, transparent 60%), linear-gradient(135deg, #24214A 0%, #15142B 100%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--edge) 70%, transparent), 1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge), 5px 5px 0 var(--edge), 6px 6px 0 var(--edge), 7px 7px 0 var(--edge), 8px 8px 0 var(--edge), 9px 9px 0 var(--edge), 10px 10px 0 var(--edge), 30px 30px 60px rgba(21, 20, 43, .35), 0 0 60px -10px color-mix(in srgb, var(--edge) 55%, transparent); }
.awx-stack--dark .awx-plate__chat i { background: rgba(255, 255, 255, .9); }
.awx-stack--dark .awx-plate__chat i:nth-child(2) { background: var(--edge); }
.awx-stack--dark .awx-plate__tiles i { background: rgba(255, 255, 255, .08); color: var(--edge); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--edge) 60%, transparent); }
.awx-stack--dark .awx-plate__go i { background: var(--edge); color: #fff; box-shadow: 0 0 24px -2px var(--edge); }
.awx-stack--dark .awx-plate__go b { background: rgba(255, 255, 255, .85); }
.awx-stack--dark .awx-plate__go b + b { background: rgba(255, 255, 255, .4); }

/* ==========================================================================
   12 OCT, THIRD ROUND
   ========================================================================== */
/* --- Hero: three badges on one lanyard; the front one changes ------------------ */
.awx-deck { position: relative; display: grid; }
.awx-deck > .awx-badge { grid-area: 1 / 1; position: relative; padding-bottom: 14px; transform-origin: 50% 0; box-shadow: 0 0 0 1px rgba(23, 23, 43, .06), 0 40px 80px -40px rgba(21, 20, 43, .5); transition: transform 1s var(--ease-out), filter .6s; }
.awx-deck > .is-front { z-index: 3; transform: none; }
.awx-deck > .is-right { z-index: 2; transform: translate(33%, 28px) rotate(9deg) scale(.84); }
.awx-deck > .is-left { z-index: 1; transform: translate(-33%, 28px) rotate(-9deg) scale(.84); }
.awx-deck .awx-badge__id, .awx-deck .awx-creds { transition: opacity .5s; }
.awx-deck > .is-left .awx-badge__id, .awx-deck > .is-left .awx-creds, .awx-deck > .is-right .awx-badge__id, .awx-deck > .is-right .awx-creds { opacity: 0; }
.awx-deck > .is-front .awx-badge__id, .awx-deck > .is-front .awx-creds { transition-delay: .35s; }
.awx-deck .awx-badge__clip { opacity: 0; transition: opacity .3s; }
.awx-deck .is-front .awx-badge__clip { opacity: 1; transition-delay: .6s; }
.awx-deck .awx-badge__photo { background: radial-gradient(120% 90% at 28% 8%, var(--g0) 0%, transparent 58%), linear-gradient(160deg, var(--g1) 0%, var(--g2) 100%); }
.awx-deck.is-live .awx-badge:not(.is-ticked) .awx-tick { transform: scale(0); }
.awx-deck .awx-tick { transition: transform .45s var(--ease-soft); }
.awx-deck .is-ticked li:nth-child(1) .awx-tick { transition-delay: .5s; }
.awx-deck .is-ticked li:nth-child(2) .awx-tick { transition-delay: 1s; }
.awx-deck .is-ticked li:nth-child(3) .awx-tick { transition-delay: 1.5s; }

/* --- Meaningful outcomes: three cards in a row --------------------------------- */
.awx-oc-sec .awx-head .lede + .lede { margin-top: 12px; }
.awx-oc { position: relative; list-style: none; margin: clamp(44px, 5.5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.awx-occ { --cc: var(--accent); display: flex; flex-direction: column; border-radius: var(--card-r); background: #fff; box-shadow: var(--card-shadow); overflow: hidden; }
.awx-occ__vis { display: grid; align-content: center; gap: 8px; min-height: 210px; padding: 26px 22px; background: radial-gradient(120% 90% at 28% 8%, var(--g0) 0%, transparent 58%), linear-gradient(160deg, var(--g1) 0%, var(--g2) 100%); }
.awx-occ__vis > * { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.awx-oc.is-pre .awx-occ__vis > * { opacity: 0; transform: translateY(12px); }
.awx-occ__vis .awx-b--in { justify-self: start; max-width: 92%; background: #fff; color: var(--ink); border-radius: 16px 16px 16px 5px; }
.awx-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.awx-terms i { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); font: 700 12.5px/1 var(--font); font-style: normal; color: #B0306A; box-shadow: inset 0 0 0 1.5px rgba(217, 70, 127, .35); }
.awx-src2 { display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px; gap: 10px; align-items: center; height: 44px; padding: 0 12px; border-radius: 14px; background: rgba(255, 255, 255, .92); font: 600 13.5px/1 var(--font); color: var(--ink); }
.awx-src2 > .icon { font-size: 19px; color: #14A578; }
.awx-src2 > i, .awx-act > i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #22C08F; color: #fff; font-size: 12px; font-style: normal; }
.awx-act { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 11px; border-radius: 14px; background: rgba(255, 255, 255, .92); font: 600 13.5px/1 var(--font); color: var(--ink); }
.awx-act--person > i { background: #FFB547; font: 800 11px/1 var(--font); }
.awx-occ__txt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 24px 24px 28px; }
.awx-occ__n { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); color: #fff; font: 800 16px/1 var(--font); }
.awx-occ h3 { margin: 0; padding-top: 8px; font: 700 var(--fs-h3)/1.25 var(--font); letter-spacing: -.02em; color: var(--ink); }
.awx-occ__txt p { margin: 4px 0 0; font: 400 var(--fs-p)/1.55 var(--font); color: var(--body); }

/* --- Demo: the character, and calmer colours beside the chat -------------------- */
.awx-demo__av { width: 56px; height: 56px; margin: -8px -4px -8px -6px; background: none; overflow: visible; }
.awx-demo__av > svg, .awx-chan__bot > svg, .awx-role__bot > svg, .awx-badge__bot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.awx-mrow { align-self: flex-start; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: end; max-width: 92%; animation: awxIn .4s var(--ease-out) both; }
.awx-mrow > .awx-b, .awx-mrow > .awx-prod, .awx-mrow > .awx-track { justify-self: start; align-self: auto; max-width: 100%; animation: none; }
.awx-mav { display: block; width: 32px; height: 32px; flex: none; }
.awx-mav svg { width: 100%; height: 100%; overflow: visible; }
.awx-mrow--more { align-self: stretch; padding-left: 38px; display: block; }
.awx-mrow--more > .awx-prod, .awx-mrow--more > .awx-track { width: min(300px, 100%); }
.awx-mrow--more > .awx-b--done, .awx-mrow--more > .awx-join { display: inline-flex; }
.awx-demo__why { background: var(--sand); }
.awx-why { background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); }
.awx-why.is-on { box-shadow: 0 0 0 2px var(--cc), 0 20px 40px -26px rgba(21, 20, 43, .45); }
.awx-why__ic { background: var(--cc); color: #fff; }

/* --- Industries: the specialists, as a list ------------------------------------- */
.awx-ix__panel { grid-template-rows: auto auto; align-content: start; }
.awx-ix__experts { list-style: none; margin: 0; padding: 18px; display: flex; flex-wrap: wrap; gap: 8px; border-radius: 22px; background: rgba(255, 255, 255, .96); box-shadow: 0 30px 60px -32px rgba(21, 20, 43, .45); }
.awx-ix__experts li { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--cc) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 22%, #fff); font: 600 14px/1 var(--font); color: var(--ink); }

/* --- Agents: live characters, no plates ---------------------------------------- */
.awx-role__fig { height: 250px; }
.awx-role__bot { width: 230px; height: 230px; margin-bottom: 6px; }
.awx-note { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -30px rgba(23, 23, 43, .4); }

/* --- Channels: each app, complete ---------------------------------------------- */
.awx-chan__stage { position: relative; background: radial-gradient(rgba(72, 87, 194, .14) 1.2px, transparent 1.6px) 0 0 / 20px 20px, #fff; box-shadow: var(--card-shadow); }
.awx-chan__bot { position: absolute; left: 14px; bottom: 26px; width: 136px; height: 136px; z-index: 3; }
.awx-chan__stage .awx-phone--chan { transform: translateX(56px); }
.awx-sk__status { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 6px 18px 0; font: 700 12px/1 var(--font); }
.awx-sk__status span { display: flex; align-items: center; gap: 5px; }
.awx-sig { width: 16px; height: 10px; background: linear-gradient(to top, currentColor 35%, transparent 35%) 0 0 / 3px 100% no-repeat, linear-gradient(to top, currentColor 60%, transparent 60%) 4px 0 / 3px 100% no-repeat, linear-gradient(to top, currentColor 82%, transparent 82%) 8px 0 / 3px 100% no-repeat, linear-gradient(currentColor, currentColor) 12px 0 / 3px 100% no-repeat; }
.awx-bat { width: 20px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.3px currentColor; position: relative; }
.awx-bat::after { content: ''; position: absolute; inset: 2.5px 5px 2.5px 2.5px; border-radius: 1px; background: currentColor; }
.awx-sk__bar { gap: 9px; }
.awx-sk__bar > div { min-width: 0; }
.awx-sk__bar b { display: block; }
.awx-sk__bar small { display: block; margin: 2px 0 0; font: 500 11px/1.2 var(--font); opacity: .75; }
.awx-sk__bar .awx-mav { width: 32px; height: 32px; }
.awx-sk__back { width: 9px; height: 14px; flex: none; }
.awx-sk__tools { margin-left: auto; display: flex; gap: 12px; }
.awx-sk__tools i { width: 18px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.6px currentColor; opacity: .85; }
.awx-sk__tools i + i { width: 14px; border-radius: 50%; }
.awx-sk__body { gap: 8px; padding: 10px 10px 8px; }
.awx-msg { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; align-items: end; max-width: 92%; align-self: flex-start; }
.awx-msg--me { grid-template-columns: minmax(0, 1fr) 26px; align-self: flex-end; }
.awx-msg--me > .awx-uav { grid-column: 2; grid-row: 1; }
.awx-msg--me > p { grid-column: 1; grid-row: 1; justify-self: end; }
.awx-msg > p { margin: 0; max-width: 100%; }
.awx-msg .awx-mav { width: 26px; height: 26px; }
.awx-uav { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #FFB3D0, #F2659A); color: #fff; font: 800 11px/1 var(--font); }
.awx-sk__body .awx-b { font-size: 13px; padding: 8px 11px; }
.awx-meta { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; float: right; margin-top: 6px; font: 500 10px/1 var(--font); color: rgba(23, 23, 43, .45); }
.awx-ticks { width: 15px; height: 9px; color: #34B7F1; }
.awx-day { align-self: center; margin: 0 0 2px; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .85); font: 600 10.5px/1 var(--font); color: #54656F; }
.awx-seen { align-self: flex-end; margin: -2px 34px 0 0; font: 500 10.5px/1 var(--font); color: var(--muted); }
.awx-sk__input { display: flex; align-items: center; gap: 8px; margin: 0 10px 10px; padding: 0 8px 0 14px; height: 38px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 12.5px/1 var(--font); color: #8A8D9A; }
.awx-sk__input span { flex: 1; }
.awx-sk__input i { width: 26px; height: 26px; border-radius: 50%; flex: none; }
/* Website: a store page with the chat widget open over it. */
.awx-sk--web { background: #F2F3F7; color: var(--ink); }
.awx-sk__site { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 12px; }
.awx-sk__site i { height: 54px; border-radius: 8px; background: linear-gradient(160deg, #E7E9F0, #DCDFE8); }
.awx-sk__widget { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 0 8px 8px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 16px 34px -18px rgba(21, 20, 43, .45); }
.awx-sk--web .awx-sk__bar { background: #4857C2; color: #fff; }
.awx-sk--web .awx-msg--me .awx-b { background: #4857C2; color: #fff; border-radius: 14px 14px 4px 14px; }
.awx-sk--web .awx-msg:not(.awx-msg--me) .awx-b { background: #F1F2F6; color: var(--ink); border-radius: 14px 14px 14px 4px; }
.awx-sk--web .awx-sk__input { margin: 0 8px 8px; background: #F6F7F9; box-shadow: none; }
.awx-sk__send { background: #4857C2; }
/* WhatsApp */
.awx-sk--wa { background: #EFE7DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M8 8h4v4H8zM28 22h3v3h-3z' fill='%23E3D9CC'/%3E%3C/svg%3E"); color: #fff; }
.awx-sk--wa .awx-sk__status { background: #0F6E5C; }
.awx-sk--wa .awx-sk__bar { background: #0F6E5C; color: #fff; }
.awx-sk--wa .awx-msg--me .awx-b { background: #D9FDD3; color: #111B21; border-radius: 10px 2px 10px 10px; }
.awx-sk--wa .awx-msg:not(.awx-msg--me) .awx-b { background: #fff; color: #111B21; border-radius: 2px 10px 10px 10px; }
.awx-sk--wa .awx-sk__input { background: #fff; box-shadow: none; }
.awx-sk__mic { background: #00A884; }
/* Instagram */
.awx-sk--ig { background: #fff; color: var(--ink); }
.awx-sk--ig .awx-sk__bar .awx-mav { border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E1306C; }
.awx-sk--ig .awx-msg--me .awx-b { background: linear-gradient(135deg, #6A5CFF, #A855F7 60%, #C13584); color: #fff; border-radius: 18px; }
.awx-sk--ig .awx-msg:not(.awx-msg--me) .awx-b { background: #EFEFF3; color: var(--ink); border-radius: 18px; }
.awx-sk__cam { background: linear-gradient(135deg, #6A5CFF, #C13584); }
/* Messenger */
.awx-sk--fb { background: #fff; color: var(--ink); }
.awx-sk__on { position: relative; }
.awx-sk__on::after { content: ''; position: absolute; right: -1px; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #31A24C; box-shadow: 0 0 0 2px #fff; }
.awx-sk--fb .awx-msg--me .awx-b { background: #0A7CFF; color: #fff; border-radius: 18px; }
.awx-sk--fb .awx-msg:not(.awx-msg--me) .awx-b { background: #F0F2F5; color: var(--ink); border-radius: 18px; }
.awx-sk__like { background: #0A7CFF; border-radius: 6px !important; }
/* Voice */
.awx-sk--voice .awx-sk__ring { background: transparent; }
.awx-sk--voice .awx-sk__ring .awx-mav { width: 70px; height: 70px; }
.awx-sk--voice .awx-msg .awx-sk__line { margin: 0; }
.awx-sk__keys { display: flex; justify-content: center; gap: 22px; padding: 6px 0 16px; }
.awx-sk__keys i { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.awx-sk__keys i.is-end { background: #E5484D; }

/* --- ROI: the four boxes as tall as the estimator ----------------------------- */
.awx-roi__grid { align-items: stretch; }
.awx-outs { grid-auto-rows: 1fr; }
.awx-out { align-items: center; }


/* The badges behind look like the backs of badges: a band in the agent's
   colour with its role icon, and a plain body. */
.awx-deck .awx-badge__top { position: relative; background: var(--bc); transition: background-color .6s; }
.awx-deck .awx-badge__top img, .awx-deck .awx-badge__top > span { transition: opacity .4s; }
.awx-deck .awx-badge__role { position: absolute; top: 50%; left: 18px; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); color: #fff; font-size: 18px; font-style: normal; opacity: 0; transition: opacity .4s; }
.awx-deck > .is-right .awx-badge__role { left: auto; right: 18px; }
.awx-deck > .is-left .awx-badge__top, .awx-deck > .is-right .awx-badge__top { background: var(--bc); }
.awx-deck > .is-left .awx-badge__top img, .awx-deck > .is-left .awx-badge__top > span,
.awx-deck > .is-right .awx-badge__top img, .awx-deck > .is-right .awx-badge__top > span { opacity: 0; }
.awx-deck > .is-left .awx-badge__role, .awx-deck > .is-right .awx-badge__role { opacity: 1; }
.awx-deck .awx-badge__photo { transition: opacity .5s; }
.awx-deck > .is-left .awx-badge__photo, .awx-deck > .is-right .awx-badge__photo { opacity: 0; }
.awx-deck > .awx-badge::after { content: ''; position: absolute; left: 16px; right: 16px; top: 82px; bottom: 16px; border-radius: 16px; background: var(--paper); opacity: 0; transition: opacity .5s; pointer-events: none; }
.awx-deck > .is-left::after, .awx-deck > .is-right::after { opacity: 1; }
.awx-deck > .is-left, .awx-deck > .is-right { filter: none; }
.awx-deck > .is-front .awx-badge__photo, .awx-deck > .is-front .awx-badge__top img, .awx-deck > .is-front .awx-badge__top > span { transition-delay: .3s; }
/* Demo: the purple panel again, now that its rows are white. */
.awx-demo__why { background: radial-gradient(120% 90% at 28% 8%, #F3EFFF 0%, transparent 58%), linear-gradient(160deg, #DCD2FF 0%, #A98FFF 100%); }
/* ==========================================================================
   SMALL SCREENS
   ========================================================================== */
@media (max-width: 960px) {
  .awx-oc { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .awx-outs { grid-auto-rows: auto; }
  .awx-chan__bot { width: 108px; height: 108px; left: 10px; bottom: 16px; }
  .awx-demo__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .awx-demo__win { height: 520px; }
  .awx-demo__why { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; gap: 8px; }
  .awx-why { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .awx-why.is-on { transform: none; }
  .awx-why__ic { width: 36px; height: 36px; font-size: 18px; }
  .awx-why b { font-size: 13.5px; }
  .awx-why small { font-size: 12px; }
  .awx-ix { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .awx-ix__list { display: flex; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scrollbar-width: none; }
  .awx-ix__list::-webkit-scrollbar { display: none; }
  .awx-ix__tab { flex: none; grid-template-columns: 36px auto; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .6); font-size: 15px; }
  .awx-ix__ic { width: 36px; height: 36px; border-radius: 50%; font-size: 18px; }
  .awx-ix__go { display: none; }
  .awx-chan__grid { grid-template-columns: minmax(0, 1fr); }
  .awx-case, .awx-group { grid-template-columns: minmax(0, 1fr); }
  .awx-dep__line { left: 27px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .awx-dep__line i { transform-origin: 50% 0; }
  .awx-dep__steps { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 560px; }
  .awx-dep__step { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 20px; align-items: start; text-align: left; }
  .awx-dep__n { grid-row: span 3; }
  .awx-dep__step h3 { margin-top: 12px; }
  .awx-dep__step p { max-width: none; }
  .awx-dep__vis { grid-column: 2; }
  .awx-roi__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .awx-jr { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin-inline: auto; }
  .awx-jr__col { display: none; }
  .awx-jr__step { min-height: 0; opacity: 1; padding: 22px 0 30px; }
  .awx-jr__step h3 { margin-top: 18px; font-size: clamp(26px, 6vw, 34px); }
  .awx-jr__mini { display: block; margin-top: 20px; padding: 14px; border-radius: 24px; background: #fff; }
  .awx-st__panel { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .awx-proof__top { grid-template-columns: minmax(0, 1fr); }
  .awx-proof__logo { order: -1; width: 76px; }
  .awx-proof__row { grid-template-columns: minmax(0, 1fr); }
  .awx-proof__photo { min-height: 0; aspect-ratio: 16 / 10; }
  .awx-console__body { grid-template-columns: minmax(0, 1fr); }
  .awx-rules { border-right: 0; border-bottom: 1px solid var(--line); }
  .awx-views { min-height: 0; padding: 28px 16px; }
  .awx-band { flex-direction: column; align-items: flex-start; }
  /* Words first, then the picture (12 Oct). */
  .awx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .awx-hang { padding-top: 70px; }
  /* The strap stops short of the words above it and fades in. */
  .awx-strap { height: 90px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
  .awx-hang__swing { transform-origin: 50% -90px; }
  .awx-steps { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 580px; margin-inline: auto; }
  .awx-step .awx-step__block { min-height: 0; }
  .awx-std__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .awx-deck > .is-right { transform: translate(20%, 22px) rotate(7deg) scale(.86); }
  .awx-deck > .is-left { transform: translate(-20%, 22px) rotate(-7deg) scale(.86); }
  .awx-occ__vis { min-height: 0; padding: 22px 18px; }
  .awx-ix__experts { padding: 14px; }
  .awx-ix__experts li { height: 34px; padding: 0 12px; font-size: 13px; }
  .awx-role__fig { height: 210px; }
  .awx-role__bot { width: 190px; height: 190px; }
  .awx-chan__bot { width: 76px; height: 76px; left: 2px; bottom: 10px; }
  .awx-chan__stage .awx-phone--chan { transform: translateX(30px); }
  .awx-demo__win { height: 500px; border-radius: 24px; }
  .awx-demo__feed { padding: 16px; }
  .awx-demo__chips { padding: 12px 14px 14px; }
  .awx-chip { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .awx-demo__why { grid-template-columns: minmax(0, 1fr); }
  .awx-why { grid-template-columns: 36px minmax(0, 1fr); }
  .awx-ix__panel { border-radius: 26px; }
  .awx-chan__stage { border-radius: 28px; }
  .awx-phone--chan { width: 270px; height: 480px; }
  .awx-quote__foot .btn, .awx-group .btn, .awx-dep__ctas .btn, .awx-chan__copy .btn { width: 100%; }
  .awx-group__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awx-note { align-items: flex-start; font-size: 15.5px; }
  .awx-calc__res b { font-size: 28px; }
  .awx-sec li { grid-template-columns: 96px minmax(0, 1fr) 24px; }
  .awx-car { --step: 200px; }
  .awx-car__list { height: 400px; }
  .awx-role { width: 300px; margin-left: -150px; }
  .awx-role__fig { width: 210px; height: 220px; }
  .awx-role__bot { width: 180px; height: 180px; }
  .awx-role__base { width: 170px; height: 42px; margin-left: -85px; }
  .awx-role__txt { max-width: 290px; }
  .awx-seg { margin-inline: calc(-1 * var(--gutter)); max-width: none; width: auto; border-radius: 0; padding-inline: var(--gutter); background: transparent; box-shadow: none; }
  .awx-seg__pill { display: none; }
  .awx-seg__tab { background: var(--sand); margin-right: 6px; }
  .awx-seg__tab[aria-selected="true"] { background: var(--ink); }
  .awx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .awx-tile { min-height: 112px; gap: 18px; padding: 14px; border-radius: 18px; }
  .awx-tile__ic { width: 40px; height: 40px; font-size: 20px; }
  .awx-tile__n { top: 16px; right: 14px; }
  .awx-tile b { font-size: 14.5px; }
  .awx-st__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .awx-st__tabs::-webkit-scrollbar { display: none; }
  .awx-st__tab { flex: none; }
  .awx-st__card { padding: 22px 18px 18px; border-radius: 24px; }
  .awx-st__fig { padding: 12px 12px 8px; }
  .awx-proof__stats b { font-size: clamp(36px, 11vw, 56px); }
  .awx-proof__stats span { font-size: 13px; }
  .awx-proof__stats > div + div { padding-left: 14px; }
  .awx-rule { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px 10px; }
  .awx-rule__ic { width: 40px; height: 40px; font-size: 19px; }
  .awx-rule__txt span { font-size: 14px; }
  .awx-perm li { grid-template-columns: 92px minmax(0, 1fr) 24px; }
  .awx-band .btn { width: 100%; }
  .awx-final__ctas .btn { width: 100%; }
  .awx-final__bot { width: 240px; height: 222px; }
  .awx-final__m { width: 200px; height: 200px; margin-left: -100px; }
  .awx-final__base { width: 190px; height: 46px; margin-left: -95px; }
  .awx-hero__title { font-size: clamp(34px, 9.4vw, 48px); }
  .awx-hero__ctas .btn { width: 100%; }
  .awx-creds b { white-space: normal; }
  .awx-hang__swing { width: min(300px, 82%); }
  .awx-badge__photo { height: 148px; }
  .awx-badge__bot { width: 150px; height: 150px; }
  .awx-badge--l { transform: translateX(-24%) rotate(-7deg); }
  .awx-badge--r { transform: translateX(24%) rotate(7deg); }
  .awx-ask { padding-right: 16px; }
  .awx-step__block { padding: 22px 20px 24px; border-radius: 24px; }
  .awx-stack { --ps: 210px; }
  .awx-plate { border-radius: 26px; }
  .awx-plate__grid { grid-template-columns: repeat(4, 32px); gap: 8px; }
  .awx-plate__grid i { width: 32px; height: 32px; font-size: 16px; }
  .awx-plate__tiles { gap: 10px; }
  .awx-plate__tiles i { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; }
  .awx-plate__chat { width: 120px; gap: 7px; }
  .awx-plate__chat i { height: 22px; }
  .awx-plate__n { width: 30px; height: 30px; font-size: 14px; left: 14px; top: 14px; }
  .awx-layer { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 20px; }
  .awx-layer__n { width: 40px; height: 40px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .awx-role, .awx-seg__pill, .awx-chart, .awx-sw i { transition: none; }
  .awx-view, .awx-phone .awx-chunk.is-new > *, .awx-view:not([hidden]) .awx-appr__yes, .awx-view:not([hidden]) .awx-appr__done { animation: none; }
}

/* No lanyard: the deck simply hangs in the column. */
.awx-hang { padding-top: 0; }
@media (max-width: 960px) { .awx-hang { padding-top: 8px; } }

/* Closing: the character first, then the words; no plate under it. */
.awx-final { padding-bottom: clamp(88px, 10vw, 140px); }
.awx-final__bot { width: 220px; height: 200px; margin: 0 0 8px; }
.awx-final__m { bottom: 0; width: 200px; height: 200px; margin-left: -100px; }
.awx-final__base { display: none; }
@media (max-width: 600px) { .awx-final__bot { width: 170px; height: 156px; } .awx-final__m { width: 156px; height: 156px; margin-left: -78px; } }

/* Product photos (13 Oct). */
.awx-prod img { object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.awx-prod__photo { width: 52px; height: 52px; border-radius: 12px; object-fit: cover !important; }

/* The quote footer is the figcaption (22 Oct QA): name and role inside it */
.awx-quote__foot > div b { display: block; font: 700 16px/1.3 var(--font); color: #fff; }
.awx-quote__foot > div span { display: block; margin-top: 3px; font: 500 14px/1.4 var(--font); color: var(--on-deep-3); }