@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap
}

:root {
    --green-900: #102D28;
    --green-800: #193D35;
    --ivory: #F7F5EF;
    --gold: #B69A62;
    --slate: #64716C;
    --line: #E6E5DD;
    --red: #B94D4D;
    --bg: #F7F5EF;
    --surface: #FFFFFF;
    --sunken: #EFEDE4;
    --ink: #14231F;
    --muted: #58655F;
    --rule: #E6E5DD;
    --brand: #193D35;
    --on-brand: #F7F5EF;
    --accent: #B69A62;
    --accent-ink: #7A6232;
    --deep: #102D28;
    --deep-ink: #EDEAE0;
    --deep-muted: #A9B8B1;
    --deep-rule: #2A4A42;
    --ok: #2F7A5B;
    --danger: #B94D4D;
    --r: 6px;
    --wrap: 1240px;
    --ease: cubic-bezier(.2,.7,.2,1);
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 8H2m5-5L2 8l5 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E")
}

    :root[data-theme="dark"] {
        --bg: #0B1E1A;
        --surface: #102621;
        --sunken: #0E2420;
        --ink: #EDEAE0;
        --muted: #9FADA7;
        --rule: #24413A;
        --brand: #B69A62;
        --on-brand: #102D28;
        --accent-ink: #D4BE8C;
        --deep: #071512;
        --ok: #5FBF93;
        --danger: #E07A7A
    }

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    color-scheme: light
}

    html[data-theme="dark"] {
        color-scheme: dark
    }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 1.0625rem/1.95 "Vazirmatn",Tahoma,sans-serif;
    overflow-x: clip;
    text-rendering: optimizeLegibility
}

img, svg {
    max-width: 100%
}

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

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none
}

p, dl, dd, figure {
    margin: 0
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    line-height: 1.5;
    text-wrap: balance
}

h1 {
    font-size: clamp(2.2rem,5vw,3.9rem);
    line-height: 1.35
}

h2 {
    font-size: clamp(1.65rem,3.2vw,2.6rem)
}

h3 {
    font-size: 1.2rem
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.skip {
    position: absolute;
    inset-inline-start: 12px;
    top: -80px;
    z-index: 100;
    background: var(--brand);
    color: var(--on-brand);
    padding: 8px 16px;
    border-radius: var(--r)
}

    .skip:focus {
        top: 12px
    }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(18px,4vw,40px)
}

.section {
    padding-block: clamp(64px,9vw,120px)
}

.sunk {
    background: var(--sunken)
}

.muted {
    color: var(--muted)
}

.lead {
    font-size: 1.12rem;
    color: var(--muted);
    max-width: 38em;
    margin-top: 18px
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--accent-ink)
}

    .eyebrow::before {
        content: "";
        width: 32px;
        height: 2px;
        background: var(--accent)
    }

    .eyebrow .num {
        font-weight: 800
    }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--r);
    font: 600 .97rem "Vazirmatn",Tahoma,sans-serif;
    cursor: pointer;
    transition: background .2s,border-color .2s,transform .2s var(--ease)
}

    .btn:active {
        transform: translateY(1px)
    }

.btn-primary {
    background: var(--brand);
    color: var(--on-brand)
}

    .btn-primary:hover {
        background: var(--deep);
        color: var(--deep-ink)
    }

:root[data-theme="dark"] .btn-primary:hover {
    background: #D4BE8C;
    color: #102D28
}

.btn-ghost {
    border-color: var(--rule);
    background: transparent
}

    .btn-ghost:hover {
        border-color: var(--ink)
    }

.deep .btn-ghost {
    border-color: var(--deep-rule);
    color: var(--deep-ink)
}

    .deep .btn-ghost:hover {
        border-color: var(--accent)
    }

.arr::after {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--arrow) center/contain no-repeat;
    mask: var(--arrow) center/contain no-repeat;
    transition: transform .2s var(--ease)
}

.arr:hover::after {
    transform: translateX(-4px)
}

.ledger {
    position: relative
}

    .ledger::before {
        content: "";
        position: absolute;
        inset: 0 -24px;
        pointer-events: none;
        background-image: linear-gradient(to left,transparent calc(100% - 1px),var(--rule) calc(100% - 1px));
        background-size: 96px 100%;
        background-repeat: repeat-x;
        opacity: .55;
        -webkit-mask-image: linear-gradient(to bottom,#000,transparent 90%);
        mask-image: linear-gradient(to bottom,#000,transparent 90%);
        translate: calc(var(--px,0) * -14px) 0;
        transition: translate .3s ease-out;
        animation: ledger-slide 6s linear infinite
    }

    .ledger > * {
        position: relative
    }

@keyframes ledger-slide {
    from {
        background-position-x: 0
    }

    to {
        background-position-x: 96px
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--rule)
}

.bar {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 72px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.mark {
    width: 34px;
    height: 34px;
    flex: none
}

.mark-s {
    width: 18px;
    height: 18px
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25
}

    .brand-text b {
        font-size: 1.25rem
    }

    .brand-text i {
        font-style: normal;
        font-size: .66rem;
        letter-spacing: .3em;
        color: var(--muted);
        text-transform: uppercase;
        direction: ltr;
        text-align: start
    }

.nav ul {
    display: flex;
    gap: 4px
}

.nav a {
    position: relative;
    display: block;
    padding: 8px 14px;
    font-size: .95rem;
    color: var(--muted);
    transition: color .2s
}

    .nav a:hover, .nav a[aria-current] {
        color: var(--ink)
    }

        .nav a[aria-current]::after {
            content: "";
            position: absolute;
            inset-inline: 14px;
            bottom: 0;
            height: 2px;
            background: var(--accent)
        }

.nav-cta {
    display: none
}

.bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto
}

.icon-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: transparent
}

    .icon-btn:hover {
        border-color: var(--ink)
    }

    .icon-btn svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.ic-sun, .burger {
    display: none
}

:root[data-theme="dark"] .ic-sun {
    display: block
}

:root[data-theme="dark"] .ic-moon {
    display: none
}

.burger .ic-x {
    display: none
}

.burger[aria-expanded="true"] .ic-menu {
    display: none
}

.burger[aria-expanded="true"] .ic-x {
    display: block
}

.hero {
    padding-block: clamp(40px,6vw,84px) clamp(48px,6vw,88px);
    overflow: clip
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0,6fr) minmax(0,7fr);
    gap: clamp(32px,5vw,72px);
    align-items: center
}

