/* the product microsite: the maturity assessment page.
   Only what site.css does not cover. Tokens, buttons, inputs, checks and status come from site.css. */

/* ---------- hero ---------- */
.ax-hero{ padding-bottom:clamp(40px, 5vw, 72px); }
.ax-hero h1{ font-size:clamp(42px, 6.2vw, 86px); max-width:18ch; }

/* ---------- the card ---------- */
.ax-sec{ padding-top:0; }
.ax-card{
  position:relative; z-index:1; max-width:1080px; margin-inline:auto; background:#fff; border-radius:var(--r-5);
  box-shadow:0 0 0 1px rgba(0,31,74,.06), 0 2px 4px rgba(0,31,74,.03), 0 28px 64px -32px rgba(0,31,74,.24);
  scroll-margin-top:calc(var(--nav-h) + 16px);
}
.ax-body{ padding:clamp(24px, 4.4vw, 56px); }
.ax-in{ animation:axIn var(--t-slow) var(--ease) both; }
@keyframes axIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ax-h{ font-size:clamp(28px, 3vw, 40px); line-height:1.08; letter-spacing:-.028em; text-wrap:balance; }
.ax-h:focus{ outline:none; }
.ax-col{ display:grid; gap:20px; align-content:start; min-width:0; }
.ax-col > p{ max-width:36em; text-wrap:pretty; }
.ax-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.ax-note{ font-size:15px; color:var(--slate-500); }
.ax-keys{ font:400 12.5px/1.5 var(--f-mono); letter-spacing:.02em; color:var(--slate-500); }
@media (hover:none) and (pointer:coarse){ .ax-keys{ display:none; } }

