@font-face {
    font-family:Axiforma;
    src:url("assets/font/Axiforma/Axiforma-Regular.ttf") format("truetype");
    font-style:normal;
    font-weight:400;
    font-display:swap
}

@font-face {
    font-family:Axiforma;
    src:url("assets/font/Axiforma/Axiforma-Medium.ttf") format("truetype");
    font-style:normal;
    font-weight:500;
    font-display:swap
}

@font-face {
    font-family:Axiforma;
    src:url("assets/font/Axiforma/Axiforma-SemiBold.ttf") format("truetype");
    font-style:normal;
    font-weight:600;
    font-display:swap
}

@font-face {
    font-family:Axiforma;
    src:url("assets/font/Axiforma/Axiforma-Bold.ttf") format("truetype");
    font-style:normal;
    font-weight:700;
    font-display:swap
}

@font-face {
    font-family:Axiforma;
    src:url("assets/font/Axiforma/Axiforma-ExtraBold.ttf") format("truetype");
    font-style:normal;
    font-weight:800;
    font-display:swap
}

:root {
    --navy:#10264a;
    --navy-2:#081a35;
    --navy-3:#173660;
    --red:#c8142b;
    --red-dark:#a80e22;
    --red-soft:#fff0f2;
    --green:#178454;
    --ink:#0e1d34;
    --muted:#607087;
    --line:#dce4ee;
    --surface:#f3f6fa;
    --white:#fff;
    --radius:22px;
    --shadow:0 24px 70px rgba(8,26,53,.12);
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font:14px Axiforma;
    color:var(--ink);
    background:var(--surface);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden
}

body.modal-open {
    position:fixed;
    width:100%;
    overflow:hidden;
    overscroll-behavior:none
}

main {
    display:flex;
    flex-direction:column
}

.hero {
    order:1
}

.information-flow-section {
    order:2
}

.client-strip {
    order:8
}

#workflow {
    order:4
}

#insights {
    order:5
}

#organisations {
    order:6
}

.faq-section {
    order:7
}

img {
    display:block;
    max-width:100%
}

a {
    text-decoration:none;
    color:inherit
}

button,input,select,textarea {
    font-family:Axiforma;
    font-size:inherit
}

button {
    cursor:pointer;
    border-radius:10px
}

.container {
    width:min(1240px,calc(100% - 48px));
    margin:auto
}

.section {
    padding:74px 0
}

h1,h2,h3,p {
    margin-top:0
}

h1 {
    max-width:670px;
    margin-bottom:20px;
    font-size:clamp(42px,5.4vw,74px);
    line-height:1.02;
    letter-spacing:-.055em
}

h2 {
    margin-bottom:18px;
    font-size:clamp(31px,3.7vw,50px);
    line-height:1.08;
    letter-spacing:-.045em
}

h3 {
    font-size:13px;
    line-height:1.35;
    letter-spacing:-.02em
}

p {
    font-size:20px;
    line-height:1.75;
    color:var(--muted)
}

.topbar {
    position:sticky;
    top:0;
    z-index:40;
    background:#fff;
    border-bottom:1px solid rgba(16,38,74,.09);
    backdrop-filter:none
}

.nav-shell {
    min-height:86px;
    display:flex;
    align-items:center;
    gap:28px
}

.logo-link {
    width:250px;
    height:64px;
    display:flex;
    align-items:flex-start;
    flex:0 0 250px;
    overflow:hidden
}

.logo-link img {
    width:250px;
    max-width:none;
    height:auto;
    transform:translateY(-39px)
}

nav {
    display:flex;
    gap:26px;
    margin-left:auto
}

nav a,.nav-actions>a {
    font: size 14px;
    font-weight:400;
    position:relative
}

nav a:after,.nav-actions>a:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:2px;
    background:var(--red);
    border-radius:999px;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease
}

nav a:hover:after,.nav-actions>a:hover:after {
    transform:scaleX(1)
}

.nav-actions {
    display:flex;
    align-items:center;
    gap:18px
}

.nav-actions .btn {
    min-height:38px;
    padding:0 16px;
    font-size:14px
}

.menu-toggle {
    display:none;
    width:42px;
    height:42px;
    padding:0 10px;
    border:0;
    background:transparent;
    color:var(--navy);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px
}

.menu-toggle span {
    width:22px;
    height:2px;
    display:block;
    border-radius:99px;
    background:currentColor;
    transition:transform .25s ease,opacity .2s ease
}

.menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(7px) rotate(45deg)
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity:0
}

.menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-7px) rotate(-45deg)
}

nav .nav-mobile-cta {
    display:none
}

.btn {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:48px;
    padding:0 22px;
    border:1px solid transparent;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:16px;
    font-weight:600;
    letter-spacing:.01em;
    box-shadow:none;
    transition:border-color .45s ease,color .45s ease
}

.btn:before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:var(--red-dark);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .45s ease
}

.btn:hover:before {
    transform:scaleX(1)
}

.btn:active {
    filter:brightness(.96)
}

.btn iconify-icon {
    font-size:13px
}

.primary {
    background:var(--red);
    color:#fff;
    box-shadow:none
}

.primary:hover {
    box-shadow:none
}

.secondary {
    background:rgba(255,255,255,.08);
    color:var(--navy);
    border-color:#b9c5d3;
    box-shadow:none
}

.secondary:hover {
    color:#fff;
    border-color:var(--navy)
}

.secondary:before,.white:before {
    background:var(--navy)
}

.white {
    background:#fff;
    color:var(--navy);
    box-shadow:none
}

.white:hover {
    color:#fff
}

/* The executive-report mockup is intentionally preserved; the redesigned shell frames it. */ .hero {
    position:relative;
    padding:82px 0 88px;
    overflow:hidden;
    color:#fff;
    background:var(--navy)
}

.hero:before {
    display:none
}

.hero:after {
    content:"";
    position:absolute;
    width:370px;
    height:370px;
    right:-130px;
    bottom:-190px;
    border:70px solid rgba(255,255,255,.05);
    border-radius:50%
}

.hero-grid {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:.88fr 1.12fr;
    gap:56px;
    align-items:center
}

.hero h1 {
    font-size:60px;
    line-height:1;
    letter-spacing:-.02em
}

.hero-copy>p {
    max-width:610px;
    margin-bottom:0;
    color:#c7d4e5;
    font-size:15px;
    line-height:1.7
}

.hero-emphasis {
    text-decoration-line:underline;
    text-decoration-color:var(--red);
    text-decoration-thickness:5px;
    text-underline-offset:.12em;
    text-decoration-skip-ink:none
}

.hero-actions,.trust {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px
}

.hero .secondary {
    color:#fff;
    border-color:rgba(255,255,255,.32)
}

.hero .secondary:before {
    background:#fff
}

.hero .secondary:hover {
    color:var(--navy)
}

.trust {
    gap:25px;
    margin-top:36px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.15)
}

.trust span {
    display:flex;
    gap:9px;
    align-items:center;
    color:#dce6f2;
    font-size:12px;
    font-weight:700
}

.trust iconify-icon {
    font-size:20px;
    color:#ff8897
}

.report-stage {
    position:relative;
    min-height:510px;
    display:grid;
    place-items:center
}

.report {
    width:650px;
    max-width:100%;
    padding:28px;
    background:#fff;
    border:1px solid #d8e0e8;
    border-radius:18px;
    color:var(--navy);
    transform:rotate(-4deg);
    box-shadow:0 36px 80px rgba(0,0,0,.28);
    animation:float 4.5s ease-in-out infinite
}

@keyframes float {
    50% {
        transform:rotate(-4deg) translateY(-14px)
    }
}

.report-head {
    display:flex;
    justify-content:space-between;
    gap:20px
}

.report-head>div>span {
    color:var(--red);
    font-weight:700;
    text-transform:uppercase
}

.report-head h2 {
    font-size:20px;
    letter-spacing:0;
    margin:7px 0 3px
}

.report-head p {
    margin:0
}

.report-head img {
    width:58px;
    height:58px;
    object-fit:cover;
    border-radius:14px
}

.divider {
    height:1px;
    background:var(--line);
    margin:22px 0
}

.report-grid {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:16px
}

.risk-panel,.mini-card,.participation {
    border:1px solid var(--line);
    border-radius:16px
}

.risk-panel {
    padding:20px
}

.metric-head {
    display:flex;
    justify-content:space-between
}

.metric-head strong,.metric-head small {
    display:block
}

.metric-head small {
    color:var(--muted)
}

.metric-head iconify-icon {
    font-size:22px
}

.risk-body {
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:18px
}