.hero h1 em {
    font-style: normal;
    color: var(--accent-ink)
}

.hero .lead {
    margin-top: 22px
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px
}

.hero-note {
    margin-top: 24px;
    font-size: .84rem;
    color: var(--muted)
}

.hero-visual {
    margin-inline-end: calc(-1 * clamp(18px,4vw,40px) - 5vw)
}

.strip {
    border-block: 1px solid var(--rule);
    background: var(--surface)
}

    .strip ul {
        display: flex;
        /*flex-wrap: wrap*/
    }

    .strip a {
        display: flex;
        gap: 8px;
        align-items: baseline;
        padding: 14px 20px;
        font-size: .88rem;
        color: var(--muted);
        white-space: nowrap;
        border-inline-end: 1px solid var(--rule);
        transition: color .2s,background .2s
    }

        .strip a span {
            color: var(--accent-ink);
            font-weight: 700;
            font-size: .75rem
        }

        .strip a:hover {
            color: var(--ink);
            background: var(--sunken)
        }

.split {
    display: grid;
    grid-template-columns: minmax(0,4fr) minmax(0,7fr);
    gap: clamp(32px,5vw,72px);
    align-items: start
}

.split-even {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(32px,5vw,80px);
    align-items: start
}

.facts div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 20px;
    padding-block: 22px;
    border-top: 1px solid var(--rule)
}

    .facts div:last-child {
        border-bottom: 1px solid var(--rule)
    }

.facts dt {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--brand)
}

.facts dd {
    color: var(--muted)
}

    .facts dd b {
        display: block;
        color: var(--ink)
    }

.layers {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-top: 56px;
    border-top: 1px solid var(--accent)
}

.layer {
    position: relative;
    padding: 36px 0 8px;
    padding-inline-end: 28px
}

    .layer::before {
        content: "";
        position: absolute;
        top: -6px;
        inset-inline-start: 0;
        width: 11px;
        height: 11px;
        background: var(--accent);
        transform: rotate(45deg)
    }

    .layer p {
        margin-top: 8px;
        font-size: .9rem;
        line-height: 1.8;
        color: var(--muted)
    }

    .layer ul {
        margin-top: 18px
    }

    .layer li a {
        display: flex;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px dashed var(--rule);
        transition: color .2s,padding .2s
    }

        .layer li a:hover {
            color: var(--accent-ink);
            padding-inline-start: 6px
        }

    .layer li span {
        color: var(--accent-ink);
        font-size: .8rem;
        min-width: 1.9em;
        font-weight: 700
    }

.deep {
    background: var(--deep);
    color: var(--deep-ink)
}

    .deep .lead, .deep p {
        color: var(--deep-muted)
    }

    .deep .eyebrow {
        color: var(--accent)
    }

.rules {
    margin: 28px 0
}

    .rules li, .ticks li {
        position: relative;
        padding: 10px 0;
        padding-inline-start: 28px;
        border-bottom: 1px solid var(--deep-rule)
    }

        .rules li::before, .ticks li::before {
            content: "";
            position: absolute;
            inset-inline-start: 4px;
            top: 1.05em;
            width: 6px;
            height: 11px;
            border: solid var(--accent);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg)
        }

.ticks {
    margin-top: 24px
}

    .ticks li {
        border-bottom: 1px solid var(--rule)
    }

.flow {
    display: grid;
    grid-template-columns: minmax(0,5fr) minmax(0,7fr);
    gap: clamp(24px,4vw,56px);
    align-items: start;
    margin-top: 48px
}

.steps-tabs {
    border-top: 1px solid var(--rule)
}

    .steps-tabs [role="tab"] {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 10px;
        width: 100%;
        text-align: start;
        padding: 18px 12px;
        border: 0;
        border-bottom: 1px solid var(--rule);
        background: none;
        color: var(--muted);
        transition: color .2s
    }

        .steps-tabs [role="tab"] .n {
            font-weight: 800;
            color: var(--accent-ink);
            font-size: 1.3rem;
            line-height: 1.4
        }

        .steps-tabs [role="tab"] b {
            display: block;
            font-size: 1.05rem
        }

        .steps-tabs [role="tab"] small {
            font-size: .85rem
        }

        .steps-tabs [role="tab"][aria-selected="true"] {
            color: var(--ink);
            box-shadow: inset -3px 0 0 var(--accent)
        }

.flow-view [hidden] {
    display: none
}

.compare {
    width: 100%;
    border-collapse: collapse;
    margin-top: 48px
}

    .compare th, .compare td {
        padding: 22px 20px;
        text-align: start;
        vertical-align: top;
        border-top: 1px solid var(--rule)
    }

    .compare thead th {
        border-top: 0;
        font-size: .82rem;
        font-weight: 600;
        color: var(--muted)
    }

    .compare tbody th {
        width: 16%;
        font-weight: 700
    }

    .compare .old {
        color: var(--muted)
    }

    .compare td:last-child {
        background: var(--surface)
    }

.roles [role="tablist"] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 24px
}

.roles [role="tab"] {
    border: 0;
    background: none;
    padding: 10px 0;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px
}

    .roles [role="tab"][aria-selected="true"] {
        color: var(--ink);
        border-color: var(--accent)
    }

.roles [hidden] {
    display: none
}

