/* =========================================================
   FAUNA USA — V12
   CORE DESIGN SYSTEM
   ========================================================= */

:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #eef2f7;

    --ink: #0b1020;
    --ink-2: #171d2d;
    --ink-soft: #596274;
    --ink-muted: #8b95a7;

    --line: rgba(11, 16, 32, .10);
    --line-strong: rgba(11, 16, 32, .18);

    --primary: #4f66ff;
    --primary-dark: #3c50e4;
    --primary-soft: #edf0ff;

    --aqua: #28c7b7;
    --aqua-dark: #198e83;
    --aqua-soft: #e6faf7;

    --success: #35a46f;
    --success-soft: #eaf7f0;

    --warning: #c17b2c;
    --warning-soft: #fff3df;

    --danger: #d65757;
    --danger-soft: #fdecec;

    --dark: #0b1020;
    --dark-2: #11182b;
    --dark-3: #182137;

    --shadow-small:
        0 8px 24px rgba(11, 16, 32, .06);

    --shadow-medium:
        0 20px 55px rgba(11, 16, 32, .10);

    --shadow-large:
        0 34px 90px rgba(11, 16, 32, .15);

    --container: 1240px;
}


/* =========================================================
   FOUNDATION
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 82px;
}


body.us-v12 {
    margin: 0;

    background: var(--bg);
    color: var(--ink);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


.us-v12 .container {
    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin-inline: auto;
}


.us-v12 button,
.us-v12 input,
.us-v12 textarea {
    font: inherit;
}


.us-v12 [hidden] {
    display: none !important;
}


.section-kicker-v12 {
    display: block;

    margin-bottom: 12px;

    color: var(--primary);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.section-kicker-v12.light {
    color: #93a3ff;
}


/* =========================================================
   BRAND / HEADER
   ========================================================= */

.us-v12 .site-header {
    position: fixed;

    inset:
        0 0 auto;

    z-index: 1000;

    height: 74px;

    border-bottom:
        1px solid
        rgba(11, 16, 32, .07);

    background:
        rgba(244, 247, 251, .92);

    backdrop-filter:
        blur(18px)
        saturate(130%);

    box-shadow: none;
}


.us-v12 .site-header.scrolled {
    border-color: var(--line);

    background:
        rgba(244, 247, 251, .97);

    box-shadow:
        0 8px 28px
        rgba(11, 16, 32, .04);
}


.us-v12 .header-inner {
    height: 100%;
}


.us-v12 .brand {
    gap: 9px;
}


.us-v12 .brand-mark {
    position: relative;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background: var(--primary);
    color: #fff;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .14);

    font-size: 13px;
    font-weight: 800;
}


.us-v12 .brand-mark::after {
    content: "";

    position: absolute;

    right: 5px;
    bottom: 5px;

    width: 4px;
    height: 4px;

    border-radius: 999px;

    background: var(--aqua);
}


.us-v12 .brand-copy {
    gap: 4px;
}


.us-v12 .brand-copy strong {
    color: var(--ink);

    font-size: 17px;
    font-weight: 780;

    letter-spacing: -.035em;
}


.us-v12 .brand-copy span {
    color: #7c8595;

    font-size: 14px;
}


.us-v12 .desktop-nav {
    gap: 27px;
}


.us-v12 .desktop-nav a,
.us-v12 .header-signin {
    color: #525c6d;

    font-size: 13px;
    font-weight: 620;
}


.us-v12 .desktop-nav a:hover,
.us-v12 .header-signin:hover {
    color: var(--ink);
}


.us-v12 .header-actions {
    gap: 18px;
}


.us-v12 .button {
    border-radius: 10px;
}


.us-v12 .button-primary {
    border-color: transparent;

    background: var(--dark);
    color: #fff;

    box-shadow: none;
}


.us-v12 .button-primary:not(:disabled):hover {
    background: #172038;

    box-shadow: none;
}


.us-v12 .button-secondary {
    border-color: var(--line-strong);

    background: rgba(255, 255, 255, .66);
    color: var(--ink);
}


.us-v12 .button-secondary:not(:disabled):hover {
    border-color: #aeb7c6;

    background: #fff;
}


.us-v12 .menu-button {
    border-radius: 10px;

    background: #e9edf4;
}


/* =========================================================
   HERO
   ========================================================= */

.hero-v12 {
    position: relative;

    overflow: hidden;

    padding:
        132px 0 74px;

    background:
        radial-gradient(
            circle at 76% 12%,
            rgba(79, 102, 255, .08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #f1f5fa 100%
        );
}


.hero-v12::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(11, 16, 32, .022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(11, 16, 32, .022) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 42%,
            #000
        );
}


.hero-v12-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(360px, .78fr)
        minmax(600px, 1.22fr);

    align-items: center;

    gap: 66px;
}


.hero-v12-copy {
    max-width: 520px;
}


.signal-label {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    color: #657083;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 10px;
    font-weight: 780;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.signal-label > span {
    width: 7px;
    height: 7px;

    border-radius: 2px;

    background: var(--primary);

    box-shadow:
        0 0 0 4px
        rgba(79, 102, 255, .1);
}


.hero-v12 h1 {
    margin: 0;

    max-width: 570px;

    font-size:
        clamp(
            54px,
            5.2vw,
            75px
        );

    line-height: .94;

    font-weight: 790;

    letter-spacing: -.065em;
}


.hero-v12 h1 strong {
    display: block;

    color: var(--primary);

    font-weight: inherit;
}


.hero-v12-lead {
    max-width: 500px;

    margin:
        24px 0 0;

    color: var(--ink);

    font-size: 18px;
    font-weight: 690;

    line-height: 1.42;
}


.hero-v12-description {
    max-width: 505px;

    margin:
        13px 0 0;

    color: var(--ink-soft);

    font-size: 15px;
    line-height: 1.65;
}


.hero-v12-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;
}


.hero-v12-proof {
    display: flex;
    flex-wrap: wrap;

    gap:
        9px 20px;

    margin-top: 25px;
}


.hero-v12-proof > div {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #697487;

    font-size: 10px;
    font-weight: 650;
}


.proof-dot {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: #aab4c4;
}


.proof-dot.online {
    background: var(--aqua);

    box-shadow:
        0 0 0 4px
        rgba(40, 199, 183, .12);
}


/* =========================================================
   HERO PRODUCT
   ========================================================= */

.hero-product-v12 {
    position: relative;

    min-width: 0;
}


.product-top-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 9px;

    color: #6f7a8d;

    font-size: 8px;
}


.product-top-label > span {
    color: var(--primary);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-weight: 800;

    letter-spacing: .08em;
}