.risk-ring {
    --score:0deg;
    width:142px;
    height:142px;
    flex:0 0 142px;
    border-radius:50%;
    display:grid;
    place-content:center;
    position:relative;
    background:conic-gradient(var(--green) var(--score),#e7ecef 0)
}

.risk-ring:after {
    content:"";
    position:absolute;
    inset:13px;
    border-radius:50%;
    background:#fff
}

.risk-ring span,.risk-ring small {
    position:relative;
    z-index:1;
    text-align:center
}

.risk-ring span {
    font-size:22px;
    font-weight:800;
    transition:color .2s
}

.risk-ring.done span {
    color:var(--green)
}

.risk-ring small {
    color:var(--muted)
}

.risk-body b {
    font-size:16px;
    color:var(--green)
}

.risk-body p {
    margin:7px 0 0;
    line-height:1.7
}

.mini-stack {
    display:grid;
    gap:16px
}

.mini-card {
    padding:18px;
    display:flex;
    gap:14px
}

.mini-card>iconify-icon {
    font-size:22px
}

.mini-card span,.mini-card strong,.mini-card small {
    display:block
}

.mini-card span {
    color:var(--muted)
}

.mini-card strong {
    font-size:20px;
    margin:8px 0 5px
}

.mini-card small {
    display:flex;
    align-items:center;
    gap:5px;
    font-weight:700
}

.up {
    color:var(--green)!important
}

.down {
    color:var(--red)!important
}

.participation {
    margin-top:16px;
    padding:18px
}

.participation>div:first-child {
    display:flex;
    justify-content:space-between;
    margin-bottom:12px
}

.progress {
    height:11px;
    border-radius:999px;
    background:#e7ebf0;
    overflow:hidden
}

.progress i {
    display:block;
    width:74%;
    height:100%;
    border-radius:999px;
    background:var(--navy)
}

.chip {
    position:absolute;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 15px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--navy);
    font-weight:700;
    box-shadow:0 14px 32px rgba(4,20,42,.18)
}

.chip iconify-icon {
    font-size:20px;
    color:var(--red)
}

.chip-a {
    right:-24px;
    top:48px
}

.chip-b {
    left:-18px;
    bottom:42px
}

.alt {
    position:relative;
    background:#e9eef5;
    border:0;
    overflow:hidden
}

.alt:before {
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    top:50%;
    right:-150px;
    border:64px solid rgba(96,112,135,.08);
    border-radius:50%;
    transform:translateY(-50%);
    pointer-events:none
}

.split {
    position:relative;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:80px;
    align-items:center
}

.split h2,.split>p {
    margin-bottom:0
}

.split>p {
    padding:26px 28px;
    border-left:3px solid var(--red);
    border-radius:0 18px 18px 0;
    background:rgba(255,255,255,.63);
    color:#41536b;
    font-size:16px
}

.information-flow-heading {
    position:relative;
    z-index:1;
    max-width:900px;
    margin-bottom:38px
}

.information-flow-heading h2 {
    max-width:850px;
    margin-bottom:16px
}

.information-flow-heading p {
    max-width:680px;
    margin-bottom:0;
    color:#364a65;
    font-size:16px
}

.information-flow {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
    align-items:center
}

.flow-panel {
    min-width:0;
    padding:28px;
    border:1px solid #d8e1ed;
    border-radius:20px;
    background:rgba(255,255,255,.72);
    box-shadow:0 14px 40px rgba(16,38,74,.06)
}

.flow-panel h3 {
    margin-bottom:8px;
    color:var(--navy);
    font-size:17px;
    font-weight:600;
    text-align:center;
    text-transform:uppercase
}

.panel-accent {
    width:54px;
    height:2px;
    margin:0 auto 18px;
    border-radius:99px
}

.red-accent {
    background:var(--red)
}

.green-accent {
    background:var(--green)
}

.scattered-map,.clear-map {
    position:relative;
    min-height:320px
}

.connection-network {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    fill:none;
    stroke:#b9c8da;
    stroke-width:1.5;
    stroke-dasharray:7 7
}

.flow-node {
    position:absolute;
    min-height:54px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    background:#fff;
    color:var(--navy);
    font-size:12px;
    box-shadow:0 8px 22px rgba(16,38,74,.08);
    transition:transform .25s ease,box-shadow .25s ease
}

.flow-node:hover {
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(16,38,74,.13)
}

.node-icon,.outcome-icon {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    flex:0 0 28px
}

.node-icon svg,.outcome-icon svg {
    width:24px;
    height:30px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round
}

.spreadsheet-icon {
    color:#168b5a
}

.providers-icon {
    color:#6546c6
}

.reports-icon {
    color:#e02b2b
}

.tracking-icon {
    color:#e48a18
}

.spreadsheet-node {
    top:12px;
    left:50%;
    transform:translateX(-50%)
}

.spreadsheet-node:hover {
    transform:translateX(-50%) translateY(-4px)
}

.providers-node {
    top:130px;
    left:0
}

.reports-node {
    top:130px;
    right:0
}

.tracking-node {
    bottom:4px;
    left:50%;
    transform:translateX(-50%)
}

.tracking-node:hover {
    transform:translateX(-50%) translateY(-4px)
}

.flow-arrow {
    position:relative;
    z-index:2;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    justify-self:center;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    box-shadow:0 10px 24px rgba(16,38,74,.24);
    animation:flow-arrow-pulse 2s ease-in-out infinite
}

.flow-arrow svg {
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round
}

@keyframes flow-arrow-pulse {
    50% {
        transform:translateX(4px)
    }
}

.clear-map:before {
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    top:50%;
    left:50%;
    border:1.5px dashed #b9c8da;
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:clear-ring-rotate 18s linear infinite
}

@keyframes clear-ring-rotate {
    to {
        transform:translate(-50%,-50%) rotate(360deg)
    }
}

.clear-core {
    position:absolute;
    width:90px;
    height:90px;
    top:50%;
    left:50%;
    display:grid;
    place-items:center;
    padding:12px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 12px 30px rgba(16,38,74,.13);
    transform:translate(-50%,-50%)
}

.clear-core img {
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:14px
}

.outcome {
    position:absolute;
    width:128px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    color:var(--navy);
    font-size:11px;
    line-height:1.35;
    text-align:center
}

.outcome-icon {
    color:#245bb0
}

.measure-outcome .outcome-icon {
    color:var(--green)
}

.attention-outcome .outcome-icon {
    color:var(--red)
}

.decisions-outcome .outcome-icon {
    color:#6546c6
}

.participation-outcome {
    top:0;
    left:50%;
    transform:translateX(-50%)
}

.measure-outcome {
    top:50%;
    left:0;
    transform:translateY(-50%)
}

.attention-outcome {
    top:50%;
    right:0;
    transform:translateY(-50%)
}

.decisions-outcome {
    bottom:0;
    left:50%;
    transform:translateX(-50%)
}

.section-head {
    max-width:760px;
    margin-bottom:35px
}

.workflow-insight-line {
    display:block;
    margin-top:4px
}

.workflow-insight-word {
    font-family:Axiforma,"Avenir Next","Segoe UI",Arial,sans-serif;
    font-style:normal;
    font-weight:inherit;
    color:inherit;
    text-decoration-line:underline;
    text-decoration-color:var(--red);
    text-decoration-thickness:4px;
    text-underline-offset:.12em;
    text-decoration-skip-ink:none
}

.workflow-insight-stop {
    color:var(--red)
}

.section-head>p {
    max-width:620px;
    margin-bottom:0;
    font-size:13px;
    color: #000
}

.client-strip {
    position:relative;
    isolation:isolate;
    padding:30px 0;
    background:#fff;
    border-block:1px solid rgba(16,38,74,.1);
    overflow:hidden
}

.client-strip:before {
    content:"";
    position:absolute;
    z-index:-1;
    width:240px;
    height:240px;
    left:-110px;
    top:50%;
    border:30px solid rgba(16,38,74,.05);
    border-radius:50%;
    box-shadow:0 0 0 22px rgba(16,38,74,.025),0 0 0 54px rgba(78,132,196,.035);
    transform:translateY(-50%);
    animation:client-orbit-drift 9s ease-in-out infinite alternate
}

.client-strip:after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    opacity:.35;
    background-image:linear-gradient(105deg,transparent 20%,rgba(61,126,211,.07) 42%,transparent 62%),linear-gradient(120deg,transparent 48%,rgba(16,38,74,.035) 49%,rgba(16,38,74,.035) 50%,transparent 51%);
    background-size:220% 100%,54px 54px;
    animation:client-light-sweep 13s linear infinite
}

@keyframes client-orbit-drift {
    to {
        transform:translate(35px,-50%) rotate(12deg)
    }
}

@keyframes client-light-sweep {
    to {
        background-position:-180% 0,54px 0
    }
}

.client-strip .container {
    position:relative;
    z-index:1
}

.client-strip-title {
    margin:0 0 20px;
    color:var(--navy);
    font-size:20px;
    font-weight:600;
    text-align:center
}

.client-marquee {
    position:relative;
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}

.client-track {
    display:flex;
    align-items:center;
    gap:32px;
    width:max-content;
    margin-inline:0;
    animation:client-scroll 16s linear infinite
}

.client-logo {
    width:110px;
    height:50px;
    display:grid;
    place-items:center;
    flex:0 0 110px
}

.client-logo.logo-dark {
    background:transparent
}

.client-logo img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:42px;
    object-fit:contain;
    filter:none;
    opacity:1
}

.client-logo.logo-dark img {
    filter:invert(1)
}

.client-marquee:hover .client-track {
    animation-play-state:paused
}

@keyframes client-scroll {
    from {
        transform:translateX(calc(100vw - 48px))
    }
    to {
        transform:translateX(-100%)
    }
}

#platform {
    background:#e8edf4
}

.features {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}