.arch {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-inline: auto
}

    .arch text {
        font-family: inherit;
        fill: var(--ink);
        font-size: 16px;
        direction: rtl;
        text-anchor: middle
    }

    .arch .sub {
        fill: var(--muted);
        font-size: 12.5px
    }

    .arch rect {
        fill: var(--surface);
        stroke: var(--rule);
        stroke-width: 1.2
    }

    .arch .core {
        fill: var(--brand);
        stroke: none
    }

    .arch .on {
        fill: var(--on-brand)
    }

    .arch .dash {
        stroke-dasharray: 5 4;
        fill: none;
        stroke: var(--accent)
    }

    .arch .ln {
        stroke: var(--accent);
        stroke-width: 1.5;
        fill: none
    }

.faq-wrap {
    display: grid;
    grid-template-columns: minmax(0,4fr) minmax(0,7fr);
    gap: clamp(32px,5vw,72px)
}

.faq details {
    border-top: 1px solid var(--rule)
}

    .faq details:last-child {
        border-bottom: 1px solid var(--rule)
    }

.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    font-weight: 600
}

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

    .faq summary::after {
        content: "+";
        color: var(--accent-ink);
        font-size: 1.5rem;
        line-height: 1;
        transition: transform .25s var(--ease)
    }

.faq details[open] summary::after {
    transform: rotate(45deg)
}

.faq details p {
    padding-bottom: 22px;
    color: var(--muted);
    max-width: 42em
}

.cta {
    background: var(--deep);
    color: var(--deep-ink);
    padding-block: clamp(64px,9vw,112px)
}

    .cta .lead {
        color: var(--deep-muted)
    }

    .cta .eyebrow {
        color: var(--accent)
    }

.cta-grid {
    display: grid;
    grid-template-columns: minmax(0,5fr) minmax(0,6fr);
    gap: clamp(32px,5vw,72px);
    align-items: start
}

.form-card {
    background: var(--surface);
    color: var(--ink);
    padding: clamp(20px,3vw,32px);
    border-radius: 10px;
    border: 1px solid var(--rule)
}

.f-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px
}

.f {
    display: grid;
    gap: 6px;
    align-content: start
}

.f-wide {
    grid-column: 1/-1
}

.f label {
    font-size: .88rem;
    font-weight: 600
}

.f input, .f select, .f textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--bg);
    color: var(--ink);
    font: inherit
}

.f textarea {
    min-height: 110px;
    resize: vertical
}

    .f input:focus, .f select:focus, .f textarea:focus {
        outline: 2px solid var(--accent);
        border-color: transparent
    }

.f .ltr {
    direction: ltr;
    text-align: left
}

.hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.form-errors {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid var(--danger);
    border-radius: var(--r);
    color: var(--danger);
    font-size: .9rem
}

.form-done {
    padding: 24px 0
}

    .form-done h3 {
        color: var(--ok);
        margin-bottom: 8px
    }

.site-footer {
    background: var(--deep);
    color: var(--deep-ink);
    padding-top: 64px
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 48px
}

.foot-brand p {
    margin-top: 18px;
    color: var(--deep-muted);
    font-size: .92rem;
    max-width: 26em
}

.site-footer .brand-text i {
    color: var(--deep-muted)
}

.fh {
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--accent)
}

.site-footer li {
    padding: 3px 0;
    font-size: .92rem;
    color: var(--deep-muted)
}

    .site-footer li a:hover {
        color: var(--deep-ink)
    }

.foot-bar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 22px;
    border-top: 1px solid var(--deep-rule);
    font-size: .85rem;
    color: var(--deep-muted)
}

    .foot-bar ul {
        display: flex;
        gap: 20px
    }

.ph li {
    color: var(--muted)
}

.site-footer .ph li {
    color: var(--deep-muted)
}

.page-head {
    padding-block: clamp(48px,7vw,96px) clamp(32px,5vw,56px);
    border-bottom: 1px solid var(--rule)
}

    .page-head .pull, .fp-hero .pull {
        margin-top: 28px;
        padding-inline-start: 18px;
        border-inline-start: 3px solid var(--accent);
        font-weight: 600;
        font-size: 1.1rem
    }

.fp-hero {
    padding-block: clamp(32px,5vw,64px);
    border-bottom: 1px solid var(--rule)
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 36px
}

.fp-head {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: clamp(20px,4vw,56px);
    align-items: start
}

.fp-num {
    font-size: clamp(4rem,10vw,8rem);
    line-height: 1;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent)
}

.fp-mock {
    padding-block: clamp(40px,6vw,72px);
    background: var(--sunken);
    border-bottom: 1px solid var(--rule)
}

.demo-note {
    margin-top: 16px;
    font-size: .82rem;
    color: var(--muted)
}

.deep .demo-note {
    color: var(--deep-muted)
}

.spec {
    display: grid;
    grid-template-columns: minmax(0,3fr) minmax(0,8fr);
    gap: clamp(20px,4vw,64px);
    padding-block: 36px;
    border-top: 1px solid var(--rule)
}

.wrap > .spec:first-child {
    border-top: 0
}

.spec h2 {
    font-size: 1.25rem;
    align-self: start
}

.spec > h2 {
    position: sticky;
    top: 96px
}

.spec-list {
    columns: 2;
    column-gap: 40px;
    margin-top: 4px
}

    .spec-list li {
        position: relative;
        break-inside: avoid;
        padding: 10px 0;
        padding-inline-start: 20px;
        border-bottom: 1px dashed var(--rule)
    }

        .spec-list li::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            top: 1.2em;
            width: 6px;
            height: 6px;
            background: var(--accent)
        }

.spec .lead {
    margin-top: 0;
    margin-bottom: 12px
}

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

    .two p {
        margin-top: 8px;
        color: var(--muted)
    }

.idx li a {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr);
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    transition: padding .2s
}

    .idx li a:hover {
        padding-inline-start: 8px
    }

.idx .n {
    color: var(--accent-ink);
    font-weight: 800
}

.idx b {
    display: block
}

.idx small {
    color: var(--muted);
    font-size: .88rem
}

.steps-row {
    display: grid;
    grid-template-columns: repeat(var(--n),minmax(0,1fr));
    gap: 24px;
    padding-block: 48px
}

    .steps-row li {
        counter-increment: s;
        padding-top: 16px;
        border-top: 2px solid var(--accent)
    }

        .steps-row li::before {
            content: counter(s,persian);
            display: block;
            color: var(--accent-ink);
            font-weight: 800;
            font-size: 1.4rem
        }

