/* Sub-pages in the same system as the home page (home4.css supplies the tokens, buttons, tiles and illustration styles).
   Components: dark page hero, filter bar, expandable capability cards, plan stairs, pillar rows, chain explorer, scenario compare, timeline, migration animation,
   invoice and growth bars, blueprint hero. Every tile reacts to the pointer; animation is small and pauses off-screen. */

/* Page hero */
.hx-ph { position: relative; overflow: hidden; color: #fff; padding: clamp(40px, 5vw, 72px) 0 clamp(52px, 5.5vw, 88px);
  background: radial-gradient(760px 460px at 82% 20%, rgba(20, 200, 194, .26), transparent 62%), radial-gradient(640px 380px at 0 100%, rgba(58, 111, 224, .3), transparent 62%), linear-gradient(180deg, #07202B, #0A2F44); }
.hx-ph__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hx-ph h1 { margin: 18px 0 14px; font: 800 clamp(2.2rem, 4.6vw, 3.7rem)/1.05 var(--font-head, var(--font-body, inherit)); letter-spacing: -.03em; }
.hx-ph h1 span { background: linear-gradient(120deg, #7DE3D8, #8FB4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-ph .hx-lede { max-width: 46ch; } .hx-ph .hx-cta { margin-bottom: 0; }
.hx-ph__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hx-stat { padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); transition: transform .35s, background .35s, border-color .35s; overflow: hidden; }
.hx-stat:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .15); border-color: var(--mint); }
.hx-stat b { display: block; font: 800 2.6rem/1 var(--font-head, var(--font-body, inherit)); letter-spacing: -.03em; background: linear-gradient(120deg, #7DE3D8, #8FB4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-stat small { display: block; margin-top: 8px; color: rgba(255, 255, 255, .78); font-size: .95rem; line-height: 1.4; }
.hx-crumbs { display: flex; gap: 8px; font-size: .88rem; color: rgba(255, 255, 255, .7); } .hx-crumbs a { color: inherit; text-decoration: none; } .hx-crumbs a:hover { color: #fff; }

/* Filter bar */
.hx-bar { position: sticky; top: var(--am-header, 64px); z-index: 30; background: rgba(246, 246, 242, .97); border-bottom: 1px solid var(--line); padding: 12px 0; }
.hx-bar .hx-wrap { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; }
.hx-fgrp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .hx-fgrp > span { font: 700 .74rem var(--font-body, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.hx-fchip { min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: 600 .9rem var(--font-body, inherit); cursor: pointer; transition: transform .2s, background .25s, color .25s, border-color .25s, box-shadow .25s; }
.hx-fchip:hover { transform: translateY(-2px); border-color: var(--teal); color: var(--teal-d); }
.hx-fchip[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 14px 24px -14px rgba(30, 90, 200, .7); }
.hx-count { margin-left: auto; color: var(--ink-3); font-size: .92rem; }

/* Capability cards */
.hx-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.hx-cap { --c1: #0A9C99; --c2: #2457B8; padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; animation: hx-pop .45s both; }
.hx-cap[data-group="People and access"] { --c1: #7C6CF0; --c2: #4B3FB8; } .hx-cap[data-group="Control and evidence"] { --c1: #F2A63B; --c2: #E0762B; } .hx-cap[data-group="Build"] { --c1: #12A66A; --c2: #0A7F6A; }
.hx-cap:hover, .hx-cap.is-open { transform: translateY(-6px); border-color: var(--c1); box-shadow: 0 34px 54px -32px rgba(10, 60, 90, .5); }
.hx-cap > * { position: relative; }
.hx-cap__head { display: flex; align-items: center; gap: 14px; }
.hx-cap__ic { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; transition: transform .35s; } .hx-cap__ic svg { width: 26px; height: 26px; }
.hx-cap:hover .hx-cap__ic { transform: scale(1.12) rotate(-6deg); }
.hx-cap__head small { display: block; font: 700 .72rem var(--font-body, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--c2); } .hx-cap h3 { font-size: 1.15rem; }
.hx-cap__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; } .hx-cap__chips span { padding: 4px 11px; border-radius: 99px; background: #EEF5F9; color: var(--ink-2); font: 700 .76rem var(--font-body, inherit); }
.hx-cap__chips span.is-new { background: var(--grad); color: #fff; } .hx-cap__chips span.is-plan { background: rgba(10, 156, 153, .12); color: var(--teal-d); }
.hx-cap > p { color: var(--ink-2); font-size: .98rem; }
.hx-cap__t { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: 700 .92rem var(--font-body, inherit); color: var(--c2); cursor: pointer; }
.hx-cap__t svg { width: 16px; height: 16px; transition: transform .3s; } .hx-cap.is-open .hx-cap__t svg { transform: rotate(45deg); }
.hx-cap__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; } .hx-cap.is-open .hx-cap__more { grid-template-rows: 1fr; } .hx-cap__more > div { overflow: hidden; }
.hx-cap__more ul { margin: 14px 0 12px; display: grid; gap: 8px; } .hx-cap__more li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: .94rem; }
.hx-cap__more li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--c1); opacity: .9; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.500l2.500 2.500L12 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat, linear-gradient(#000, #000); -webkit-mask-composite: source-in; mask-composite: intersect; }
.hx-cap__proof { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--c1) 9%, #fff); font-size: .92rem; color: var(--ink); } .hx-cap__proof b { color: var(--c2); }
.hx-cap__more .hx-more { margin-top: 12px; }
@keyframes hx-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Plan stairs: each plan includes the ones before it */
.hx-stairs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; margin-bottom: 26px; }
.hx-stair { position: relative; display: grid; align-content: end; gap: 4px; padding: 16px 14px; border-radius: 20px 20px 8px 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit;
  height: calc(112px + var(--s) * 46px); transition: transform .3s, box-shadow .3s, background .3s, color .3s, border-color .3s; }
.hx-stair b { font: 800 1.1rem var(--font-body, inherit); } .hx-stair small { color: var(--ink-3); font-size: .86rem; transition: color .3s; }
.hx-stair::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 20px 20px 0 0; background: var(--grad); opacity: .45; transition: opacity .3s; }
.hx-stair:hover { transform: translateY(-6px); border-color: var(--teal); } .hx-stair:hover::before { opacity: 1; }
.hx-stair[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 26px 40px -22px rgba(30, 90, 200, .7); } .hx-stair[aria-pressed="true"] small { color: rgba(255, 255, 255, .86); } .hx-stair[aria-pressed="true"]::before { opacity: 0; }
.hx-stair:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.hx-stairp { padding: 26px 28px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 56px -40px rgba(10, 60, 90, .5); }
.hx-stairp h3 { font-size: 1.3rem; } .hx-stairp > p { color: var(--ink-3); margin: 4px 0 14px; }
.hx-stairp ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; } .hx-stairp li { position: relative; padding-left: 28px; color: var(--ink-2); }
.hx-stairp li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--grad); } .hx-stairp li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.hx-stairp .btn { margin-top: 18px; }

/* Pillar rows (Platform) */
.hx-pil { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 3.4vw, 48px) 0; }
.hx-pil:nth-of-type(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .hx-pil:nth-of-type(even) .hx-pil__text { order: 2; }
.hx-pil h2 { margin-top: 12px; } .hx-pil__text > p { margin-top: 12px; color: var(--ink-2); font-size: 1.08rem; }
.hx .hx-pil__list { display: grid; gap: 10px; margin: 20px 0 22px; } .hx-pil__list li { position: relative; padding-left: 30px; color: var(--ink-2); }
.hx-pil__list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px; border-radius: 50%; background: var(--grad); } .hx-pil__list li::after { content: ""; position: absolute; left: 5.500px; top: 9px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.hx-pil .hx-show__stage .il { visibility: visible; opacity: 1; transform: none; } .hx-pil .hx-show__stage:hover .il { transform: scale(1.03); }

/* Chain explorer (Platform) */
.hx-xp { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(18px, 3vw, 36px); align-items: stretch; }
.hx-xp__tabs { display: grid; gap: 10px; align-content: start; }
.hx-xp__tab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: 700 1rem var(--font-body, inherit); transition: transform .25s, background .3s, color .3s, border-color .3s, box-shadow .3s; }
.hx-xp__tab i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #E3F6F4; color: var(--teal-d); font: 800 .9rem var(--font-body, inherit); font-style: normal; transition: background .3s, color .3s; }
.hx-xp__tab:hover { transform: translateX(5px); border-color: var(--teal); } .hx-xp__tab[aria-selected="true"] { background: var(--grad); color: #fff; border-color: transparent; transform: translateX(8px); box-shadow: 0 20px 34px -20px rgba(30, 90, 200, .7); } .hx-xp__tab[aria-selected="true"] i { background: rgba(255, 255, 255, .22); color: #fff; }
.hx-xp__stage { position: relative; min-height: 360px; padding: clamp(20px, 2.6vw, 34px); border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(circle at 1px 1px, #D3E3EC 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(150deg, #F6FBFD, #E6F1F7); box-shadow: 0 40px 70px -46px rgba(10, 60, 90, .55); overflow: hidden; }
.hx-xp__panel { position: absolute; inset: clamp(20px, 2.6vw, 34px); display: grid; align-content: center; gap: 22px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s, transform .5s, visibility .4s; }
.hx-xp__panel.is-on { opacity: 1; visibility: visible; transform: none; }
.hx-chain { display: flex; align-items: stretch; gap: 0; }
.hx-chain__n { flex: 1 1 0; min-width: 0; padding: 16px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); text-align: center; box-shadow: 0 16px 28px -20px rgba(20, 60, 90, .5); transition: transform .3s, border-color .3s; }
.hx-chain__n:hover { transform: translateY(-5px) scale(1.04); border-color: var(--teal); } .hx-chain__n b { display: block; font: 700 .98rem/1.25 var(--font-body, inherit); } .hx-chain__n small { display: block; margin-top: 4px; color: var(--ink-3); font-size: .82rem; line-height: 1.35; }
.hx-chain__n:nth-child(1) { border-top: 4px solid #14C8C2; } .hx-chain__n:nth-child(3) { border-top: 4px solid #3A6FE0; } .hx-chain__n:nth-child(5) { border-top: 4px solid #7C6CF0; }
.hx-chain__l { flex: 0 0 44px; position: relative; align-self: center; height: 3px; background: repeating-linear-gradient(90deg, #9DB6C6 0 6px, transparent 6px 11px); }
.hx-chain__l::after { content: ""; position: absolute; top: -4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(10, 156, 153, .2); animation: hx-travel 2.2s ease-in-out infinite; }
@keyframes hx-travel { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(34px); opacity: 0; } }
.hx-xp__chips { display: flex; flex-wrap: wrap; gap: 8px; } .hx-xp__chips li { padding: 6px 13px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font: 700 .84rem var(--font-body, inherit); color: var(--teal-d); }
.hx-xp__says { display: grid; gap: 8px; } .hx-xp__says li { position: relative; padding-left: 28px; color: var(--ink-2); } .hx-xp__says li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--grad); }
[data-live].is-off .hx-chain__l::after { animation-play-state: paused; }

@media (max-width: 960px) {
  .hx-ph__grid, .hx-pil, .hx-pil:nth-of-type(even), .hx-xp { grid-template-columns: minmax(0, 1fr); } .hx-pil:nth-of-type(even) .hx-pil__text { order: 0; }
  .hx-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-stairs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hx-stair { height: auto; min-height: 96px; } .hx-stairp ul { grid-template-columns: minmax(0, 1fr); }
  .hx-xp__stage { min-height: 0; } .hx-xp__panel { position: relative; inset: auto; display: none; transform: none; } .hx-xp__panel.is-on { display: grid; } .hx-chain { flex-direction: column; } .hx-chain__l { flex: 0 0 26px; width: 3px; height: 26px; background: repeating-linear-gradient(180deg, #9DB6C6 0 6px, transparent 6px 11px); } .hx-chain__l::after { display: none; }
  .hx-xp__tab:hover, .hx-xp__tab[aria-selected="true"] { transform: none; } .hx-bar { position: static; }
}
@media (max-width: 600px) { .hx-caps { grid-template-columns: minmax(0, 1fr); } .hx-ph__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-stat { padding: 16px; } .hx-stat b { font-size: 2rem; } }
@media (prefers-reduced-motion: reduce) { .hx-cap { animation: none; } .hx-chain__l::after { animation: none; } }

/* Platform: steps, architecture, integrations, facts, link cards */
.hx-sxs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; counter-reset: sx; }
.hx-sx { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 18px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .35s, box-shadow .35s, border-color .35s; overflow: hidden; }
.hx-sx > * { position: relative; } .hx-sx i { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 12px; background: var(--grad); color: #fff; font: 800 1rem var(--font-body, inherit); font-style: normal; transition: transform .35s; }
.hx-sx b { font: 700 1.04rem/1.3 var(--font-body, inherit); } .hx-sx small { color: var(--ink-3); font-size: .9rem; line-height: 1.45; }
.hx-sx:hover { transform: translateY(-7px); border-color: var(--teal); box-shadow: 0 30px 46px -30px rgba(10, 70, 90, .55); } .hx-sx:hover i { transform: scale(1.15) rotate(-6deg); }
.hx-sx:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 40px; width: 16px; border-top: 3px dashed #9DB6C6; z-index: 2; }
.hx-arch { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; }
.hx-arch__col { display: grid; gap: 12px; padding: 22px; border-radius: 26px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); } .hx-arch__col h3 { color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
.hx-arch__col--core { background: linear-gradient(150deg, rgba(20, 200, 194, .28), rgba(58, 111, 224, .28)); border-color: var(--mint); box-shadow: 0 30px 60px -30px rgba(20, 200, 194, .6); }
.hx-arch__c { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .12); transition: transform .3s, background .3s; } .hx-arch__c:hover { transform: translateX(6px); background: rgba(255, 255, 255, .22); }
.hx-arch__c b { display: block; color: #fff; font: 700 1rem var(--font-body, inherit); } .hx-arch__c small { color: rgba(255, 255, 255, .72); }
.hx-arch__l { flex: none; width: auto; background: repeating-linear-gradient(90deg, rgba(125, 227, 216, .7) 0 6px, transparent 6px 11px); }
.hx-sectors--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hx-sectors--3 .hx-sector { min-height: 150px; justify-content: flex-end; } .hx-sectors--3 .hx-sector__ic { margin-bottom: auto; }
.hx .hx-xp__chips--c { justify-content: center; margin-top: 26px; }
.hx-facts4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.hx-facts4 li { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); font-weight: 600; transition: transform .3s, border-color .3s, box-shadow .3s; overflow: hidden; } .hx-facts4 li > * { position: relative; }
.hx-facts4 .hx-ic { width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 11px; background: #E3F6F4; color: var(--teal-d); transition: transform .3s, background .3s, color .3s; }
.hx-facts4 li:hover { transform: translateY(-5px); border-color: var(--teal); box-shadow: 0 24px 40px -28px rgba(10, 70, 90, .5); } .hx-facts4 li:hover .hx-ic { background: var(--teal); color: #fff; transform: scale(1.12); }
.hx .hx-fine { margin-top: 18px; color: var(--ink-3); font-size: .94rem; } .hx-fine a { color: var(--teal-d); }
.hx-cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hx-card { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .35s, box-shadow .35s, border-color .35s; overflow: hidden; } .hx-card > * { position: relative; }
.hx-card .hx-ic.big { width: 30px; height: 30px; padding: 12px; box-sizing: content-box; border-radius: 16px; background: #E3F6F4; color: var(--teal-d); transition: transform .35s, background .35s, color .35s; }
.hx-card h3 { font-size: 1.12rem; } .hx-card p { color: var(--ink-2); font-size: .95rem; }
.hx-card:hover { transform: translateY(-7px); border-color: var(--teal); box-shadow: 0 30px 46px -30px rgba(10, 70, 90, .55); } .hx-card:hover .hx-ic.big { background: var(--grad); color: #fff; transform: scale(1.1) rotate(-5deg); }
.hx-numbers { margin: 0; }
@media (max-width: 960px) { .hx-sxs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-sx::after { display: none; } .hx-arch { grid-template-columns: minmax(0, 1fr); gap: 0; } .hx-arch__l { width: 3px; height: 28px; margin: 0 auto; background: repeating-linear-gradient(180deg, rgba(125, 227, 216, .7) 0 6px, transparent 6px 11px); }
  .hx-sectors--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-facts4, .hx-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hx-sxs, .hx-sectors--3, .hx-facts4, .hx-cards4 { grid-template-columns: minmax(0, 1fr); } }

/* Old sections kept on a page (console demo, flow, simulator) sit in the same grid and wear the same eyebrow */
.hx .container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.hx .eyebrow { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(10, 156, 153, .1); color: var(--teal-d); font: 700 .78rem var(--font-body, inherit); letter-spacing: .08em; text-transform: uppercase; }
.hx .eyebrow::before { display: none; } .hx .eyebrow { -webkit-text-fill-color: currentColor; background-clip: border-box; -webkit-background-clip: border-box; }
.hx .xp-chips, .hx .hx-xp__chips--c { margin-top: 26px; }

/* Solutions: scenarios, compare, timeline, cost, logo strip, migration */
.hx-scn { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: clamp(18px, 3vw, 34px); align-items: start; }
.hx-scn__tabs { display: grid; gap: 10px; position: sticky; top: calc(var(--am-header, 64px) + 16px); }
.hx-scn__tab { --c1: #0A9C99; --c2: #2457B8; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit;
  transition: transform .3s, box-shadow .3s, border-color .3s, background .3s, color .3s; }
.hx-scn__tab b { display: block; font: 700 1rem var(--font-body, inherit); } .hx-scn__tab small { display: block; margin-top: 2px; color: var(--ink-3); font-size: .85rem; transition: color .3s; }
.hx-scn__tab .hx-sector__ic { width: 46px; height: 46px; margin: 0; flex: none; border-radius: 14px; background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; display: grid; place-items: center; transition: transform .3s; }
.hx-scn__tab:hover { transform: translateX(6px); border-color: var(--c1); } .hx-scn__tab:hover .hx-sector__ic { transform: scale(1.1) rotate(-5deg); }
.hx-scn__tab[aria-selected="true"] { background: linear-gradient(145deg, var(--c1), var(--c2)); border-color: transparent; color: #fff; transform: translateX(10px); box-shadow: 0 24px 38px -22px rgba(20, 60, 140, .65); }
.hx-scn__tab[aria-selected="true"] small { color: rgba(255, 255, 255, .86); } .hx-scn__tab[aria-selected="true"] .hx-sector__ic { background: rgba(255, 255, 255, .22); }
.hx-scn__stage { min-width: 0; } .hx-scn__p { display: none; } .hx-scn__p.is-on { display: block; animation: hx-pop .5s both; }
.hx-scn__p h3 { font: 800 1.7rem/1.15 var(--font-head, var(--font-body, inherit)); letter-spacing: -.02em; } .hx .hx-scn__who { margin: 6px 0 20px; color: var(--ink-2); font-size: 1.05rem; }
.hx-cmp { border-radius: 26px; background: #fff; border: 1px solid var(--line); padding: 18px; box-shadow: 0 30px 56px -42px rgba(10, 60, 90, .5); }
.hx-cmp__h { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 10px; padding: 0 6px 12px; font: 700 .78rem var(--font-body, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .hx-cmp__h span:last-child { color: var(--teal-d); }
.hx .hx-cmp__rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hx-cmp__r { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 10px; align-items: stretch; animation: hx-pop .5s both; animation-delay: calc(var(--r) * 90ms); }
.hx-cmp__b, .hx-cmp__a { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; line-height: 1.4; font-size: .98rem; transition: transform .3s, box-shadow .3s; }
.hx-cmp__b { background: #FDF0EE; color: #8A2B22; } .hx-cmp__a { background: #E5F7F1; color: #0B5B43; font-weight: 600; }
.hx-cmp__b .hx-ic, .hx-cmp__a .hx-ic { width: 20px; height: 20px; margin-top: 1px; padding: 3px; box-sizing: border-box; border-radius: 50%; color: #fff; } .hx-cmp__b .hx-ic { background: #D64545; } .hx-cmp__a .hx-ic { background: #12A66A; }
.hx-cmp__arr { display: grid; place-items: center; color: #9DB6C6; transition: transform .3s, color .3s; } .hx-cmp__arr .hx-ic { width: 22px; height: 22px; }
.hx-cmp__r:hover .hx-cmp__arr { transform: translateX(5px); color: var(--teal); } .hx-cmp__r:hover .hx-cmp__a { transform: translateX(4px); box-shadow: 0 16px 26px -18px rgba(18, 166, 106, .7); } .hx-cmp__r:hover .hx-cmp__b { transform: translateX(-3px); }
.hx-scn__2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr); gap: 16px; margin-top: 16px; }
.hx-scn__card { padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--line); } .hx .hx-k { font: 700 .76rem var(--font-body, inherit); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.hx .hx-tl { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.hx-tl__s { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 14px; padding: 0 0 18px 24px; animation: hx-pop .5s both; animation-delay: calc(var(--r) * 110ms + 300ms); }
.hx-tl__s:last-child { padding-bottom: 0; } .hx-tl__s::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: -2px; width: 2px; background: #CFE0EA; } .hx-tl__s:last-child::before { display: none; }
.hx-tl__s i { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px rgba(10, 156, 153, .15); transition: transform .3s; } .hx-tl__s:hover i { transform: scale(1.5); }
.hx-tl__s b { font: 700 .98rem var(--font-body, inherit); color: var(--teal-d); } .hx-tl__s span { color: var(--ink-2); font-size: .96rem; }
.hx-cost__n { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink-2); font-size: .98rem; } .hx-cost__n output { font: 800 1.5rem var(--font-body, inherit); color: var(--ink); }
.hx-cost input[type=range] { width: 100%; margin: 10px 0 14px; accent-color: var(--teal); height: 6px; cursor: pointer; }
.hx-cost__p { margin: 0 0 12px; } .hx-cost__p b { display: block; font: 800 clamp(1.9rem, 3vw, 2.5rem)/1.05 var(--font-head, var(--font-body, inherit)); letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hx-cost__p span { color: var(--ink-3); font-size: .92rem; }
.hx-strip { overflow: hidden; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hx .hx-strip__t { display: flex; gap: 14px; width: max-content; padding: 6px 0; animation: hx-marq 60s linear infinite; } .hx-strip:hover .hx-strip__t { animation-play-state: paused; }
.hx-strip__t li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font: 600 .98rem var(--font-body, inherit); color: var(--ink-2); transition: transform .3s, border-color .3s, color .3s; }
.hx-strip__t li:hover { transform: translateY(-5px) scale(1.04); border-color: var(--teal); color: var(--ink); } .hx-lg { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--grad); color: #fff; font: 800 .72rem var(--font-body, inherit); font-style: normal; }
@keyframes hx-marq { to { transform: translateX(-50%); } } [data-live].is-off .hx-strip__t, .hx-strip.is-off .hx-strip__t { animation-play-state: paused; }
.hx-mv { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); gap: 14px; align-items: center; }
.hx-mv__box { padding: 22px; border-radius: 26px; background: #fff; border: 1px solid var(--line); min-height: 270px; } .hx-mv__box--new { border-color: var(--teal); box-shadow: 0 30px 56px -38px rgba(10, 156, 153, .7); background: linear-gradient(160deg, #fff 55%, #E6F7F5); }
.hx-mv__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .hx-mv__hd h3 { font-size: 1.1rem; } .hx-mv__on { padding: 3px 11px; border-radius: 99px; background: #E5F7F1; color: #0B5B43; font: 700 .76rem var(--font-body, inherit); transition: background .4s, color .4s; } .hx-mv__hd b { color: var(--teal-d); }
.hx .hx-mv__apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.hx-mv__apps li { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: #F1F6F9; font: 600 .92rem var(--font-body, inherit); transition: opacity .5s, transform .5s, background .5s; } .hx-mv__apps li i { width: 18px; height: 18px; border-radius: 6px; background: #B9CAD6; transition: background .4s; }
.hx-mv__apps--new li { opacity: .22; transform: scale(.94); } .hx-mv__apps--new li.is-in { opacity: 1; transform: none; background: #E5F7F1; } .hx-mv__apps--new li.is-in i { background: var(--grad); } .hx-mv__apps--old li.is-gone { opacity: .22; transform: scale(.94); }
.hx-mv__mid { display: grid; justify-items: center; gap: 18px; } .hx-mv__mid .hx-chain__l { width: 100%; flex: none; } .hx-mv.is-done .hx-mv__on { background: #F1F6F9; color: var(--ink-3); }
.hx .hx-mv__tl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.hx-mv__t { position: relative; display: grid; gap: 4px; padding: 16px 16px 16px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); opacity: .6; transition: opacity .4s, transform .4s, border-color .4s, box-shadow .4s; }
.hx-mv__t i { width: 12px; height: 12px; border-radius: 50%; background: #B9CAD6; transition: background .4s; } .hx-mv__t b { font: 700 .95rem var(--font-body, inherit); } .hx-mv__t span { color: var(--ink-3); font-size: .86rem; line-height: 1.4; }
.hx-mv__t.is-on { opacity: 1; transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 22px 36px -26px rgba(10, 156, 153, .7); } .hx-mv__t.is-on i { background: var(--teal); } .hx-mv__t.is-past { opacity: 1; } .hx-mv__t.is-past i { background: var(--teal); }
.hx-center { text-align: center; margin-top: 28px; } .hx-cards4--n { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .hx-scn { grid-template-columns: minmax(0, 1fr); } .hx-scn__tabs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-scn__tab:hover, .hx-scn__tab[aria-selected="true"] { transform: none; }
  .hx-scn__2 { grid-template-columns: minmax(0, 1fr); } .hx-mv { grid-template-columns: minmax(0, 1fr); } .hx-mv__mid { grid-auto-flow: column; justify-content: center; } .hx-mv__mid .hx-chain__l { display: none; } .hx .hx-mv__tl { grid-template-columns: minmax(0, 1fr); } .hx-cards4--n { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hx-scn__tabs { grid-template-columns: minmax(0, 1fr); } .hx-cmp__h, .hx-cmp__r { grid-template-columns: minmax(0, 1fr); } .hx-cmp__h span:nth-child(2), .hx-cmp__arr { display: none; } .hx-cards4--n { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hx-strip__t { animation: none; } .hx-cmp__r, .hx-tl__s { animation: none; } }

/* Pricing: invoice, tiers, growth bars */
.hx-ph__art { display: grid; gap: 18px; justify-items: center; }
.hx-inv { width: min(100%, 420px); padding: 24px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .65); transform: perspective(1000px) rotateY(-9deg) rotateX(3deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.hx-inv:hover { transform: perspective(1000px) rotateY(0) rotateX(0) translateY(-6px); }
.hx-inv__h { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); } .hx-inv__lg { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--grad); color: #fff; font: 800 .9rem var(--font-body, inherit); }
.hx-inv__h b { display: block; } .hx-inv__h small { color: var(--ink-3); } .hx-inv__h em { margin-left: auto; font: 700 .76rem var(--font-body, inherit); font-style: normal; padding: 3px 10px; border-radius: 99px; background: #E3F6F4; color: var(--teal-d); }
.hx .hx-inv dl { margin: 14px 0; display: grid; gap: 10px; } .hx-inv dl div { display: flex; justify-content: space-between; gap: 12px; } .hx-inv dt { color: var(--ink-2); } .hx-inv dt small { display: block; color: var(--ink-3); font-size: .8rem; } .hx-inv dd { margin: 0; font-weight: 700; } .hx-inv dd.ok { color: #0B7A55; }
.hx-inv__t { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 2px solid var(--ink); } .hx-inv__t b { font: 800 1.9rem var(--font-head, var(--font-body, inherit)); letter-spacing: -.02em; }
.hx-ph__chips { justify-content: center; } .hx-ph .hx-xp__chips li { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.hx-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.hx-tier { --c1: #0A9C99; --c2: #2457B8; --p1: var(--c1); --p2: var(--c2); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 24px 24px; border-radius: 26px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; }
.hx-tier:hover { transform: translateY(-8px); border-color: var(--c1); box-shadow: 0 36px 56px -34px rgba(10, 60, 90, .55); }
.hx-tier small { font: 800 .82rem var(--font-body, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--c2); } .hx-tier strong { font: 800 2.4rem/1.05 var(--font-head, var(--font-body, inherit)); letter-spacing: -.02em; }
.hx-tier__u { color: var(--ink-3); font-size: .9rem; } .hx .hx-tier__t { margin: 8px 0 6px; font: 700 1.05rem var(--font-body, inherit); color: var(--ink); }
.hx .hx-tier ul { display: grid; align-content: start; gap: 8px; margin: 6px 0 18px; flex: 1; } .hx-tier li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: .94rem; line-height: 1.4; }
.hx-tier li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(145deg, var(--c1), var(--c2)); } .hx-tier li::after { content: ""; position: absolute; left: 4.500px; top: 7px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.hx-tier .btn { align-self: flex-start; } 
.hx-tier .hx-plan__tag { top: 18px; right: 16px; }
.hx .hx-gbs { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3vw, 40px); height: 320px; margin: 10px 0 18px; padding: 0; list-style: none; }
.hx-gb { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 6px; height: 100%; width: clamp(72px, 12vw, 130px); outline: none; }
.hx-gb__v { font: 800 clamp(.9rem, 1.4vw, 1.15rem) var(--font-body, inherit); color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .5s .5s, transform .5s .5s; }
.hx-gb__f { align-self: end; width: 100%; height: calc(var(--h) * 1%); min-height: 14px; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, #14C8C2, #3A6FE0); transform-origin: bottom; transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .3s; }
.hx-gb b { font: 700 1.05rem var(--font-body, inherit); } .hx-gb small { margin-top: -6px; color: var(--ink-3); }
.hx-gbs.is-seen .hx-gb__f { transform: scaleY(1); } .hx-gbs.is-seen .hx-gb__v { opacity: 1; transform: none; } .hx-gb:nth-child(2) .hx-gb__f, .hx-gb:nth-child(2) .hx-gb__v { transition-delay: .1s; } .hx-gb:nth-child(3) .hx-gb__f { transition-delay: .2s; } .hx-gb:nth-child(4) .hx-gb__f { transition-delay: .3s; } .hx-gb:nth-child(5) .hx-gb__f { transition-delay: .4s; }
.hx-gb:hover .hx-gb__f, .hx-gb:focus-visible .hx-gb__f { filter: brightness(1.12) saturate(1.2); transform: scaleY(1.03); } .hx-gb:hover b { color: var(--teal-d); }
@media (max-width: 1100px) { .hx-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .hx-tiers { grid-template-columns: minmax(0, 1fr); } .hx .hx-gbs { height: 240px; } }
@media (prefers-reduced-motion: reduce) { .hx-gb__f { transform: scaleY(1); transition: none; } .hx-gb__v { opacity: 1; transform: none; transition: none; } .hx-inv { transform: none; } }

/* Blueprints */
.hx-bph { --c1: #0A9C99; --c2: #2457B8; } .hx-bph .hx-crumbs { margin-bottom: 4px; }
.hx-bph__art { position: relative; min-height: 400px; }
.hx-bph__tile { position: absolute; left: 10%; top: 18%; width: clamp(150px, 20vw, 210px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 15%; background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .45); transform: rotate(-7deg); animation: hx-bob 7s ease-in-out infinite; }
.hx-bph__tile .hx-ic { width: 46%; height: 46%; stroke-width: 1.4; }
.hx-bpf { position: absolute; max-width: 250px; padding: 12px 16px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .6); animation: hx-bob 6s ease-in-out infinite; }
.hx-bpf b { display: block; font: 700 .86rem var(--font-body, inherit); color: var(--c2); } .hx-bpf small { color: var(--ink-2); font-size: .86rem; line-height: 1.35; display: block; }
.hx-bpf--0 { top: 0; right: 0; animation-delay: -1s; } .hx-bpf--1 { top: 42%; right: -2%; animation-delay: -3s; } .hx-bpf--2 { bottom: 0; left: 16%; animation-delay: -5s; }
[data-live].is-off .hx-bph__tile, [data-live].is-off .hx-bpf { animation-play-state: paused; }
.hx-head--mt { margin-top: clamp(36px, 4vw, 56px); }
.hx .hx-bpcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.hx-bpc { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 26px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; } .hx-bpc > * { position: relative; }
.hx-bpc:hover { transform: translateY(-7px); border-color: var(--teal); box-shadow: 0 32px 50px -32px rgba(10, 70, 90, .55); } .hx-bpc h3 { font-size: 1.2rem; }
.hx .hx-bpc__b, .hx .hx-bpc__a { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 16px; line-height: 1.4; font-size: .97rem; }
.hx-bpc__b { background: #FDF0EE; color: #8A2B22; } .hx-bpc__a { background: #E5F7F1; color: #0B5B43; font-weight: 600; }
.hx-bpc__b .hx-ic, .hx-bpc__a .hx-ic { width: 20px; height: 20px; flex: none; margin-top: 1px; padding: 3px; box-sizing: border-box; border-radius: 50%; color: #fff; } .hx-bpc__b .hx-ic { background: #D64545; } .hx-bpc__a .hx-ic { background: #12A66A; }
.hx-bpc__d { justify-self: center; color: #9DB6C6; transition: transform .3s, color .3s; } .hx-bpc__d .hx-ic { width: 22px; height: 22px; transform: rotate(90deg); } .hx-bpc:hover .hx-bpc__d { transform: translateY(4px); color: var(--teal); }
.hx .hx-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hx-need { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; } .hx-need > * { position: relative; }
.hx-need > .hx-ic { width: 34px; height: 34px; flex: none; padding: 8px; box-sizing: border-box; border-radius: 11px; background: #E3F6F4; color: var(--teal-d); transition: background .3s, color .3s, transform .3s; }
.hx-need b { display: block; font: 700 1.02rem var(--font-body, inherit); } .hx-need small { display: block; margin-top: 3px; color: var(--ink-2); font-size: .94rem; line-height: 1.4; }
.hx-need:hover { transform: translateY(-5px); border-color: var(--teal); box-shadow: 0 24px 40px -28px rgba(10, 70, 90, .5); } .hx-need:hover > .hx-ic { background: var(--teal); color: #fff; transform: scale(1.1); }
.hx .hx-k { margin: 0; }
@media (max-width: 960px) { .hx .hx-bpcs, .hx .hx-needs { grid-template-columns: minmax(0, 1fr); } .hx-bph__art { min-height: 300px; } .hx-bpf--1 { right: 0; } }
@media (prefers-reduced-motion: reduce) { .hx-bph__tile, .hx-bpf { animation: none; } }

.hx-tier > * { position: relative; z-index: 1; }

/* Home, for decision makers */
.hx .hx-bpcs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hx-facts4--rich { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-facts4--rich li { align-items: flex-start; padding: 22px; gap: 16px; } .hx-facts4--rich li > span b { display: block; font: 700 1.05rem var(--font-body, inherit); } .hx-facts4--rich li > span small { display: block; margin-top: 3px; color: var(--ink-2); font-weight: 500; font-size: .94rem; line-height: 1.45; }
@media (max-width: 960px) { .hx-cards3 { grid-template-columns: minmax(0, 1fr); } .hx .hx-bpcs--2, .hx-facts4--rich { grid-template-columns: minmax(0, 1fr); } }

/* Platform hero: the stack */
.hx-ph__art2 { position: relative; max-width: 560px; justify-self: end; width: 100%; } .hx-stack { display: block; width: 100%; height: auto; overflow: visible; }

/* Solutions: workflows, step by step */
.hx-wf { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: clamp(18px, 3vw, 34px); align-items: start; }
.hx-wf__tabs { display: grid; gap: 10px; position: sticky; top: calc(var(--am-header, 64px) + 16px); }
.hx-wf__tab { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: transform .3s, box-shadow .3s, border-color .3s, background .3s, color .3s; }
.hx-wf__tab b { display: block; font: 700 1rem var(--font-body, inherit); } .hx-wf__tab small { display: block; margin-top: 2px; color: var(--ink-3); font-size: .85rem; transition: color .3s; }
.hx-wf__tab .hx-sector__ic { width: 46px; height: 46px; margin: 0; flex: none; border-radius: 14px; display: grid; place-items: center; background: #E3F6F4; color: var(--teal-d); transition: background .3s, color .3s, transform .3s; }
.hx-wf__tab:hover { transform: translateX(6px); border-color: var(--teal); } .hx-wf__tab:hover .hx-sector__ic { transform: scale(1.1) rotate(-5deg); }
.hx-wf__tab[aria-selected="true"] { background: var(--grad); border-color: transparent; color: #fff; transform: translateX(10px); box-shadow: 0 24px 38px -22px rgba(20, 60, 140, .65); } .hx-wf__tab[aria-selected="true"] small { color: rgba(255, 255, 255, .86); } .hx-wf__tab[aria-selected="true"] .hx-sector__ic { background: rgba(255, 255, 255, .22); color: #fff; }
.hx-wf__stage { min-width: 0; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -50px rgba(10, 60, 90, .5); }
.hx-wf__p { display: none; } .hx-wf__p.is-on { display: block; animation: hx-pop .45s both; } .hx .hx-wf__lede { margin: 0 0 24px; font: 700 1.25rem/1.35 var(--font-body, inherit); color: var(--ink); max-width: 52ch; }
.hx .hx-wf__steps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hx-wf__s { position: relative; display: grid; grid-template-columns: 44px 84px minmax(0, 1fr); grid-template-areas: "n who act" "n . det"; gap: 2px 14px; padding: 0 0 22px; opacity: .45; transition: opacity .4s; }
.hx-wf__s:last-child { padding-bottom: 0; } .hx-wf__s::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 3px; border-radius: 3px; background: #D6E5EE; } .hx-wf__s:last-child::before { display: none; }
.hx-wf__s::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 3px; border-radius: 3px; background: var(--grad); transform: scaleY(0); transform-origin: top; transition: transform .5s ease .1s; } .hx-wf__s:last-child::after { display: none; }
.hx-wf__s i { grid-area: n; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #EAF2F7; color: var(--ink-3); font: 800 1rem var(--font-body, inherit); font-style: normal; transition: background .4s, color .4s, transform .4s, box-shadow .4s; position: relative; z-index: 1; }
.hx-wf__who { grid-area: who; align-self: center; padding: 3px 10px; border-radius: 99px; background: #EAF2F7; color: var(--ink-2); font: 700 .72rem var(--font-body, inherit); letter-spacing: .08em; text-transform: uppercase; justify-self: start; transition: background .4s, color .4s; }
.hx-wf__s b { grid-area: act; align-self: center; font: 700 1.08rem var(--font-body, inherit); } .hx-wf__s small { grid-area: det; color: var(--ink-2); font-size: .96rem; line-height: 1.5; max-width: 60ch; }
.hx-wf__s.is-done { opacity: 1; } .hx-wf__s.is-done::after { transform: scaleY(1); } .hx-wf__s.is-done i { background: var(--teal); color: #fff; }
.hx-wf__s.is-now { opacity: 1; } .hx-wf__s.is-now i { background: var(--grad); color: #fff; transform: scale(1.12); box-shadow: 0 16px 26px -12px rgba(30, 90, 200, .75); } .hx-wf__s.is-now .hx-wf__who { background: rgba(10, 156, 153, .14); color: var(--teal-d); }
@media (max-width: 960px) { .hx-wf { grid-template-columns: minmax(0, 1fr); } .hx-wf__tabs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-wf__tab:hover, .hx-wf__tab[aria-selected="true"] { transform: none; } }
@media (max-width: 600px) { .hx-wf__tabs { grid-template-columns: minmax(0, 1fr); } .hx-wf__s { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "n who" "n act" "n det"; } }
@media (prefers-reduced-motion: reduce) { .hx-wf__s { opacity: 1; transition: none; } .hx-wf__s::after { transition: none; } }

/* Real product screens in a plain frame: the visual language for Platform */
.hx-sf { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -40px rgba(8, 40, 60, .55); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
.hx-sf:hover { transform: translateY(-6px); box-shadow: 0 50px 80px -40px rgba(8, 40, 60, .6); }
.hx-sf__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #EAF1F6; } .hx-sf__bar i { width: 10px; height: 10px; border-radius: 50%; background: #C9D6E0; } .hx-sf__bar i:nth-child(1) { background: #F2A0A0; } .hx-sf__bar i:nth-child(2) { background: #F2D27A; } .hx-sf__bar i:nth-child(3) { background: #9ED8B0; }
.hx-sf__bar span { margin-left: 8px; padding: 2px 12px; border-radius: 99px; background: #fff; color: var(--ink-3); font: 500 .76rem ui-monospace, Menlo, monospace; }
.hx-sf img { display: block; width: 100%; height: auto; }
.hx-sf figcaption { padding: 14px 18px 18px; color: var(--ink-2); font-size: .96rem; line-height: 1.45; } .hx-sf figcaption b { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 2px; }
.hx-sfs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .hx-ph__art2 .hx-sf { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); border-color: rgba(255, 255, 255, .25); }
@media (max-width: 820px) { .hx-sfs { grid-template-columns: minmax(0, 1fr); } }

/* Light, compact page heroes (about 35% shorter than the dark ones). Specificity .hx .hx-ph beats the per-site hero rules. */
.hx .hx-ph { color: #12303C; padding: clamp(24px, 3vw, 40px) 0 clamp(26px, 3.2vw, 44px); border-bottom: 1px solid #D5E5EA;
  background: radial-gradient(620px 300px at 88% 0, rgba(20, 200, 194, .16), transparent 64%), radial-gradient(520px 260px at 0 100%, rgba(58, 111, 224, .1), transparent 62%), linear-gradient(180deg, #F4FAFB, #E6F1F5); }
.hx .hx-ph h1 { margin: 10px 0 8px; font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.1; color: #0B2A36; }
.hx .hx-ph h1 span { background: linear-gradient(120deg, #0A8F8A, #2457B8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx .hx-ph .hx-lede, .hx .hx-ph p { color: #2B4A57; font-size: 1rem; max-width: 58ch; }
.hx .hx-ph .hx-pill { background: #fff; border: 1px solid #B9D9DE; color: #0B5560; }
.hx .hx-ph .hx-crumbs, .hx .hx-ph .hx-crumbs a, .hx .hx-ph .hx-crumbs span { color: #3E6170; }
.hx .hx-ph .btn-ghost-dark { color: #0B4A55; border-color: #8FC4CB; background: rgba(255, 255, 255, .7); }
.hx .hx-ph .btn-ghost-dark:hover { background: #fff; }
.hx .hx-ph .btn-lg { padding: 10px 20px; font-size: .95rem; }
.hx .hx-ph--page .hx-ph__art2, .hx .hx-ph__art2 { max-width: 380px; } .hx .hx-ph__mark { max-width: 300px; }
.hx .hx-ph .hx-sf { box-shadow: 0 24px 50px -28px rgba(11, 42, 54, .5); border-color: #C5DBE1; }
.hx .hx-ph .hx-stat { background: #fff; border-color: #CFE2E7; color: #0B2A36; padding: 14px; } .hx .hx-ph .hx-stat b { color: #0A6F72; font-size: 1.7rem; } .hx .hx-ph .hx-stat span, .hx .hx-ph .hx-stat small { color: #3E6170; }
.hx .hx-ph .hx-xp__chips li { background: #fff; border-color: #BBD8DD; color: #0B4A55; }
.hx .hx-ph__extra, .hx .hx-ph__extra * { color: #2B4A57 !important; }
.hx .hx-ph__extra .lg-tabs a { background: #fff !important; border-color: #B9D9DE; color: #0B4A55 !important; }
.hx .hx-ph__extra .lg-tabs a[aria-current], .hx .hx-ph__extra .lg-tabs a.is-on { background: #0B4A55 !important; color: #fff !important; border-color: #0B4A55; }
.hx .hx-ph__extra .chip, .hx .hx-ph__extra .tag { border-color: #B9D9DE; }
.hx .hx-ph .hx-ph__grid { gap: clamp(16px, 3vw, 36px); }

/* Second, tighter pass: the hero is a band, not a screen. The illustration is scaled down, the chip rows under it are dropped. */
.hx .hx-ph { padding: clamp(16px, 2vw, 26px) 0 clamp(16px, 2vw, 26px); }
.hx .hx-ph .hx-ph__grid { align-items: center; gap: 20px; }
.hx .hx-ph .hx-ph__grid > :not(:first-child) { zoom: .62; align-self: center; } .hx .hx-ph .hx-ph__chips, .hx .hx-ph .hx-ph__art .hx-xp__chips { display: none; }
.hx .hx-ph h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 8px 0 6px; } .hx .hx-ph .hx-lede, .hx .hx-ph p { font-size: .95rem; margin: 0 0 10px; }
.hx .hx-ph .hx-cta { gap: 8px; } .hx .hx-ph .btn-lg { padding: 8px 16px; font-size: .9rem; } .hx .hx-ph .hx-crumbs { margin-bottom: 4px; font-size: .82rem; }
.hx .hx-ph__extra { margin-top: 8px; } .hx .hx-ph__extra .lg-tabs { margin-top: 10px; }
@media (max-width: 900px) { .hx .hx-ph .hx-ph__grid > :not(:first-child) { display: none; } }

/* Third pass: proportion. Text goes back to a readable size and fills the left half; only the padding and the illustration are trimmed. */
.hx .hx-ph { padding: clamp(26px, 3vw, 40px) 0 clamp(26px, 3vw, 40px); }
.hx .hx-ph .hx-ph__grid, .hx .hx-ph--page .hx-ph__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 56px); }
.hx .hx-ph h1 { font-size: clamp(2.1rem, 3.8vw, 3rem); line-height: 1.08; margin: 12px 0 12px; }
.hx .hx-ph .hx-lede, .hx .hx-ph p { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.55; margin: 0 0 16px; max-width: 54ch; }
.hx .hx-ph .hx-pill { font-size: .9rem; padding: 6px 14px; }
.hx .hx-ph .hx-crumbs { font-size: .95rem; margin-bottom: 8px; }
.hx .hx-ph .btn-lg { padding: 12px 24px; font-size: 1rem; }
.hx .hx-ph .hx-ph__grid > :not(:first-child) { zoom: .8; justify-self: end; }
.hx .hx-ph__extra .lg-tabs a { font-size: .95rem; }
.hx .hx-ph .btn span { font-size: 1rem; }

/* Fourth pass: mid-tone colour (lighter than the old near-black, not white), animated 3D layer behind the art, more colour in the page body. */
.hx .hx-ph { color: #fff; border-bottom: 0; isolation: isolate;
  background: radial-gradient(640px 320px at 85% 10%, rgba(125, 227, 216, .45), transparent 65%), radial-gradient(520px 300px at 0 100%, rgba(143, 140, 255, .4), transparent 62%), linear-gradient(120deg, #0F7183 0%, #1B6FA8 55%, #3B5FC4 100%); }
.hx .hx-ph h1 { color: #fff; } .hx .hx-ph h1 span { background: linear-gradient(120deg, #B8FFF4, #D6E3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx .hx-ph .hx-lede, .hx .hx-ph p { color: #E4F4F8; }
.hx .hx-ph .hx-pill { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); color: #fff; }
.hx .hx-ph .hx-crumbs, .hx .hx-ph .hx-crumbs a, .hx .hx-ph .hx-crumbs span { color: #D4EBF2; }
.hx .hx-ph .btn-ghost-dark { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); } .hx .hx-ph .btn-ghost-dark:hover { background: rgba(255, 255, 255, .26); }
.hx .hx-ph .btn-primary { background: #fff; color: #0B4F63; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); } .hx .hx-ph .btn-primary span { color: #0B4F63; }
.hx .hx-ph__extra, .hx .hx-ph__extra * { color: #E4F4F8 !important; }
.hx .hx-ph__extra .lg-tabs a { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .45); color: #fff !important; }
.hx .hx-ph__extra .lg-tabs a[aria-current], .hx .hx-ph__extra .lg-tabs a.is-on { background: #fff !important; color: #0B4F63 !important; border-color: #fff; }
.hx .hx-ph .hx-sf { border-color: rgba(255, 255, 255, .5); box-shadow: 0 30px 60px -24px rgba(5, 30, 60, .7); }
.hx .hx-ph .hx-stat { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; } .hx .hx-ph .hx-stat b { color: #fff; } .hx .hx-ph .hx-stat span, .hx .hx-ph .hx-stat small { color: #DDF0F5; }
.hx .hx-ph .hx-xp__chips li { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; }
/* animated 3D layer: a tilted ring set and two floating glass slabs, behind the illustration */
.hx .hx-ph::before { content: ""; position: absolute; z-index: -1; right: 6%; top: 50%; width: 460px; height: 460px; margin-top: -230px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 46px, rgba(255, 255, 255, .22) 46px 48px); transform: perspective(900px) rotateX(68deg) rotateZ(0); animation: hx-ring 28s linear infinite; }
.hx .hx-ph::after { content: ""; position: absolute; z-index: -1; right: 30%; top: 14%; width: 120px; height: 120px; border-radius: 26px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 26px 50px -20px rgba(5, 30, 60, .55), 360px 150px 0 -12px rgba(184, 255, 244, .25); animation: hx-slab 9s ease-in-out infinite; }
.hx .hx-ph .hx-ph__grid > :not(:first-child) { animation: hx-bob 7s ease-in-out infinite; }
@keyframes hx-ring { to { transform: perspective(900px) rotateX(68deg) rotateZ(360deg); } }
@keyframes hx-slab { 0%, 100% { transform: perspective(700px) rotateX(52deg) rotateZ(-28deg) translateY(0); } 50% { transform: perspective(700px) rotateX(52deg) rotateZ(-14deg) translateY(-18px); } }
@keyframes hx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hx .hx-ph::before, .hx .hx-ph::after, .hx .hx-ph .hx-ph__grid > :not(:first-child) { animation: none; } }
@media (max-width: 900px) { .hx .hx-ph::before { width: 300px; height: 300px; margin-top: -150px; right: -60px; } .hx .hx-ph::after { display: none; } }

/* colour in the body: tinted bands, coloured accents, a vivid closing band */
.hx .hx-sec--tint { background: linear-gradient(180deg, #E2F2F5, #E9EEFB); }
.hx .hx-eyebrow { background: #D5EEF0; color: #07606A; }
.hx .hx-end { background: linear-gradient(120deg, #0F7183, #1B6FA8 55%, #3B5FC4); color: #fff; } .hx .hx-end h2, .hx .hx-end p { color: #fff; }
.hx .hx-ph .btn-primary, .hx .hx-ph .btn-primary:hover { background: #fff; background-image: none; color: #0B4F63; } .hx .hx-ph .btn-primary:hover { background: #E6FBF8; }
/* dark bands lifted to the same mid-tone as the heroes */
.hx .hx-sec--dark { background: radial-gradient(800px 380px at 82% 0, rgba(125, 227, 216, .3), transparent 62%), linear-gradient(135deg, #12607A 0%, #1B5E9E 60%, #3558B5 100%); }
.hx .hx-numbers { background: linear-gradient(120deg, #0F7183, #1B6FA8 60%, #3B5FC4); }
.hx .hx-ph .btn-primary { background: #fff !important; color: #0B4F63 !important; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5) !important; } .hx .hx-ph .btn-primary:hover { background: #E6FBF8 !important; }
.hx .hx-numbers { background: linear-gradient(120deg, #DDF1F3, #E6EEFC); color: #0B2A36; }
.hx .hx-numbers b { background: linear-gradient(120deg, #0A7F86, #2A55B8); -webkit-background-clip: text; background-clip: text; color: transparent; } .hx .hx-numbers small { color: #2B4A57; }
.hx .hx-ph .hx-ph__stats { zoom: 1; } .hx .hx-ph .hx-stat { padding: 14px 18px; background: rgba(255, 255, 255, .2); } .hx .hx-ph .hx-stat b { font-size: 2rem; }
.hx .hx-ph .hx-stat span, .hx .hx-ph .hx-stat small { font-size: .95rem; color: #fff; }
.hx .hx-ph .hx-stat b { font-size: 2.4rem !important; line-height: 1.1; background: none !important; -webkit-text-fill-color: #fff; color: #fff !important; }
.hx .hx-ph .hx-stat b span { font-size: inherit !important; color: #fff !important; }
/* hero: a few points more teal, fewer towards blue */
.hx .hx-ph { background: radial-gradient(640px 320px at 85% 10%, rgba(125, 227, 216, .5), transparent 65%), radial-gradient(520px 300px at 0 100%, rgba(143, 140, 255, .32), transparent 62%), linear-gradient(120deg, #0E7787 0%, #1B76A6 55%, #3465BB 100%); }
.hx .hx-sec--dark { background: radial-gradient(800px 380px at 82% 0, rgba(125, 227, 216, .32), transparent 62%), linear-gradient(135deg, #126680 0%, #1A66A0 60%, #3260B2 100%); }
.hx .hx-end { background: linear-gradient(120deg, #0E7787, #1B76A6 55%, #3465BB); }
.hx .hx-sec { padding: clamp(36px, 4.6vw, 68px) 0; }

/* Depth: parallax layers, extruded slabs, floating glass chips, a lit and lifted illustration. */
.hx .hx-ph { --px: 0; --py: 0; }
.hx .hx-ph::before { translate: calc(var(--px) * -26px) calc(var(--py) * -14px); transition: translate .5s cubic-bezier(.2, .8, .2, 1); }
.hx .hx-ph::after { translate: calc(var(--px) * -48px) calc(var(--py) * -26px); transition: translate .5s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 1px 1px 0 rgba(255, 255, 255, .45), 2px 2px 0 rgba(255, 255, 255, .38), 3px 3px 0 rgba(255, 255, 255, .3), 4px 4px 0 rgba(255, 255, 255, .24), 5px 5px 0 rgba(255, 255, 255, .18), 6px 6px 0 rgba(10, 60, 100, .3), 0 30px 40px -16px rgba(5, 30, 60, .6), 360px 150px 0 -12px rgba(184, 255, 244, .25); }
.hx .hx-ph .hx-ph__grid > :not(:first-child) { animation: none; translate: calc(var(--px) * 14px) calc(var(--py) * 8px); transition: translate .5s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 28px 22px rgba(5, 30, 60, .45)); }
.hx .hx-ph .hx-sf { animation: hx-bob 7s ease-in-out infinite; box-shadow: 1px 1px 0 rgba(255, 255, 255, .5), 2px 2px 0 rgba(200, 225, 240, .6), 3px 3px 0 rgba(170, 205, 225, .6), 4px 4px 0 rgba(140, 185, 215, .5), 0 30px 60px -24px rgba(5, 30, 60, .7); }
.hx .hx-ph .hx-sf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .35) 0%, transparent 38%); }
.hx .hx-ph .hx-sf { position: relative; }
.hx-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; max-width: 1200px; margin: 0 auto; }
.hx-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font: 700 .9rem var(--font-body, inherit); color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12)); border: 1px solid rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 22px -10px rgba(5, 30, 60, .55); animation: hx-bob 6s ease-in-out infinite;
  translate: calc(var(--px) * var(--zx, 1) * 1px) calc(var(--py) * var(--zy, 1) * 1px); transition: translate .45s cubic-bezier(.2, .8, .2, 1); }
.hx-chip i { width: 9px; height: 9px; border-radius: 50%; background: #7DE3D8; box-shadow: 0 0 0 4px rgba(125, 227, 216, .3); }
.hx-chip--1 { right: 36%; top: 18%; --zx: 34; --zy: 20; } .hx-chip--2 { right: 4%; top: 12%; --zx: 60; --zy: 34; animation-delay: -2s; } .hx-chip--3 { right: 30%; bottom: 14%; --zx: 22; --zy: 12; animation-delay: -4s; }
@media (max-width: 900px) { .hx-fx { display: none; } }
@media (prefers-reduced-motion: reduce) { .hx-chip, .hx .hx-ph .hx-sf { animation: none; } }

/* Readable product evidence: straight-on, larger, and enlargeable */
.hx .hx-ph--page .hx-sf, .hx .hx-ph .hx-sf { transform: none !important; }
.hx .hx-ph .hx-ph__art2 { max-width: 560px; } .hx .hx-ph .hx-ph__grid > :not(:first-child) { zoom: .95; }
.hx .hx-ph .hx-sf:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hx-lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(6, 30, 45, .82); cursor: zoom-out; animation: hx-fade .2s ease; }
.hx-lb img { max-width: min(1280px, 96vw); max-height: 90vh; border-radius: 14px; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .7); background: #fff; }
.hx-lb button { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #0B4F63; font: 700 1.6rem/1 sans-serif; cursor: pointer; }
@keyframes hx-fade { from { opacity: 0; } }
/* Luminance: the headline side is the quietest, darkest part of the hero; light and depth gather behind the illustration. */
.hx .hx-ph { background: radial-gradient(560px 340px at 82% 30%, rgba(125, 227, 216, .5), transparent 66%), radial-gradient(480px 300px at 6% 100%, rgba(143, 140, 255, .22), transparent 62%), linear-gradient(100deg, #0A5E70 0%, #0F6E92 48%, #2F63B8 100%); }
.hx .hx-end { background: linear-gradient(100deg, #0A5E70 0%, #0F6E92 55%, #2F63B8 100%); }

/* Old section headings inside the new pages: readable eyebrow, room between heading and lede */
.hx .sec-head .eyebrow, .hx p.eyebrow { display: inline-block; -webkit-text-fill-color: currentColor; background: #D5EEF0; color: #07606A; border-radius: 999px; padding: 5px 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.hx .sec-head h2 { margin: 12px 0 14px; } .hx .sec-head p:not(.eyebrow) { margin-top: 0; color: var(--ink-2); }

/* Moving illustrations: a radar sweep over the rings, a travelling pointer with a click ripple, and a sheen across every header screen */
.hx .hx-ph::before { background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .34) 52deg, rgba(255, 255, 255, 0) 53deg), repeating-radial-gradient(circle, transparent 0 46px, rgba(255, 255, 255, .24) 46px 48px); }
.hx .hx-ph .hx-sf, .hx .hx-ph .hx-ph__art > :first-child { position: relative; overflow: hidden; }
.hx .hx-ph .hx-sf::before { content: ""; position: absolute; z-index: 3; left: 12%; top: 70%; width: 18px; height: 18px; background: #0B4F63; clip-path: polygon(0 0, 100% 62%, 58% 66%, 78% 100%, 62% 100%, 42% 70%, 0 100%); filter: drop-shadow(0 0 0 #fff); animation: hx-ptr 7s var(--ease, ease-in-out) infinite; pointer-events: none; }
.hx .hx-ph .hx-sf .hx-rip, .hx .hx-ph .hx-sf::after { }
.hx .hx-ph .hx-sf::after { background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .5) 50%, transparent 64%); background-size: 260% 100%; animation: hx-sheen 6s ease-in-out infinite; }
.hx .hx-ph .hx-ph__art > :first-child::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .55) 50%, transparent 64%); background-size: 260% 100%; animation: hx-sheen 6s ease-in-out infinite; }
@keyframes hx-ptr { 0% { left: 12%; top: 74%; } 30% { left: 62%; top: 34%; transform: scale(1); } 36% { transform: scale(.82); } 42% { transform: scale(1); } 70% { left: 38%; top: 58%; } 100% { left: 12%; top: 74%; } }
@keyframes hx-sheen { 0% { background-position: 140% 0; } 55%, 100% { background-position: -60% 0; } }
.hx .sec-head .eyebrow, .hx p.eyebrow { color: #07606A !important; -webkit-text-fill-color: #07606A !important; background: #D5EEF0 !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; } .hx .sec-head .eyebrow::before { display: none; }
.hx .vx-k { -webkit-text-fill-color: currentColor; } .hx [class*="plan"] > .vx-k:first-child, .hx .vx-plan .vx-k, .hx .pb-plan .vx-k { color: #CFF4EF !important; background: none !important; }
.hx .pb-sum .vx-k { color: #CFF4EF !important; -webkit-text-fill-color: #CFF4EF !important; background: none !important; }
.hx .pb-sum, .hx .pb-sum h2, .hx .pb-sum h3, .hx .pb-sum p, .hx .pb-sum b, .hx .pb-sum strong, .hx .pb-sum span, .hx .pb-sum summary, .hx .pb-sum em { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.hx .pb-sum .btn, .hx .pb-sum .btn span { color: #0B4F63 !important; -webkit-text-fill-color: #0B4F63 !important; } .hx .pb-sum .btn-primary { background: #fff !important; } .hx .pb-sum p:last-child { color: #E4F4F8 !important; }
/* Chips that now link somewhere */
.hx .hx-xp__chips--c a { color: inherit; text-decoration: none; display: inline-block; } .hx .hx-xp__chips--c li { transition: transform .2s var(--ease, ease), border-color .2s, background .2s; } .hx .hx-xp__chips--c li:hover { transform: translateY(-2px); border-color: #2AA7A3; background: #E1F3F2; }
.hx .vz-note a { font-weight: 600; }