:root {
    --navy:#071a2c;
    --navy-2:#0b2840;
    --ink:#102234;
    --muted:#607181;
    --paper:#f5f7f5;
    --white:#fff;
    --cyan:#11b9c5;
    --cyan-2:#38d4da;
    --orange:#f47a2c;
    --green:#42b987;
    --line:#dbe3e5;
    --shadow:0 28px 80px rgba(6,25,43,.14);
    --radius:24px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
button,input,textarea {
    font:inherit
}
button {
    cursor:pointer
}
img {
    max-width:100%
}
.skip-link {
    position:fixed;
    top:8px;
    left:8px;
    z-index:1000;
    transform:translateY(-150%);
    padding:10px 16px;
    background:#fff;
    color:#000;
    border-radius:8px
}
.skip-link:focus {
    transform:none
}
.site-header {
    position:fixed;
    z-index:100;
    top:0;
    left:0;
    right:0;
    height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(24px,5vw,80px);
    color:#fff;
    transition:.3s ease;
    border-bottom:1px solid rgba(255,255,255,.08)
}
.site-header.scrolled,.view-login .site-header,.view-activate .site-header,.view-dashboard .site-header,.view-error .site-header {
    height:72px;
    background:rgba(7,26,44,.94);
    backdrop-filter:blur(18px);
    box-shadow:0 8px 28px rgba(4,20,33,.18)
}
.brand {
    display:flex;
    align-items:center;
    gap:22px
}
.brand img {
    display:block;
    width:132px;
    filter:brightness(0) invert(1)
}
.brand-product {
    padding-left:22px;
    border-left:1px solid rgba(255,255,255,.24);
    font-size:15px;
    letter-spacing:.04em
}
.brand-product span {
    font-weight:800;
    color:var(--cyan-2)
}
.site-nav {
    display:flex;
    align-items:center;
    gap:32px;
    font-size:14px;
    font-weight:600
}
.site-nav a:not(.nav-login) {
    opacity:.78;
    transition:.2s
}
.site-nav a:hover {
    opacity:1
}
.site-nav form {
    margin:0
}
.nav-login {
    display:inline-flex;
    align-items:center;
    gap:14px;
    border:1px solid rgba(255,255,255,.36);
    border-radius:999px;
    padding:10px 18px;
    background:transparent;
    color:#fff;
    font:inherit
}
.nav-login:hover {
    background:#fff;
    color:var(--navy)
}
.menu-toggle {
    display:none;
    border:0;
    background:none;
    padding:8px
}
.menu-toggle span {
    display:block;
    width:24px;
    height:2px;
    background:#fff;
    margin:6px
}
.hero {
    min-height:820px;
    height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#06192a;
    color:#fff
}
.hero:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(4,20,35,.97) 0%,rgba(4,20,35,.84) 32%,rgba(4,20,35,.2) 67%,rgba(4,20,35,.35) 100%)
}
.hero-backdrop {
    position:absolute;
    inset:0;
    background-image:url('m365-hero.png');
    background-size:cover;
    background-position:center;
    transform:scale(1.015)
}
.hero-content {
    position:relative;
    z-index:2;
    width:min(720px,80%);
    margin-left:clamp(24px,8vw,150px);
    padding-top:70px
}
.eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 22px;
    color:var(--cyan-2);
    font-weight:800;
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase
}
.eyebrow>span {
    width:28px;
    height:1px;
    background:currentColor
}
.eyebrow.dark-text {
    color:#148a96
}
.hero h1 {
    font-size:clamp(58px,6vw,98px);
    line-height:.96;
    letter-spacing:-.055em;
    margin:0 0 30px;
    max-width:880px
}
.hero h1 em {
    font-weight:300;
    font-style:normal;
    color:#7fe1e4
}
.hero-lead {
    font-size:clamp(18px,1.5vw,22px);
    line-height:1.55;
    max-width:670px;
    color:rgba(255,255,255,.75);
    margin:0 0 38px
}
.hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border:1px solid transparent;
    border-radius:999px;
    padding:14px 24px;
    font-weight:750;
    font-size:14px;
    transition:.25s ease
}
.button.primary {
    color:#041d2f;
    background:var(--cyan-2);
    box-shadow:0 10px 30px rgba(17,185,197,.2)
}
.button.primary:hover {
    background:#74e8eb;
    transform:translateY(-2px)
}
.button.ghost {
    color:#fff;
    border-color:rgba(255,255,255,.32)
}
.button.ghost:hover {
    background:rgba(255,255,255,.1);
    border-color:#fff
}
.button.wide {
    width:100%;
    padding:16px 24px
}
.hero-proof {
    display:flex;
    gap:26px;
    margin-top:48px;
    color:rgba(255,255,255,.58);
    font-size:13px
}
.hero-proof i {
    font-style:normal;
    color:var(--cyan-2);
    margin-right:6px
}
.scroll-cue {
    position:absolute;
    z-index:3;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    color:rgba(255,255,255,.5);
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:10px
}
.scroll-cue span {
    height:38px;
    width:1px;
    background:linear-gradient(var(--cyan-2),transparent);
    margin-bottom:10px
}
.section {
    padding:clamp(88px,10vw,150px) clamp(24px,8vw,150px)
}
.section-kicker {
    color:#158e99;
    font-size:11px;
    font-weight:850;
    letter-spacing:.2em;
    margin-bottom:24px
}
.section-kicker.light {
    color:#75e1e4
}
.manifesto {
    background:#fff
}
.manifesto-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:clamp(50px,10vw,170px);
    align-items:start
}
.manifesto h2,.section-heading h2,.preview-copy h2,.contact-intro h2 {
    font-size:clamp(40px,4.5vw,68px);
    line-height:1.05;
    letter-spacing:-.045em;
    margin:0
}
.manifesto-grid>div {
    font-size:18px;
    color:var(--muted)
}
.manifesto-grid p:first-child {
    margin-top:0
}
.signal-line {
    height:100px;
    position:relative;
    margin-top:80px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between
}
.signal-line:before {
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--cyan),var(--orange),transparent)
}
.signal-line span {
    width:10px;
    height:10px;
    margin-top:-5px;
    border:2px solid #fff;
    background:var(--cyan);
    border-radius:50%;
    box-shadow:0 0 0 1px var(--cyan)
}
.signal-line span:nth-child(3) {
    background:var(--orange);
    box-shadow:0 0 0 1px var(--orange)
}
.capabilities {
    background:#f1f4f3
}
.section-heading {
    display:grid;
    grid-template-columns:1.4fr .6fr;
    gap:60px;
    align-items:end;
    margin-bottom:60px
}
.section-heading p {
    color:var(--muted);
    font-size:18px
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.feature {
    position:relative;
    min-height:330px;
    padding:34px;
    border:1px solid #dce4e4;
    border-radius:var(--radius);
    background:#fff;
    overflow:hidden;
    transition:.3s ease
}
.feature:hover {
    transform:translateY(-5px);
    box-shadow:var(--shadow)
}
.feature-large {
    grid-row:span 2;
    min-height:678px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:linear-gradient(155deg,#fff 48%,#e6f4f3)
}
.feature-number {
    position:absolute;
    top:26px;
    right:30px;
    font-size:11px;
    color:#87959d;
    font-weight:750
}
.feature h3 {
    font-size:26px;
    line-height:1.15;
    margin:22px 0 12px;
    letter-spacing:-.025em
}
.feature p {
    color:var(--muted);
    margin:0
}
.feature ul {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    list-style:none;
    padding:18px 0 0;
    margin:14px 0 0;
    border-top:1px solid var(--line)
}
.feature li {
    border:1px solid #cddadb;
    border-radius:999px;
    padding:5px 10px;
    font-size:11px;
    font-weight:700
}
.feature.dark {
    background:var(--navy);
    color:#fff
}
.feature.dark p {
    color:rgba(255,255,255,.62)
}
.feature.accent {
    background:#c9f2ee
}
.chart-icon {
    height:220px;
    margin-bottom:auto;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:12px;
    padding-top:70px
}
.chart-icon i {
    display:block;
    width:34px;
    border-radius:5px 5px 0 0;
    background:linear-gradient(var(--cyan-2),#177b86);
    height:34%
}
.chart-icon i:nth-child(2) {
    height:63%
}
.chart-icon i:nth-child(3) {
    height:48%;
    background:linear-gradient(#ffad71,var(--orange))
}
.chart-icon i:nth-child(4) {
    height:85%
}
.line-icon {
    width:76px;
    height:76px;
    border:1px solid #b8d4d5;
    border-radius:22px;
    position:relative
}
.pulse-icon:after {
    content:"⌁";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:46px;
    color:var(--cyan)
}
.shield-icon:after {
    content:"◇";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:46px;
    color:var(--cyan-2)
}
.bell-icon:after {
    content:"◌";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:52px;
    color:var(--orange)
}
.people-icon:after {
    content:"◎";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:46px;
    color:#0b7e82
}
.story-band {
    padding:110px clamp(24px,8vw,150px);
    background:var(--navy);
    color:#fff;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:100px
}
.story-copy h2 {
    font-size:clamp(40px,4vw,66px);
    line-height:1.05;
    margin:0;
    letter-spacing:-.045em
}
.steps {
    list-style:none;
    padding:0;
    margin:0
}
.steps li {
    display:grid;
    grid-template-columns:54px 1fr;
    gap:24px;
    padding:24px 0;
    border-top:1px solid rgba(255,255,255,.14)
}
.steps li>span {
    color:var(--cyan-2);
    font-size:11px;
    font-weight:800
}
.steps strong {
    font-size:22px
}
.steps p {
    margin:3px 0 0;
    color:rgba(255,255,255,.57)
}
.portal-preview {
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:clamp(60px,10vw,150px);
    align-items:center;
    background:#fff
}
.preview-copy p {
    font-size:18px;
    color:var(--muted)
}
.text-link {
    display:inline-flex;
    gap:18px;
    color:#0b8792;
    font-weight:800;
    border-bottom:1px solid #92ccce;
    padding-bottom:6px
}
.preview-card {
    border-radius:22px;
    background:#eff4f4;
    box-shadow:0 40px 100px rgba(7,26,44,.18);
    overflow:hidden;
    transform:perspective(1200px) rotateY(-4deg) rotateX(2deg)
}
.preview-top {
    height:48px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 18px
}
.preview-top span {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#d8dfe0
}
.preview-top span:first-child {
    background:#f48a4a
}
.preview-top b {
    margin-left:auto;
    font-size:10px;
    color:#5e707e
}
.preview-body {
    display:grid;
    grid-template-columns:70px 1fr;
    min-height:390px
}
.preview-body aside {
    background:#0a2338;
    padding:28px 20px
}
.preview-body aside i {
    display:block;
    height:10px;
    background:rgba(255,255,255,.14);
    border-radius:5px;
    margin-bottom:22px
}
.preview-body aside i:first-child {
    background:var(--cyan)
}
.preview-main {
    padding:35px
}
.preview-welcome {
    height:50px;
    width:45%;
    border-radius:10px;
    background:#d6e1e2
}
.preview-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin:25px 0
}
.preview-stats span {
    height:70px;
    border-radius:12px;
    background:#fff;
    box-shadow:0 7px 18px rgba(7,26,44,.06)
}
.preview-chart {
    height:180px;
    padding:25px;
    background:#fff;
    border-radius:14px;
    display:flex;
    align-items:flex-end;
    justify-content:space-around
}
.preview-chart i {
    width:8%;
    background:linear-gradient(var(--cyan-2),#178391);
    border-radius:5px 5px 0 0;
    height:35%
}
.preview-chart i:nth-child(2) {
    height:55%
}
.preview-chart i:nth-child(3) {
    height:42%
}
.preview-chart i:nth-child(4) {
    height:75%;
    background:linear-gradient(#ffad73,var(--orange))
}
.preview-chart i:nth-child(5) {
    height:67%
}
.preview-chart i:nth-child(6) {
    height:85%
}
.preview-chart i:nth-child(7) {
    height:72%
}
.contact {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:clamp(60px,10vw,160px);
    background:#e8efed
}
.contact-intro p {
    font-size:18px;
    color:var(--muted)
}
.contact-detail {
    margin-top:52px;
    display:flex;
    align-items:center;
    gap:16px
}
.contact-detail>span {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--navy);
    color:var(--cyan-2)
}
.contact-detail strong,.contact-detail a {
    display:block
}
.contact-detail a {
    color:#148691
}
.contact-form {
    background:#fff;
    border-radius:var(--radius);
    padding:clamp(26px,4vw,52px);
    box-shadow:var(--shadow)
}
.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px
}
.contact-form label,.auth-form label {
    display:block;
    font-size:12px;
    font-weight:800;
    color:#435662;
    margin-bottom:20px
}
.contact-form input,.contact-form textarea,.auth-form input {
    width:100%;
    display:block;
    margin-top:8px;
    border:0;
    border-bottom:1px solid #becacc;
    background:transparent;
    border-radius:0;
    padding:10px 0;
    color:var(--ink);
    outline:none
}
.contact-form input:focus,.contact-form textarea:focus,.auth-form input:focus {
    border-color:var(--cyan)
}
.contact-form textarea {
    resize:vertical
}
.contact-form .check {
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-weight:500;
    color:var(--muted);
    line-height:1.45
}
.contact-form .check input {
    width:17px;
    margin:3px 0 0;
    accent-color:var(--cyan)
}
.trap {
    position:absolute!important;
    left:-10000px!important
}
.site-footer {
    padding:70px clamp(24px,8vw,150px) 28px;
    background:#061724;
    color:#fff
}
.footer-grid {
    display:grid;
    grid-template-columns:1.4fr repeat(3,1fr);
    gap:60px;
    padding-bottom:55px
}
.footer-grid img {
    width:120px;
    filter:brightness(0) invert(1)
}
.footer-grid h2 {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:#72dce1
}
.footer-grid p {
    color:rgba(255,255,255,.53);
    font-size:14px
}
.footer-grid a:hover {
    color:#fff
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:22px;
    color:rgba(255,255,255,.35);
    font-size:11px
}
.flash-stack {
    position:fixed;
    z-index:200;
    top:88px;
    left:50%;
    transform:translateX(-50%);
    width:min(620px,calc(100% - 30px))
}
.flash {
    margin-top:8px;
    padding:13px 18px;
    border-radius:12px;
    background:#fff;
    box-shadow:0 10px 30px rgba(7,26,44,.18);
    font-size:14px
}
.flash.success {
    border-left:4px solid var(--green)
}
.flash.error {
    border-left:4px solid #d55353
}
.flash.info {
    border-left:4px solid var(--cyan)
}
.auth-shell {
    min-height:760px;
    height:100vh;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    background:#fff
}
.auth-art {
    position:relative;
    overflow:hidden;
    background:var(--navy);
    color:#fff
}
.auth-art-image {
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(5,25,43,.1),rgba(5,25,43,.85)),url('m365-hero.png') center/cover
}
.auth-quote {
    position:absolute;
    left:10%;
    right:10%;
    bottom:12%
}
.auth-quote>span {
    color:var(--cyan-2);
    font-size:11px;
    font-weight:800;
    letter-spacing:.17em
}
.auth-quote h1 {
    font-size:clamp(42px,4vw,66px);
    line-height:1.04;
    letter-spacing:-.045em;
    margin:18px 0
}
.auth-quote p {
    color:rgba(255,255,255,.65);
    font-size:18px
}
.auth-panel {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:110px 7% 50px
}
.auth-box {
    width:min(430px,100%)
}
.back-link {
    display:inline-block;
    margin-bottom:70px;
    color:#687a87;
    font-size:13px
}
.auth-mark {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    background:#daf4f1;
    color:#087b82;
    border-radius:14px;
    margin-bottom:30px
}
.auth-box h2,.auth-box h1 {
    font-size:42px;
    line-height:1.1;
    letter-spacing:-.04em;
    margin:0 0 12px
}
.auth-intro {
    color:var(--muted);
    margin-bottom:32px
}
.auth-form input {
    border:1px solid #d7e0e1;
    border-radius:10px;
    padding:13px 14px
}
.auth-form .button {
    margin-top:8px
}
.auth-form small {
    display:block;
    color:var(--muted);
    margin:-6px 0 20px
}
.auth-help {
    text-align:center;
    color:var(--muted);
    font-size:13px;
    margin-top:24px
}
.auth-help a {
    color:#0d8993;
    font-weight:700
}
.auth-security {
    display:flex;
    gap:15px;
    margin-top:44px;
    padding-top:24px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:12px
}
.auth-security>span {
    color:var(--cyan);
    font-size:24px
}
.auth-security p {
    margin:0
}
.auth-simple,.error-page {
    min-height:760px;
    padding:150px 24px 90px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#edf4f2,#fff)
}
.error-page {
    text-align:center
}
.error-page>div {
    max-width:600px
}
.error-page>div>span {
    font-size:70px;
    color:var(--cyan)
}
.error-page h1 {
    font-size:56px;
    letter-spacing:-.04em;
    margin:12px
}
.error-page p {
    color:var(--muted);
    margin-bottom:32px
}
.customer-area {
    min-height:800px;
    padding-top:140px
}
.area-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:45px
}
.area-head h1 {
    font-size:58px;
    letter-spacing:-.045em;
    line-height:1;
    margin:0
}
.area-head p:last-child {
    color:var(--muted);
    font-size:18px
}
.area-date {
    text-align:right
}
.area-date span,.area-date strong {
    display:block
}
.area-date span {
    color:var(--muted);
    font-size:12px
}
.area-stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:20px
}
.area-stats article {
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:26px
}
.area-stats article>span,.area-stats small {
    display:block;
    color:var(--muted);
    font-size:12px
}
.area-stats strong {
    display:block;
    font-size:30px;
    margin:6px 0
}
.area-stats .accent-stat {
    background:var(--navy);
    color:#fff;
    border-color:var(--navy)
}
.area-grid {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:20px
}
.area-panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:30px
}
.panel-title {
    display:flex;
    justify-content:space-between;
    align-items:start;
    margin-bottom:24px
}
.panel-title .section-kicker {
    margin-bottom:4px
}
.panel-title h2 {
    margin:0;
    font-size:26px
}
.live-dot {
    font-size:11px;
    color:#2f8a67
}
.live-dot:before {
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:7px;
    border-radius:50%;
    background:var(--green)
}
.tenant-list article {
    display:grid;
    grid-template-columns:46px 1fr .65fr .6fr;
    gap:15px;
    align-items:center;
    padding:18px 0;
    border-top:1px solid #edf0f0
}
.tenant-avatar {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    background:#d8f2ef;
    color:#087e86;
    border-radius:13px;
    font-weight:850
}
.tenant-name strong,.tenant-name span,.tenant-list article small,.tenant-list article>div>strong {
    display:block
}
.tenant-name span,.tenant-list article small {
    color:var(--muted);
    font-size:11px
}
.report-list article {
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:13px;
    align-items:center;
    padding:16px 0;
    border-top:1px solid #edf0f0
}
.file-mark {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#eef5f4;
    color:#0b8993
}
.report-list strong,.report-list span {
    display:block
}
.report-list span {
    color:var(--muted);
    font-size:11px
}
.report-list .version {
    padding:5px 8px;
    background:#eef3f3;
    border-radius:8px;
    color:#60727d
}
.panel-footnote {
    font-size:11px;
    color:var(--muted);
    margin:20px 0 0
}
.notice,.empty-state {
    padding:24px;
    border-radius:16px;
    margin-bottom:20px
}
.notice.warning {
    background:#fff3df;
    border:1px solid #f2d39e
}
.empty-state {
    text-align:center;
    background:#fff;
    border:1px solid var(--line);
    padding:80px 24px
}
.empty-state>span {
    font-size:50px;
    color:var(--cyan)
}
.empty-inline {
    color:var(--muted)
}
@media(max-width:1000px) {
    .feature-grid {
        grid-template-columns:1fr 1fr
  }
    .feature-large {
        grid-row:span 1;
        min-height:420px
  }
    .chart-icon {
        height:130px
  }
    .story-band,.portal-preview,.contact {
        grid-template-columns:1fr
  }
    .section-heading {
        grid-template-columns:1fr
  }
    .auth-shell {
        grid-template-columns:1fr
  }
    .auth-art {
        display:none
  }
    .area-stats {
        grid-template-columns:1fr 1fr
  }
    .area-grid {
        grid-template-columns:1fr
  }
    .footer-grid {
        grid-template-columns:1fr 1fr
  }
}
@media(max-width:720px) {
    .site-header {
        height:72px;
        padding:0 20px
  }
    .brand img {
        width:98px
  }
    .brand-product {
        font-size:12px;
        padding-left:14px;
        margin-left:-8px
  }
    .menu-toggle {
        display:block
  }
    .site-nav {
        display:none;
        position:absolute;
        top:72px;
        left:12px;
        right:12px;
        padding:22px;
        background:#0a253c;
        border-radius:16px;
        box-shadow:var(--shadow);
        align-items:stretch;
        flex-direction:column;
        gap:18px
  }
    .site-nav.open {
        display:flex
  }
    .site-nav form,.site-nav .nav-login {
        width:100%;
        text-align:left
  }
    .hero {
        min-height:760px
  }
    .hero:after {
        background:linear-gradient(90deg,rgba(4,20,35,.96),rgba(4,20,35,.68))
  }
    .hero-backdrop {
        background-position:63% center;
        opacity:.68
  }
    .hero-content {
        width:auto;
        margin:0 22px;
        padding-top:60px
  }
    .hero h1 {
        font-size:52px
  }
    .hero-lead {
        font-size:17px
  }
    .hero-proof {
        display:none
  }
    .scroll-cue {
        display:none
  }
    .section {
        padding:78px 22px
  }
    .manifesto-grid,.section-heading {
        grid-template-columns:1fr;
        gap:28px
  }
    .manifesto h2,.section-heading h2,.preview-copy h2,.contact-intro h2 {
        font-size:42px
  }
    .feature-grid {
        grid-template-columns:1fr
  }
    .feature,.feature-large {
        min-height:320px
  }
    .story-band {
        padding:80px 22px;
        gap:40px
  }
    .preview-card {
        transform:none
  }
    .preview-body {
        grid-template-columns:45px 1fr;
        min-height:280px
  }
    .preview-main {
        padding:18px
  }
    .contact-form {
        padding:26px 20px
  }
    .form-row {
        grid-template-columns:1fr;
        gap:0
  }
    .footer-grid {
        grid-template-columns:1fr;
        gap:26px
  }
    .footer-bottom {
        display:block
  }
    .footer-bottom span {
        display:block;
        margin-top:6px
  }
    .auth-panel {
        padding:120px 24px 50px
  }
    .auth-box h2,.auth-box h1 {
        font-size:36px
  }
    .back-link {
        margin-bottom:40px
  }
    .area-head {
        display:block
  }
    .area-date {
        text-align:left;
        margin-top:22px
  }
    .area-head h1 {
        font-size:44px
  }
    .area-stats {
        grid-template-columns:1fr
  }
    .tenant-list article {
        grid-template-columns:42px 1fr
  }
    .tenant-list article>div:nth-child(n+3) {
        display:none
  }
    .customer-area {
        padding-top:120px
  }
    .flash-stack {
        top:74px
  }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
  }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important
  }
}
/* Public pricing */ .product-pricing {
    position:relative;
    overflow:hidden;
    background:#eef3f0
}
.product-pricing:before {
    content:"";
    position:absolute;
    right:-13vw;
    top:-16vw;
    width:40vw;
    height:40vw;
    border:1px solid rgba(8,136,153,.12);
    border-radius:38%;
    transform:rotate(28deg)
}
.pricing-heading,.pricing-grid,.included-banner,.pricing-note {
    position:relative;
    z-index:1
}
.pricing-heading {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:end;
    gap:70px;
    margin-bottom:42px
}
.pricing-heading h2 {
    margin:0;
    color:#303639;
    font-size:clamp(44px,4.7vw,72px);
    line-height:1.02;
    letter-spacing:-.05em
}
.pricing-heading>p {
    margin:0;
    color:#687477;
    font-size:17px
}
.included-banner {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
    margin-bottom:18px;
    padding:24px 28px;
    border-radius:20px;
    background:linear-gradient(115deg,#082c40,#075b68);
    color:#fff;
    box-shadow:0 24px 55px rgba(6,38,54,.18)
}
.included-mark {
    display:grid;
    place-items:center;
    width:62px;
    height:62px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:19px;
    background:rgba(255,255,255,.1)
}
.included-mark span {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#74bc2c;
    color:#092436;
    font-size:20px;
    font-weight:950
}
.included-kicker,.included-banner strong {
    display:block
}
.included-kicker {
    margin-bottom:3px;
    color:#80e1e5;
    font-size:9px;
    font-weight:950;
    letter-spacing:.19em
}
.included-banner strong {
    font-size:24px;
    line-height:1.2
}
.included-banner p {
    margin:5px 0 0;
    color:rgba(255,255,255,.64);
    font-size:13px
}
.included-banner>a {
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:11px 16px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    color:#fff;
    font-size:11px;
    font-weight:850;
    white-space:nowrap;
    transition:.2s
}
.included-banner>a:hover {
    background:#fff;
    color:#073145
}
.pricing-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.pricing-card {
    position:relative;
    display:flex;
    min-width:0;
    flex-direction:column;
    padding:31px;
    border:1px solid #d9e2df;
    border-radius:24px;
    background:rgba(255,255,255,.92);
    box-shadow:0 13px 40px rgba(24,52,60,.07);
    overflow:hidden
}
.pricing-card-head {
    display:grid;
    grid-template-columns:28px 1fr;
    gap:14px;
    align-items:start
}
.plan-index {
    padding-top:7px;
    color:#8a9698;
    font-size:9px;
    font-weight:900
}
.plan-name {
    margin:0;
    color:#4c5659;
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.11em
}
.plan-price {
    display:flex;
    align-items:baseline;
    gap:9px;
    margin-top:10px
}
.plan-price strong {
    color:#24343a;
    font-size:48px;
    line-height:1;
    letter-spacing:-.055em
}
.plan-price span {
    color:#7a8588;
    font-size:11px
}
.plan-summary {
    min-height:76px;
    margin:24px 0 18px;
    color:#657174;
    font-size:14px
}
.pricing-card ul {
    display:grid;
    gap:0;
    margin:0 0 28px;
    padding:0;
    list-style:none
}
.pricing-card li {
    position:relative;
    padding:10px 0 10px 26px;
    border-top:1px solid #e5ebe9;
    color:#4f5c60;
    font-size:13px
}
.pricing-card li:before {
    content:"✓";
    position:absolute;
    left:2px;
    top:9px;
    color:#0b909d;
    font-size:12px;
    font-weight:950
}
.plan-action {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:auto;
    padding:13px 16px;
    border:1px solid #cbd8d5;
    border-radius:12px;
    color:#34494f;
    font-size:12px;
    font-weight:900;
    transition:.2s
}
.plan-action:hover {
    border-color:#078899;
    background:#eaf6f3;
    color:#077985
}
.plan-ribbon {
    position:absolute;
    top:0;
    right:0;
    padding:8px 14px;
    border-radius:0 0 0 12px;
    background:#e6f3ef;
    color:#087b87;
    font-size:8px;
    font-weight:950;
    letter-spacing:.13em
}
.pricing-standard {
    border-color:#9ccbc6
}
.pricing-standard .plan-action {
    border-color:#078899;
    background:#078899;
    color:#fff
}
.pricing-standard .plan-action:hover {
    background:#066e79
}
.pricing-advanced {
    border-color:#0a6b77;
    background:linear-gradient(160deg,#0a3448 0%,#082637 100%);
    color:#fff;
    box-shadow:0 24px 60px rgba(4,39,55,.22)
}
.pricing-advanced .plan-ribbon {
    background:#77bd2e;
    color:#102c2a
}
.pricing-advanced .plan-index,.pricing-advanced .plan-name,.pricing-advanced .plan-price span {
    color:rgba(255,255,255,.56)
}
.pricing-advanced .plan-price strong {
    color:#fff
}
.pricing-advanced .plan-summary {
    color:rgba(255,255,255,.68)
}
.pricing-advanced li {
    border-top-color:rgba(255,255,255,.12);
    color:rgba(255,255,255,.82)
}
.pricing-advanced li:before {
    color:#8ed348
}
.pricing-advanced .plan-action {
    border-color:#75bc2d;
    background:#75bc2d;
    color:#0b2e38
}
.pricing-advanced .plan-action:hover {
    background:#8bd342
}
.plan-included-note {
    display:grid;
    grid-template-columns:25px 1fr;
    gap:10px;
    align-items:start;
    margin-top:16px;
    padding:14px;
    border:1px solid rgba(142,211,72,.35);
    border-radius:12px;
    background:rgba(117,188,45,.1)
}
.plan-included-note>span {
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#78bd30;
    color:#082b35;
    font-size:12px;
    font-weight:950
}
.plan-included-note p {
    margin:0;
    color:rgba(255,255,255,.67);
    font-size:10px;
    line-height:1.45
}
.plan-included-note strong {
    display:block;
    color:#fff;
    font-size:11px
}
.pricing-note {
    margin:22px 0 0;
    color:#7d898c;
    font-size:10px;
    text-align:center
}
.footer-brand {
    display:inline-block
}
.footer-site-link {
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:4px;
    color:#72dce1;
    font-size:12px;
    font-weight:800
}
.footer-site-link:hover {
    color:#fff
}
.footer-grid p a {
    display:inline-block;
    margin-bottom:3px
}
.product-intro-grid>div>p strong {
    color:#26383e
}
.product-faq {
    display:grid;
    grid-template-columns:.78fr 1.22fr;
    gap:clamp(60px,9vw,140px);
    background:#fff
}
.faq-heading {
    position:sticky;
    top:120px;
    align-self:start
}
.faq-heading h2 {
    margin:0;
    color:#303639;
    font-size:clamp(42px,4vw,64px);
    line-height:1.03;
    letter-spacing:-.045em
}
.faq-heading>p {
    max-width:470px;
    color:#697679;
    font-size:17px
}
.faq-list {
    border-top:1px solid #dce4e2
}
.faq-list details {
    border-bottom:1px solid #dce4e2
}
.faq-list summary {
    display:grid;
    grid-template-columns:1fr 34px;
    gap:20px;
    align-items:center;
    padding:25px 0;
    color:#2e3c41;
    font-size:18px;
    font-weight:850;
    list-style:none;
    cursor:pointer
}
.faq-list summary::-webkit-details-marker {
    display:none
}
.faq-list summary span {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border:1px solid #cbd8d5;
    border-radius:50%;
    color:#078899;
    font-size:20px;
    font-weight:400;
    transition:.2s
}
.faq-list details[open] summary span {
    transform:rotate(45deg);
    background:#078899;
    color:#fff
}
.faq-list details p {
    max-width:760px;
    margin:-6px 55px 25px 0;
    color:#657174;
    font-size:15px
}
@media(max-width:1180px) {
    .view-landing .site-nav {
        gap:19px;
        font-size:12px
  }
    .view-landing .nav-login {
        padding:9px 15px
  }
    .pricing-heading {
        grid-template-columns:1fr;
        gap:22px
  }
    .included-banner {
        grid-template-columns:auto 1fr
  }
    .included-banner>a {
        grid-column:2
  }
    .pricing-grid {
        grid-template-columns:1fr 1fr
  }
    .pricing-advanced {
        grid-column:1/3
  }
    .plan-summary {
        min-height:0
  }
    .product-faq {
        grid-template-columns:1fr;
        gap:40px
  }
    .faq-heading {
        position:static
  }
}
@media(max-width:720px) {
    .pricing-heading h2 {
        font-size:42px
  }
    .included-banner {
        grid-template-columns:1fr;
        padding:22px
  }
    .included-mark {
        width:52px;
        height:52px
  }
    .included-banner>a {
        grid-column:auto;
        justify-content:space-between;
        white-space:normal
  }
    .pricing-grid {
        grid-template-columns:1fr
  }
    .pricing-advanced {
        grid-column:auto
  }
    .pricing-card {
        padding:27px 22px
  }
    .plan-price strong {
        font-size:43px
  }
    .plan-summary {
        min-height:0
  }
    .site-footer {
        padding-top:55px
  }
    .faq-heading h2 {
        font-size:40px
  }
    .faq-list summary {
        font-size:16px
  }
    .faq-list details p {
        margin-right:0
  }
}
/* M365 Security Report - public product experience */ .view-landing {
    background:#fff;
    color:#303639
}
.site-header.site-header-light {
    background:rgba(255,255,255,.97);
    color:#353a3d;
    border-bottom-color:rgba(14,41,55,.08)
}
.site-header-light.scrolled {
    background:rgba(255,255,255,.94);
    color:#303639;
    border-bottom-color:#e8eceb;
    box-shadow:0 8px 32px rgba(25,53,67,.08)
}
.site-header-light .brand img {
    filter:none
}
.site-header-light .brand-product {
    border-left-color:#d9dede
}
.site-header-light .brand-product span {
    color:#087f8d
}
.site-header-light .site-nav a:not(.nav-login) {
    color:#303639
}
.site-header-light .nav-login {
    color:#fff;
    background:#44494b;
    border-color:#44494b
}
.site-header-light .nav-login:hover {
    background:#078797;
    border-color:#078797;
    color:#fff
}
.site-header-light .menu-toggle span {
    background:#303639
}
.product-section {
    padding:clamp(90px,10vw,150px) clamp(24px,8vw,150px)
}
.product-section-label {
    color:#087f8d;
    font-size:11px;
    font-weight:900;
    letter-spacing:.2em;
    margin-bottom:24px
}
.product-section-label.light {
    color:#67d9df
}
.product-hero {
    position:relative;
    min-height:900px;
    padding:150px clamp(24px,7vw,130px) 90px;
    display:grid;
    grid-template-columns:.86fr 1.14fr;
    align-items:center;
    gap:50px;
    overflow:hidden;
    background:linear-gradient(140deg,#fff 0%,#fbfcfb 42%,#eef8f5 100%)
}
.product-hero:before {
    content:"";
    position:absolute;
    left:-9vw;
    bottom:-12vw;
    width:34vw;
    height:34vw;
    border-radius:28%;
    border:1px solid rgba(101,180,40,.13);
    transform:rotate(24deg)
}
.product-glow {
    position:absolute;
    border-radius:50%;
    filter:blur(1px);
    opacity:.55
}
.glow-green {
    width:420px;
    height:420px;
    right:3%;
    top:8%;
    background:radial-gradient(circle,rgba(107,190,43,.18),transparent 70%)
}
.glow-cyan {
    width:520px;
    height:520px;
    left:28%;
    bottom:-32%;
    background:radial-gradient(circle,rgba(0,137,156,.16),transparent 70%)
}
.product-hero-copy,.product-hero-visual {
    position:relative;
    z-index:2
}
.product-pill {
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin:0 0 28px;
    padding:9px 14px 9px 10px;
    border:1px solid #dce5e2;
    border-radius:999px;
    color:#5d686b;
    background:rgba(255,255,255,.72);
    font-size:10px;
    font-weight:850;
    letter-spacing:.16em
}
.product-pill span {
    width:9px;
    height:9px;
    border-radius:3px;
    background:linear-gradient(135deg,#77be2b 50%,#07899a 50%)
}
.product-hero h1 {
    margin:0;
    color:#383d3f;
    font-size:clamp(58px,6.1vw,98px);
    line-height:.94;
    letter-spacing:-.065em
}
.product-hero h1 em {
    font-style:normal;
    font-weight:300;
    color:#078899
}
.product-lead {
    max-width:650px;
    margin:32px 0;
    color:#657174;
    font-size:clamp(17px,1.4vw,21px);
    line-height:1.58
}
.product-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
.product-primary {
    background:linear-gradient(110deg,#078899,#05a4aa);
    color:#fff;
    box-shadow:0 14px 30px rgba(4,137,151,.2)
}
.product-primary:hover {
    color:#fff;
    background:linear-gradient(110deg,#087582,#079298);
    transform:translateY(-2px)
}
.product-secondary {
    background:#fff;
    color:#3b4143;
    border-color:#cbd5d3
}
.product-secondary:hover {
    border-color:#078899;
    color:#078899
}
.product-trust {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:42px;
    color:#687477;
    font-size:12px
}
.dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    margin-right:6px
}
.dot.green {
    background:#74b92d
}
.dot.cyan {
    background:#078e9e
}
.dot.orange {
    background:#f47a24
}
.product-hero-visual {
    min-height:650px;
    display:flex;
    align-items:center;
    justify-content:center
}
.product-logo {
    position:absolute;
    z-index:3;
    top:0;
    left:50%;
    width:min(520px,85%);
    transform:translateX(-50%);
    mix-blend-mode:multiply
}
.report-stage {
    position:relative;
    width:min(700px,100%);
    height:610px;
    margin-top:110px;
    perspective:1800px
}
.report-sheet {
    position:absolute;
    border:0;
    padding:0;
    background:#fff;
    border-radius:9px;
    overflow:hidden;
    box-shadow:0 35px 70px rgba(25,47,57,.18);
    cursor:zoom-in;
    transition:.35s ease
}
.report-sheet:hover {
    z-index:5;
    transform:translateY(-12px) rotate(0deg) rotateY(0deg) scale(1.02)
}
.report-sheet img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top
}
.sheet-front {
    z-index:2;
    left:9%;
    bottom:0;
    width:43%;
    height:535px;
    transform:rotate(-4deg) rotateY(9deg)
}
.sheet-back {
    right:6%;
    top:44px;
    width:41%;
    height:520px;
    transform:rotate(7deg) rotateY(-9deg);
    opacity:.92
}
.report-chip {
    position:absolute;
    z-index:6;
    min-width:154px;
    padding:14px 16px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(202,216,213,.8);
    border-radius:16px;
    box-shadow:0 18px 38px rgba(29,54,62,.14);
    backdrop-filter:blur(15px)
}
.report-chip span,.report-chip strong {
    display:block
}
.report-chip span {
    color:#768285;
    font-size:10px
}
.report-chip strong {
    font-size:17px
}
.report-chip i {
    position:absolute;
    right:15px;
    top:15px;
    color:#078e9b;
    font-style:normal
}
.chip-score {
    left:0;
    top:160px
}
.chip-action {
    right:0;
    bottom:70px
}
.chip-action i {
    color:#72b62c
}
.product-scroll {
    position:absolute;
    z-index:3;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:12px;
    color:#768083;
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase
}
.product-scroll span {
    display:block;
    width:40px;
    height:1px;
    background:#0b8c99
}
.product-proof {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:0 clamp(24px,7vw,130px);
    background:#3e4345;
    color:#fff
}
.product-proof div {
    padding:28px 28px;
    border-right:1px solid rgba(255,255,255,.12)
}
.product-proof div:last-child {
    border-right:0
}
.product-proof strong,.product-proof span {
    display:block
}
.product-proof strong {
    font-size:18px
}
.product-proof span {
    color:rgba(255,255,255,.53);
    font-size:12px
}
.product-intro {
    background:#fff
}
.product-intro-grid {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(60px,10vw,160px);
    align-items:start
}
.product-intro h2,.capabilities-head h2 {
    margin:0;
    font-size:clamp(44px,4.7vw,72px);
    line-height:1.02;
    letter-spacing:-.05em
}
.product-intro h2 span {
    color:#07909e;
    font-weight:300
}
.product-intro-grid>div {
    color:#637074;
    font-size:18px
}
.product-intro-grid>div>p:first-child {
    margin-top:0
}
.intro-signature {
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:42px;
    padding-top:24px;
    border-top:1px solid #dfe6e4;
    color:#485154;
    font-size:13px
}
.intro-signature i {
    width:48px;
    height:48px;
    border-radius:15px;
    background:conic-gradient(from 90deg,#f34a25 0 25%,#f58b19 0 50%,#078899 0 75%,#71bb2c 0)
}
.report-demo {
    padding:clamp(90px,9vw,140px) clamp(24px,7vw,130px);
    background:#092436;
    color:#fff;
    overflow:hidden
}
.demo-heading {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:end;
    gap:80px;
    margin-bottom:60px
}
.demo-heading h2 {
    margin:0;
    font-size:clamp(46px,5vw,76px);
    line-height:1;
    letter-spacing:-.05em
}
.demo-heading>p {
    color:rgba(255,255,255,.58);
    font-size:16px
}
.demo-browser {
    border:1px solid rgba(255,255,255,.13);
    border-radius:24px;
    overflow:hidden;
    background:#eff4f2;
    box-shadow:0 50px 100px rgba(0,0,0,.28)
}
.demo-toolbar {
    height:56px;
    display:flex;
    align-items:center;
    padding:0 20px;
    background:#fff;
    color:#3f4b4f
}
.traffic {
    display:flex;
    gap:7px
}
.traffic i {
    width:9px;
    height:9px;
    border-radius:50%;
    background:#dbe0e1
}
.traffic i:first-child {
    background:#f15a3a
}
.traffic i:nth-child(2) {
    background:#efaa35
}
.traffic i:nth-child(3) {
    background:#73b831
}
.demo-address {
    margin:auto;
    padding:7px 28px;
    border-radius:9px;
    background:#f0f3f2;
    color:#778284;
    font-size:11px
}
.demo-address span {
    color:#078e9b;
    margin-right:7px
}
.demo-safe {
    font-size:9px;
    color:#5a9d22;
    font-weight:900;
    letter-spacing:.12em
}
.demo-canvas {
    min-height:680px;
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    align-items:center;
    gap:40px;
    padding:60px 7%;
    background:radial-gradient(circle at 80% 20%,rgba(21,153,164,.1),transparent 35%),#edf2f0;
    color:#354145
}
.demo-copy {
    padding:20px
}
.demo-index {
    font-size:11px;
    color:#07909e;
    font-weight:900
}
.demo-copy h3,.demo-secondary-copy h3 {
    margin:12px 0 18px;
    font-size:40px;
    line-height:1.05;
    letter-spacing:-.04em
}
.demo-copy p,.demo-secondary-copy>p {
    color:#687477
}
.demo-copy ul {
    list-style:none;
    padding:18px 0 0;
    margin:24px 0 0;
    border-top:1px solid #ced8d5
}
.demo-copy li {
    margin:9px 0;
    font-size:13px
}
.mini-status {
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:3px;
    margin-right:8px
}
.mini-status.critical {
    background:#ca202e
}
.mini-status.attention {
    background:#e99718
}
.mini-status.ok {
    background:#5d9c2c
}
.demo-page,.demo-secondary-page {
    border:0;
    padding:0;
    background:#fff;
    cursor:zoom-in;
    overflow:hidden;
    box-shadow:0 28px 70px rgba(17,48,57,.2);
    transition:.3s
}
.demo-page {
    height:560px;
    border-radius:8px;
    transform:rotate(1.5deg)
}
.demo-page:hover,.demo-secondary-page:hover {
    transform:translateY(-7px) rotate(0)
}
.demo-page img,.demo-secondary-page img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top
}
.demo-secondary {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(50px,9vw,140px);
    align-items:center;
    padding:110px 4% 10px
}
.demo-secondary-page {
    height:570px;
    border-radius:8px;
    transform:rotate(-2deg)
}
.demo-secondary-copy {
    max-width:560px
}
.action-example {
    display:grid;
    grid-template-columns:60px 1fr;
    gap:15px;
    margin-top:15px;
    padding:17px;
    border:1px solid rgba(235,77,64,.42);
    border-radius:12px;
    background:rgba(255,255,255,.05)
}
.action-example>span {
    color:#ff6a62;
    font-size:10px;
    font-weight:900
}
.action-example strong,.action-example small {
    display:block
}
.action-example small {
    margin-top:4px;
    color:rgba(255,255,255,.53);
    font-size:11px
}
.action-example.amber {
    border-color:rgba(235,164,49,.42)
}
.action-example.amber>span {
    color:#f3b548
}
.product-capabilities {
    background:#f5f7f5
}
.capabilities-head {
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:70px;
    align-items:end;
    margin-bottom:55px
}
.capabilities-head>p {
    color:#6d797b;
    font-size:17px
}
.product-bento {
    display:grid;
    grid-template-columns:1.15fr .85fr 1fr;
    grid-template-rows:360px 330px;
    gap:16px
}
.bento-card {
    position:relative;
    padding:32px;
    border-radius:22px;
    overflow:hidden;
    background:#fff;
    border:1px solid #dde5e2
}
.bento-card h3 {
    margin:18px 0 10px;
    font-size:25px;
    line-height:1.12
}
.bento-card p {
    color:#687477;
    margin:0
}
.bento-num {
    position:absolute;
    top:25px;
    right:27px;
    color:#8b9698;
    font-size:10px;
    font-weight:800
}
.bento-security {
    grid-row:span 2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:linear-gradient(160deg,#fff 35%,#e8f4ef)
}
.bento-symbol {
    margin-bottom:auto;
    width:85px;
    height:85px;
    display:grid;
    place-items:center;
    border-radius:25px;
    background:#082f43;
    color:#55d0d7;
    font-size:50px
}
.risk-bars {
    display:flex;
    align-items:end;
    gap:8px;
    height:170px;
    margin:30px 0
}
.risk-bars i {
    flex:1;
    border-radius:7px 7px 0 0;
    background:#0a8b9b;
    height:44%
}
.risk-bars i:nth-child(2) {
    height:72%;
    background:#78bb2e
}
.risk-bars i:nth-child(3) {
    height:56%;
    background:#f28a1c
}
.risk-bars i:nth-child(4) {
    height:88%;
    background:#ed4d30
}
.risk-bars i:nth-child(5) {
    height:63%;
    background:#0b7182
}
.bento-capacity {
    background:#dff4ef
}
.capacity-orbit {
    position:relative;
    width:130px;
    height:130px;
    margin:15px auto 20px;
    border:18px solid #fff;
    border-top-color:#078c9b;
    border-right-color:#f28b1b;
    border-radius:50%
}
.capacity-orbit i {
    position:absolute;
    inset:16px;
    border-radius:50%;
    background:#dff4ef
}
.bento-history {
    color:#fff;
    background:#078899
}
.bento-history p {
    color:rgba(255,255,255,.68)
}
.bento-history svg {
    width:100%;
    margin-top:45px;
    color:#9cebef
}
.bento-portal {
    background:#fff
}
.portal-mini {
    height:120px;
    display:grid;
    grid-template-columns:32% 68%;
    border-radius:12px;
    overflow:hidden;
    background:#edf2f1
}
.portal-mini>div {
    padding:18px 12px;
    background:#0b2c40
}
.portal-mini i,.portal-mini b {
    display:block;
    height:8px;
    border-radius:4px;
    background:#0b8998;
    margin-bottom:12px
}
.portal-mini b {
    background:rgba(255,255,255,.14)
}
.portal-mini section {
    display:flex;
    gap:8px;
    align-items:center;
    padding:14px
}
.portal-mini section span {
    flex:1;
    height:65px;
    border-radius:8px;
    background:#fff;
    box-shadow:0 4px 12px rgba(20,45,53,.08)
}
.bento-alert {
    grid-column:2/4;
    display:grid;
    grid-template-columns:150px 1fr;
    align-items:center;
    gap:35px;
    background:#3f4446;
    color:#fff
}
.bento-alert p {
    color:rgba(255,255,255,.59)
}
.alert-ring {
    width:120px;
    height:120px;
    padding:12px;
    border-radius:50%;
    background:conic-gradient(#f48023 0 90%,rgba(255,255,255,.12) 90%)
}
.alert-ring span {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    border-radius:50%;
    background:#3f4446;
    font-size:24px;
    font-weight:800
}
.product-flow {
    padding:110px clamp(24px,8vw,150px);
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:100px;
    background:#092436;
    color:#fff
}
.product-flow h2 {
    font-size:clamp(42px,4vw,64px);
    line-height:1.05;
    letter-spacing:-.045em;
    margin:0
}
.product-flow ol {
    list-style:none;
    margin:0;
    padding:0
}
.product-flow li {
    display:grid;
    grid-template-columns:50px 1fr;
    gap:20px;
    padding:22px 0;
    border-top:1px solid rgba(255,255,255,.13)
}
.product-flow li>span {
    font-size:10px;
    color:#68d6dc;
    font-weight:900
}
.product-flow strong {
    font-size:21px
}
.product-flow p {
    margin:3px 0;
    color:rgba(255,255,255,.52)
}
.product-contact {
    background:linear-gradient(135deg,#edf5f2,#fff)
}
.product-contact .contact-form {
    border:1px solid #dbe5e2
}
.report-lightbox {
    width:min(920px,94vw);
    max-height:92vh;
    padding:0;
    border:0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 40px 120px rgba(0,0,0,.45);
    overflow:auto
}
.report-lightbox::backdrop {
    background:rgba(3,19,29,.86);
    backdrop-filter:blur(6px)
}
.report-lightbox>button {
    position:sticky;
    z-index:2;
    float:right;
    top:14px;
    right:14px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:#092436;
    color:#fff;
    font-size:26px
}
.report-lightbox img {
    display:block;
    width:100%;
    height:auto
}
.report-lightbox p {
    margin:0;
    padding:16px 22px;
    color:#677477;
    font-size:12px
}
@media(max-width:1050px) {
    .product-hero {
        grid-template-columns:1fr;
        padding-top:130px
  }
    .product-hero-copy {
        max-width:760px
  }
    .product-hero-visual {
        min-height:680px
  }
    .product-proof {
        grid-template-columns:1fr 1fr
  }
    .product-proof div:nth-child(2) {
        border-right:0
  }
    .product-intro-grid,.demo-heading,.capabilities-head,.product-flow {
        grid-template-columns:1fr
  }
    .demo-canvas {
        grid-template-columns:.8fr 1.2fr
  }
    .product-bento {
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto
  }
    .bento-security {
        grid-row:span 2
  }
    .bento-alert {
        grid-column:1/3
  }
    .product-flow {
        gap:50px
  }
}
@media(max-width:720px) {
    .product-hero {
        min-height:auto;
        display:block;
        padding:125px 20px 75px
  }
    .product-hero h1 {
        font-size:54px
  }
    .product-lead {
        font-size:17px
  }
    .product-trust {
        display:block
  }
    .product-trust span {
        display:block;
        margin-top:8px
  }
    .product-hero-visual {
        min-height:560px;
        margin-top:20px
  }
    .product-logo {
        top:20px;
        width:95%
  }
    .report-stage {
        height:500px;
        margin-top:90px
  }
    .sheet-front {
        left:2%;
        width:56%;
        height:420px
  }
    .sheet-back {
        right:0;
        width:53%;
        height:400px
  }
    .report-chip {
        display:none
  }
    .product-scroll {
        display:none
  }
    .product-proof {
        grid-template-columns:1fr 1fr
  }
    .product-proof div {
        padding:20px 16px
  }
    .product-proof strong {
        font-size:15px
  }
    .product-section {
        padding:75px 20px
  }
    .product-intro-grid {
        grid-template-columns:1fr;
        gap:35px
  }
    .product-intro h2,.capabilities-head h2 {
        font-size:42px
  }
    .report-demo {
        padding:75px 20px
  }
    .demo-heading {
        grid-template-columns:1fr;
        gap:25px
  }
    .demo-heading h2 {
        font-size:44px
  }
    .demo-toolbar {
        padding:0 12px
  }
    .demo-address {
        display:none
  }
    .demo-canvas {
        grid-template-columns:1fr;
        padding:34px 20px
  }
    .demo-page {
        height:480px
  }
    .demo-secondary {
        grid-template-columns:1fr;
        padding:75px 0 0
  }
    .demo-secondary-page {
        height:480px;
        order:2
  }
    .product-bento {
        display:block
  }
    .bento-card {
        min-height:320px;
        margin-bottom:14px
  }
    .bento-security {
        min-height:590px
  }
    .bento-alert {
        display:grid;
        grid-template-columns:100px 1fr;
        gap:18px
  }
    .alert-ring {
        width:90px;
        height:90px
  }
    .product-flow {
        grid-template-columns:1fr;
        padding:75px 20px;
        gap:40px
  }
    .site-header-light .site-nav {
        background:#fff;
        border:1px solid #dfe5e3
  }
    .site-header-light .site-nav a:not(.nav-login) {
        color:#303639
  }
}
.area-nav {
    display:flex;
    gap:8px;
    overflow:auto;
    margin:-20px 0 28px;
    padding:7px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff
}
.area-nav a {
    white-space:nowrap;
    padding:8px 13px;
    border-radius:9px;
    color:var(--muted);
    font-size:12px;
    font-weight:800
}
.area-nav a:hover,.area-nav a.active {
    background:#e5f3f1;
    color:#087f8d
}
.full-panel {
    margin-bottom:20px
}
.tenant-cards {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px
}
.tenant-cards>article {
    padding:20px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fbfcfc
}
.tenant-card-head {
    display:flex;
    align-items:center;
    gap:12px
}
.tenant-card-head strong,.tenant-card-head span {
    display:block
}
.tenant-card-head span {
    color:var(--muted);
    font-size:11px
}
.tenant-cards dl {
    display:grid;
    gap:8px;
    margin:18px 0
}
.tenant-cards dl>div {
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding-top:8px;
    border-top:1px solid #e8eded
}
.tenant-cards dt {
    color:var(--muted);
    font-size:11px
}
.tenant-cards dd {
    margin:0;
    text-align:right;
    font-size:12px;
    font-weight:750
}
.portal-action {
    padding:9px 15px;
    border-color:#b8d3d2;
    background:#fff;
    color:#087f8d
}
.tenant-cards .portal-action {
    width:100%
}
.report-table-head,.report-table article {
    display:grid;
    grid-template-columns:minmax(230px,1.5fr) 150px 85px minmax(120px,.6fr);
    gap:14px;
    align-items:center
}
.report-table-head {
    padding:0 12px 10px;
    color:var(--muted);
    font-size:10px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.08em
}
.report-table article {
    padding:14px 12px;
    border-top:1px solid #e8eded
}
.report-table strong,.report-table small {
    display:block
}
.report-table small {
    color:var(--muted)
}
.artifact-actions {
    display:flex;
    gap:7px
}
.file-pill {
    padding:5px 9px;
    border-radius:7px;
    background:#e7f3f1;
    color:#087f8d;
    font-size:10px;
    font-weight:900
}
.file-pill.pdf {
    background:#fae8e6;
    color:#ae2c24
}
.file-pill.xlsx {
    background:#e3f2e9;
    color:#217346
}
.history-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:16px
}
.history-grid>article {
    padding:20px;
    border:1px solid var(--line);
    border-radius:16px
}
.history-title {
    display:flex;
    justify-content:space-between;
    gap:20px
}
.history-title span,.muted-label {
    color:var(--muted);
    font-size:11px
}
.history-chart {
    display:block;
    width:100%;
    height:auto;
    margin-top:18px;
    overflow:visible
}
.chart-grid {
    fill:none;
    stroke:#e5ebea;
    stroke-width:1
}
.chart-legend {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:10px;
    color:var(--muted);
    font-size:10px
}
.chart-legend i {
    display:inline-block;
    width:8px;
    height:8px;
    margin-right:5px;
    border-radius:50%
}
.portal-form {
    display:grid;
    gap:14px
}
.portal-form label {
    display:grid;
    gap:6px;
    color:#4d5d62;
    font-size:12px;
    font-weight:750
}
.portal-form input,.portal-form select,.portal-form textarea {
    width:100%;
    padding:11px 12px;
    border:1px solid #cfdada;
    border-radius:9px;
    background:#fff;
    font:inherit
}
.request-list article,.audit-list article {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 0;
    border-top:1px solid #e8eded
}
.request-list strong,.request-list span,.audit-list strong,.audit-list span {
    display:block
}
.request-list div>span,.audit-list div>span,.audit-list small {
    color:var(--muted);
    font-size:11px
}
.request-status {
    padding:5px 8px;
    border-radius:999px;
    background:#eef1f1;
    color:#647174;
    font-size:9px!important;
    font-weight:900
}
.request-status.new,.request-status.pending {
    background:#fff0d9;
    color:#9b5b05
}
.request-status.accepted,.request-status.in_progress {
    background:#def2f3;
    color:#087786
}
.request-status.done,.request-status.succeeded {
    background:#e6f3df;
    color:#477923
}
.narrow-area {
    max-width:1160px;
    margin:0 auto
}
.release-grid {
    display:grid;
    gap:14px
}
.release-head {
    display:flex;
    justify-content:space-between
}
.release-head time {
    color:var(--muted)
}
.release-grid ul {
    margin-bottom:0
}
.current-release {
    border-color:#9fcfca;
    background:#f3faf8
}
.auth-reset {
    text-align:right;
    margin-top:-8px
}
.auth-reset a {
    color:#087f8d;
    font-size:12px;
    font-weight:750
}
.impersonation-banner {
    position:fixed;
    z-index:110;
    left:0;
    right:0;
    top:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:9px 20px;
    background:#fff0c9;
    color:#654700;
    border-bottom:1px solid #e5c46e;
    font-size:12px
}
.impersonation-banner form {
    margin:0
}
.impersonation-banner button {
    border:0;
    border-radius:7px;
    padding:6px 10px;
    background:#6c4f08;
    color:#fff
}
.impersonation-banner+main {
    padding-top:44px
}
@media(max-width:720px) {
    .report-table-head {
        display:none
  }
    .report-table article {
        grid-template-columns:1fr auto
  }
    .report-table article>span {
        display:none
  }
    .history-grid {
        grid-template-columns:1fr
  }
    .impersonation-banner {
        align-items:flex-start;
        flex-wrap:wrap
  }
    .area-nav {
        margin-top:0
  }
}
/* Compact locale switch shared by the public landing and customer portal. */
.language-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;margin-left:10px;border:1px solid rgba(122,145,165,.28);border-radius:999px;background:rgba(255,255,255,.08)}
.language-switch button{border:0;border-radius:999px;padding:6px 9px;background:transparent;color:inherit;font-family:inherit;font-size:.72rem;font-weight:700;line-height:1;cursor:pointer;opacity:.72}
.language-switch button[aria-pressed="true"]{background:#78c043;color:#102b3c;opacity:1}
@media(max-width:720px){.language-switch{margin:10px 0 0;align-self:flex-start}}