.steps-row {
    counter-reset: s
}

    .steps-row b {
        display: block;
        margin-bottom: 4px
    }

    .steps-row span {
        color: var(--muted);
        font-size: .92rem;
        line-height: 1.8;
        display: block
    }

.pager {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-block: 40px;
    border-top: 1px solid var(--rule)
}

    .pager a {
        display: block;
        padding: 12px 0
    }

    .pager small {
        display: block;
        color: var(--muted)
    }

    .pager b {
        font-size: 1.1rem
    }

    .pager a:hover b {
        color: var(--accent-ink)
    }

.cta-strip {
    background: var(--sunken);
    border-top: 1px solid var(--rule);
    padding-block: clamp(48px,7vw,88px)
}

    .cta-strip .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 32px;
        flex-wrap: wrap
    }

    .cta-strip p {
        color: var(--muted);
        margin-top: 8px
    }

.app {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.65;
    box-shadow: 0 30px 60px -44px rgba(16,45,40,.5);
    min-width: 0
}

.app-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--sunken);
    border-bottom: 1px solid var(--rule);
    font-weight: 600
}

.app-tag {
    margin-inline-start: auto;
    font-size: .68rem;
    font-weight: 500;
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    padding: 0 8px;
    border-radius: 99px;
    white-space: nowrap
}

.app-body {
    padding: 14px;
    display: grid;
    gap: 12px
}

.app-foot, .note {
    font-size: .74rem;
    color: var(--muted);
    padding: 8px 14px
}

.note {
    padding: 0
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

    .dash-head b {
        display: block;
        font-size: .95rem
    }

    .dash-head span {
        color: var(--muted);
        font-size: .74rem
    }

.quick {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

    .quick span {
        border: 1px solid var(--rule);
        border-radius: 99px;
        padding: 0 10px;
        font-size: .7rem
    }

        .quick span:first-child {
            background: var(--brand);
            color: var(--on-brand);
            border-color: transparent
        }

.kpis {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px
}

.kpi {
    border: 1px solid var(--rule);
    border-radius: var(--r);
    padding: 8px 12px
}

    .kpi b {
        display: block;
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: 800
    }

    .kpi span {
        color: var(--muted);
        font-size: .72rem
    }

.cols {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px
}

.panel {
    border: 1px solid var(--rule);
    border-radius: var(--r);
    padding: 12px;
    min-width: 0
}

    .panel h4 {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        font-size: .78rem;
        font-weight: 600;
        color: var(--muted);
        margin-bottom: 8px
    }

        .panel h4 span {
            font-weight: 400
        }

.bars li {
    display: grid;
    grid-template-columns: 62px 1fr 38px;
    gap: 8px;
    align-items: center;
    padding: 3px 0
}

.bars em {
    font-style: normal;
    text-align: end;
    color: var(--muted)
}

.bar-track {
    display: block;
    height: 6px;
    background: var(--sunken);
    border-radius: 3px;
    overflow: hidden
}

    .bar-track i {
        display: block;
        height: 100%;
        width: var(--w);
        background: var(--brand);
        transition: width 1.1s var(--ease)
    }

    .bar-track.warn i {
        background: var(--accent)
    }

html.js .reveal .bar-track i {
    width: 0
}

html.js .reveal.in .bar-track i {
    width: var(--w)
}

.alerts li {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--rule)
}

    .alerts li:last-child {
        border: 0
    }

.dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: .7em
}

.d-red {
    background: var(--danger)
}

.d-gold {
    background: var(--accent)
}

.d-green {
    background: var(--ok)
}

.rows li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--rule)
}

    .rows li:last-child {
        border: 0
    }

    .rows li span {
        color: var(--muted);
        text-align: end
    }

.rows .prog {
    display: block
}

.tt-wrap {
    display: grid;
    grid-template-columns: 210px minmax(0,1fr)
}

.tt-side {
    padding: 14px;
    border-inline-end: 1px solid var(--rule)
}

.side-h {
    font-weight: 700;
    margin: 4px 0 8px;
    font-size: .78rem
}

.alts {
    display: grid;
    gap: 6px;
    margin-bottom: 16px
}

    .alts button {
        padding: 6px 10px;
        border: 1px solid var(--rule);
        border-radius: var(--r);
        background: transparent;
        text-align: start;
        font-size: .78rem
    }

        .alts button[aria-pressed="true"] {
            background: var(--brand);
        }

        .alts button[aria-pressed="true"] {
            background: var(--brand);
            color: var(--on-brand);
            border-color: transparent
        }

.chk {
    margin-bottom: 16px
}

    .chk li {
        position: relative;
        padding: 3px 0;
        padding-inline-start: 18px;
        font-size: .76rem
    }

        .chk li::before {
            content: "";
            position: absolute;
            inset-inline-start: 2px;
            top: .55em;
            width: 5px;
            height: 9px;
            border: solid var(--ok);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg)
        }

.legend {
    display: grid;
    gap: 4px
}

    .legend span {
        padding: 2px 8px;
        border-radius: 4px;
        font-size: .7rem
    }

.tt-wrap {
    --c1: #D5E4DD;
    --c2: #F0E7D2;
    --c3: #EAE8DF
}

:root[data-theme="dark"] .tt-wrap {
    --c1: #1C4A3F;
    --c2: #4A4026;
    --c3: #1A332D
}

.legend span[data-t="1"], .tt td[data-t="1"] {
    background: var(--c1)
}

.legend span[data-t="2"], .tt td[data-t="2"] {
    background: var(--c2)
}

.legend span[data-t="3"], .tt td[data-t="3"] {
    background: var(--c3)
}

.scroll {
    overflow-x: auto;
    min-width: 0
}