.product-top-label > i {
    font-style: normal;
}


.product-stage {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(11, 16, 32, .12);

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 32px 75px
        rgba(11, 16, 32, .12);
}


.product-browser-bar {
    height: 45px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    padding:
        0 14px;

    border-bottom:
        1px solid #e4e9f0;

    background: #f6f8fb;
}


.browser-controls {
    display: flex;

    gap: 5px;
}


.browser-controls span {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: #cbd3df;
}


.browser-address {
    min-width: 185px;

    padding:
        6px 18px;

    border:
        1px solid #e1e6ed;

    border-radius: 999px;

    background: #fff;

    color: #858f9f;

    font-size: 8px;

    text-align: center;
}


.browser-avatar {
    justify-self: end;

    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: #e8ecf3;
    color: #566173;

    font-size: 8px;
    font-weight: 800;
}


.product-app {
    display: grid;

    grid-template-columns:
        130px
        minmax(0, 1fr)
        145px;

    min-height: 445px;
}


.product-sidebar {
    display: flex;
    flex-direction: column;

    padding:
        19px 13px;

    border-right:
        1px solid #e7ebf1;

    background: #f8fafc;
}


.tenant-brand {
    display: flex;
    align-items: center;

    gap: 8px;
}


.tenant-brand > span {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: #19202f;
    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


.tenant-brand > div {
    display: flex;
    flex-direction: column;
}


.tenant-brand strong {
    font-size: 9px;
}


.tenant-brand small {
    color: #98a0ad;

    font-size: 7px;
}


.product-sidebar nav {
    display: grid;

    gap: 5px;

    margin-top: 26px;
}


.product-sidebar nav > div {
    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 9px;

    border-radius: 7px;

    color: #7c8696;

    font-size: 8px;
    font-weight: 650;
}


.product-sidebar nav > div.active {
    background: #e9edf4;
    color: #1b2231;
}


.product-sidebar nav i {
    width: 5px;
    height: 5px;

    border-radius: 999px;

    background: currentColor;
}


.product-help {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: auto;

    padding: 9px;

    border:
        1px solid #e2e7ee;

    border-radius: 8px;

    background: #fff;
}


.product-help > span {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    flex:
        0 0 24px;

    border-radius: 7px;

    background: var(--primary-soft);
    color: var(--primary);

    font-size: 9px;
    font-weight: 800;
}


.product-help > div {
    display: flex;
    flex-direction: column;
}


.product-help strong {
    font-size: 7px;
}


.product-help small {
    color: #9ba4b2;

    font-size: 6px;
}


.product-content {
    position: relative;

    padding:
        25px 22px 22px;
}


.product-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.product-content-head small {
    display: block;

    color: #9aa3b1;

    font-size: 7px;
}


.product-content-head h2 {
    margin:
        2px 0 0;

    font-size: 22px;

    letter-spacing: -.035em;
}


.mobile-avatar {
    display: none;

    width: 33px;
    height: 33px;

    place-items: center;

    border-radius: 9px;

    background: #ebeff5;

    font-size: 9px;
    font-weight: 800;
}


.required-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 23px;
}


.required-heading > div {
    display: flex;
    align-items: baseline;

    gap: 8px;
}


.required-heading span {
    color: #7c8797;

    font-size: 7px;
}


.required-heading strong {
    font-size: 9px;
}


.required-heading > i {
    padding:
        4px 7px;

    border-radius: 5px;

    background: var(--warning-soft);
    color: var(--warning);

    font-style: normal;
    font-size: 6px;
    font-weight: 750;
}


.product-training-item {
    display: grid;

    grid-template-columns:
        38px
        1fr
        30px;

    align-items: center;

    gap: 11px;

    margin-top: 10px;

    padding: 12px;

    border:
        1px solid #e2e7ee;

    border-radius: 10px;

    background: #fff;
}


.training-symbol {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;
}


.training-symbol.safety {
    background: var(--primary-soft);
    color: var(--primary);
}


.training-symbol.policy {
    background: var(--aqua-soft);
    color: var(--aqua-dark);
}


.product-training-item > div {
    min-width: 0;
}


.product-training-item small {
    display: block;

    color: #8994a6;

    font-size: 5px;
    font-weight: 800;

    letter-spacing: .05em;
}


.product-training-item strong {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.product-training-item div > span {
    display: block;

    margin-top: 3px;

    color: #9aa3b2;

    font-size: 6px;
}


.state {
    display: inline-flex;

    width: fit-content;

    margin-top: 6px;

    padding:
        3px 5px;

    border-radius: 4px;

    font-style: normal;
    font-size: 5px;
    font-weight: 800;

    letter-spacing: .05em;

    text-transform: uppercase;
}


.state.in-progress {
    background: var(--primary-soft);
    color: var(--primary);
}


.state.not-started {
    background: #f0f2f5;
    color: #687384;
}


.state.complete {
    background: var(--success-soft);
    color: var(--success);
}


.product-training-item > button {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border:
        1px solid #dde3eb;

    border-radius: 8px;

    background: #f8fafc;
    color: #455166;

    font-size: 10px;
}


.product-status-rail {
    padding:
        23px 15px;

    border-left:
        1px solid #e7ebf1;

    background:
        linear-gradient(
            180deg,
            #fbfcfe,
            #f7f9fc
        );
}


.rail-label {
    color: #8f99a8;

    font-size: 7px;
    font-weight: 750;

    letter-spacing: .07em;

    text-transform: uppercase;
}


.rail-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 15px;

    padding-bottom: 14px;

    border-bottom:
        1px solid #e5e9ef;
}


.rail-stat span {
    color: #8a94a4;

    font-size: 7px;
}


.rail-stat strong {
    font-size: 18px;

    letter-spacing: -.04em;
}


.rail-health {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 18px;

    padding:
        8px;

    border-radius: 7px;

    background: var(--aqua-soft);

    color: var(--aqua-dark);

    font-size: 6px;
    font-weight: 700;
}


.rail-health i {
    width: 6px;
    height: 6px;

    border-radius: 999px;

    background: var(--aqua);
}


.product-floating-status {
    position: absolute;

    top: 93px;
    right: -25px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(11, 16, 32, .09);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .98);

    box-shadow: var(--shadow-medium);
}


.product-floating-status > span {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: var(--success-soft);
    color: var(--success);

    font-size: 9px;
    font-weight: 800;
}


.product-floating-status > div {
    display: flex;
    flex-direction: column;
}


.product-floating-status strong {
    font-size: 7px;
}


.product-floating-status small {
    color: #96a0ae;

    font-size: 6px;
}


.product-mobile-nav {
    display: none;
}