/* ---------- progress ---------- */
.ax-head{ padding:18px clamp(20px, 4.4vw, 56px) 16px; border-bottom:1px solid var(--line-soft); }
.ax-where{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; font-size:14.5px; color:var(--ink-700); }
.ax-where [data-ax-count]{ font:400 13px/1.6 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--slate-500); }
.ax-segs{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:6px; margin-top:12px; }
.ax-seg{ display:grid; gap:7px; min-width:0; }
.ax-ticks{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2px; }
.ax-ticks i{ height:4px; border-radius:2px; background:var(--line); transition:background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.ax-ticks i.on{ background:var(--blue-600); }
.ax-ticks i.ns{ background:var(--slate-400); }
.ax-ticks i.cur:not(.on):not(.ns){ background:var(--blue-100); box-shadow:inset 0 0 0 1px var(--blue-600); }
.ax-sl{ font:400 11px/1 var(--f-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--slate-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ax-seg.cur .ax-sl{ color:var(--ink-900); }
@media (max-width:760px){ .ax-sl{ display:none; } .ax-segs{ gap:4px; } }

/* ---------- intro ---------- */
.ax-intro{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px, 5vw, 72px); }
@media (max-width:880px){ .ax-intro{ grid-template-columns:1fr; } }
.ax-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-block:1px solid var(--line); }
.ax-stats > div{ display:grid; gap:4px; padding:16px 0; }
.ax-stats > div + div{ padding-left:20px; border-left:1px solid var(--line); }
.ax-stats b{ font-size:clamp(32px, 3.4vw, 44px); line-height:1; font-weight:500; letter-spacing:-.03em; color:var(--ink-900); }
.ax-stats span{ font:400 12.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.ax-private{ display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; font-size:15px; line-height:1.5; color:var(--ink-700); padding:14px 16px; border-radius:var(--r-3); background:var(--blue-50); }
.ax-private svg{ width:16px; height:16px; margin-top:3px; color:var(--blue-600); }
.ax-resume{ font-size:15px; color:var(--ink-700); }
.ax-sub{ font:400 12.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); margin-bottom:-6px; }
.ax-aside{ gap:18px; }
.ax-levels{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ax-levels li{ display:grid; grid-template-columns:30px 22px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; row-gap:2px; padding:12px 14px; border-radius:var(--r-3); background:var(--surface-2); }
.ax-lv{ grid-row:1 / span 2; font:400 12.5px/22px var(--f-mono); color:var(--slate-500); }
.ax-bars{ grid-row:1 / span 2; display:flex; align-items:flex-end; gap:2px; height:16px; margin-top:3px; }
.ax-bars i{ width:3px; border-radius:1px; background:var(--line-strong); }
.ax-bars i:nth-child(1){ height:4px; } .ax-bars i:nth-child(2){ height:7px; } .ax-bars i:nth-child(3){ height:10px; } .ax-bars i:nth-child(4){ height:13px; } .ax-bars i:nth-child(5){ height:16px; }
.ax-bars[data-l="1"] i:nth-child(-n+1), .ax-bars[data-l="2"] i:nth-child(-n+2), .ax-bars[data-l="3"] i:nth-child(-n+3),
.ax-bars[data-l="4"] i:nth-child(-n+4), .ax-bars[data-l="5"] i{ background:var(--blue-600); }
.ax-levels b{ grid-column:3; font-weight:500; color:var(--ink-900); font-size:16px; line-height:1.35; }
.ax-ls{ font-size:14px; line-height:1.45; color:var(--slate-500); grid-column:3; }
.ax-dims{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 20px; }
.ax-dims li{ display:flex; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:15px; color:var(--ink-700); min-width:0; }
.ax-dn{ font:400 12px/1 var(--f-mono); color:var(--slate-500); flex:none; width:20px; }
@media (max-width:520px){ .ax-dims{ grid-template-columns:1fr; } }

/* ---------- a question ---------- */
.ax-q{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:20px clamp(32px, 5vw, 64px); align-items:start; }
@media (max-width:880px){ .ax-q{ grid-template-columns:1fr; } }
.ax-qside{ display:grid; gap:16px; align-content:start; }
@media (min-width:881px){ .ax-qside{ position:sticky; top:calc(var(--nav-h) + 24px); } }
.ax-qh{ font-size:clamp(28px, 3.2vw, 42px); }
.ax-ctx{ font-size:16.5px; line-height:1.5; color:var(--slate-500); max-width:28em; }
.ax-opts{ display:grid; gap:8px; }
.ax-opt{
  position:relative; display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; align-items:start;
  padding:15px 18px 15px 16px; border-radius:var(--r-4); background:#fff; border:1px solid var(--line-strong);
  color:var(--ink-700); font-size:16px; line-height:1.45; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ax-opt:hover{ border-color:var(--ink-900); }
.ax-opt:active{ transform:scale(.995); }
.ax-opt input{ position:absolute; left:0; top:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.ax-k{ width:28px; height:28px; margin-top:-2px; border-radius:var(--r-2); display:grid; place-items:center; font:400 13px/1 var(--f-mono); color:var(--slate-500); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-strong); transition:all var(--t-fast) var(--ease); }
.ax-opt.is-on, .ax-opt:has(input:checked){ border-color:var(--blue-600); background:var(--blue-50); box-shadow:0 0 0 1px var(--blue-600); color:var(--ink-900); }
.ax-opt input:checked + .ax-k, .ax-opt.is-on .ax-k{ background:var(--blue-600); color:#fff; box-shadow:none; }
.ax-opt input:focus-visible + .ax-k{ outline:2px solid var(--blue-600); outline-offset:2px; }
.ax-opt:has(input:focus-visible){ outline:2px solid var(--blue-600); outline-offset:3px; }
.ax-opt:has(input:focus-visible) .ax-k{ outline:none; }
.ax-ns{ border-style:dashed; color:var(--slate-600); margin-top:4px; }
.ax-ns.is-on, .ax-ns:has(input:checked){ border-style:solid; }
.ax-ns .ax-t small{ display:block; font-size:13.5px; color:var(--slate-500); margin-top:2px; }

.ax-foot{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; padding-top:20px; border-top:1px solid var(--line-soft); }
.ax-sp{ flex:1; }
.ax-foot .ax-keys{ margin-right:8px; }
@media (max-width:640px){ .ax-foot .ax-keys{ display:none; } }

/* ---------- the gate ---------- */
.ax-gate{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:28px clamp(32px, 5vw, 72px); align-items:start; }
@media (max-width:880px){ .ax-gate{ grid-template-columns:1fr; } }
.ax-gate > .ax-col:only-child{ grid-column:1 / -1; max-width:40em; }
.ax-opt-l{ font-weight:400; color:var(--slate-500); }
.ax-checks{ display:grid; gap:14px; padding-top:4px; }
.ax-checks .err{ margin:-6px 0 0 34px; }
.check input[aria-invalid="true"]{ outline:2px solid #d0254f; outline-offset:2px; border-radius:3px; }
.ax-form .ax-foot{ margin-top:4px; }
.ax-status:empty{ display:none; }
.ax-status .status{ display:grid; gap:10px; }
.ax-fail-acts{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:4px; }
.ax-fail-acts .btn.ghost{ --bg:#fff; }
.ax-link{ border:0; background:none; padding:4px 0; cursor:pointer; color:var(--blue-600); font:500 14.5px/1.4 var(--f-sans); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.btn.is-busy[disabled]{ opacity:.9; }
.btn.is-busy .arr{ display:none; }
.btn.is-busy::before{ content:""; width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.38); border-top-color:#fff; animation:axSpin .8s linear infinite; }
@keyframes axSpin{ to{ transform:rotate(360deg); } }

/* ---------- the teaser ---------- */
.ax-result{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:32px clamp(32px, 5vw, 64px); align-items:center; }
@media (max-width:900px){ .ax-result{ grid-template-columns:1fr; } }
.ax-result .ax-h{ display:grid; gap:8px; }
.ax-pre{ font-size:clamp(17px, 1.5vw, 20px); line-height:1.4; letter-spacing:0; color:var(--slate-600); font-weight:400; }
.ax-lvl{ font-size:clamp(46px, 6vw, 80px); line-height:.98; letter-spacing:-.04em; color:var(--ink-900); }
.ax-short{ font-size:clamp(18px, 1.5vw, 21px); line-height:1.5; color:var(--ink-700); }
.ax-ladder{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; }
.ax-ladder li{ display:grid; gap:6px; min-width:0; }
.ax-ladder i{ height:6px; border-radius:3px; background:var(--line); }
.ax-ladder li.past i{ background:var(--blue-100); }
.ax-ladder li.here i{ background:var(--blue-600); }
.ax-ladder .mono{ font-size:11.5px; color:var(--slate-400); letter-spacing:.04em; }
.ax-ln{ font-size:12.5px; line-height:1.25; color:var(--slate-500); overflow-wrap:anywhere; }
.ax-ladder li.here .mono, .ax-ladder li.here .ax-ln{ color:var(--ink-900); }
@media (max-width:520px){ .ax-ln{ display:none; } }
.ax-pair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width:520px){ .ax-pair{ grid-template-columns:1fr; } }
.ax-dimcard{ display:grid; gap:6px; padding:16px 18px; border-radius:var(--r-4); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-soft); }
.ax-dimcard .eyebrow{ font-size:12px; }
.ax-dimcard b{ font-weight:500; color:var(--ink-900); font-size:18px; letter-spacing:-.012em; line-height:1.25; }
.ax-sc{ font-size:14px; color:var(--slate-500); }
.ax-sc .mono{ color:var(--blue-600); }
.ax-sent b{ font-weight:500; overflow-wrap:anywhere; }
.ax-radar{ margin:0; display:grid; gap:10px; justify-items:center; padding:clamp(8px, 2vw, 24px); border-radius:var(--r-5); background:radial-gradient(closest-side, rgba(5,94,251,.06), rgba(5,94,251,0)); }
.ax-radar figcaption{ font-size:13.5px; color:var(--slate-500); text-align:center; }
.ax-rd{ width:100%; max-width:440px; height:auto; overflow:visible; }
.ax-rd .ring{ fill:none; stroke:var(--line); stroke-width:1; }
.ax-rd .ring.out{ stroke:var(--line-strong); }
.ax-rd .axis{ stroke:var(--line); stroke-width:1; }
.ax-rd .shape{ fill:rgba(5,94,251,.13); stroke:var(--blue-600); stroke-width:2; stroke-linejoin:round; }
.ax-rd .dot{ fill:#fff; stroke:var(--blue-600); stroke-width:1.5; }
.ax-rd .lab{ fill:var(--ink-700); font:400 14px var(--f-sans); }
.ax-rd .val{ fill:var(--blue-600); font:400 12.5px var(--f-mono); }
.ax-rd .shape, .ax-rd .dot{ transform-origin:170px 160px; animation:axGrow 900ms var(--ease) both 120ms; }
@keyframes axGrow{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:none; } }

.ax-share{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:clamp(28px, 4vw, 44px); }
@media (max-width:900px){ .ax-share{ grid-template-columns:1fr; } }
.ax-codebox, .ax-team{ display:grid; gap:12px; align-content:start; padding:22px 24px; border-radius:var(--r-4); }
.ax-codebox{ background:var(--ink-900); color:rgba(255,255,255,.72); justify-items:start; }
.ax-codebox .eyebrow{ color:rgba(255,255,255,.55); }
.ax-code{ display:block; width:100%; font:400 15px/1.5 var(--f-mono); color:#fff; letter-spacing:.02em; overflow-wrap:anywhere; user-select:all; }
.ax-codebox .btn.ghost{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.3); }
.ax-codebox .btn.ghost:hover{ --bg:rgba(255,255,255,.06); --bd:#fff; }
.ax-team{ box-shadow:inset 0 0 0 1px var(--line); }
.ax-team p{ font-size:15.5px; line-height:1.55; }
.ax-end{ border-top:0; padding-top:0; margin-top:clamp(24px, 3vw, 36px); }

@media (prefers-reduced-motion:reduce){
  .ax-in, .ax-rd .shape, .ax-rd .dot{ animation:none!important; }
  .btn.is-busy::before{ animation-duration:2.4s; }
}
@media (max-width:480px){
  .ax-body{ padding:22px 18px 26px; }
  .ax-head{ padding-inline:18px; }
  .ax-opt{ padding:13px 14px 13px 12px; gap:12px; font-size:15.5px; }
  .ax-foot .btn{ flex:1 1 auto; justify-content:center; }
  .ax-foot .ax-sp{ display:none; }
}


/* ---------- v26: hero with the film, a lighter intro ---------- */
.ax-hero .wrap{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,72px); align-items:center; }
@media (max-width:900px){ .ax-hero .wrap{ grid-template-columns:1fr; } }
.ax-visual{ position:relative; margin:0; aspect-ratio:4/4.4; border-radius:28px; overflow:hidden; background:#070b24; box-shadow:0 40px 90px -40px rgba(7,11,36,.55); }
.ax-visual video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ax-visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,11,36,0) 55%, rgba(7,11,36,.75)); }
.ax-visual figcaption{ position:absolute; left:24px; right:24px; bottom:22px; z-index:1; display:flex; align-items:center; gap:12px; color:#fff; font-size:14px; font-weight:500; }
.ax-visual figcaption i{ flex:1; height:4px; border-radius:2px; background:linear-gradient(90deg, rgba(255,255,255,.35), #7fe3ff 60%, #d1247a); }
.ax-intro2 .ax-col > p{ font-size:17px; color:var(--slate-600); }
.ax-private2{ display:flex; gap:8px; align-items:center; font-size:14px !important; color:var(--slate-500) !important; }
.ax-private2 svg{ width:15px; height:15px; color:var(--blue-600); flex:none; }
.ax-aside2{ padding:clamp(20px,3vw,32px); border-radius:var(--r-4, 20px); background:linear-gradient(160deg, #f4f6ff, #fbf4f8); }
.ax-stairs{ list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; align-items:end; height:190px; }
.ax-stairs li{ height:100%; display:flex; align-items:flex-end; }
.ax-step{ all:unset; cursor:pointer; width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; }
.ax-step .bar{ display:block; height:var(--h); border-radius:12px 12px 6px 6px; background:linear-gradient(180deg, #8fb2ff, #c9d8ff); opacity:.55; transition:opacity .25s var(--ease), transform .25s var(--ease), background .25s; }
.ax-stairs li:nth-child(4) .bar{ background:linear-gradient(180deg,#5b8cff,#a9c2ff); } .ax-stairs li:nth-child(5) .bar{ background:linear-gradient(180deg,#055efb,#8f6bff 70%,#d1247a); }
.ax-step .nm{ display:grid; gap:2px; font-size:13px; font-weight:500; color:var(--ink-900); line-height:1.2; min-height:32px; }
.ax-step .nm em{ font:400 11.5px/1 var(--f-mono); font-style:normal; color:var(--slate-500); }
.ax-step[aria-pressed="true"] .bar, .ax-step:hover .bar{ opacity:1; transform:translateY(-4px); }
.ax-step:focus-visible .bar{ outline:2px solid var(--blue-600); outline-offset:3px; }
.ax-stepcap{ min-height:48px; margin:6px 0 10px; font-size:15px; line-height:1.5; color:var(--ink-700); }
.ax-stepcap b{ font-weight:500; color:var(--ink-900); }
.ax-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ax-chips li{ padding:7px 12px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:14px; color:var(--ink-700); }
@media (max-width:520px){ .ax-step .nm{ font-size:11.5px; } .ax-stairs{ height:160px; } }
.ax-step .nm{ min-height:0; font:400 12px/1 var(--f-mono); color:var(--slate-500); text-align:center; }
.ax-step[aria-pressed="true"] .nm{ color:var(--ink-900); }
.ax-stepcap{ display:grid; gap:4px; min-height:92px; margin:14px 0 12px; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line); }
.ax-stepcap .lv{ font:400 11.5px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--slate-500); }
.ax-stepcap b{ font-size:18px; letter-spacing:-.01em; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- v27: film beside the card, bigger card, colours from the rings ---------- */
.ax-hero .wrap{ display:block; }
.ax-stage{ position:relative; max-width:1240px; margin-inline:auto; }
.ax-sec .ax-card{ max-width:1180px; margin-inline:0; }
.ax-body{ padding:clamp(28px, 5vw, 72px); }
.ax-visual{ position:absolute; z-index:0; right:-70px; top:-110px; width:min(400px, 30vw); aspect-ratio:4/4.4; transform:rotate(7deg); border-radius:28px;
  box-shadow:0 50px 100px -40px rgba(7,11,36,.6); }
.ax-stage .ax-card{ position:relative; z-index:1; }
@media (max-width:1100px){ .ax-visual{ right:-20px; top:-80px; width:240px; } }
@media (max-width:760px){ .ax-visual{ position:relative; right:auto; top:auto; width:100%; transform:none; margin-bottom:20px; aspect-ratio:16/10; } }
.ax-sec{ padding-top:clamp(96px, 10vw, 150px) !important; }
/* ring colours: grey base, blue, cyan, violet, pink-white top */
.ax-stairs li:nth-child(1) .bar{ background:linear-gradient(180deg,#a9b4cc,#d7dcea); }
.ax-stairs li:nth-child(2) .bar{ background:linear-gradient(180deg,#4f86ff,#a8c4ff); }
.ax-stairs li:nth-child(3) .bar{ background:linear-gradient(180deg,#22c8d6,#9be9ef); }
.ax-stairs li:nth-child(4) .bar{ background:linear-gradient(180deg,#8a63ff,#c9b8ff); }
.ax-stairs li:nth-child(5) .bar{ background:linear-gradient(180deg,#f6c9ff,#c084ff 55%,#9a6bff); }
.ax-step .bar{ opacity:.5; }
.ax-step[aria-pressed="true"] .bar{ opacity:1; box-shadow:0 12px 26px -10px rgba(80,90,200,.45); }
.ax-aside2{ background:linear-gradient(160deg, #f3f5fc, #f7f3fc); }
/* the eight dimensions, plain and numbered */
.ax-dims2{ list-style:none; counter-reset:d; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 24px; }
.ax-dims2 li{ counter-increment:d; display:flex; gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line-soft, #e8ebf2); font-size:15px; color:var(--ink-700); }
.ax-dims2 li::before{ content:counter(d); font:400 12px/1 var(--f-mono); color:var(--slate-500); width:12px; flex:none; }
@media (max-width:520px){ .ax-dims2{ grid-template-columns:1fr; } }
.ax-sec{ padding-top:clamp(24px, 3vw, 40px) !important; }
.ax-hero{ padding-bottom:clamp(32px,4vw,56px); }
.ax-visual{ top:-330px; right:-40px; width:min(430px, 31vw); }
.ax-visual figcaption{ display:none; }
.ax-intro2{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
@media (max-width:1100px){ .ax-visual{ top:-200px; width:260px; } }
@media (max-width:900px){ .ax-visual{ display:none; } }