.features article {
    position:relative;
    min-height:260px;
    padding:27px 24px;
    border:1px solid #fff;
    border-radius:16px;
    background:rgba(255,255,255,.58);
    overflow:hidden;
    transition:transform .28s ease,background .28s ease,color .28s ease,box-shadow .28s ease
}

.features article:after {
    content:"";
    position:absolute;
    right:-30px;
    bottom:-42px;
    width:115px;
    height:115px;
    border:22px solid rgba(16,38,74,.04);
    border-radius:50%
}

.features article:hover {
    transform:translateY(-8px);
    background:var(--navy);
    color:#fff;
    box-shadow:0 20px 45px rgba(8,26,53,.18)
}

.features article:hover p {
    color:#d3deeb
}

.features article:hover:after {
    border-color:rgba(255,255,255,.08)
}

.feature-icon {
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    margin-bottom:38px;
    border-radius:14px;
    background:var(--navy);
    color:#fff
}

.features article:nth-child(2n) .feature-icon {
    background:var(--red)
}

.features article:hover .feature-icon {
    background:var(--red)
}

.feature-icon svg {
    width:29px;
    height:29px;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}

.features article:hover .planning-icon svg {
    animation:calendar-pop .55s ease
}

.features article:hover .planning-icon .icon-accent {
    animation:check-draw .65s ease
}

.features article:hover .provider-icon .person-a {
    animation:person-bob .6s ease
}

.features article:hover .provider-icon .person-b {
    animation:person-bob .6s .08s ease
}

.features article:hover .provider-icon .person-c {
    animation:person-bob .6s .16s ease
}

.features article:hover .data-icon .row-a {
    animation:data-scan .65s ease
}

.features article:hover .data-icon .row-b {
    animation:data-scan .65s .09s ease
}

.features article:hover .data-icon .row-c {
    animation:data-scan .65s .18s ease
}

.features article:hover .insight-icon .bar-a {
    animation:bar-grow .6s ease
}

.features article:hover .insight-icon .bar-b {
    animation:bar-grow .6s .08s ease
}

.features article:hover .insight-icon .bar-c {
    animation:bar-grow .6s .16s ease
}

.features article:hover .insight-icon .trend-line {
    animation:trend-draw .75s ease
}

@keyframes calendar-pop {
    50% {
        transform:translateY(-2px) rotate(-3deg)
    }
}

@keyframes check-draw {
    0% {
        stroke-dasharray:0 20
    }

    100% {
        stroke-dasharray:20 20
    }
}

@keyframes person-bob {
    50% {
        transform:translateY(-2px)
    }
}

@keyframes data-scan {
    0% {
        opacity:.2;
        transform:scaleX(.25);
        transform-origin:left
    }

    100% {
        opacity:1;
        transform:scaleX(1);
        transform-origin:left
    }
}

@keyframes bar-grow {
    0% {
        transform:scaleY(.15);
        transform-origin:bottom
    }

    100% {
        transform:scaleY(1);
        transform-origin:bottom
    }
}

@keyframes trend-draw {
    0% {
        stroke-dasharray:0 40
    }

    100% {
        stroke-dasharray:40 40
    }
}

.features article p {
    margin-bottom:0;
    font-weight: 500;
    font-size:13px;
    color: #000
}

.dark {
    position:relative;
    background:var(--navy-2);
    overflow:hidden
}

.dark:after {
    content:"";
    position:absolute;
    width:460px;
    height:460px;
    left:-190px;
    bottom:-270px;
    border:72px solid rgba(200,20,43,.11);
    border-radius:50%
}

.insight-grid {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:68px;
    align-items:center
}

.dark h2,.dark p {
    color:#fff
}

.dark p {
    opacity:.72
}

.tabs {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-top:28px
}

.tab {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:42px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:10px;
    background:transparent;
    color:#fff;
    font-size:16px;
    font-weight:400;
    transition:border-color .45s ease,color .45s ease
}

.tab:before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:#fff;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .45s ease
}

.tab:hover {
    color:var(--navy);
    border-color:#fff
}

.tab:hover:before {
    transform:scaleX(1)
}

.tab.active {
    background:#fff;
    color:var(--navy);
    border-color:#fff
}

.insight-card {
    padding:30px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 28px 70px rgba(0,0,0,.25)
}

.insight-card p {
    color:var(--muted);
    opacity:1
}

.insight-head {
    display:flex;
    justify-content:space-between;
    gap:20px
}

.insight-head span {
    color:var(--muted)
}

.insight-head h3 {
    margin:7px 0 0;
    font-size:20px
}

.change {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:17px;
    font-weight:800
}

.bars {
    margin-top:28px
}

.bars>div {
    display:grid;
    grid-template-columns:105px 1fr 45px;
    gap:13px;
    align-items:center;
    margin:17px 0
}

.bars i {
    height:12px;
    border-radius:999px;
    background:#e6ebf1;
    overflow:hidden
}

.bars b {
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--navy),#34639a)
}

.bar-value-47 {
    width:47%
}

.bar-value-49 {
    width:49%
}

.bar-value-54 {
    width:54%
}

.bar-value-55 {
    width:55%
}

.bar-value-58 {
    width:58%
}

.bar-value-61 {
    width:61%
}

.bar-value-65 {
    width:65%
}

.bar-value-66 {
    width:66%
}

.bar-value-68 {
    width:68%
}

.bar-value-72 {
    width:72%
}

.bar-value-74 {
    width:74%
}

.bar-value-78 {
    width:78%
}

.bars strong {
    text-align:right
}

.insight-card>p {
    margin:23px 0 0;
    padding-top:19px;
    border-top:1px solid var(--line)
}

.insights-section {
    position:relative;
    overflow:hidden;
    background:#f8fafc
}

.insights-section:after {
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-190px;
    bottom:-220px;
    border:64px solid rgba(96,112,135,.07);
    border-radius:50%;
    pointer-events:none
}

.insights-intro {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center
}

.insights-intro>div:first-child {
    padding-right:60px;
    border-right:1px solid var(--line)
}

.insights-intro h2 {
    max-width:650px
}

.insights-heading-accent {
    color:var(--red)
}

.impact-stop {
    color:var(--navy)
}

.insights-intro p {
    margin-bottom:0;
    color:var(--navy);
    font-size:14px
}

.insights-controls .tabs {
    margin-top:28px
}

.insights-section .tab {
    border-color:#bdc9d8;
    font-size: 14px;
    color:var(--navy)
}

.insights-section .tab:before {
    background:var(--navy)
}

.insights-section .tab:hover {
    border-color:var(--navy);
    color:#fff
}

.insights-section .tab.active {
    border-color:var(--navy);
    font-size: 14px;
    background:var(--navy);
    color:#fff
}

.insight-deck {
    position:relative;
    z-index:1;
    width:min(720px,100%);
    min-height:450px;
    margin:42px auto 0
}

.insights-section .insight-card {
    position:absolute;
    top:0;
    right:64px;
    left:0;
    min-height:370px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
    box-shadow:0 24px 60px rgba(16,38,74,.12);
    overflow:hidden;
    transform-origin:top center;
    transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease,filter .45s ease,box-shadow .45s ease;
    pointer-events:none
}

.insights-section .insight-card.active {
    position:relative;
    right:auto;
    z-index:3;
    margin-right:64px;
    opacity:1;
    filter:none;
    transform:translate(0,0) scale(1);
    pointer-events:auto;
    animation:insight-card-reveal .55s cubic-bezier(.22,1,.36,1)
}

.insights-section .insight-card.behind-one {
    z-index:2;
    opacity:.72;
    filter:saturate(.65);
    transform:translate(30px,22px) scale(.96)
}

.insights-section .insight-card.behind-two {
    z-index:1;
    opacity:.42;
    filter:saturate(.35);
    transform:translate(60px,44px) scale(.92)
}

@keyframes insight-card-reveal {
    from {
        opacity:.65;
        transform:translate(42px,28px) scale(.94)
    }
    to {
        opacity:1;
        transform:translate(0,0) scale(1)
    }
}

.insights-section .insight-head {
    align-items:center
}

.insights-section .insight-head h3 {
    color:var(--navy);
    font-size:26px;
    text-transform:none
}

.insight-card-icon {
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    flex:0 0 52px;
    border-radius:18px;
    background:#eaf1ff;
    color:#245bb0
}

.insight-card-icon svg {
    width:28px;
    height:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}

.prevention-card-icon {
    background:#e8f7f1;
    color:#178c69
}

.absence-card-icon {
    background:#fff0f0;
    color:#d72c2c
}

.metric-summary {
    display:flex;
    align-items:flex-end;
    gap:26px;
    margin-top:28px
}

.metric-summary>strong {
    color:var(--navy);
    font-size:50px;
    line-height:1
}

.metric-summary .change {
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    margin-bottom:5px;
    font-size:13px;
    font-weight:400
}

.metric-summary .change-value {
    color:inherit;
    font-size:22px;
    font-weight:500;
    line-height:1.1
}

.metric-summary .change small {
    color:var(--muted)!important;
    font-size:13px;
    font-weight:400
}

.insights-section .bars {
    margin-top:32px
}