/* =========================================================
   SIGNAL STRIP
   ========================================================= */

.signal-strip {
    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);

    background: #fff;
}


.signal-strip .container {
    min-height: 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.signal-strip .container > span {
    color: var(--primary);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.signal-strip .container > div {
    display: flex;
    align-items: center;

    gap: 14px;
}


.signal-strip strong {
    color: #626d7d;

    font-size: 11px;
    font-weight: 650;
}


.signal-strip i {
    width: 3px;
    height: 3px;

    border-radius: 999px;

    background: #b6bfcb;
}


/* =========================================================
   SHARED SECTION HEADINGS
   ========================================================= */

.section-heading-v12 {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .52fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 32px;
}


.section-heading-v12.compact {
    margin-bottom: 27px;
}


.section-heading-v12 h2,
.content-v12-section h2,
.decision-v12-section h2 {
    margin: 0;

    max-width: 760px;

    font-size:
        clamp(
            38px,
            4vw,
            55px
        );

    line-height: 1;

    letter-spacing: -.055em;
}


.section-heading-v12 > p {
    margin: 0;

    color: var(--ink-soft);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   ROLE EXPERIENCE
   ========================================================= */

.product-experience-section {
    padding:
        78px 0 84px;

    background: #fff;
}


.role-tabs {
    display: flex;

    gap: 6px;

    width: fit-content;

    margin-bottom: 14px;

    padding: 5px;

    border:
        1px solid var(--line);

    border-radius: 11px;

    background: #f3f6fa;
}


.role-tabs button {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 38px;

    padding:
        0 13px;

    border: 0;

    border-radius: 7px;

    background: transparent;
    color: #687487;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}


.role-tabs button span {
    color: #9ca6b5;

    font-family:
        ui-monospace,
        monospace;

    font-size: 8px;
}


.role-tabs button.active {
    background: #fff;
    color: var(--ink);

    box-shadow:
        0 2px 8px
        rgba(11, 16, 32, .06);
}


.role-tabs button.active span {
    color: var(--primary);
}


.role-product-shell {
    overflow: hidden;

    border:
        1px solid var(--line);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #f7f9fc,
            #eef2f8
        );
}


.role-panel {
    display: grid;

    grid-template-columns:
        minmax(280px, .58fr)
        minmax(520px, 1fr);

    align-items: center;

    gap: 50px;

    min-height: 435px;

    padding:
        38px 42px;

    animation:
        rolePanelIn
        200ms ease;
}


@keyframes rolePanelIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.role-copy > span {
    color: var(--primary);

    font-family:
        ui-monospace,
        monospace;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .09em;
}


.role-copy h3 {
    max-width: 390px;

    margin:
        12px 0 0;

    font-size:
        clamp(
            28px,
            3vw,
            42px
        );

    line-height: 1.02;

    letter-spacing: -.05em;
}


.role-copy > p {
    max-width: 410px;

    margin:
        14px 0 0;

    color: var(--ink-soft);

    font-size: 13px;
    line-height: 1.65;
}


.role-copy ul {
    display: grid;

    gap: 9px;

    margin-top: 23px;
}


.role-copy li {
    position: relative;

    padding-left: 16px;

    color: #5e697a;

    font-size: 11px;
}


.role-copy li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 6px;

    width: 6px;
    height: 6px;

    border-radius: 2px;

    background: var(--aqua);
}


.role-screen {
    min-height: 330px;

    padding: 21px;

    border:
        1px solid
        rgba(11, 16, 32, .10);

    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 20px 48px
        rgba(11, 16, 32, .07);
}


.role-screen-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.role-screen-top > div {
    display: flex;
    flex-direction: column;
}


.role-screen-top small {
    color: #9aa4b3;

    font-size: 8px;
}


.role-screen-top strong {
    font-size: 17px;
}


.role-screen-top > span {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #edf1f6;

    font-size: 8px;
    font-weight: 800;
}


.role-screen-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 24px;
}


.role-screen-title strong {
    font-size: 11px;
}


.role-screen-title small {
    color: #929cac;

    font-size: 8px;
}


.screen-task {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 10px;

    padding: 14px;

    border:
        1px solid #e4e8ef;

    border-radius: 9px;
}


.screen-task > div {
    display: flex;
    flex-direction: column;
}


.screen-task small {
    color: var(--primary);

    font-size: 6px;
    font-weight: 800;
}


.screen-task strong {
    margin-top: 3px;

    font-size: 10px;
}


.screen-task div > span {
    margin-top: 3px;

    color: #96a0af;

    font-size: 7px;
}


.screen-task > div:last-child {
    align-items: flex-end;
}


.screen-task b {
    margin-top: 8px;

    color: var(--ink);

    font-size: 8px;
}


/* SUPERVISOR */

.supervisor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 19px;

    border-bottom:
        1px solid #e4e8ef;
}


.supervisor-top > div:first-child {
    display: flex;
    flex-direction: column;
}


.supervisor-top small {
    color: #98a2b1;

    font-size: 8px;
}


.supervisor-top strong {
    font-size: 17px;
}


.compliance-ring {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border:
        5px solid #e7ebff;

    border-top-color: var(--primary);
    border-right-color: var(--primary);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
}


.supervisor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        12px 0;

    border-bottom:
        1px solid #edf0f4;
}


.supervisor-row > span {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #626d7d;

    font-size: 9px;
}


.supervisor-row i {
    width: 7px;
    height: 7px;

    border-radius: 999px;
}


.supervisor-row.healthy i {
    background: var(--success);
}


.supervisor-row.warning i {
    background: #e0a04c;
}


.supervisor-row.danger i {
    background: #e36666;
}


.supervisor-row strong {
    font-size: 9px;
}


.attention-list {
    margin-top: 18px;
}


.attention-list > span {
    color: #8c97a7;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.attention-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 8px;

    padding:
        9px 11px;

    border-radius: 8px;

    background: #f6f8fb;
}


.attention-list strong {
    font-size: 8px;
}


.attention-list small {
    color: #8d98a8;

    font-size: 7px;
}


/* ADMIN */

.admin-screen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.admin-screen-head > div {
    display: flex;
    flex-direction: column;
}


.admin-screen-head small {
    color: #9aa4b3;

    font-size: 8px;
}


.admin-screen-head strong {
    font-size: 27px;

    letter-spacing: -.04em;
}


.admin-screen-head > span {
    padding:
        5px 8px;

    border-radius: 5px;

    background: var(--success-soft);
    color: var(--success);

    font-size: 7px;
    font-weight: 700;
}


.admin-screen-metrics {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin-top: 16px;
}