.tt {
    width: 100%;
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 4px;
    table-layout: fixed;
    font-size: .74rem
}

    .tt th {
        padding: 4px;
        text-align: center;
        font-size: .72rem;
        font-weight: 600;
        color: var(--muted)
    }

        .tt th small {
            display: block;
            font-size: .66rem;
            font-weight: 400
        }

    .tt td {
        height: 46px;
        padding: 2px;
        text-align: center;
        vertical-align: middle;
        border-radius: 4px;
        line-height: 1.35
    }

        .tt td.lock {
            outline: 2px solid var(--accent);
            outline-offset: -2px
        }

    .tt.swap td {
        animation: swap .45s var(--ease) both;
        animation-delay: calc((var(--r,0) + var(--c,0)) * 40ms)
    }

@keyframes swap {
    from {
        opacity: 0;
        transform: scale(.88)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.exam-body {
    display: grid;
    grid-template-columns: minmax(0,5fr) minmax(0,6fr);
    gap: 14px;
    padding: 14px;
    background: var(--sunken)
}

.exam-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--rule)
}

    .exam-list li:last-child {
        border: 0
    }

.exam-list small {
    display: block;
    color: var(--muted)
}

.sheet {
    position: relative;
    background: #fff;
    color: #14231F;
    border: 1px solid #E6E5DD;
    border-radius: 4px;
    padding: 26px 22px 56px;
    overflow: hidden;
    box-shadow: 0 12px 30px -20px rgba(0,0,0,.4)
}

.sheet-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #D8D6CC
}

    .sheet-head small {
        display: block;
        font-size: .68rem;
        color: #58655F
    }

.serial {
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap
}

.sheet ol li {
    margin-bottom: 12px;
    font-size: .76rem
}

.sheet em {
    font-style: normal;
    color: #58655F
}

.box {
    height: 46px;
    margin-top: 6px;
    border: 1px solid #CFCDC2;
    border-radius: 3px
}

    .box.short {
        height: 24px
    }

.math {
    display: inline-block;
    unicode-bidi: isolate
}

.barcode {
    height: 26px;
    background: repeating-linear-gradient(90deg,#14231F 0 2px,transparent 2px 4px,#14231F 4px 5px,transparent 5px 8px,#14231F 8px 11px,transparent 11px 12px)
}

.sheet .barcode {
    position: absolute;
    inset-inline: 22px;
    bottom: 14px
}

.c {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #14231F
}

    .c.tl {
        top: 8px;
        inset-inline-start: 8px
    }

    .c.tr {
        top: 8px;
        inset-inline-end: 8px
    }

    .c.bl {
        bottom: 8px;
        inset-inline-start: 8px
    }

    .c.br {
        bottom: 8px;
        inset-inline-end: 8px
    }

.stu {
    grid-template-columns: 200px minmax(0,1fr);
    align-items: start
}

    .stu > div:last-child {
        display: grid;
        gap: 12px;
        align-content: start
    }

    .stu .panel > b {
        display: block
    }

    .stu .panel > small {
        display: block;
        margin-bottom: 8px;
        color: var(--muted)
    }

.avatar {
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 700
}

.heat {
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    gap: 4px
}

    .heat i {
        aspect-ratio: 1.4;
        border-radius: 3px;
        background: var(--ok);
        opacity: .85
    }

        .heat i.l {
            background: var(--accent);
            opacity: 1
        }

        .heat i.e {
            background: var(--muted);
            opacity: .55
        }

        .heat i.u {
            background: var(--danger);
            opacity: 1
        }

.app-body.cols {
    grid-template-columns: minmax(0,3fr) minmax(0,2fr)
}

.score {
    width: 100%;
    border-collapse: collapse;
    font-size: .76rem
}

    .score th, .score td {
        padding: 6px 8px;
        text-align: center;
        white-space: nowrap;
        border-bottom: 1px solid var(--rule)
    }

    .score thead th {
        font-weight: 600;
        color: var(--muted)
    }

    .score tbody th {
        text-align: start;
        font-weight: 600
    }

    .score .top td:nth-last-child(2) {
        font-weight: 700
    }

.medal {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #102D28;
    font-weight: 700
}

.room {
    display: grid;
    grid-template-columns: minmax(0,1fr) 190px;
    gap: 12px;
    padding: 14px
}

    .room > div:first-child {
        display: grid;
        gap: 10px;
        min-width: 0
    }

.board {
    position: relative;
    padding: 8px;
    background: #fff;
    color: #14231F;
    border: 1px solid var(--rule);
    border-radius: var(--r)
}

    .board svg {
        display: block;
        width: 100%;
        height: auto
    }

    .board .ax {
        stroke: #B7B5AA;
        fill: none
    }

    .board .cv {
        stroke: #193D35;
        stroke-width: 2.2;
        fill: none
    }

    .board text {
        fill: #14231F;
        font-size: 13px
    }

.live {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    padding: 0 8px;
    border-radius: 99px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: .66rem
}

.tiles {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px
}

.tile {
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 10px 4px;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--sunken);
    font-size: .68rem;
    line-height: 1.4;
    text-align: center
}

    .tile i {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--rule);
        font-style: normal;
        font-weight: 700
    }

    .tile.on {
        border-color: var(--accent)
    }

.dock {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

    .dock span {
        padding: 2px 10px;
        border: 1px solid var(--rule);
        border-radius: 99px;
        font-size: .7rem
    }

    .dock .end {
        margin-inline-start: auto;
        background: var(--danger);
        border-color: transparent;
        color: #fff
    }

.room-side {
    display: grid;
    gap: 10px;
    align-content: start
}

    .room-side p {
        padding: 3px 0;
        font-size: .72rem
    }

    .room-side b {
        margin-inline-end: 4px
    }

.perm li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--rule);
    font-size: .72rem
}

    .perm li:last-child {
        border: 0
    }

.perm span {
    padding: 0 6px;
    border: 1px solid var(--rule);
    border-radius: 99px;
    font-size: .66rem
}

.perm li span:first-of-type {
    margin-inline-start: auto
}

.perm .no {
    color: var(--muted);
    text-decoration: line-through
}