.insights-section .insight-card.active .bars b {
    transform-origin:left center;
    animation:insight-bar-grow .7s .12s both
}

.insights-section .prevention-bars b {
    background:linear-gradient(90deg,#178c69,#61c5a4)
}

.insights-section .absence-bars b {
    background:linear-gradient(90deg,#d72c2c,#f18787)
}

@keyframes insight-bar-grow {
    from {
        transform:scaleX(0)
    }
    to {
        transform:scaleX(1)
    }
}

.insights-section .insight-card.active>p {
    border:0;
    border-radius:14px;
    font-size: 14px;
    background:#f0f5fc;
    color:var(--navy)
}

#workflow {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:radial-gradient(ellipse at 5% 10%,rgba(61,126,211,.28),transparent 30%),radial-gradient(ellipse at 94% 82%,rgba(35,151,128,.16),transparent 32%),radial-gradient(circle at 62% 5%,rgba(255,255,255,.06),transparent 20%),linear-gradient(135deg,#06172f 0%,#102d52 58%,#0b2544 100%)
}

#workflow:before {
    content:"";
    position:absolute;
    z-index:-1;
    width:440px;
    height:440px;
    right:-190px;
    top:-210px;
    border:58px solid rgba(255,255,255,.055);
    border-radius:44% 56% 62% 38%;
    box-shadow:0 0 0 34px rgba(61,126,211,.035),0 0 0 76px rgba(255,255,255,.018);
    animation:workflow-shape-morph 12s ease-in-out infinite alternate
}

#workflow:after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    opacity:.3;
    background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(115deg,transparent 49.5%,rgba(255,255,255,.025) 50%,transparent 50.5%);
    background-size:24px 24px,72px 72px;
    mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
    animation:workflow-grid-drift 18s linear infinite
}

@keyframes workflow-shape-morph {
    to {
        border-radius:60% 40% 35% 65%;
        transform:translate(-30px,35px) rotate(18deg)
    }
}

@keyframes workflow-grid-drift {
    to {
        background-position:48px 24px,-72px 72px
    }
}

#workflow>.container {
    position:relative;
    z-index:1
}

#workflow .section-head h2 {
    color:#fff
}

#workflow .workflow-insight-word {
    color:#fff
}

#workflow .workflow-outcome-card:not(:last-child):before {
    border-color:rgba(255,255,255,.34)
}

#workflow .workflow-outcome-card:not(:last-child):after {
    background:var(--red)
}

.workflow {
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:48px
}

.workflow article {
    position:relative;
    min-height:275px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease
}

.workflow article:hover {
    transform:translateY(-9px);
    border-color:var(--red);
    background:var(--red);
    color:#fff;
    box-shadow:0 20px 45px rgba(8,26,53,.18)
}

.workflow-icon {
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    margin:44px 0 20px;
    border-radius:14px;
    background:var(--surface);
    color:var(--navy);
    transition:background .3s ease,color .3s ease
}

.workflow-icon svg {
    width:29px;
    height:29px;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}

.workflow-outcome-card {
    min-height:455px;
    display:flex;
    flex-direction:column
}

.workflow-outcome-card:not(:last-child):before {
    content:"";
    position:absolute;
    z-index:4;
    width:48px;
    top:50%;
    right:-49px;
    border-top:1px dashed #9eb0c7;
    pointer-events:none
}

.workflow-outcome-card:not(:last-child):after {
    content:"›";
    position:absolute;
    z-index:5;
    width:32px;
    height:32px;
    top:calc(50% - 16px);
    right:-41px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    font-size:24px;
    line-height:1;
    box-shadow:0 8px 18px rgba(16,38,74,.2);
    transition:transform .25s ease,background .25s ease;
    pointer-events:none
}

.workflow-outcome-card:hover:after {
    background:var(--red);
    transform:translateX(3px)
}

.workflow-outcome-card h3 {
    margin-bottom:10px;
    color:var(--navy);
    font-size:16px;
    line-height:1.35;
    text-align:center;
    transition:color .3s ease
}

.workflow-outcome-card:hover h3 {
    color:#fff
}

.workflow-outcome-card>p {
    text-align:center
}

.workflow-illustration {
    width:100%;
    height:150px;
    display:grid;
    place-items:center;
    margin:18px 0 16px
}

.workflow-illustration svg {
    width:min(190px,100%);
    height:145px;
    overflow:visible;
    fill:none;
    stroke:var(--navy);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round
}

.illustration-orbit {
    stroke:#56b99d;
    stroke-dasharray:4 5
}

.device {
    fill:#fff;
    stroke:var(--navy);
    stroke-width:5
}

.device-screen {
    fill:#f4f8fc;
    stroke:#d7e1ed;
    stroke-width:1
}

.capture-pulse {
    fill:#56b99d;
    stroke:none
}

.capture-tick,.cloud,.lock {
    stroke:#258f72
}

.cloud {
    fill:#fff
}

.illustration-halo {
    fill:#fff7e6;
    stroke:none
}

.blue-halo {
    fill:#eef4ff
}

.report-sheet,.monitor {
    fill:#fff;
    stroke:var(--navy)
}

.report-fold,.report-line {
    stroke:#63758e
}

.report-pie,.dashboard-pie {
    fill:#f7a936;
    stroke:none
}

.report-pie-slice,.dashboard-pie-slice {
    fill:#e63a32;
    stroke:#fff
}

.report-bar {
    stroke:#f0a72f;
    stroke-width:9
}

.dashboard-trend,.dashboard-point,.profile {
    stroke:#3d7ed3
}

.dashboard-pie {
    fill:#245bb0
}

.dashboard-trend {
    stroke-width:2.5
}

.workflow-outcome-card:hover .illustration-orbit {
    animation:workflow-orbit 5s linear infinite
}

.workflow-outcome-card:hover .device {
    animation:workflow-device .7s ease
}

.workflow-outcome-card:hover .capture-pulse {
    animation:workflow-pulse .8s ease
}

.workflow-outcome-card:hover .report-bar {
    animation:workflow-bars .7s ease both
}

.workflow-outcome-card:hover .dashboard-trend {
    animation:workflow-trend .8s ease
}

@keyframes workflow-orbit {
    to {
        stroke-dashoffset:-36
    }
}

@keyframes workflow-device {
    50% {
        transform:translateY(-4px)
    }
}

@keyframes workflow-pulse {
    50% {
        transform:scale(1.2);
        transform-origin:center
    }
}

@keyframes workflow-bars {
    from {
        transform:scaleY(.15);
        transform-origin:bottom
    }
}

@keyframes workflow-trend {
    from {
        stroke-dasharray:0 80
    }
    to {
        stroke-dasharray:80 80
    }
}

.workflow article:hover .workflow-icon {
    background:var(--red);
    color:#fff
}

.workflow article p {
    margin-bottom:0;
    font-size:14px;
    font-weight:400;
    transition:color .3s ease
}

.workflow article:hover p {
    color:#d8e2ee
}

.workflow article:hover .request-icon svg {
    animation:request-paper .65s ease
}

.workflow article:hover .request-plus {
    animation:request-plus .65s ease
}

.workflow article:hover .coordinate-icon .person-left {
    animation:coordinate-left .7s ease
}

.workflow article:hover .coordinate-icon .person-right {
    animation:coordinate-right .7s ease
}

.workflow article:hover .coordinate-arrow {
    animation:coordinate-flow .7s ease
}

.workflow article:hover .capture-row {
    animation:capture-row .65s ease
}

.workflow article:hover .capture-check {
    animation:capture-check .75s ease
}

.workflow article:hover .understand-bar {
    animation:understand-bar .65s ease
}

.workflow article:hover .understand-trend {
    animation:understand-trend .8s ease
}

@keyframes request-paper {
    50% {
        transform:translateY(-2px) rotate(-2deg)
    }
}

@keyframes request-plus {
    50% {
        transform:scale(1.25);
        transform-origin:center
    }
}

@keyframes coordinate-left {
    50% {
        transform:translateX(2px)
    }
}

@keyframes coordinate-right {
    50% {
        transform:translateX(-2px)
    }
}

@keyframes coordinate-flow {
    50% {
        stroke-dasharray:3 3;
        stroke-dashoffset:-6
    }
}

@keyframes capture-row {
    0% {
        opacity:.2;
        transform:scaleX(.2);
        transform-origin:left
    }
}

@keyframes capture-check {
    0% {
        stroke-dasharray:0 18
    }
    100% {
        stroke-dasharray:18 18
    }
}

@keyframes understand-bar {
    0% {
        transform:scaleY(.15);
        transform-origin:bottom
    }
}

@keyframes understand-trend {
    0% {
        stroke-dasharray:0 40
    }
    100% {
        stroke-dasharray:40 40
    }
}

.org-grid {
    position:relative;
    display:grid;
    grid-template-columns:1fr .92fr;
    gap:72px;
    align-items:center
}

.org-grid>div:first-child>p {
    max-width:600px;
    color:#000;
    font-size:15px
}

.role-panel {
    padding:10px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:24px;
    background:rgba(255,255,255,.65);
    box-shadow:var(--shadow)
}

.role-panel div {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:19px 18px;
    border-bottom:1px solid var(--line)
}

.role-panel div:last-child {
    border:0
}