.admin-screen-metrics article {
    padding: 12px;

    border:
        1px solid #e4e8ef;

    border-radius: 8px;
}


.admin-screen-metrics span {
    display: block;

    color: #98a2b1;

    font-size: 7px;
}


.admin-screen-metrics strong {
    display: block;

    margin-top: 4px;

    font-size: 16px;
}


.records-table {
    margin-top: 17px;

    overflow: hidden;

    border:
        1px solid #e4e8ef;

    border-radius: 8px;
}


.records-table > div {
    display: grid;

    grid-template-columns:
        1fr
        1.4fr
        auto;

    align-items: center;

    gap: 10px;

    padding:
        9px 11px;

    border-bottom:
        1px solid #edf0f4;
}


.records-table > div:last-child {
    border-bottom: 0;
}


.records-table-head {
    background: #f6f8fb;

    color: #949eac;

    font-size: 7px;
}


.records-table strong,
.records-table > div > span {
    font-size: 7px;
}


.records-table i {
    padding:
        4px 6px;

    border-radius: 4px;

    font-style: normal;
    font-size: 6px;
    font-weight: 700;
}


.records-table i.complete {
    background: var(--success-soft);
    color: var(--success);
}


.records-table i.due {
    background: var(--warning-soft);
    color: var(--warning);
}


.admin-screen > button {
    width: 100%;

    margin-top: 12px;

    padding: 9px;

    border:
        1px solid #dde3eb;

    border-radius: 7px;

    background: #f8fafc;
    color: #536074;

    font-size: 8px;
    font-weight: 700;
}


/* =========================================================
   OPERATIONS / INCLUDED
   ========================================================= */

.operations-v12-section {
    padding:
        78px 0;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(79, 102, 255, .14),
            transparent 28%
        ),
        var(--dark);

    color: #fff;
}


.operations-v12-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        390px;

    align-items: center;

    gap: 70px;
}


.operations-v12-copy h2 {
    margin: 0;

    max-width: 730px;

    color: #fff;

    font-size:
        clamp(
            39px,
            4vw,
            55px
        );

    line-height: 1;

    letter-spacing: -.055em;
}


.operations-v12-copy h2 strong {
    display: block;

    color: #91a2ff;

    font-weight: inherit;
}


.operations-v12-copy > p {
    max-width: 620px;

    margin:
        17px 0 0;

    color: #aab4c6;

    font-size: 14px;
    line-height: 1.65;
}


.operations-map {
    margin-top: 28px;

    border-top:
        1px solid
        rgba(255, 255, 255, .12);
}


.operations-map article {
    display: grid;

    grid-template-columns:
        38px
        1fr
        auto;

    align-items: center;

    gap: 14px;

    padding:
        17px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .10);
}


.operations-map article > span {
    color: #7987a0;

    font-family:
        ui-monospace,
        monospace;

    font-size: 8px;
}


.operations-map article > div {
    min-width: 0;
}


.operations-map strong {
    display: block;

    font-size: 12px;
}


.operations-map p {
    margin:
        4px 0 0;

    color: #8e99ad;

    font-size: 10px;
    line-height: 1.5;
}


.operations-map small {
    color: #67758f;

    font-family:
        ui-monospace,
        monospace;

    font-size: 7px;
    letter-spacing: .07em;
}


.system-console {
    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .045);

    box-shadow:
        0 24px 65px
        rgba(0, 0, 0, .18);
}


.console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        14px 16px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .09);
}


.console-head > div {
    display: flex;
    align-items: center;

    gap: 8px;
}


.console-head i {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: var(--aqua);

    box-shadow:
        0 0 0 4px
        rgba(40, 199, 183, .12);
}


.console-head strong {
    color: #dce4f2;

    font-size: 10px;
}


.console-head > span {
    color: var(--aqua);

    font-family:
        ui-monospace,
        monospace;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .08em;
}


.console-tenant {
    padding:
        22px 18px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .09);
}


.console-tenant small {
    display: block;

    color: #65748d;

    font-family:
        ui-monospace,
        monospace;

    font-size: 7px;
}


.console-tenant strong {
    display: block;

    margin-top: 7px;

    color: #fff;

    font-size: 15px;

    letter-spacing: -.02em;
}


.console-status-list {
    padding:
        5px 18px;
}


.console-status-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        11px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);
}


.console-status-list > div:last-child {
    border-bottom: 0;
}


.console-status-list span {
    color: #8190a7;

    font-size: 9px;
}


.console-status-list strong {
    color: #cfd7e4;

    font-size: 9px;
}


.console-status-list strong.healthy {
    color: #6fdbc5;
}


.console-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        13px 18px;

    background:
        rgba(255, 255, 255, .035);
}


.console-footer span {
    color: #79879d;

    font-size: 7px;
}


.console-footer i {
    color: #6fdbc5;

    font-style: normal;
    font-size: 7px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.content-v12-section {
    padding:
        76px 0;

    background: #fff;
}


.content-v12-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(450px, .72fr);

    align-items: center;

    gap: 86px;
}


.content-v12-section h2 {
    max-width: 580px;
}


.content-v12-section p {
    max-width: 590px;

    margin:
        16px 0 0;

    color: var(--ink-soft);

    font-size: 14px;
    line-height: 1.65;
}


.content-v12-section > .container > div:first-child > small {
    display: block;

    margin-top: 18px;

    color: #8d97a6;

    font-size: 9px;
}


.content-format-list {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 22px;
}


.content-format-list span {
    padding:
        6px 9px;

    border:
        1px solid var(--line);

    border-radius: 6px;

    background: #f6f8fb;

    color: #5e697b;

    font-size: 9px;
    font-weight: 650;
}


.library-v12 {
    overflow: hidden;

    border:
        1px solid var(--line);

    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 18px 48px
        rgba(11, 16, 32, .07);
}


.library-v12-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    padding:
        17px 19px;

    border-bottom:
        1px solid #e6eaf0;
}


.library-v12-head > div {
    display: flex;
    flex-direction: column;
}


.library-v12-head small {
    color: var(--primary);

    font-family:
        ui-monospace,
        monospace;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .08em;
}


.library-v12-head strong {
    margin-top: 4px;

    font-size: 13px;
}


.library-v12-head > span {
    color: #9ca5b3;

    font-size: 7px;
}


.library-v12 article {
    display: grid;

    grid-template-columns:
        38px
        1fr
        auto;

    align-items: center;

    gap: 11px;

    padding:
        13px 18px;

    border-bottom:
        1px solid #edf0f4;
}


.library-v12 article:last-child {
    border-bottom: 0;
}


.file-type {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    font-size: 7px;
    font-weight: 800;
}