.drop {
    padding: 22px;
    border: 1.5px dashed var(--rule);
    border-radius: var(--r);
    text-align: center;
    color: var(--muted)
}

.det {
    grid-template-columns: 140px minmax(0,1fr);
    align-items: start
}

.page {
    position: relative;
    display: grid;
    align-content: center;
    gap: 12px;
    aspect-ratio: 1/1.3;
    padding: 20px 12px;
    background: #fff;
    color: #58655F;
    border: 1px solid #D8D6CC;
    border-radius: 3px
}

    .page svg, .crop svg {
        display: block;
        width: 100%;
        height: auto
    }

.crops {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.crop {
    padding: 8px;
    background: #fff;
    color: #58655F;
    border: 1px solid #D8D6CC;
    border-radius: 4px
}

    .crop b {
        display: block;
        margin-bottom: 4px;
        font-size: .7rem;
        color: #14231F
    }

    .crop.big {
        padding: 28px 16px
    }

.grade {
    grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
    align-items: center
}

.quick-grade {
    display: flex;
    gap: 6px;
    margin: 10px 0
}

    .quick-grade span {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid var(--rule);
        border-radius: var(--r);
        font-weight: 700
    }

    .quick-grade .on {
        background: var(--brand);
        color: var(--on-brand);
        border-color: transparent
    }

html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease),transform .7s var(--ease)
}

    html.js .reveal.in {
        opacity: 1;
        transform: none
    }

@view-transition {
    navigation: auto
}

::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .25s
}

@media (max-width:1000px) {
    .burger {
        display: grid
    }

    .bar-cta {
        display: none
    }

    .nav {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        display: none;
        padding: 8px clamp(18px,4vw,40px) 24px;
        background: var(--bg);
        border-bottom: 1px solid var(--rule)
    }

    .site-header[data-open] .nav {
        display: block
    }

    .nav ul {
        flex-direction: column;
        gap: 0
    }

    .nav a {
        padding: 14px 0;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--rule)
    }

        .nav a[aria-current]::after {
            inset-inline: 0;
            bottom: -1px
        }

    .nav-cta {
        display: block;
        margin-top: 16px
    }

    .nav .btn-primary {
        width: 100%;
        padding: 0 22px;
        border-bottom: 0;
        font-size: .97rem;
        color: var(--on-brand)
    }

    .hero-grid, .split, .split-even, .flow, .faq-wrap, .cta-grid {
        grid-template-columns: minmax(0,1fr)
    }

    .hero-visual {
        margin-inline-end: 0
    }

    .strip ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none
    }

    .layers {
        grid-template-columns: minmax(0,1fr);
        margin-inline-start: 6px;
        border-top: 0;
        border-inline-start: 1px solid var(--accent)
    }

    .layer {
        padding: 0 0 32px;
        padding-inline-start: 28px
    }

        .layer::before {
            top: 8px;
            inset-inline-start: -6px
        }

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

    .spec {
        grid-template-columns: minmax(0,1fr);
        gap: 12px
    }

        .spec > h2 {
            position: static
        }

    .fp-head {
        grid-template-columns: minmax(0,1fr)
    }

    .fp-num {
        font-size: 4rem
    }

    .tt-wrap {
        grid-template-columns: minmax(0,1fr)
    }

    .tt-side {
        border-inline-end: 0;
        border-bottom: 1px solid var(--rule)
    }

    .alts {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media (max-width:760px) {
    .kpis {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .cols, .app-body.cols, .exam-body, .stu, .room, .det, .grade, .crops, .f-grid, .two, .steps-row, .foot-grid {
        grid-template-columns: minmax(0,1fr)
    }

    .spec-list {
        columns: 1
    }

    .facts div {
        grid-template-columns: 76px 1fr
    }

    .tiles {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .det .page {
        max-width: 160px
    }

    .pager {
        flex-direction: column
    }

    .cta-strip .btn {
        width: 100%
    }

    .compare thead {
        display: none
    }

    .compare, .compare tbody, .compare tr, .compare th, .compare td {
        display: block;
        width: 100%
    }

        .compare tr {
            padding: 18px 0;
            border-top: 1px solid var(--rule)
        }

        .compare th, .compare td {
            padding: 6px 0;
            border: 0
        }

        .compare tbody th {
            width: 100%
        }

        .compare td::before {
            content: attr(data-l);
            display: block;
            font-size: .74rem;
            font-weight: 700;
            color: var(--accent-ink)
        }

        .compare td:last-child {
            background: none
        }
}

/*@media (prefers-reduced-motion:reduce) {
    @view-transition {
        navigation: none
    }

    html {
        scroll-behavior: auto
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    html.js .reveal {
        opacity: 1;
        transform: none
    }

    .hero h1 em {
        background-size: 100% 3px
    }
}*/

.rows .on {
    color: var(--ok)
}

.rows .off {
    color: var(--danger)
}

.sheet {
    padding-bottom: 22px
}

    .sheet .sheet-head .barcode {
        position: relative;
        inset: auto;
        width: 130px;
        height: 34px;
        flex: none;
        align-self: center
    }



html.js .facts div,
html.js .compare tbody tr,
html.js .reveal .rules li,
html.js .reveal .ticks li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s var(--ease),transform .6s var(--ease);
    transition-delay: calc(var(--d,0) * 80ms)
}

html.js .facts.in div,
html.js .compare.in tbody tr,
html.js .reveal.in .rules li,
html.js .reveal.in .ticks li {
    opacity: 1;
    transform: none
}

:is(.facts div,.compare tbody tr,.rules li,.ticks li):nth-child(2) {
    --d: 1
}

:is(.facts div,.compare tbody tr,.rules li,.ticks li):nth-child(3) {
    --d: 2
}

:is(.facts div,.compare tbody tr,.rules li,.ticks li):nth-child(4) {
    --d: 3
}

:is(.facts div,.compare tbody tr,.rules li,.ticks li):nth-child(5) {
    --d: 4
}

:is(.facts div,.compare tbody tr,.rules li,.ticks li):nth-child(6) {
    --d: 5
}

@media (min-width:1001px) {
    html.js .layers {
        border-top-color: transparent
    }

        html.js .layers::before {
            content: "";
            position: absolute;
            top: 0;
            inset-inline: 0;
            height: 1px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 1.4s var(--ease)
        }

        html.js .layers:has(.layer.in)::before {
            transform: scaleX(1)
        }
}

html.js .layer.reveal::before {
    transform: rotate(45deg) scale(0);
    transition: transform .5s var(--ease)
}

html.js .layer.reveal.in::before {
    transform: rotate(45deg) scale(1)
}

.layer:nth-child(1) {
    transition-delay: .1s
}

.layer:nth-child(2) {
    transition-delay: .3s
}

.layer:nth-child(3) {
    transition-delay: .5s
}

.layer:nth-child(4) {
    transition-delay: .7s
}

.layer:nth-child(1)::before {
    transition-delay: .3s
}

.layer:nth-child(2)::before {
    transition-delay: .5s
}

.layer:nth-child(3)::before {
    transition-delay: .7s
}

.layer:nth-child(4)::before {
    transition-delay: .9s
}

.hero h1 em {
    padding-bottom: .08em;
    background: linear-gradient(var(--accent),var(--accent)) no-repeat right bottom / 0 3px;
    animation: em-line 1.2s .5s var(--ease) forwards
}

@keyframes em-line {
    to {
        background-size: 100% 3px
    }
}

.strip a {
    position: relative
}

    .strip a::after {
        content: "";
        position: absolute;
        inset-inline: 20px;
        bottom: 0;
        height: 2px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .3s var(--ease)
    }

    .strip a:hover::after {
        transform: scaleX(1)
    }

    .strip a span {
        display: inline-block;
        transition: transform .25s var(--ease)
    }

    .strip a:hover span {
        transform: translateY(-3px)
    }

.faq details {
    interpolate-size: allow-keywords
}

    .faq details::details-content {
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition: block-size .35s var(--ease),opacity .35s,content-visibility .35s allow-discrete
    }

    .faq details[open]::details-content {
        block-size: auto;
        opacity: 1
    }

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.roles [role="tabpanel"]:not([hidden]),
.flow-view > :not([hidden]) {
    animation: panel-in .4s var(--ease)
}

.site-header {
    transition: box-shadow .3s
}

    .site-header .bar {
        transition: min-height .3s var(--ease)
    }

    .site-header[data-scrolled] {
        box-shadow: 0 10px 30px -20px rgba(16,45,40,.45)
    }

        .site-header[data-scrolled] .bar {
            min-height: 58px
        }

    .site-header::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: -1px;
        height: 2px;
        background: var(--accent);
        transform: scaleX(var(--sp,0));
        transform-origin: right
    }

@media (hover:hover) and (pointer:fine) {
    .hero-visual {
        transform: translate(calc(var(--px,0) * 10px),calc(var(--py,0) * 8px));
        transition: transform .3s ease-out
    }
}

.barcode {
    overflow: hidden
}

    .barcode::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: 3px;
        background: var(--danger);
        box-shadow: 0 0 8px var(--danger);
        animation: scan 2.4s ease-in-out infinite alternate
    }