.role-panel span {
    color:var(--muted)
}

.role-panel strong {
    color:var(--navy)
}

.faq-section {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:radial-gradient(circle at 8% 12%,rgba(61,126,211,.18),transparent 28%),linear-gradient(145deg,#071a35 0%,#102e55 100%);
    color:#fff
}

.faq-section:after {
    content:"";
    position:absolute;
    z-index:-1;
    width:420px;
    height:420px;
    right:-230px;
    top:-230px;
    border:55px solid rgba(255,255,255,.05);
    border-radius:50%
}

.faq-layout {
    display:grid;
    grid-template-columns:.78fr 1.22fr;
    gap:72px;
    align-items:start
}

.faq-heading {
    position:sticky;
    top:120px
}

.faq-heading>span {
    display:block;
    margin-bottom:13px;
    color:#c8142b;
    font-size:16px;
    font-weight:600;
}

.faq-heading h2 {
    color:#fff
}

.faq-heading p {
    max-width:520px;
    margin-bottom:0;
    color:#c5d2e3;
    font-size:14px
}

.faq-list {
    display:grid;
    gap:12px
}

.faq-list details {
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(12px);
    transition:border-color .25s ease,background .25s ease,transform .25s ease
}

.faq-list details:hover,.faq-list details[open] {
    border-color:rgba(255,255,255,.34);
    background:rgba(255,255,255,.11)
}

.faq-list details:hover {
    transform:translateY(-2px)
}

.faq-list summary {
    position:relative;
    padding:20px 54px 20px 20px;
    color:#fff;
    font-size:15px;
    font-weight:500;
    line-height:1.45;
    cursor:pointer;
    list-style:none
}

.faq-list summary::-webkit-details-marker {
    display:none
}

.faq-list summary:after {
    content:"+";
    position:absolute;
    width:28px;
    height:28px;
    right:16px;
    top:50%;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
    font-size:20px;
    transform:translateY(-50%);
    transition:transform .25s ease,background .25s ease
}

.faq-list details[open] summary:after {
    background:var(--red);
    transform:translateY(-50%) rotate(45deg)
}

.faq-list details p {
    margin:0;
    padding:0 54px 20px 20px;
    color:#c5d2e3;
    font-size:13px;
    line-height:1.75
}

footer {
    padding:58px 0 24px;
    background:#06142a;
    color:#fff
}

.footer-grid {
    display:grid;
    grid-template-columns:1.6fr repeat(3,.7fr);
    gap:55px
}

.footer-brand img {
    width:180px;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    mix-blend-mode:screen;
    filter:grayscale(1) invert(1);
    opacity:.95
}

.footer-brand p {
    max-width:300px;
    font-size:15px;
    color:#9eafc5
}

.footer-grid strong {
    display:block;
    margin-bottom:17px;
    font-size:15px;
}

.footer-grid a,.footer-link {
    position:relative;
    display:block;
    width:max-content;
    margin:11px 0;
    padding:0 0 3px;
    border:0;
    background:transparent;
    color:#9eafc5;
    font-size:15px;
    transition:color .2s,transform .2s
}

.footer-grid a:after,.footer-link:after {
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:0;
    height:1px;
    background:var(--red);
    transition:right .25s ease
}

.footer-grid a:hover,.footer-link:hover {
    color:#fff;
    transform:translateX(4px)
}

.footer-grid a:hover:after,.footer-link:hover:after {
    right:0
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:42px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.12);
    color:#7388a4;
    font-size:12px
}

.footer-legal {
    display:flex;
    align-items:center;
    gap:18px
}

.footer-legal .footer-link {
    margin:0;
    color:#7388a4
}

.modal-wrap {
    position:fixed;
    inset:0;
    z-index:100;
    display:none;
    place-items:center;
    padding:20px;
    background:rgba(4,15,31,.78);
    backdrop-filter:blur(10px)
}

.modal-wrap.open {
    display:grid
}

.modal {
    position:relative;
    width:min(650px,100%);
    height:auto;
    max-height:calc(100dvh - 48px);
    overflow:hidden;
    padding:34px;
    background:#fff;
    border-radius:26px;
    box-shadow:0 35px 100px rgba(0,0,0,.35)
}

.close {
    position:absolute;
    right:23px;
    top:23px;
    border:0;
    background:transparent;
    color:var(--navy)
}

.close svg {
    width:24px;
    height:24px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round
}

.modal-head {
    padding-right:45px
}

.modal-head h2 {
    margin-bottom:7px;
    font-size:18px
}

.modal-head p {
    font-size:14px
}

.progress-meta {
    display:flex;
    justify-content:space-between;
    margin:24px 0 9px;
    color:var(--muted);
    font-size:12px
}

.progress-track {
    height:7px;
    border-radius:999px;
    background:#e7ebf0;
    overflow:hidden
}

.progress-track i {
    display:block;
    width:33%;
    height:100%;
    border-radius:inherit;
    background:var(--red);
    transition:width .2s
}

.form-step {
    display:none;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:27px
}

.form-step.active {
    display:grid
}

.form-step label {
    font-weight:700
}

.form-step label.full,.summary.full {
    grid-column:1/-1
}

.input {
    min-height:50px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    margin-top:8px;
    border:1px solid #cbd3dd;
    border-radius:12px;
    background:#fbfcfe
}

.input:focus-within {
    border-color:var(--navy);
    box-shadow:0 0 0 3px rgba(16,38,74,.08)
}

.input iconify-icon {
    font-size:20px;
    color:#7b8797
}

.input input,.input select {
    width:100%;
    min-width:0;
    height:48px;
    border:0;
    outline:0;
    background:transparent;
    color:#000
}

.input input::placeholder,
.input input::-webkit-input-placeholder {
    font-size:13px
}

.modal form {
    position:relative
}

.date-picker {
    position:absolute;
    z-index:20;
    width:min(380px,100%);
    top:8px;
    left:50%;
    display:none;
    padding:14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 20px 55px rgba(16,38,74,.22);
    transform:translateX(-50%)
}

.date-picker.open {
    display:block
}

.modal-wrap.calendar-open .modal {
    height:min(520px,calc(100dvh - 48px))
}

.date-picker-head {
    display:grid;
    grid-template-columns:34px 1fr 34px;
    align-items:center;
    gap:8px;
    margin-bottom:10px
}

.date-picker-head strong {
    color:var(--navy);
    text-align:center;
    font-size:13px
}

.date-picker-head button {
    width:34px;
    height:32px;
    padding:0;
    border:1px solid var(--line);
    border-radius:8px;
    background:#f5f8fc;
    color:var(--navy);
    font-size:22px
}

.calendar-grid {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px
}

.calendar-grid .weekday {
    padding:3px 0;
    color:var(--muted);
    font-size:9px;
    font-weight:600;
    text-align:center
}

.calendar-grid .calendar-day {
    min-width:0;
    height:32px;
    padding:0;
    border:0;
    border-radius:8px;
    background:#f4f7fb;
    color:var(--navy);
    font-size:11px
}

.calendar-grid .calendar-day:hover:not(:disabled),
.calendar-grid .calendar-day.selected {
    background:var(--navy);
    color:#fff
}

.calendar-grid .calendar-day:disabled {
    cursor:not-allowed;
    background:#f5f5f5;
    color:#b8bec7;
    text-decoration:line-through
}

.calendar-grid .calendar-day.empty {
    visibility:hidden
}

.form-step label.invalid .input {
    border-color:var(--red)
}

.form-step small {
    display:block;
    min-height:17px;
    margin-top:5px;
    color:var(--red);
    font-weight:400
}

.form-step em {
    display:block;
    margin-top:7px;
    color:var(--muted);
    font-style:normal;
    font-weight:400
}

.summary {
    display:flex;
    gap:14px;
    padding:18px;
    border:1px solid #cfe5d8;
    border-radius:14px;
    background:#f4fbf7
}

.summary iconify-icon {
    font-size:24px;
    color:var(--green)
}

.summary strong {
    color:var(--green)
}

.summary p {
    margin:4px 0 0
}

.modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:26px
}

#submit {
    display:none
}

.modal-actions #back {
    border-color:var(--navy);
    color:var(--navy)
}

.modal-actions #back:hover {
    color:#fff
}

.modal-actions.is-sending #back {
    display:none!important
}

#submit:disabled {
    cursor:wait;
    opacity:1;
    pointer-events:none
}

#submit.is-sending,
#submit.is-sending:hover {
    width:180px!important;
    max-width:180px;
    flex:0 0 180px;
    border-color:#98a3b1;
    background:#98a3b1;
    color:#fff;
    white-space:nowrap;
    box-shadow:none;
    filter:none;
    transform:none
}

#submit.is-sending:before {
    display:none;
    transform:scaleX(0)
}

.sending-dots {
    display:none
}

.sending-dots i {
    width:3px;
    height:3px;
    display:block;
    border-radius:50%;
    background:currentColor;
    animation:sending-dot 1s ease-in-out infinite
}

.sending-dots i:nth-child(2) {
    animation-delay:.15s
}

.sending-dots i:nth-child(3) {
    animation-delay:.3s
}

#submit.is-sending .sending-dots {
    display:inline-flex;
    align-items:center;
    gap:3px
}