.file-type.scorm {
    background: var(--primary-soft);
    color: var(--primary);
}


.file-type.video {
    background: var(--aqua-soft);
    color: var(--aqua-dark);
}


.file-type.policy {
    background: var(--warning-soft);
    color: var(--warning);
}


.file-type.presentation {
    background: #f0ebff;
    color: #755ac7;
}


.library-v12 article > div {
    display: flex;
    flex-direction: column;
}


.library-v12 article strong {
    font-size: 9px;
}


.library-v12 article small {
    margin-top: 2px;

    color: #99a2b0;

    font-size: 7px;
}


.library-v12 article > i {
    padding:
        4px 6px;

    border-radius: 4px;

    background: var(--success-soft);
    color: var(--success);

    font-style: normal;
    font-size: 6px;
    font-weight: 700;
}


/* =========================================================
   JOURNEY
   ========================================================= */

.how-v12-section {
    padding:
        72px 0;

    background: var(--bg);
}


.journey-line {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid var(--line-strong);
}


.journey-line article {
    position: relative;

    min-height: 145px;

    padding:
        22px 28px 12px 0;

    border-right:
        1px solid var(--line);
}


.journey-line article + article {
    padding-left: 28px;
}


.journey-line article:last-child {
    border-right: 0;
}


.journey-line article::before {
    content: "";

    position: absolute;

    top: -4px;
    left: 0;

    width: 8px;
    height: 8px;

    border-radius: 999px;

    background: var(--primary);
}


.journey-line article + article::before {
    left: 28px;
}


.journey-line span {
    color: var(--primary);

    font-family:
        ui-monospace,
        monospace;

    font-size: 8px;
    font-weight: 800;
}


.journey-line strong {
    display: block;

    margin-top: 13px;

    font-size: 15px;
}


.journey-line p {
    margin:
        7px 0 0;

    color: var(--ink-soft);

    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   PUBLIC PRICING COMPONENT
   ========================================================= */

.us-v12 .public-pricing-section {
    padding:
        74px 0 78px;

    border-top:
        1px solid var(--line);

    background: #fff;
}


.us-v12 .pricing-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .52fr);

    align-items: end;

    gap: 60px;

    margin-bottom: 31px;
}


.us-v12 .pricing-intro h2 {
    margin: 0;

    max-width: 680px;

    font-size:
        clamp(
            38px,
            4vw,
            54px
        );

    line-height: 1;

    letter-spacing: -.055em;
}


.us-v12 .pricing-intro p {
    margin: 0;

    color: var(--ink-soft);

    font-size: 13px;
    line-height: 1.6;
}


.us-v12 .pricing-advisor-link {
    margin-top: 13px;

    color: var(--primary);

    font-size: 10px;
}


.us-v12 .pricing-ledger {
    border-top:
        1px solid var(--line-strong);
}


.us-v12 .pricing-ledger-head,
.us-v12 .pricing-ledger-row {
    display: grid;

    grid-template-columns:
        140px
        minmax(250px, 1fr)
        125px
        125px
        115px;

    align-items: center;

    gap: 20px;
}


.us-v12 .pricing-ledger-head {
    min-height: 38px;

    color: #929cab;

    font-family:
        ui-monospace,
        monospace;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;
}


.us-v12 .pricing-ledger-row {
    min-height: 88px;

    border-top:
        1px solid var(--line);
}


.us-v12 .pricing-ledger-row:last-child {
    border-bottom:
        1px solid var(--line);
}


.us-v12 .pricing-ledger-row > div:first-child strong {
    font-size: 15px;

    letter-spacing: -.02em;
}


.us-v12 .pricing-ledger-row > p {
    margin: 0;

    color: #697486;

    font-size: 10px;
    line-height: 1.5;
}


.us-v12 .pricing-number strong {
    font-size: 15px;
}


.us-v12 .pricing-number small {
    color: #a1a9b5;

    font-size: 6px;
}


.us-v12 .pricing-action {
    width: 100%;

    min-height: 35px;

    border:
        1px solid var(--line-strong);

    border-radius: 7px;

    background: #fff;
    color: var(--ink);

    font-size: 8px;
    font-weight: 700;

    cursor: pointer;
}


.us-v12 .pricing-action:hover {
    border-color: var(--primary);

    background: var(--primary);
    color: #fff;
}


.us-v12 .pricing-footnote {
    margin-top: 12px;

    color: #9ca5b3;

    font-size: 7px;
}


/* =========================================================
   DECISION / FAQ
   ========================================================= */

.decision-v12-section {
    padding:
        72px 0;

    border-top:
        1px solid var(--line);

    background: var(--bg);
}


.decision-v12-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        390px;

    align-items: start;

    gap: 70px;
}


.faq-v12 h2 {
    max-width: 590px;
}


.us-v12 .faq-list {
    margin-top: 24px;

    border-top:
        1px solid var(--line-strong);
}


.us-v12 .faq-item {
    border-color: var(--line);
}


.us-v12 .faq-question {
    padding:
        18px 0;
}


.us-v12 .faq-question span {
    font-size: 13px;
}


.us-v12 .faq-question i {
    width: 28px;
    height: 28px;

    flex:
        0 0 28px;

    border-radius: 7px;

    background: #e9edf4;

    font-size: 15px;
}


.us-v12 .faq-answer p {
    max-width: 650px;

    margin:
        0 0 19px;

    color: var(--ink-soft);

    font-size: 11px;
    line-height: 1.6;
}


.decision-card {
    padding: 28px;

    border-radius: 14px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(79, 102, 255, .24),
            transparent 34%
        ),
        var(--dark);

    color: #fff;

    box-shadow:
        0 22px 60px
        rgba(11, 16, 32, .15);
}


.decision-card > span {
    color: #93a2ff;

    font-family:
        ui-monospace,
        monospace;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .09em;
}


.decision-card h2 {
    margin:
        13px 0 0;

    color: #fff;

    font-size:
        35px;

    line-height: 1.02;
}


.decision-card p {
    margin:
        14px 0 0;

    color: #aeb8ca;

    font-size: 12px;
    line-height: 1.6;
}


.decision-card .button {
    width: 100%;

    margin-top: 22px;

    background: var(--primary);
}


.decision-card .button:hover {
    background: var(--primary-dark);
}