@keyframes scan {
    to {
        inset-inline-start: calc(100% - 3px)
    }
}

@keyframes crop-in {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.crops .crop {
    animation: crop-in .5s var(--ease) both
}

    .crops .crop:nth-child(2) {
        animation-delay: .12s
    }

    .crops .crop:nth-child(3) {
        animation-delay: .24s
    }

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb,var(--danger) 55%,transparent)
    }

    70%, 100% {
        box-shadow: 0 0 0 7px transparent
    }
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)
    }

    70%, 100% {
        box-shadow: 0 0 0 7px transparent
    }
}

.d-red {
    animation: pulse-red 2s infinite
}

.d-gold {
    animation: pulse-gold 2.6s infinite
}

@keyframes alert-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
        background: color-mix(in srgb,var(--accent) 18%,transparent)
    }

    to {
        opacity: 1;
        transform: none;
        background: transparent
    }
}

.alerts li.fresh {
    animation: alert-in .6s var(--ease)
}


@keyframes float {
    50% {
        translate: 0 -5px
    }
}

.hero-visual .kpi {
    animation: float 6s ease-in-out infinite
}

    .hero-visual .kpi:nth-child(2) {
        animation-duration: 7s;
        animation-delay: -1.5s
    }

    .hero-visual .kpi:nth-child(3) {
        animation-duration: 8s;
        animation-delay: -3s
    }

    .hero-visual .kpi:nth-child(4) {
        animation-duration: 6.5s;
        animation-delay: -4.5s
    }

.hero-visual .panel {
    animation: float 9s ease-in-out infinite
}

    .hero-visual .panel:nth-child(2) {
        animation-duration: 11s;
        animation-delay: -4s
    }

.hero h1 .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(.5em);
    animation: word-in .7s var(--ease) forwards;
    animation-delay: calc(var(--i) * 70ms + 100ms)
}

@keyframes word-in {
    to {
        opacity: 1;
        transform: none
    }
}

.btn-primary {
    translate: calc(var(--mx,0) * 1px) calc(var(--my,0) * 1px);
    transition: background .2s,border-color .2s,transform .2s var(--ease),translate .25s var(--ease)
}

.hero-cta .btn-primary {
    position: relative;
    overflow: hidden
}

    .hero-cta .btn-primary::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 40%;
        background: linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
        transform: skewX(-20deg);
        translate: -150% 0;
        animation: shine 5s 2s infinite
    }

@keyframes shine {
    0% {
        translate: -150% 0
    }

    18%, 100% {
        translate: 350% 0
    }
}

.hero-cta .btn-primary.arr::after {
    animation: nudge 2.8s ease-in-out infinite
}

@keyframes nudge {
    0%, 55%, 100% {
        translate: 0
    }

    65%, 85% {
        translate: -5px
    }

    75% {
        translate: 0
    }
}

html.js .reveal .eyebrow::before {
    width: 0;
    transition: width .8s .2s var(--ease)
}