@keyframes sending-dot {
    0%,60%,100% {
        opacity:.35;
        transform:translateY(0)
    }
    30% {
        opacity:1;
        transform:translateY(-3px)
    }
}

.modal-wrap.is-success .modal-head {
    display:none
}

.modal-wrap.is-success .modal {
    display:grid;
    place-items:center
}

.modal-wrap.is-success #demo-form {
    width:100%
}

.success {
    display:none;
    text-align:center;
    padding:22px 10px 8px
}

.success-check {
    width:52px;
    height:52px;
    display:block;
    margin-inline:auto;
    fill:none;
    stroke:#050505;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    animation:success-check-in .65s cubic-bezier(.2,1.4,.4,1) both
}

.success-check-circle {
    stroke-dasharray:64;
    stroke-dashoffset:64;
    animation:success-circle-draw .6s ease forwards
}

.success-check-mark {
    stroke-dasharray:14;
    stroke-dashoffset:14;
    animation:success-mark-draw .35s .5s ease forwards
}

@keyframes success-circle-draw {
    to {
        stroke-dashoffset:0
    }
}

@keyframes success-mark-draw {
    to {
        stroke-dashoffset:0
    }
}

.success h3 {
    margin:10px 0 16px;
    font-size:20px
}

.success-timeline {
    width:max-content;
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    margin:0 auto 18px
}

.success-timeline div {
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--navy);
    font-size:12px
}

.success-timeline svg {
    width:19px;
    height:19px;
    flex:0 0 auto;
    fill:none;
    stroke:#239780;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}

.success-timeline i {
    width:2px;
    height:24px;
    margin:3px 0 3px 8px;
    background:#239780;
    border-radius:999px;
    opacity:.55
}

.success-message {
    max-width:500px;
    margin:0 auto 20px;
    color:var(--muted);
    font-size:14px;
    line-height:1.6
}

#close-success {
    min-height:40px;
    padding:8px 18px;
    font-size:12px
}

@keyframes success-check-in {
    from {
        opacity:0;
        transform:scale(.45) rotate(-18deg)
    }
    to {
        opacity:1;
        transform:scale(1) rotate(0)
    }
}

@media(max-width:1080px) {
    nav,.nav-actions {
        display:none
    }

    .menu-toggle {
        display:flex;
        margin-left:auto
    }

    nav.open {
        position:absolute;
        top:86px;
        left:24px;
        right:24px;
        display:flex;
        flex-direction:column;
        gap:0;
        margin:0;
        padding:12px;
        border:1px solid var(--line);
        border-radius:16px;
        background:#fff;
        box-shadow:var(--shadow)
    }

    nav.open a {
        padding:14px 10px;
        font-size:14px
    }

    nav.open .nav-mobile-cta {
        width:100%;
        display:inline-flex;
        margin-top:10px
    }

    .hero-grid,.insight-grid,.org-grid {
        grid-template-columns:1fr
    }

    .insights-intro {
        grid-template-columns:1fr;
        gap:24px
    }

    .information-flow {
        grid-template-columns:1fr;
        gap:14px
    }

    .flow-arrow {
        transform:rotate(90deg);
        animation:none
    }

    .insights-intro>div:first-child {
        padding-right:0;
        padding-bottom:24px;
        border-right:0;
        border-bottom:1px solid var(--line)
    }

    .hero-copy {
        max-width:760px;
        text-align:center;
        margin:auto
    }

    .hero-copy>p {
        margin-inline:auto
    }

    .hero-actions,.trust {
        justify-content:center
    }

    .report-stage {
        width:min(760px,100%);
        margin:20px auto 0
    }

    .features,.workflow {
        grid-template-columns:repeat(2,1fr)
    }

    .workflow-outcome-card:before,.workflow-outcome-card:after {
        display:none
    }

    .footer-grid {
        grid-template-columns:1.4fr 1fr 1fr
    }

    .footer-grid>div:last-child {
        display:none
    }

    .faq-layout {
        grid-template-columns:1fr;
        gap:30px
    }

    .faq-heading {
        position:static
    }
}

@media(max-width:720px) {
    .container {
        width:calc(100% - 28px)
    }

    .section {
        padding:52px 0
    }

    section[id] {
        scroll-margin-top:74px
    }

    h1 {
        font-size:clamp(34px,11vw,48px);
        line-height:1.06
    }

    h2 {
        font-size:clamp(28px,8.5vw,38px);
        line-height:1.12
    }

    p {
        line-height:1.65
    }

    .nav-shell {
        min-height:74px
    }

    .logo-link {
        width:190px;
        height:50px;
        flex-basis:190px
    }

    .logo-link img {
        width:190px;
        transform:translateY(-30px)
    }

    nav.open {
        top:74px;
        left:14px;
        right:14px;
        max-height:calc(100dvh - 88px);
        overflow-y:auto
    }

    .hero {
        padding:48px 0 56px
    }

    .hero-copy>p {
        font-size:15px;
        line-height:1.65
    }

    .hero-actions {
        margin-top:24px
    }

    .trust {
        gap:12px 18px;
        margin-top:28px;
        padding-top:20px
    }

    .trust span {
        font-size:11px
    }

    .report-stage {
        min-height:0;
        margin-top:28px
    }

    .report {
        width:100%;
        padding:20px;
        transform:none;
        animation:none
    }

    .report-grid {
        grid-template-columns:1fr
    }

    .risk-ring {
        width:118px;
        height:118px;
        flex-basis:118px
    }

    .mini-stack {
        grid-template-columns:1fr 1fr
    }

    .client-strip {
        padding:24px 0
    }

    .client-strip-title {
        font-size:13px
    }

    .client-logo {
        width:90px;
        height:42px;
        flex-basis:90px
    }

    .client-logo img {
        max-height:34px
    }

    .chip {
        display:none
    }

    .split {
        grid-template-columns:1fr;
        gap:24px
    }

    .information-flow-heading {
        margin-bottom:28px
    }

    .information-flow-heading p {
        font-size:14px
    }

    .split>p {
        font-size:14px
    }

    .features,.workflow {
        grid-template-columns:1fr
    }

    .workflow {
        gap:60px
    }

    .workflow-outcome-card:not(:last-child):before {
        width:0;
        height:60px;
        top:auto;
        right:auto;
        bottom:-61px;
        left:50%;
        display:block;
        border-top:0;
        border-left:1px dashed #9eb0c7
    }

    .workflow-outcome-card:not(:last-child):after {
        top:auto;
        right:auto;
        bottom:-46px;
        left:50%;
        display:grid;
        transform:translateX(-50%) rotate(90deg)
    }

    .workflow-outcome-card:hover:after {
        transform:translateX(-50%) rotate(90deg) translateX(3px)
    }

    .features article {
        min-height:auto;
        padding:24px 22px
    }

    .feature-icon {
        margin-bottom:26px
    }

    .workflow article {
        min-height:auto;
        padding:24px 22px
    }

    .workflow article p {
        font-size:14px
    }

    .workflow-icon {
        margin:30px 0 18px
    }

    .bars>div {
        grid-template-columns:62px 1fr 40px;
        gap:9px
    }

    .insight-card {
        padding:22px
    }

    .insights-intro p {
        font-size:16px
    }

    .insight-deck {
        min-height:500px;
        margin-top:36px
    }

    .insights-section .insight-card {
        right:34px;
        min-height:410px;
        padding:24px
    }

    .insights-section .insight-card.active {
        margin-right:34px
    }

    .insights-section .insight-card.behind-one {
        transform:translate(16px,16px) scale(.97)
    }

    .insights-section .insight-card.behind-two {
        transform:translate(32px,32px) scale(.94)
    }

    .metric-summary>strong {
        font-size:48px
    }

    .insight-head {
        align-items:flex-start
    }

    .tabs {
        flex-wrap:nowrap;
        justify-content:flex-start;
        max-width:100%;
        padding-bottom:8px;
        overflow-x:auto;
        scrollbar-width:none
    }

    .tabs::-webkit-scrollbar {
        display:none
    }

    .tab {
        flex:0 0 auto
    }

    .role-panel div {
        flex-direction:column;
        gap:5px
    }

    .org-grid {
        gap:38px
    }

    .org-grid>div:first-child>p {
        font-size:15px
    }

    .footer-grid {
        grid-template-columns:1fr 1fr
    }

    .footer-brand {
        grid-column:1/-1
    }

    .footer-bottom {
        flex-direction:column;
        align-items:flex-start
    }

    .modal {
        width:100%;
        max-height:calc(100dvh - 24px);
        padding:26px 18px;
        border-radius:20px
    }

    .modal-wrap {
        padding:12px
    }

    .close {
        width:44px;
        height:44px;
        display:grid;
        place-items:center;
        right:10px;
        top:10px
    }

    .input input,.input select {
        font-size:16px
    }

    .form-step.active {
        grid-template-columns:1fr
    }

    .form-step label,.form-step label.full,.summary.full {
        grid-column:1
    }

    .modal-actions .btn {
        flex:1
    }
}