.decision-advisor-link {
    width: 100%;

    margin-top: 9px;

    padding: 11px;

    border:
        1px solid
        rgba(255, 255, 255, .13);

    border-radius: 8px;

    background: transparent;
    color: #c5cede;

    font-size: 9px;
    font-weight: 650;

    cursor: pointer;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-v12 {
    padding:
        24px 0;

    border-top:
        1px solid var(--line);

    background: #fff;
}


.footer-v12 .brand-mark {
    width: 29px;
    height: 29px;
}


.footer-v12 .footer-meta {
    color: #929cac;

    font-size: 8px;
}


.footer-v12 .footer-meta a {
    color: #657084;

    font-weight: 650;
}


/* =========================================================
   CONFIGURATOR V12
   ========================================================= */

.us-v12 .configurator {
    width:
        min(
            930px,
            calc(100% - 28px)
        );

    border:
        1px solid
        rgba(255, 255, 255, .18);

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 40px 110px
        rgba(4, 9, 23, .30);
}


.us-v12 .configurator::backdrop {
    background:
        rgba(4, 9, 23, .62);

    backdrop-filter:
        blur(7px);
}


.us-v12 .configurator-top {
    padding:
        17px 21px;

    border-color: var(--line);

    background:
        rgba(255, 255, 255, .98);
}


.us-v12 .configurator-brand .brand-mark {
    border-radius: 8px;
}


.us-v12 .configurator-progress-track {
    height: 3px;

    background: #e8ecf2;
}


.us-v12 .configurator-progress-track span {
    background:
        linear-gradient(
            90deg,
            var(--primary),
            #7c8cff
        );
}


.us-v12 .configurator-form {
    padding:
        38px 43px 24px;
}


.us-v12 .question-kicker {
    color: var(--primary);
}


.us-v12 .configurator-step h2 {
    font-size:
        clamp(
            30px,
            4vw,
            42px
        );
}


.us-v12 .choice-grid {
    gap: 10px;

    margin-top: 27px;
}


.us-v12 .choice-card {
    min-height: 138px;

    padding: 17px;

    border-radius: 10px;

    background: #fff;
}


.us-v12 .choice-card:hover {
    border-color:
        rgba(79, 102, 255, .35);
}


.us-v12 .choice-card:has(input:checked) {
    border-color: var(--primary);

    background:
        linear-gradient(
            180deg,
            #fff,
            #f3f5ff
        );

    box-shadow:
        0 0 0 2px
        rgba(79, 102, 255, .07);
}


.us-v12 .choice-card:has(input:checked)
.choice-check {
    border-color: var(--primary);

    background: var(--primary);
}


.us-v12 .choice-card:has(input:checked)
.choice-icon {
    background: var(--primary-soft);
    color: var(--primary);
}


.us-v12 .choice-card-compact {
    min-height: 92px;
}


.us-v12 .choice-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 18px;

    border-radius: 8px;
}


.us-v12 .builder-field input[type="text"],
.us-v12 .save-fields input,
.us-v12 .color-field {
    border-radius: 8px;
}


.us-v12 .builder-field input:focus,
.us-v12 .save-fields input:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(79, 102, 255, .08);
}


.us-v12 .brand-preview {
    border-radius: 12px;

    box-shadow:
        0 17px 45px
        rgba(11, 16, 32, .08);
}


.us-v12 .brand-preview-card {
    border-radius: 8px;
}


.us-v12 .brand-preview-card > div:not(.preview-state) {
    display: none;
}


.preview-state {
    display: inline-flex;

    width: fit-content;

    margin-top: 10px;

    padding:
        4px 6px;

    border-radius: 4px;

    background: var(--primary-soft);
    color: var(--primary);

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
}


.us-v12 .brand-preview-action {
    border-radius: 8px;
}


.us-v12 .result-badge,
.us-v12 .result-need-pill {
    border-radius: 5px;
}


.us-v12 .result-badge {
    background: var(--aqua-soft);
    color: var(--aqua-dark);
}


.us-v12 .result-platform,
.us-v12 .result-grid,
.us-v12 .save-configuration {
    border-radius: 10px;
}


.us-v12 .save-configuration {
    background: #f5f7fa;
}


.us-v12 .result-advisor-link {
    border-radius: 7px;
}


.us-v12 .result-advisor-link > span {
    border-radius: 5px;

    background: var(--primary-soft);
    color: var(--primary);
}


/* =========================================================
   MOBILE ACTION DOCK
   ========================================================= */