html.js .reveal.in .eyebrow::before {
    width: 32px
}

.compare td:last-child {
    position: relative;
    transition: background .3s
}

    .compare td:last-child::after {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: 3px;
        background: var(--accent);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .35s var(--ease)
    }

.compare tbody tr:hover td:last-child {
    background: color-mix(in srgb,var(--accent) 10%,var(--surface))
}

    .compare tbody tr:hover td:last-child::after {
        transform: scaleY(1)
    }

.roles [role="tablist"] {
    position: relative
}

    .roles [role="tablist"]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 2px;
        width: var(--iw,0);
        translate: var(--ix,0) var(--iy,0);
        background: var(--accent);
        pointer-events: none
    }

    .roles [role="tablist"].ready::after {
        transition: translate .4s var(--ease),width .4s var(--ease)
    }

.roles [role="tab"][aria-selected="true"] {
    border-color: transparent
}

@keyframes diamond-spin {
    to {
        rotate: 90deg
    }
}

@keyframes diamond-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 transparent
    }

    50% {
        box-shadow: 0 0 0 7px color-mix(in srgb,var(--accent) 25%,transparent)
    }
}

html.js .layer.reveal.in::before {
    animation: diamond-spin 12s linear 1.5s infinite,diamond-pulse 3.5s ease-in-out 1.5s infinite
}

.deep, .cta {
    position: relative;
    overflow: hidden;
    isolation: isolate
}

    .deep::before, .cta::before {
        content: "";
        position: absolute;
        inset: -20%;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(40% 40% at 20% 30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),radial-gradient(35% 35% at 80% 70%,color-mix(in srgb,var(--ok) 18%,transparent),transparent 70%);
        animation: glow 22s ease-in-out infinite alternate
    }

    .deep::after, .cta::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(280px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%);
        opacity: 0;
        transition: opacity .4s
    }

@media (hover:hover) {
    .deep:hover::after, .cta:hover::after {
        opacity: 1
    }
}

@keyframes glow {
    to {
        transform: translate(6%,-5%) scale(1.15)
    }
}

html.js .sheet .c {
    transform: scale(0);
    transition: transform .4s var(--ease)
}

    html.js .sheet .c.tr {
        transition-delay: .1s
    }

    html.js .sheet .c.bl {
        transition-delay: .2s
    }

    html.js .sheet .c.br {
        transition-delay: .3s
    }

html.js .sheet.vis .c {
    transform: scale(1)
}

html.js .sheet .barcode {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.1s .3s var(--ease)
}

html.js .sheet.vis .barcode {
    clip-path: inset(0)
}

html.js .sheet ol li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s var(--ease),transform .5s var(--ease)
}

html.js .sheet.vis ol li {
    opacity: 1;
    transform: none
}

.sheet ol li:nth-child(1) {
    transition-delay: .2s
}

.sheet ol li:nth-child(2) {
    transition-delay: .35s
}

.sheet ol li:nth-child(3) {
    transition-delay: .5s
}

.sheet ol li:nth-child(4) {
    transition-delay: .65s
}

.sheet ol li:nth-child(5) {
    transition-delay: .8s
}

html.js .heat:not(.vis) i {
    opacity: 0
}

@keyframes heat-in {
    from {
        opacity: 0;
        scale: .4
    }
}

.heat.vis i {
    animation: heat-in .45s var(--ease) both;
    animation-delay: calc(var(--k,0) * 30ms)
}

@keyframes medal-bounce {
    0% {
        scale: 0
    }

    60% {
        scale: 1.3
    }

    100% {
        scale: 1
    }
}

@keyframes row-flash {
    from {
        background: color-mix(in srgb,var(--accent) 30%,transparent)
    }
}

.score.vis .medal {
    animation: medal-bounce .6s .4s var(--ease) backwards
}

.score.vis .top > * {
    animation: row-flash 1.4s .5s ease-out backwards
}

html.js .board .cv {
    stroke-dasharray: var(--len,1000);
    stroke-dashoffset: var(--len,1000)
}

html.js .board.vis .cv {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 2s var(--ease)
}

.live {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

    .live::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ff6b6b;
        animation: blink 1.4s ease-in-out infinite
    }

@keyframes blink {
    50% {
        opacity: .25
    }
}

@keyframes speak {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)
    }

    70%, 100% {
        box-shadow: 0 0 0 8px transparent
    }
}

.tile.on i {
    animation: speak 1.6s infinite
}

.perm .no {
    position: relative;
    text-decoration: none
}

    .perm .no::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 50%;
        height: 1px;
        background: currentColor;
        transform-origin: right;
        transition: transform .5s var(--ease)
    }

html.js .perm:not(.vis) .no::after {
    transform: scaleX(0)
}

.f label {
    transition: color .2s
}

.f:focus-within label {
    color: var(--accent-ink)
}

.f input, .f select, .f textarea {
    transition: border-color .2s,box-shadow .3s var(--ease),background .2s
}

    .f input:focus, .f select:focus, .f textarea:focus {
        box-shadow: 0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent)
    }

@keyframes shake {
    20%, 60% {
        translate: -6px 0
    }

    40%, 80% {
        translate: 6px 0
    }
}

.form-errors {
    animation: shake .5s var(--ease)
}

.f [aria-invalid="true"] {
    border-color: var(--danger);
    animation: shake .4s var(--ease)
}

.ck {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -.25em;
    margin-inline-end: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

    .ck circle, .ck path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: draw .7s var(--ease) forwards
    }

    .ck path {
        animation-duration: .45s;
        animation-delay: .55s
    }

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

html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal
}

html.theme-vt::view-transition-old(root) {
    z-index: 1
}

html.theme-vt::view-transition-new(root) {
    z-index: 2
}

.is-off, .is-off *, .is-off::before, .is-off::after, .is-off *::before, .is-off *::after {
    animation-play-state: paused !important
}

@media (max-width:760px) {
    .hero-visual .kpi, .hero-visual .panel, .deep::before, .cta::before {
        animation: none
    }
}