@media(max-width:480px) {
    .container {
        width:calc(100% - 24px)
    }

    .nav-shell {
        gap:12px
    }

    .logo-link {
        width:172px;
        height:46px;
        flex-basis:172px
    }

    .logo-link img {
        width:172px;
        transform:translateY(-27px)
    }

    h1 {
        font-size:clamp(32px,10.5vw,42px)
    }

    h2 {
        font-size:clamp(27px,8.5vw,34px)
    }

    .section {
        padding:44px 0
    }

    .btn {
        min-height:46px;
        padding-inline:18px
    }

    .hero-actions .btn {
        width:100%
    }

    .report-stage {
        min-height:0
    }

    .report {
        font-size:11px;
        padding:14px;
        border-radius:14px
    }

    .report-head img {
        width:46px;
        height:46px
    }

    .risk-panel {
        padding:14px
    }

    .risk-ring {
        width:96px;
        height:96px;
        flex-basis:96px
    }

    .risk-ring:after {
        inset:9px
    }

    .risk-body {
        align-items:flex-start;
        gap:12px
    }

    .mini-stack {
        grid-template-columns:1fr
    }

    .mini-card {
        padding:13px
    }

    .participation {
        padding:14px
    }

    .split>p {
        padding:20px;
        border-left-width:2px
    }

    .flow-panel {
        padding:20px 16px;
        border-radius:16px
    }

    .flow-panel h3 {
        font-size:14px
    }

    .scattered-map,.clear-map {
        min-height:300px
    }

    .flow-node {
        min-height:48px;
        gap:7px;
        padding:8px 10px;
        font-size:10px
    }

    .node-icon {
        width:22px;
        height:22px;
        flex-basis:22px
    }

    .node-icon svg {
        width:20px;
        height:20px
    }

    .providers-node,.reports-node {
        top:124px
    }

    .clear-map:before {
        width:156px;
        height:156px
    }

    .clear-core {
        width:76px;
        height:76px;
        padding:10px
    }

    .clear-core img {
        width:54px;
        height:54px
    }

    .outcome {
        width:100px;
        font-size:10px
    }

    .insight-head {
        flex-direction:column;
        gap:12px
    }

    .insights-section .insight-head {
        flex-direction:row;
        gap:14px
    }

    .insights-section .insight-head h3 {
        font-size:21px
    }

    .insight-card-icon {
        width:48px;
        height:48px;
        flex-basis:48px
    }

    .insight-card-icon svg {
        width:26px;
        height:26px
    }

    .insight-deck {
        min-height:0;
        padding-bottom:44px
    }

    .insights-section .insight-card {
        right:24px;
        padding:20px
    }

    .insights-section .insight-card.active {
        margin-right:24px
    }

    .insights-section .insight-card.behind-one {
        transform:translate(12px,14px) scale(.98)
    }

    .insights-section .insight-card.behind-two {
        transform:translate(24px,28px) scale(.96)
    }

    .metric-summary {
        align-items:flex-start;
        flex-direction:column;
        gap:10px
    }

    .metric-summary>strong {
        font-size:44px
    }

    .bars>div {
        grid-template-columns:34px 1fr 38px
    }

    .insights-section .bars strong {
        font-size:11px
    }

    .insights-section .insight-card.active>p {
        padding:14px;
        font-size:13px
    }

    .footer-grid {
        grid-template-columns:1fr;
        gap:32px
    }

    .footer-brand {
        grid-column:1
    }

    .footer-brand img {
        width:150px;
        height:auto
    }

    .footer-grid>div:last-child {
        display:block
    }

    .footer-legal {
        flex-wrap:wrap
    }

    .modal-actions {
        flex-direction:column-reverse
    }

    .modal-actions .btn {
        width:100%;
        flex:none
    }

    footer {
        padding-top:48px
    }
}

@media(max-width:360px) {
    .logo-link {
        width:154px;
        height:42px;
        flex-basis:154px
    }

    .logo-link img {
        width:154px;
        transform:translateY(-24px)
    }

    .menu-toggle {
        width:40px;
        padding-inline:9px
    }

    .risk-body {
        flex-direction:column
    }

    .risk-ring {
        margin-inline:auto
    }

    .report-head h2 {
        font-size:17px
    }

    .insights-section .insight-card {
        right:18px;
        padding:16px
    }

    .insights-section .insight-card.active {
        margin-right:18px
    }

    .insights-section .insight-card.behind-one {
        transform:translate(9px,12px) scale(.98)
    }

    .insights-section .insight-card.behind-two {
        transform:translate(18px,24px) scale(.96)
    }

    .metric-summary>strong {
        font-size:40px
    }

    .tabs {
        margin-right:-12px
    }
}