.mobile-action-dock {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .hero-v12-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .hero-v12-copy {
        max-width: 700px;
    }


    .hero-product-v12 {
        max-width: 790px;
    }


    .role-panel {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .role-copy {
        max-width: 620px;
    }


    .operations-v12-grid,
    .decision-v12-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .system-console,
    .decision-card {
        max-width: 620px;
    }


    .content-v12-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .library-v12 {
        max-width: 650px;
    }

}


/* =========================================================
   MOBILE NAV BREAKPOINT
   ========================================================= */

@media (max-width: 980px) {

    .us-v12 .desktop-nav,
    .us-v12 .header-actions > .button {
        display: none;
    }


    .us-v12 .menu-button {
        display: block;
    }


    .us-v12 .mobile-nav {
        border-radius: 12px;

        background: #fff;
    }


    .section-heading-v12,
    .us-v12 .pricing-intro {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .journey-line {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .journey-line article:nth-child(2) {
        border-right: 0;
    }


    .journey-line article:nth-child(3),
    .journey-line article:nth-child(4) {
        border-top:
            1px solid var(--line);
    }


    .us-v12 .pricing-ledger-head {
        display: none;
    }


    .us-v12 .pricing-ledger-row {
        grid-template-columns:
            1fr
            120px
            120px
            105px;

        gap: 15px;

        padding:
            17px 0;
    }


    .us-v12 .pricing-ledger-row > p {
        grid-column:
            1 / -1;

        grid-row:
            2;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    html {
        scroll-padding-top: 68px;
    }


    body.us-v12 {
        padding-bottom:
            calc(
                72px +
                env(safe-area-inset-bottom)
            );
    }


    .us-v12 .container {
        width:
            calc(100% - 28px);
    }


    .us-v12 .site-header {
        height: 64px;
    }


    .us-v12 .header-inner {
        gap: 12px;
    }


    .us-v12 .brand-copy span {
        display: inline;
    }


    .us-v12 .header-signin {
        margin-left: auto;

        font-size: 12px;
    }


    .us-v12 .menu-button {
        width: 40px;
        height: 40px;
    }


    /* HERO */

    .hero-v12 {
        padding:
            103px 0 48px;

        background:
            linear-gradient(
                180deg,
                #f6f8fc,
                #eef3f8
            );
    }


    .hero-v12::before {
        display: none;
    }


    .hero-v12-grid {
        gap: 35px;
    }


    .signal-label {
        margin-bottom: 16px;

        font-size: 8px;
    }


    .hero-v12 h1 {
        max-width: 390px;

        font-size:
            clamp(
                45px,
                13vw,
                59px
            );

        line-height: .93;
    }


    .hero-v12-lead {
        max-width: 360px;

        margin-top: 20px;

        font-size: 16px;
    }


    .hero-v12-description {
        font-size: 14px;
        line-height: 1.58;
    }


    .hero-v12-actions {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        margin-top: 23px;
    }


    .hero-v12-actions .button {
        width: 100%;
    }


    .hero-v12-proof {
        display: grid;

        grid-template-columns:
            repeat(2, max-content);

        gap:
            9px 17px;
    }


    /* MOBILE PRODUCT — APP-LIKE */

    .hero-product-v12 {
        width: 100%;

        padding-bottom: 3px;
    }


    .product-top-label {
        justify-content: center;

        margin-bottom: 10px;
    }


    .product-top-label > i {
        display: none;
    }


    .product-stage {
        width:
            min(
                100%,
                365px
            );

        margin-inline: auto;

        overflow: hidden;

        border:
            5px solid
            #111829;

        border-radius: 29px;

        box-shadow:
            0 25px 65px
            rgba(11, 16, 32, .18);
    }


    .product-stage::before {
        content: "";

        position: absolute;

        z-index: 20;

        top: 10px;
        left: 50%;

        width: 66px;
        height: 19px;

        border-radius: 999px;

        background: #111829;

        transform:
            translateX(-50%);
    }


    .product-browser-bar,
    .product-sidebar,
    .product-status-rail {
        display: none;
    }


    .product-app {
        display: block;

        min-height: 0;
    }


    .product-content {
        min-height: 510px;

        padding:
            50px 16px 72px;
    }


    .mobile-avatar {
        display: grid;
    }


    .product-content-head h2 {
        font-size: 23px;
    }


    .required-heading {
        margin-top: 20px;
    }


    .product-training-item {
        grid-template-columns:
            39px
            1fr
            31px;

        gap: 10px;

        padding: 12px;
    }


    .product-training-item strong {
        font-size: 9px;
    }


    .product-training-item div > span {
        font-size: 7px;
    }


    .product-floating-status {
        display: none;
    }


    .product-mobile-nav {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

        height: 62px;

        padding:
            6px 6px 8px;

        border-top:
            1px solid #e4e8ef;

        background:
            rgba(255, 255, 255, .97);
    }


    .product-mobile-nav > span {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 2px;

        color: #929cab;

        font-size: 6px;
        font-weight: 650;
    }


    .product-mobile-nav b {
        font-size: 11px;
    }


    .product-mobile-nav .active {
        color: var(--primary);
    }


    /* SIGNAL STRIP */

    .signal-strip .container {
        min-height: 0;

        align-items: flex-start;
        flex-direction: column;

        gap: 10px;

        padding:
            17px 0;
    }


    .signal-strip .container > div {
        flex-wrap: wrap;

        gap:
            7px 11px;
    }


    .signal-strip i {
        display: none;
    }


    .signal-strip strong {
        font-size: 9px;
    }


    /* SECTIONS */

    .product-experience-section,
    .operations-v12-section,
    .content-v12-section,
    .how-v12-section,
    .decision-v12-section,
    .us-v12 .public-pricing-section {
        padding:
            52px 0;
    }


    .section-heading-v12 {
        margin-bottom: 24px;
    }


    .section-heading-v12 h2,
    .content-v12-section h2,
    .decision-v12-section h2,
    .operations-v12-copy h2 {
        font-size:
            clamp(
                34px,
                10vw,
                43px
            );
    }


    /* TABS */

    .role-tabs {
        width: 100%;

        overflow-x: auto;

        scrollbar-width: none;
    }


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


    .role-tabs button {
        flex: 0 0 auto;
    }


    .role-product-shell {
        border-radius: 12px;
    }


    .role-panel {
        min-height: 0;

        padding:
            24px 19px;

        gap: 24px;
    }


    .role-copy h3 {
        font-size: 31px;
    }


    .role-screen {
        min-height: 0;

        padding: 16px;

        border-radius: 10px;
    }


    .screen-task {
        align-items: flex-start;
        flex-direction: column;
    }


    .screen-task > div:last-child {
        width: 100%;

        align-items: flex-start;
    }


    .admin-screen-metrics {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .records-table > div {
        grid-template-columns:
            1fr auto;
    }


    .records-table > div > span:nth-child(2) {
        display: none;
    }


    /* OPERATIONS */

    .operations-v12-grid {
        gap: 31px;
    }


    .operations-map article {
        grid-template-columns:
            30px
            1fr;
    }


    .operations-map article > small {
        display: none;
    }


    .system-console {
        border-radius: 10px;
    }


    /* CONTENT */

    .content-v12-grid {
        gap: 27px;
    }


    .library-v12 {
        border-radius: 10px;

        box-shadow: none;
    }


    /* JOURNEY */

    .journey-line {
        grid-template-columns: 1fr;
    }


    .journey-line article,
    .journey-line article + article {
        min-height: 0;

        padding:
            20px 0;

        border-right: 0;

        border-top:
            1px solid var(--line);
    }


    .journey-line article:first-child {
        border-top: 0;
    }


    .journey-line article::before,
    .journey-line article + article::before {
        display: none;
    }


    /* PRICING */

    .us-v12 .pricing-ledger-row {
        grid-template-columns:
            1fr
            1fr;

        gap:
            12px;

        padding:
            19px 0;
    }


    .us-v12 .pricing-ledger-row > div:first-child,
    .us-v12 .pricing-ledger-row > p,
    .us-v12 .pricing-ledger-row > div:last-child {
        grid-column:
            1 / -1;
    }


    .us-v12 .pricing-ledger-row > p {
        grid-row: auto;
    }


    .us-v12 .pricing-action {
        min-height: 42px;
    }


    /* DECISION */

    .decision-v12-grid {
        gap: 30px;
    }


    .decision-card {
        padding: 24px;

        border-radius: 11px;
    }


    .decision-card h2 {
        font-size: 31px;
    }


    /* CONFIGURATOR */

    .us-v12 .configurator {
        width:
            calc(100% - 14px);

        max-height:
            calc(100dvh - 14px);

        border-radius: 14px;
    }


    .us-v12 .configurator-shell {
        max-height:
            calc(100dvh - 14px);
    }


    .us-v12 .configurator-form {
        padding:
            27px 17px 20px;
    }


    .us-v12 .choice-grid,
    .us-v12 .choice-grid-two,
    .us-v12 .choice-grid-needs {
        grid-template-columns: 1fr;
    }


    .us-v12 .choice-card {
        min-height: 88px;
    }


    .us-v12 .choice-card:not(
        .choice-card-compact
    ) {
        min-height: 105px;
    }


    .us-v12 .branding-grid {
        grid-template-columns: 1fr;

        gap: 27px;
    }


    .us-v12 .save-configuration {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 19px;
    }


    .us-v12 .save-fields {
        grid-template-columns: 1fr;
    }


    /* MOBILE DOCK */

    .mobile-action-dock {
        position: fixed;

        z-index: 1800;

        left: 8px;
        right: 8px;
        bottom:
            calc(
                8px +
                env(safe-area-inset-bottom)
            );

        display: grid;

        grid-template-columns:
            1fr
            auto;

        gap: 7px;

        padding: 7px;

        border:
            1px solid
            rgba(11, 16, 32, .12);

        border-radius: 13px;

        background:
            rgba(255, 255, 255, .95);

        box-shadow:
            0 15px 40px
            rgba(11, 16, 32, .15);

        backdrop-filter:
            blur(15px);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(12px);

        transition:
            opacity 170ms ease,
            transform 170ms ease,
            visibility 170ms ease;
    }


    .mobile-action-dock.is-visible {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }


    .mobile-action-dock button {
        min-height: 47px;

        padding:
            0 16px;

        border-radius: 8px;

        font-size: 11px;
        font-weight: 720;

        cursor: pointer;
    }


    .mobile-dock-primary {
        border: 0;

        background: var(--dark);
        color: #fff;
    }


    .mobile-dock-secondary {
        border:
            1px solid var(--line);

        background: #fff;
        color: var(--ink);
    }


    body.dialog-open
    .mobile-action-dock,
    body.fauna-advisor-open
    .mobile-action-dock {
        opacity: 0;
        visibility: hidden;

        pointer-events: none;
    }


    /*
     * Mobile uses the unified dock
     * instead of a second floating launcher.
     */

    body.us-v12
    > .fauna-advisor {
        display: none;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .hero-v12 h1 {
        font-size: 43px;
    }


    .hero-v12-proof {
        grid-template-columns: 1fr;
    }


    .admin-screen-metrics {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;
    }

}

/* =========================================================
   FAUNA USA — V12.1
   FINAL VISUAL POLISH
   ========================================================= */


/* =========================================================
   ADVISOR — ALIGN WITH V12 BRAND
   ========================================================= */

body.us-v12
> .fauna-advisor
.fauna-advisor-launcher {
    background: #0b1020;

    border-color:
        rgba(11, 16, 32, .14);

    box-shadow:
        0 14px 38px
        rgba(11, 16, 32, .16);
}


body.us-v12
> .fauna-advisor
.fauna-advisor-launcher
.fauna-advisor-mark {
    background: #4f66ff;
    color: #fff;
}


body.us-v12
.fauna-advisor-dialog
.fauna-advisor-identity
.fauna-advisor-mark {
    background: #4f66ff;
    color: #fff;
}


body.us-v12
.fauna-advisor-dialog
.fauna-advisor-panel {
    background: #f8faff;
}


body.us-v12
.fauna-advisor-dialog
.fauna-advisor-head {
    background: #fff;
}


body.us-v12
.fauna-advisor-dialog
.fauna-advisor-message.user > div {
    background: #0b1020;
}


body.us-v12
.fauna-advisor-dialog
.fauna-advisor-message.assistant > div {
    background: #f0f3f8;
}


body.us-v12
.fauna-advisor-dialog
.fauna-advisor-form button {
    background: #0b1020;
}


body.us-v12
.configurator
.advisor-inline-help > span,
body.us-v12
.result-advisor-link > span {
    background: #edf0ff !important;
    color: #4f66ff !important;
}


/* =========================================================
   PRODUCT PREVIEW — READABILITY
   ========================================================= */

.product-top-label {
    font-size: 9px;
}


.product-top-label > i {
    color: #778294;
}


.product-content-head small,
.required-heading span,
.rail-stat span {
    color: #778294;
}


.product-training-item small {
    color: #79869a;

    font-size: 6px;
}


.product-training-item strong {
    font-size: 9px;
}


.product-training-item div > span {
    color: #8995a7;

    font-size: 7px;
}


.product-sidebar nav > div {
    font-size: 8px;
}


.rail-label {
    color: #78859a;
}


.rail-stat span {
    font-size: 8px;
}


/* =========================================================
   DESKTOP — SLIGHT HERO BALANCE
   ========================================================= */

@media (min-width: 1051px) {

    .hero-v12 {
        padding-bottom: 68px;
    }


    .hero-v12-grid {
        gap: 58px;
    }


    .hero-product-v12 {
        transform:
            translateY(4px);
    }

}


/* =========================================================
   MOBILE — PRODUCT EARLIER IN FIRST VIEWPORT
   ========================================================= */

@media (max-width: 680px) {

    .hero-v12 {
        padding:
            94px 0 39px;
    }


    .hero-v12-grid {
        gap: 23px;
    }


    .signal-label {
        margin-bottom: 13px;
    }


    .hero-v12 h1 {
        font-size:
            clamp(
                43px,
                12.5vw,
                55px
            );
    }


    .hero-v12-lead {
        margin-top: 16px;

        font-size: 15px;
        line-height: 1.45;
    }


    .hero-v12-description {
        margin-top: 10px;

        font-size: 13px;
        line-height: 1.55;
    }


    .hero-v12-actions {
        margin-top: 19px;
    }


    /*
     * On mobile the product is already directly below.
     * A second large "See the product" button wastes
     * valuable first-screen space.
     */

    .hero-v12-actions
    .button-secondary {
        display: none;
    }


    .hero-v12-actions
    .button-primary {
        min-height: 52px;
    }


    .hero-v12-proof {
        display: flex;

        flex-wrap: nowrap;

        gap: 13px;

        margin-top: 16px;

        overflow-x: auto;

        scrollbar-width: none;
    }


    .hero-v12-proof::-webkit-scrollbar {
        display: none;
    }


    .hero-v12-proof > div {
        flex: 0 0 auto;

        font-size: 9px;
    }


    .hero-product-v12 {
        margin-top: 2px;
    }


    .product-top-label {
        margin-bottom: 8px;

        font-size: 7px;
    }


    .product-stage {
        width:
            min(
                100%,
                350px
            );
    }


    .product-content {
        min-height: 500px;

        padding-top: 47px;
    }

}


/* =========================================================
   SMALLER MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .hero-v12 {
        padding-top: 90px;
    }


    .hero-v12 h1 {
        font-size: 44px;
    }


    .hero-v12-description {
        font-size: 12.5px;
    }

}