/* Mobile-first compositions */
@media(max-width:720px) {
    html,body {
        max-width:100%;
        overflow-x:hidden
    }

    body {
        background:#eef3f9
    }

    .topbar {
        border-bottom:1px solid rgba(16,38,74,.08);
        box-shadow:0 8px 28px rgba(16,38,74,.06)
    }

    nav.open {
        gap:4px;
        padding:10px;
        border:0;
        border-radius:18px;
        box-shadow:0 22px 60px rgba(16,38,74,.18)
    }

    nav.open a {
        border-radius:10px
    }

    nav.open a:hover,nav.open a:focus-visible {
        background:#f1f5fa;
        color:var(--red)
    }

    nav.open a:after {
        display:none
    }

    .hero {
        padding:28px 0 36px;
        background:radial-gradient(circle at 90% 8%,rgba(255,255,255,.12),transparent 24%),linear-gradient(155deg,#071a35 0%,#102e55 100%)
    }

    .hero-grid {
        gap:24px
    }

    .hero-copy {
        max-width:none;
        margin:0;
        text-align:center
    }

    .hero-copy h1 {
        max-width:15ch;
        margin-inline:auto;
        font-size:clamp(30px,8.8vw,40px);
        line-height:1.04
    }

    .hero-copy>p {
        max-width:32rem;
        margin:18px auto 0;
        font-size:14px;
        line-height:1.58
    }

    .hero-actions {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        justify-content:stretch;
        width:min(100%,330px);
        margin-inline:auto
    }

    .hero-actions .btn {
        width:100%;
        min-width:0;
        min-height:40px;
        padding:8px 10px;
        font-size:12px
    }

    .trust {
        display:none
    }

    .trust span {
        min-width:0;
        padding:12px;
        border:1px solid rgba(255,255,255,.1);
        border-radius:12px;
        background:rgba(255,255,255,.05);
        line-height:1.45
    }

    .report-stage {
        display:block;
        margin-top:0
    }

    .report {
        max-width:340px;
        margin-inline:auto;
        padding:14px;
        border:0;
        border-radius:18px;
        box-shadow:0 24px 60px rgba(0,0,0,.24)
    }

    .report-head {
        align-items:center
    }

    .report-head>div>span {
        font-size:9px;
        letter-spacing:.08em
    }

    .report-head h2 {
        font-size:18px
    }

    .report-head p {
        font-size:11px
    }

    .report-head img {
        width:42px;
        height:42px;
        border-radius:10px
    }

    .divider {
        margin:15px 0
    }

    .risk-panel {
        padding:12px;
        background:#f5f8fc
    }

    .risk-body {
        align-items:center
    }

    .risk-body p {
        font-size:11px;
        line-height:1.45
    }

    .risk-ring {
        width:92px;
        height:92px;
        flex-basis:92px
    }

    .risk-ring:after {
        inset:9px
    }

    .mini-stack {
        grid-template-columns:1fr 1fr;
        gap:8px
    }

    .mini-card {
        align-items:flex-start;
        padding:10px;
        border:0;
        background:#f4f7fb
    }

    .mini-card>iconify-icon {
        display:none
    }

    .participation {
        padding:11px 12px;
        background:#fff
    }

    .information-flow-section {
        background:linear-gradient(180deg,#e8eef7 0%,#f3f6fa 100%)
    }

    .information-flow-heading {
        max-width:560px;
        margin-inline:auto;
        text-align:center
    }

    .information-flow-heading h2 {
        max-width:15ch;
        margin-inline:auto
    }

    .information-flow-heading p {
        max-width:34rem;
        margin-inline:auto
    }

    .information-flow {
        gap:18px
    }

    .flow-panel {
        width:100%;
        max-width:340px;
        margin-inline:auto;
        padding:18px 14px;
        border:1px solid rgba(255,255,255,.9);
        border-radius:20px;
        background:rgba(255,255,255,.72);
        box-shadow:0 16px 40px rgba(16,38,74,.08)
    }

    .flow-arrow {
        width:38px;
        height:38px;
        margin:-6px auto;
        box-shadow:0 8px 20px rgba(16,38,74,.18)
    }

    .scattered-map,.clear-map {
        min-height:240px
    }

    .insights-section {
        background:linear-gradient(155deg,#f7f9fc 0%,#e9f0f9 100%)
    }

    .insights-intro {
        gap:18px
    }

    .insights-intro>div:first-child {
        padding-bottom:16px
    }

    .insights-controls .tabs {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:5px;
        width:100%;
        margin:20px 0 0;
        padding:0;
        overflow:visible
    }

    .insights-section .tab {
        width:100%;
        min-width:0;
        min-height:38px;
        padding:6px 4px;
        font-size:10px;
        line-height:1.25;
        white-space:normal
    }

    .insights-section .tab.active {
        font-size:10px
    }

    .insight-deck {
        width:100%;
        margin-top:24px;
        padding:0 18px 30px 0
    }

    .insights-section .insight-card,
    .insights-section .insight-card.active {
        right:auto;
        margin-right:0;
        min-height:0;
        padding:18px;
        border:1px solid rgba(255,255,255,.9);
        border-radius:18px;
        box-shadow:0 18px 44px rgba(16,38,74,.12)
    }

    .insights-section .insight-card.behind-one {
        transform:translate(9px,10px) scale(.985)
    }

    .insights-section .insight-card.behind-two {
        transform:translate(18px,20px) scale(.97)
    }

    .insights-section .insight-head h3 {
        margin-top:3px;
        font-size:19px
    }

    .insights-section .insight-head span {
        font-size:11px
    }

    .metric-summary {
        display:grid;
        grid-template-columns:auto 1fr;
        align-items:end;
        gap:18px;
        margin-top:20px
    }

    .metric-summary>strong {
        font-size:42px
    }

    .insights-section .bars {
        margin-top:22px
    }

    .bars>div {
        grid-template-columns:30px 1fr 36px;
        gap:8px;
        margin:13px 0
    }

    .insights-section .insight-card.active>p {
        margin-top:18px;
        padding:13px;
        font-size:12px;
        line-height:1.55
    }

    #workflow {
        background:radial-gradient(circle at 90% 0,rgba(200,20,43,.16),transparent 26%),linear-gradient(160deg,#071a35 0%,#102e55 100%)
    }

    #workflow .section-head {
        max-width:560px;
        margin:0 auto 28px;
        text-align:center
    }

    #workflow .section-head h2 {
        max-width:15ch;
        margin-inline:auto
    }

    .workflow {
        gap:18px
    }

    .workflow-outcome-card {
        width:100%;
        max-width:280px;
        margin-inline:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        aspect-ratio:1/1;
        min-height:0!important;
        padding:18px!important;
        border-color:rgba(255,255,255,.16);
        border-radius:18px;
        background:#fff;
        text-align:center
    }

    .workflow-outcome-card .workflow-illustration {
        position:relative;
        width:72px;
        height:72px;
        flex:0 0 72px;
        margin:0 0 14px;
        overflow:hidden
    }

    .workflow-outcome-card .workflow-illustration svg {
        display:block;
        width:100%;
        height:100%;
        max-width:100%;
        max-height:100%
    }

    .workflow-outcome-card h3 {
        margin:0 0 8px;
        color:var(--navy);
        font-size:16px;
        text-align:center
    }

    .workflow-outcome-card p {
        max-width:28rem;
        color:var(--muted)!important;
        font-size:12px!important;
        line-height:1.55;
        text-align:center
    }

    .workflow-outcome-card:not(:last-child):before {
        height:18px;
        bottom:-19px;
        border-left-color:rgba(255,255,255,.35)
    }

    .workflow-outcome-card:not(:last-child):after {
        display:none
    }

    #organisations {
        background:linear-gradient(155deg,#e4ebf5 0%,#f3f6fa 100%)
    }

    .faq-layout {
        gap:24px
    }

    .faq-heading {
        text-align:center
    }

    .faq-heading h2,.faq-heading p {
        margin-inline:auto
    }

    .faq-list {
        gap:9px
    }

    .faq-list summary {
        padding:17px 48px 17px 16px;
        font-size:13px
    }

    .faq-list summary:after {
        right:12px
    }

    .faq-list details p {
        padding:0 16px 17px;
        font-size:12px
    }

    .org-grid {
        gap:28px
    }

    .org-grid>div:first-child>p {
        padding:0;
        border:0;
        font-size:14px
    }

    #organisations .btn {
        min-height:40px;
        padding:8px 10px;
        font-size:12px
    }

    #organisations .org-grid>div:first-child {
        text-align:center
    }

    #organisations .org-grid>div:first-child h2 {
        max-width:15ch;
        margin-inline:auto
    }

    #organisations .org-grid>div:first-child>p {
        margin-inline:auto
    }

    .modal {
        height:auto;
        max-height:calc(100dvh - 20px);
        overflow:hidden;
        padding:12px 14px;
        border-radius:16px
    }

    .modal-head {
        padding-right:34px
    }

    .modal-head h2 {
        margin-bottom:2px;
        font-size:18px;
        line-height:1.05
    }

    .modal-head p {
        margin:0;
        font-size:14px;
        line-height:1.25
    }

    .progress-meta {
        margin:7px 0 4px;
        font-size:10px
    }

    .progress-track {
        height:4px
    }

    .form-step {
        gap:5px 8px;
        margin-top:8px
    }

    .form-step[data-step="2"].active {
        grid-template-columns:1fr 1fr
    }

    .form-step[data-step="1"].active {
        grid-template-columns:1fr 1fr
    }

    .form-step[data-step="1"] label {
        grid-column:auto
    }

    .form-step[data-step="1"] label.full {
        grid-column:1/-1
    }

    .form-step[data-step="2"] label,
    .form-step[data-step="2"] label.full {
        grid-column:auto
    }

    .form-step[data-step="3"].active {
        grid-template-columns:1fr 1fr
    }

    .form-step[data-step="3"] label,
    .form-step[data-step="3"] label.full {
        grid-column:auto
    }

    .form-step label {
        font-size:12px
    }

    .input {
        min-height:32px;
        margin-top:3px;
        padding:0 9px;
        border-radius:8px
    }

    .input input,.input select {
        width:133.333%;
        height:40px;
        font-size:16px;
        zoom:.75
    }

    .input iconify-icon {
        font-size:17px
    }

    .input input::placeholder,
    .input input::-webkit-input-placeholder {
        font-size:17.333px
    }

    .date-picker {
        width:100%;
        top:0;
        padding:10px;
        border-radius:13px
    }

    .modal-wrap.calendar-open .modal {
        height:min(78dvh,520px);
        max-height:calc(100dvh - 20px)
    }

    .calendar-grid {
        gap:3px
    }

    .calendar-grid .calendar-day {
        height:28px
    }

    .form-step small {
        min-height:0;
        margin-top:1px;
        font-size:9px;
        line-height:1.1
    }

    .form-step small:empty {
        display:none
    }

    .form-step em {
        display:none
    }

    .modal-actions {
        flex-direction:row;
        justify-content:center;
    }

    .modal-actions .btn {
        width:auto!important;
        max-width:140px;
        flex:0 1 140px;
        min-height:34px;
        padding:5px 9px;
        font-size:12px
    }

    .success {
        padding:14px 0 0
    }

    .success-check {
        width:44px;
        height:44px
    }

    .success h3 {
        margin:7px 0 13px;
        font-size:18px
    }

    .success-timeline {
        margin-bottom:14px
    }

    .success-timeline div {
        gap:4px;
        font-size:10px
    }

    .success-timeline svg {
        width:16px;
        height:16px
    }

    .success-timeline i {
        width:2px;
        height:18px;
        margin-left:7px
    }

    .success-message {
        margin-bottom:14px;
        font-size:12px;
        line-height:1.5
    }

    .close {
        width:32px;
        height:32px;
        top:8px;
        right:8px
    }

    .role-panel {
        display:grid;
        gap:10px;
        padding:0;
        border:0;
        background:transparent;
        box-shadow:none
    }

    .role-panel div {
        display:grid;
        grid-template-columns:1fr;
        gap:4px;
        padding:16px;
        border:1px solid rgba(255,255,255,.9)!important;
        border-radius:14px;
        background:rgba(255,255,255,.72);
        box-shadow:0 10px 28px rgba(16,38,74,.07)
    }

    .client-strip {
        padding:24px 0;
        background:#fff
    }

    .client-strip-title {
        margin-bottom:16px;
        padding-inline:14px;
        font-size:15px;
        line-height:1.4
    }

    .client-track {
        gap:22px
    }

    .client-logo {
        width:78px;
        height:38px;
        flex-basis:78px
    }

    .client-logo img {
        max-height:30px
    }

    footer {
        padding:44px 0 22px
    }

    .footer-grid {
        gap:28px
    }

    .footer-grid>div:not(.footer-brand) {
        padding-top:18px;
        border-top:1px solid rgba(255,255,255,.1)
    }

    .footer-grid a,.footer-link {
        min-height:36px;
        display:flex;
        align-items:center;
        margin:4px 0
    }

    .footer-bottom {
        margin-top:30px;
        padding-top:20px
    }
}

@media(max-width:420px) {
    .hero-actions {
        grid-template-columns:1fr
    }

    .trust {
        grid-template-columns:1fr
    }

    .risk-body {
        gap:12px
    }

    .risk-ring {
        width:88px;
        height:88px;
        flex-basis:88px
    }

    .mini-stack {
        grid-template-columns:1fr 1fr
    }

    .workflow-outcome-card {
        max-width:260px;
        padding:16px!important
    }

    .workflow-outcome-card .workflow-illustration {
        width:64px;
        height:64px;
        flex-basis:64px
    }

    .footer-grid {
        grid-template-columns:1fr 1fr
    }

    .footer-brand {
        grid-column:1/-1
    }

    .footer-grid>div:last-child {
        grid-column:1/-1
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important
    }
}